<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#wraper{
width: 900px;
height: 700px;
margin: 0px auto;
border: 1px solid red;
}
#div1{
float: left;
width: 600px;
height: 675px;
background-color: #008000;
}
#div2{
float: right;
width: 300px;
height: 675px;
background-color:tan;
}
ul{
list-style: none;
}
li{
display: inline;
margin-left: 50px;
margin-top: 15px;
}
a{
text-decoration: none;
font-size: 0.8cm;
}
a:hover{
background-color: yellow
}
p{
margin-left: 10px;
font-size: 1cm;
}
#last{
background-color: yellow;
}
</style>
</head>
<body>
<div id="wraper">
<div id="div1">
<ul>
<li><a href="">新闻</a></li>
<li><a href="">生活</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">小说</a></li>
</ul>
<p></p>
<center><h1 >我们174班</h1></center>
<p> 简介</p>
<article>
Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过10
年。Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程
中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以
浏览为主。
对自网站进行重构有两个方面的原因: 第一,根据W3C标准进行重构后,可以让前端的代码组
织更有序,显著改善网站的性能,还能提高可维护性,对搜索引擎也更友好; 第二,重构后网站能
带来更好的用户体验,用XHTML+CSS重新布局后的页面,文件更小下载速度更快。
</article>
</div>
<div id="div2">
</div>
<div id="last" style="text-align: center;">
<footer style="text-align: center;">174©</footer>
</div>
</div>
</body>
</html>
页面盒子布局
最新推荐文章于 2024-05-16 03:32:48 发布