CSS コード
body{ width:960px; margin:0 auto; }.top{ width:960px; height:162px; background-color:yellow;}.top ul{ padding:0px; margin:0px;}.top ul li/*外面包围样式*/{ list-style-type:none; float:left; width:150px; height:150px; margin:10px 0px 0px 33px; padding-left:0px; }.top img{ width:150px; height:150px; }.middleleft{ width:200px; background-color:yellow; float:left;}.middleleft ul{ padding:0px; margin:0px;}.middleleft ul li{ list-style-type:none; margin:15px 0px 0px 33px; }.middleleft img{ width:150px; height:150px;}.middleright{ width:209px; float:left; background-color:yellow;}.middleright ul{ padding:0px; margin:0px;}.middleright li{ list-style-type:none; margin:15px 0px 0px 14px; }.middleright img{ width:150px; height:150px;}.middlemid{ width:551px; height:336px; background-color:green; float:left;}.end1{ width:960px; background-color:yellow; }.end1 ul{ padding:0px; margin:0px;}.end1 ul li/*外面包围样式*/{ list-style-type:none; float:left; width:150px; height:150px; margin:10px 0px 0px 33px; padding-left:0px; }.end1 img{ width:150px; height:150px; }<html><head><link rel="stylesheet"type="text/css" href="css.css"/></head><body><!--上部--><div class="top"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div><div><!--中部--><div class="middleleft"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div><!----><div class="middlemid">middlemid</div><div class="middleright"><ul ><li class="li1"><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li class="li1"><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div></div><!--下部--><div class="end1"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div></body></html>
レンダリング
float のクリア
<html><head><link rel="stylesheet"type="text/css" href="css.css"/></head><body><!--上部--><div class="top"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul> </div><div><!--中部--><div class="middleleft"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div><!----><div class="middlemid">middlemid</div> <div class="middleright"><ul ><li class="li1"><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li class="li1"><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div> <div style="clear:both;"></div></div><!--下部--><div class="end1"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul> <div style="clear:both;"></div></div></body></html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
