このようなスタイルを実装するにはどうすればよいでしょうか? _html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

このようなスタイルを実装するにはどうすればよいでしょうか? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:55 AM

このようなスタイルを実装するにはどうすればよいですか?背景から動的に取り出して、各マス目に

ディスカッションへの返信 (解決策)

css3 と css2 のどちらですか

あなたの意見をチェックしてください: CSS3 変換

transform:rotate(90deg) );

-ms-transform:rotate(90deg); /* Internet Explorer */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg) ); /* Safari と Chrome */
-o-transform:rotate(9deg); /* Opera */

css3 は 45 度回転

transform:rotate(45deg);

css3 45 度回転

transform:rotate(45deg);

回転後はぴったりと並べず、空白を空けてください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ background:#62aff3; width:400px; height:400px; padding:30px;}div ul{list-style:none;margin:0;padding:0}div ul li{float:left; width:100px; height:100px; border:2px solid #7bcbff; margin:0 22px; border-radius:10px; 	transform: rotate(45deg);	-ms-transform: rotate(45deg);		/* IE 9 */	-webkit-transform: rotate(45deg);	/* Safari and Chrome */	-o-transform: rotate(45deg);		/* Opera */	-moz-transform: rotate(45deg);		/* Firefox */	background:#004594;	background-image:-webkit-linear-gradient(to top right, #004594, #0186fc,#025cb2);	background-image:linear-gradient(to bottom right, #004594, #0186fc,#025cb2);}div ul li:nth-last-child(4n){margin-left:97px;}</style></head><body><div>	<ul>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    </ul></div></body></html>

Css3 は 45 度回転します

transform:rotate(45deg);

回転後はぴったりと並べずに隙間を作ります

余白を使用してスペースを調整しますか?

css3 ですか?

-ms-transform:rotate (90deg); /* Internet Explorer */
-moz-transform:rotate(90deg); /* Firefox */

-webkit-transform:rotate(90deg); Chrome */
-o-transform:rotate(9deg); /* Opera */

私の行は上から下です、左の行が 2、次に右の行が 1、次に左の行が 2 になります。このサイクルを実行するにはどうすればよいでしょうか。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ background:#62aff3; width:400px; height:400px; padding:30px;}div ul{list-style:none;margin:0;padding:0}div ul li{float:left; width:100px; height:100px; border:2px solid #7bcbff; margin:0 22px; border-radius:10px; 	transform: rotate(45deg);	-ms-transform: rotate(45deg);		/* IE 9 */	-webkit-transform: rotate(45deg);	/* Safari and Chrome */	-o-transform: rotate(45deg);		/* Opera */	-moz-transform: rotate(45deg);		/* Firefox */	background:#004594;	background-image:-webkit-linear-gradient(to top right, #004594, #0186fc,#025cb2);	background-image:linear-gradient(to bottom right, #004594, #0186fc,#025cb2);}div ul li:nth-last-child(4n){margin-left:97px;}</style></head><body><div>	<ul>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    </ul></div></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ background:#62aff3; width:300px; height:400px; padding:30px;}div ul{list-style:none;margin:0;padding:0}div ul li{float:left; width:100px; height:100px; border:2px solid #7bcbff; margin:0 22px; border-radius:10px; 	transform: rotate(45deg);	-ms-transform: rotate(45deg);		/* IE 9 */	-webkit-transform: rotate(45deg);	/* Safari and Chrome */	-o-transform: rotate(45deg);		/* Opera */	-moz-transform: rotate(45deg);		/* Firefox */	background:#004594;	background-image:-webkit-linear-gradient(to top right, #004594, #0186fc,#025cb2);	background-image:linear-gradient(to bottom right, #004594, #0186fc,#025cb2);}div ul li:nth-child(3n){margin-left:97px;}</style></head><body><div>	<ul>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    </ul></div></body></html>

マスター、ごめんなさい、私が上から下まで私の意味を理解していませんでした。左から左へ、次のように右に進みます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ background:#62aff3; width:300px; height:400px; padding:30px;}div ul{list-style:none;margin:0;padding:0}div ul li{float:left; width:100px; height:100px; border:2px solid #7bcbff; margin:0 22px; border-radius:10px; 	transform: rotate(45deg);	-ms-transform: rotate(45deg);		/* IE 9 */	-webkit-transform: rotate(45deg);	/* Safari and Chrome */	-o-transform: rotate(45deg);		/* Opera */	-moz-transform: rotate(45deg);		/* Firefox */	background:#004594;	background-image:-webkit-linear-gradient(to top right, #004594, #0186fc,#025cb2);	background-image:linear-gradient(to bottom right, #004594, #0186fc,#025cb2);}div ul li:nth-child(3n){margin-left:97px;}</style></head><body><div>	<ul>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    </ul></div></body></html>

マスター、ごめんなさい、理解できませんでした。つまり、上から下に、左から右に次のように進むという意味です:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ background:#62aff3; width:300px; height:400px; padding:30px;}div ul{list-style:none;margin:0;padding:0}div ul li{float:left; width:100px; height:100px; border:2px solid #7bcbff; margin:0 22px; border-radius:10px; 	transform: rotate(45deg);	-ms-transform: rotate(45deg);		/* IE 9 */	-webkit-transform: rotate(45deg);	/* Safari and Chrome */	-o-transform: rotate(45deg);		/* Opera */	-moz-transform: rotate(45deg);		/* Firefox */	background:#004594;	background-image:-webkit-linear-gradient(to top right, #004594, #0186fc,#025cb2);	background-image:linear-gradient(to bottom right, #004594, #0186fc,#025cb2);}div ul li:nth-child(3n){margin-left:97px;}</style></head><body><div>	<ul>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    </ul></div></body></html>

負け、スコアが非常に低い。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ background:#62aff3; width:800px; height:400px; padding:30px;}div ul{list-style:none;margin:0;padding:0}div ul li{float:left; width:100px; height:100px; border:2px solid #7bcbff; margin:0 22px; border-radius:10px; 	transform: rotate(45deg);	-ms-transform: rotate(45deg);		/* IE 9 */	-webkit-transform: rotate(45deg);	/* Safari and Chrome */	-o-transform: rotate(45deg);		/* Opera */	-moz-transform: rotate(45deg);		/* Firefox */	background:#004594;	background-image:-webkit-linear-gradient(to top right, #004594, #0186fc,#025cb2);	background-image:linear-gradient(to bottom right, #004594, #0186fc,#025cb2);	margin-left: -45px;	}div ul li:nth-child(1){margin-left:0px;}div ul li:nth-child(3n-1){ margin-left:-125px;margin-top:150px;}div ul li:nth-child(3n){margin-left: -45px;margin-top: 74px; }</style></head><body><div>	<ul>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    </ul></div></body></html>

マスター、ごめんなさい、私の意味が理解できませんでした。次のように、上から下、左から右に進みます:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ background:#62aff3; width:300px; height:400px; padding:30px;}div ul{list-style:none;margin:0;padding:0}div ul li{float:left; width:100px; height:100px; border:2px solid #7bcbff; margin:0 22px; border-radius:10px; 	transform: rotate(45deg);	-ms-transform: rotate(45deg);		/* IE 9 */	-webkit-transform: rotate(45deg);	/* Safari and Chrome */	-o-transform: rotate(45deg);		/* Opera */	-moz-transform: rotate(45deg);		/* Firefox */	background:#004594;	background-image:-webkit-linear-gradient(to top right, #004594, #0186fc,#025cb2);	background-image:linear-gradient(to bottom right, #004594, #0186fc,#025cb2);}div ul li:nth-child(3n){margin-left:97px;}</style></head><body><div>	<ul>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    </ul></div></body></html>

負け、スコアが非常に低い。。。
損じゃないよ、全部あげるよ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ background:#62aff3; width:800px; height:400px; padding:30px;}div ul{list-style:none;margin:0;padding:0}div ul li{float:left; width:100px; height:100px; border:2px solid #7bcbff; margin:0 22px; border-radius:10px; 	transform: rotate(45deg);	-ms-transform: rotate(45deg);		/* IE 9 */	-webkit-transform: rotate(45deg);	/* Safari and Chrome */	-o-transform: rotate(45deg);		/* Opera */	-moz-transform: rotate(45deg);		/* Firefox */	background:#004594;	background-image:-webkit-linear-gradient(to top right, #004594, #0186fc,#025cb2);	background-image:linear-gradient(to bottom right, #004594, #0186fc,#025cb2);	margin-left: -45px;	}div ul li:nth-child(1){margin-left:0px;}div ul li:nth-child(3n-1){ margin-left:-125px;margin-top:150px;}div ul li:nth-child(3n){margin-left: -45px;margin-top: 74px; }</style></head><body><div>	<ul>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    	<li></li>    </ul></div></body></html>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLタグとHTML属性の違いは何ですか？May 14, 2025 am 12:01 AM

htmltagsdeTheStructureOfawebpage、whiLeattributesdddddddddtetails.1）tagslike、andoutlineThecontentのsplacement.2）属性、クラス、およびスチリーンハンシテアグビーズイメージソース、スタイリング、および改善、および改善の想像力。

HTMLの未来：進化とトレンドMay 13, 2025 am 12:01 AM

HTMLの未来は、よりセマンティック、機能的、モジュール式方向に発展します。 1）セマンティック化により、タグがコンテンツをより明確に説明し、SEOとバリアのないアクセスを改善します。 2）機能化は、ユーザーのニーズを満たすために新しい要素と属性を導入します。 3）モジュール性は、コンポーネントの開発をサポートし、コードの再利用性を改善します。

Web開発にとってHTML属性が重要なのはなぜですか？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか？なぜそれが重要なのですか？May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform