html部分：
/** * author 阿木木 * date 09/26 10:23 * / <html> <head> <title>首页</title> <link type="text/css" rel="stylesheet" href="css/stylt.css" /> </head> <body> <div class="title"> 粤嵌多元化课程体系，满足不同学员需求 </div> <div class="main"> <ul> <li class="fl"> <div class="boxa"> <div><a href=""><img src="img/embedded.jpg" /></a></div> <div class="desc"><a href="">嵌入式开发</a> </div> </div> <div class="boxb fl mt10"> <div><a href=""><img src="img/vr.jpg" /></a></div> <div class="desc"><a href="">vr/ar</a> </div> </div> <div class="boxb fr mt10"> <div><a href=""><img src="img/cross_e_commerce.jpg" /></a></div> <div class="desc"><a href="">跨境电商</a> </div> </div> <div class="clear"></div> <div class="boxc mt10"> <div><a href=""><img src="img/unity.jpg" /></a></div> <div class="desc"><a href="">Unity游戏开发</a> </div> </div> </li> <li class="fl ml10"> <div class="boxb fl"> <div><a href=""><img src="img/ui.jpg" /></a></div> <div class="desc"><a href="">全栈UI设计</a> </div> </div> <div class="boxb fr"> <div><a href=""><img src="img/python.jpg" /></a></div> <div class="desc"><a href="">Python</a> </div> </div> <div class="clear"></div> <div class="boxc mt10"> <div><a href=""><img src="img/senior_e_commerce.jpg" /></a></div> <div class="desc"><a href="">高级电商</a> </div> </div> <div class="boxa mt10"> <div><a href=""><img src="img/h5.jpg" /></a></div> <div class="desc"><a href="">web前端</a> </div> </div> </li> <li class="fl ml10"> <div class="boxc"> <div><a href=""><img src="img/c.jpg" /></a></div> <div class="desc"><a href="">C/C++</a> </div> </div> <div class="boxa mt10"> <div><a href=""><img src="img/java.jpg" /></a></div> <div class="desc"><a href="">JAVA大数据</a> </div> </div> <div class="boxb fl mt10"> <div><a href=""><img src="img/web_safe.jpg" /></a></div> <div class="desc"><a href="">网络安全+运维</a> </div> </div> <div class="boxb fr mt10"> <div><a href=""><img src="img/sem.jpg" /></a></div> <div class="desc"><a href="">SEM</a> </div> </div> </li> <li class="fr"> <div class="boxb fl"> <div><a href=""><img src="img/big_data.jpg" /></a></div> <div class="desc"><a href="">大数据</a> </div> </div> <div class="boxb fr"> <div><a href=""><img src="img/seo.jpg" /></a></div> <div class="desc"><a href="">SEO</a> </div> </div> <div class="clear"></div> <div class="boxc mt10"> <div><a href=""><img src="img/cloud.jpg" /></a></div> <div class="desc"><a href="">Linux云计算</a> </div> </div> <div class="boxb mt10 fl"> <div><a href=""><img src="img/android.jpg" /></a></div> <div class="desc"><a href="">android</a> </div> </div> <div class="boxb mt10 fr"> <div><a href=""><img src="img/php.jpg" /></a></div> <div class="desc"><a href="">PHP</a> </div> </div> <div class="clear"></div> <div class="boxc mt10"> <div><a href=""><img src="img/marketing.jpg" /></a></div> <div class="desc"><a href="">网络营销</a> </div> </div> </li> </ul> </div> </body> </html>css部分：
*{ margin: 0px; padding: 0px; } body{ } li{ list-style: none; } .fl{ float: left; } .fr{ float: right; } .ml10{ margin-left: 10px; } .title{ width: 100%; height: 125px; text-align: center; line-height: 125px; font-size: 30px; } .main{ width: 1196px; height: 592px; margin: 0px auto; } li{ width: 292px; height: 592px; } .boxa{ width: 292px; height: 292px; background-color: red; position: relative; } .boxb{ width: 141px; height: 141px; background-color: green; position: relative; } .boxc{ width: 292px; height: 141px; background-color: yellow; position: relative; } .clear { clear: both; } .mt10{ margin-top: 10px; } a{ color: aliceblue; text-decoration: none; font-size: 14px; } .desc{ position: absolute; left: 10px; bottom: 12px; }运行结果：
