ホームページ > 記事 > ウェブフロントエンド > このようなスタイルを実装するにはどうすればよいでしょうか? _html/css_WEB-ITnose
このようなスタイルを実装するにはどうすればよいでしょうか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:55:27914ブラウズ
このようなスタイルを実装するにはどうすればよいですか?背景から動的に取り出して、各マス目に
ディスカッションへの返信 (解決策)
css3 と css2 のどちらですか
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 */
transform:rotate(45deg);
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 までご連絡ください。