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

最新推荐文章于 2024-04-04 12:04:33 发布

12小白

最新推荐文章于 2024-04-04 12:04:33 发布

阅读量810

点赞数 1

分类专栏： html+css+js 文章标签：网页设计 css html

本文链接：https://blog.csdn.net/u012270113/article/details/41206571

版权

html+css+js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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;
}