盒子模型的综合应用
CSS提高1
Div ul li 的综合应用很多的网页布局现在都用到这种模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>homework2.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="homework2.css" type="text/css"></link>
</head>
<body>
<div class="div1">
this is the test;
<ul class="faceul">
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
</ul>
</div>
</body>
</html>
CSS 代码：
@CHARSET "UTF-8";
/*将body的样式清空*/
body{
margin:0px;
padding:0px;
}
/*设计div的位置*/
.div1{
width:500px;
height:300px;
border: 1px solid black;
margin-left: 100px;
margin-top: 50px;
}
/* 设计图片区域的位置大小*/
.faceul{
width: 450px;
height: 250px;
border: 1px solid green;
margin-top: 25px;
margin-left: 25px;
list-style-type: none;
}
/*用于控制单个图片区域的大小*/
.faceul li {
width: 75px;
height: 85px;
border: 1px solid red;
float: left; /*左浮动*/
margin-left: 5px;
margin-top: 5px;
}
/*控制文字*/
.faceul li a {
margin-left: 10px;
}
a:LINK{
text-decoration: none;
color: blue;
}
a:HOVER{
text-decoration: underline;
color: red;
}
/*控制图片大小和位置*/
.faceul li img{
width:65px;
height:65px;
margin-left: 5px;
margin-top: 5px;
}
CSS提高2
设计优酷的其中一个模块
Html 代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>homework3.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="homework3.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/mxlyf3.jpg"></br><a href="#">张三</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">李四</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">王五</a></li>
</ul>
</div>
<div>
<span class="span1"><font class="font1">网站达人</font><a href="#">更多牛人</a></span>
<ul class="faceul">
<li ><img src="images/mxlyf3.jpg"></br><a href="#">张三</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">李四</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">王五</a></li>
</ul>
</div>
<div>
<span class="span1"><font class="font1">设计大牛</font><a href="#">更多牛人</a></span>
<ul class="faceul">
<li ><img src="images/mxlyf3.jpg"></br><a href="#">张三</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">李四</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">王五</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS 代码：
@CHARSET "UTF-8";
body{
margin:0 auto;
width:1000px;
border:1px solid red;
padding: 0px;
}
/*定义常用的字体*/
.font1{
font-weight: bold;
font-size: 20px;
margin-left: 5px;
}
/*控制外层的div*/
.div1{
margin-left: 100px;
margin-top: 100px;
width: 500px;
height: 250px;
border: 1px solid black;
}
/*定义span*/
.span1{
/*background: orange;*/
display: block;
}
.span1 a {
margin-left: 330px;
font-weight: bold;
}
.faceul{
margin-left:0px;
width: 500px;
height: 50px;
/* background: green; */
list-style-type: none;
}
.faceul li {
float: left;
width: 65px;
height: 80px;
margin-left: 70px;
/* background-color: pink; */
text-align: center; /*表示放在该元素的其他元素被左右居中*/
}
.faceul li img{
width: 60px;
height: 60px;
margin-left: 2px;
margin-top: 2px
}
/*定义超链接的样式*/
a:LINK {
text-decoration: none;
}