- 网页排版首次练习，记录学习的点点滴滴
- 主要使用了浮动，盒子模型，无序列表来实现对网页的排版
- 网页排版的方式：1.使用浮动来进行网页排版 2.使用表格来进行网页排版 3.使用定位来进行网页排版 使用浮动来进行网页排版是最常用的
- 盒子模型：内容区，内边距，边框，外边距
- 清除自带样式：margin:0px; padding:0px;
- 内联元素改成块元素：display:block; 行内块元素：display:inline-block;
- 居中：margin:0px auto;
- 清除超链接下划线：text-decoration:none;
- 清除无序列表前面的点：lift-style:none;
- 控制鼠标滑动的伪类：link，hover，active
- 行高line-height 字间距letter-spacing 单词间距word-spacing
下面是做简单网页排版时的联系代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.first{
height:60px;
width: 1000px;
background-color: black;
}
.second{
height: 500px;
width: 1000px;
background-color: yellowgreen;
}
.third{
height: 20px;
width: 1000px;
background-color: black;
}
h1{
color: white;
margin-left:20px;
}
.L{
height: 240px;
width: 150px ;
margin-left: 5px;
float: left;
}
.second a{
display: block;
height: 25px;
width: 180px;
list-style: none;
text-decoration: none;
color: black;
margin:0px 5px 5px 5px;
padding-left:5px ;
background-color: blue;
}
.up{
height:240px;
width: 800px;
background-color: orange;
float: right;
}
.picture1{
height: 230px;
width: 490px;
background-color:pink;
float: left;
margin: 5px;
}
.decoration1{
height: 230px;
width: 290px;
background-color: skyblue;
float: right;
margin: 5px;
}
h3{
padding-top: 10px;
padding-bottom: 20px;
}
.span1{
font-size: 11px;
}
.down{
height:240px;
width: 800px;
background-color: orange;
float: right;
margin-top: 10px;
}
.L1{
height: 230px;
width: 390px;
background-color:pink;
float: left;
margin: 5px;
}
.R1{
height: 230px;
width: 390px;
background-color: skyblue;
float: right;
margin: 5px;
}
.picture2{
height: 100px;
width: 150px;
background-color:yellow;
float: left;
}
.decoration2{
height: 100px;
width: 230px;
background-color:cyan;
float: right;
}
.decoration3{
height: 100px;
width: 230px;
background-color:cyan;
float: right;
}
.picture3{
height: 100px;
width: 150px;
background-color:yellow;
float: left;
}
.classA{
display: block;
width: 150px;
color: white;
font-family: "微软雅黑";
margin:0px auto;
}
</style>
</head>
<body>
<div class="first">
<h1>The London News</h1>
</div>
<div class="second">
<div class="L">
<ul>
<li><a href="#">Local News</a></li>
<li><a href="#">National News</a></li>
<li><a href="#">World News</a></li>
<li><a href="#">Politics News</a></li>
<li><a href="#">Science News</a></li>
<li><a href="#">Technology News</a></li>
<li><a href="#">Travel News</a></li>
<li><a href="#">Business News</a></li>
<li><a href="#">Education News</a></li>
<li><a href="#">Entertainment News</a></li>
</ul>
</div>
<div class="r">
<div class="up">
<div class="picture1">
</div>
<div class="decoration1">
<h3>The Big Freeze</h3>
<span class="span1">
The Land Before Time VIII: The Big Freeze is a 2001 direct-to-video animated adventure musical film and the eighth film in The Land Before Time series. <br />
In September 2001, the film was nominated by the Video Premieres Academy for two awards: "Best Animated Video Premiere Movie" and "Best Animated Character Performance" (Mr. Thicknose).
</span>
</div>
</div>
<div class="down">
<div class="L1">
<div class="picture2">
</div>
<div class="decoration2">
<h3>Farms Cleared</h3>
<span class="span2">
</span>
</div>
</div>
<div class="R1">
<div class="picture3">
</div>
<div class="decoration3">
<h3>Interest Rate Rises</h3>
<span class="span3">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="third">
<span class="classA">fixed width page design</span>
</div>
</body>
</html>