<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="jj.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="nav">
<ul>
<li><a href="">第一个</a></li>
<li><a href="">第二个</a></li>
<li><a href="">第三个</a></li>
<li><a href="">第四个</a></li>
<li><a href="">第五个</a></li>
</ul>
</div> </div> </body> </html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单页布局的详细分析</title>
<style type="text/css">
*{margin:0; padding:0; font-family: "新宋体"}
#header{width:100%; height:430px; background: url(images/big9.jpg) center; min-width:1000px}
#nav{width:100%; height:55px;margin:0 auto;}
#nav ul{margin-left:350px;}
#nav ul li{list-style-type:none; float:left; line-height:55px; margin-right:75px;}
#nav ul li a{color:#FFFFFF; text-decoration:none;}
#nav ul li a:hover{color:#339900;}
#info{width:1000px; height:142px; margin:220px auto 0;}
.logo{ width:142px; height:142px; float:left;}
.txt{width:350px; height:84px;float:left; margin:56px 140px 0 36px; color:#FFFFFF;}
.txt h2{ font-size:36px; font-weight:400;}
.txt p{font-size:14px;}
.download{width:194px; height:106px;float:left; margin-top:25px;}
.download a{color:#FFFFFF; text-decoration:none; width:197px; height:47px; background:#FF0000; display: block; text-align:center; line-height:47px; border-radius:8px;}
.download .a1{background:#00FFFF;}
.download .a2{background:#00FF00; margin-top:12px;}
.scan{width:120px; height:100px;float:right; margin-top:28px;}
.scan .sys{width:80px; height:80px; background:#FFFFFF; padding:10px;float:left;}
.scan p{ float:left; color: #000000; font-size:10px; width:12px; height:100px; line-height:20px}
</style></head>
<body>
<!--盒子模型-->
<div id="header">
<!--导航开始-->
<div id="nav">
<ul>
<li><a href="http://www.baidu.com/" target="_blank">百度首页</a></li>
<li><a href="http://www.sina.com.cn/" target="_blank">新浪网页</a></li>
<li><a href="http://news.ifeng.com/mil/" target="_blank">军事网页</a></li>
<li><a href="http://sh.qihoo.com/" target="_blank">新闻网页</a></li>
</ul></div>
<!--导航结束-->
<!--info 开始-->
<div id="info">
<!--logo-->
<div class="logo"><img src="images/s5.jpg" /></div>
<!--logo结束-->
<!--txt-->
<div class="txt">
<h2>全民游戏</h2>
<p>《哈哈哈哈》哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</div>
<!--txt结束-->
<!--download-->
<div class="download">
<a href="" class="a1">IOS下载</a>
<a href="" class="a2">Android下载</a>
</div>
<!--scan-->
<div class="scan">
<div class="sys">
<img src="images/s6.jpg" />
</div>
<p>看到小鸡了</p>
</div></div><!--info 结束-->
</div></body></html>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
