html+css+js系列之四 css的盒子模型

来源：互联网发布：mac 数据作图软件编辑：程序博客网时间：2024/05/21 20:21

参考：韩顺平轻松搞定网页设计

1. 边框和外边距设置

效果图

tstBox1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>testBox.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" type="text/css" href="./styles.css">-->  <link rel="stylesheet" href="textBox1.css" type="text/css"></link></head>    <body>  <div class = "s1">   <img src="images/0.jpg">  </div></html>

对应的testBox1.css

Body{margin: 0 auto;/*让body在浏览器显示的时候，上下不留空，左右居中自适应*/border: 1px solid ;border-top-color: red;height:1500px;width:1800px;}.s1{border: 1px solid blue;/*每个边框有 3 个方面：宽度、样式，以及颜色*/height:300px;width:400px;margin-left: 100px;margin-top: 10px;}.s1 img{margin-left: 30px;/*以左上角为原点*/margin-top: 10px;}

2.图片布局整齐初级

效果图

box2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>box2.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" type="text/css" href="./box2.css">  </head>    <body>  <div class = "div1">  <ul  class = "faceul">    <li>  <img alt="" src="images/0.jpg"><a href="#">小龙女</a></li>  <li>  <img alt="" src="images/0.jpg"></li>   <li>  <img alt="" src="images/0.jpg"></li>    <li>  <img alt="" src="images/0.jpg"></li>  <li>  <img alt="" src="images/0.jpg"></li>   <li>  <img alt="" src="images/0.jpg"></li>  </ul>    </div>  </body></html>

box2.css

body{margin: 0px;padding:0px;/*浏览器显示左上清空*/}/*div1 用于控制显示的位置*/.div1{width:  2500px;height: 1000px;border:1px solid #b4b4b4;margin-left:100px;margin-top:20px;}/*faceul用于控制显示图片区域的宽度*/.faceul{width:2000px;height: 800px;border:1px solid red;list-style-type: none;margin: 0px;padding:0px;}/*用于控制单个图片区域的大小*/.faceul li{width:300px;height:300px;border:1px solid blue;float:left;margin-left: 15px;margin-top: 15px;}.faceul a{width:400px;height:5px;margin-left: 5px;margin-top: 5px;}a:link{text-decoration: none;color:black;}a:hover{text-decoration: none;color:red;}.faceul img{ width:280px;height:250px;margin-left: 5px;margin-top: 5px;}

3.图片布局整齐中级

效果图：

box3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>box3.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" type="text/css" href="./styles.css">-->  <link rel="stylesheet" href="box3.css" type="text/css"></link></head>    <body>    <div class = "div1">  <div>  <span class = "span1"><font class = "font1">优酷牛人</font> <a href ="#" >更多牛人</a></span>  <ul  class = "faceul">    <li>  <img src="images/0.jpg"><span>MichaeInii</span> <img src="images/1.jpg" ></li>  <li>  <img src="images/0.jpg"><span>小演矿</span> <img src="images/1.jpg"></li>    <li>  <img src="images/0.jpg"><span>道听途说</span> <img src="images/1.jpg" ></li>   </ul>   </div>   <div>   <span  class = "span1"><font class = "font1 ">明星空间</font><a href ="#" >更多空间</a></span>  <ul  class = "faceul">    <li>  <img src="images/0.jpg"><span>爱心月</span> <img src="images/1.jpg" ></li>  <li>  <img src="images/0.jpg"><span>【城堡】</span> <img src="images/1.jpg" ></li>    <li>  <img src="images/0.jpg"><span>卢正雨</span> <img src="images/1.jpg" ></li>   </ul>   </div>   <div>   <span class = "span1"><font class = "font1">优酷公益</font><a href ="#" >更多公益官网</a></span>  <ul  class = "faceul1">    <li>  <img src="images/0.jpg"><span>扶贫基金会</span></li>  <li>  <img src="images/0.jpg"><span>李冰冰LOVE</span> </li>    <li>  <img src="images/0.jpg"><span>生态中国</span> </li>   </ul>  </div>  </div>    </body></html>

对应的box3.css

/*body在各个浏览器显示时，左上角都有不同程度的空隙，若想统一样式，需要定制*/body{margin: 0px auto;/*自动居中*/height: 1400px;width: 1200px;border:1px solid blue;}/*本例中，把所有的显示内容全部先用一个div包起来，方便显示。*/.div1{height: 1380px;width: 1180px;border:1px solid gray;/*设置border边界的宽度样式和颜色 */}/*定义几个常用的字体*/.font1{font-weight: bold;font-size: 20px;margin:2px 0 0 2px;}/*如果需要，可以定义几种超链接的样式，本例中就一切从简了.超链接不需要再定义类选择器，它专属的样式有a:link、a:hover、a:visited*/a:link{text-decoration: none;/*设置链接无下划线*/}.span1{ /*background-color: pink;*/ display: block;}.span1 a{margin-left:950px;}.faceul {list-style-type: none;border:1px solid green;height: 450px;width: 1150px;padding:0px;/*background-color:  green;*/}.faceul li{border:1px solid #b4b4b4;height: 400px;width: 320px;margin-top: 5px;margin-left: 5px;float:left;/*左浮动，本来ul li无序列表显示的图片是纵向的，这样一左浮动，变成横向拓展了*/margin:25px;/*background-color:  red;text-align: center;*/}.faceul image{margin-top: 5px;margin-left: 5px;height: 350px;width: 250px;}/*由于要显示的效果，分了三个div,前两个div区域中，每个li对应的图片下，不仅有文字还有图片，*而最下面的一个div里面每个li中没有图片，和上面链各个div不一样，所以单独拿出来设置样式，*和前面的faceul的主要区别就是边框的高度修改了*/.faceul1 {list-style-type: none;border:1px solid green;height: 300px;width: 1150px;padding:0;/*background-color:  green;*/}.faceul1 li{border:1px solid #b4b4b4;height: 270px;width: 320px;margin-top: 5px;margin-left: 5px;float:left;/*左浮动*/margin:25px;/*background-color:  red;*/text-align: center;/*文字居中显示*/}.faceul1 image{margin-top: 5px;margin-left: 5px;height: 300px;width: 250px;}

0 0