CSS的盒子模型案例

来源：互联网发布：美国编程网站编辑：程序博客网时间：2024/04/29 18:52

CSS的功能可谓强大，作为程序员，不能只在后台默默无闻，也要到前台爽一把，意思意思，这样自己干活从前台

界面到后台数据库就算是全能了。能给自己省了不少力气，艺多不压身嘛，下面来介绍一下CSS里面的盒子模型。

所谓的盒子模型就是指比如Div嵌套Div这里的Div可以理解成为一个盒子，当然了，不一定是Div嵌套Div，还可能

是Div里面嵌套了别的东西，不管嵌套了什么，都可以把他们叫做盒子模型。

下面来演示一个模仿很多大型网站的一个多用户图像显示的效果，看着简单，其实做起来不是那么的容易。

首先上HTML代码，这个容易

<!DOCTYPE html><html>  <head>    <title>box.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">      <link rel="stylesheet" href="../css/box.css" type="text/css"></link>  </head>    <body>    <div class="div1">    <ul class="faceul">    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li>    </ul>    </div>  </body></html>

其实就是一个div里面嵌套了ul然后里面有li和img和href，分别受CSS的控制，大头在CSS这里。

body{margin: 0px;padding: 0px;}/*用于控制显示的位置*/.div1{width: 500px;height:300px;border:1px solid #b4b4b4;margin-left: 400px;margin-top: 100px;}/*用于控制显示图片区域的宽度和高度*/.faceul{width: 450px;height: 280px;border:1px solid red;margin-left: 0px;list-style-type: none;}/*用于控制单个图片区域大小*/.faceul li{widows: 50px;height: 85px;border: 1px solid blue;float: left;margin-left: 5px;margin-top: 5px;}.faceul a{font-size: 12px;margin-left: 25px;}.faceul img{width: 90px;margin-top: 2px;}a:LINK {text-decoration: none;color: red;}a:HOVER {text-decoration: underline;color:blue;}a:VISITED {color: gray;}

分别使用了类选择器，父子选择器。然后还有html选择器，使用的还是挺多的功能，主要是这些东西控制起来不简

单，还是得多练练才行。

效果图

我的感触，设计网页不简单。干啥都不容易啊，不能轻易鄙视前台，谁都不容易，不要对你没有做过的事情下结

论。这是真理！