请指教

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gulp中文网</title>
<style>
*{ padding:0; margin:0;}
ul{ list-style:none;}
body{ font-family:"黑体", "微软雅黑", "宋体";}
/*头部到样式*/
.header{ height:50px; background:rgb(207,70,70);}
.nav{ width:1100px;background:rgb(207,70,70); height:50px; margin:0 auto;}
.header .logo{ color:#eee; font-size:18px; height:50px; line-height:50px; float:left;}
.header a{ text-decoration:none;}
.dtn{ height:50px; line-height:50px;}
.header li{ float:right;}
.dtn a{ display:block; font-size:16px; color:#eee; padding:0 15px;}
.header a:hover{ color:#fff;}
/*广告*/
.danner{ clear:both;height:380px; background:rgb(207,70,70); margin:0 auto; text-align:center;}
.danner .logo{ padding-top:60px; font-size:20px;}
.danner p{ font-size:22px; font-weight:100; color:#fff; padding:10px 0 50px;}
.danner a{ text-decoration:none; color:#eee; font-size:20px;
border:2px #eee solid; padding:10px 20px;}
.danner a:hover{ color:#fff; border:2px #fff solid;}
/*内容*/
.con{ width:1100px; margin:60px auto 40px; overflow:hidden; color:#666;}
.con .box{ float:left; width:510px; padding:0 20px; margin-bottom:40px;}
.box h2{ font-size:34px; font-weight:400; padding-bottom:10px;}
.con .box p{ font-size:18px; color:#555; line-height:1.4em;}
/*版权*/
.footer{ background:#fff;}
.foot{ background:#fff; color:rgb(170,170,170); margin:0 auto;
}
.footer p{ font-size:14px; line-height:1.8em; text-align:center;}
</style>
</head>
<body>
<div class="header">
<div class="nav">
<a href="#" class="logo">Gulp中文网</a>
<ul class="dtn">
<li><a href="#">中文文档</a></li>
<li><a href="#">入门指南</a></li>
<li><a href="#">API</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>
<div class="danner">
<img src="images/gulp.jpg" class="logo"/>
<p>用自动化构建工具增强你的工作流程！</p>
<a href="#">开始使用</a>
</div>
<div class="con">
<div class="box">
<h2>易于使用</h2>
<p>通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。</p>
</div>
<div class="box">
<h2>构建快速</h2>
<p>利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。</p>
</div>
<div class="box">
<h2>插件高质</h2>
<p>Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。</p>
</div>
<div class="box">
<h2>易于学习</h2>
<p>通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。</p>
</div>
</div>
<div class="footer">
<div class="foot">
<p>© Gulp 中文网 2015<br/>
京ICP备11008151号 | 京公网安备11010802014853</p>
</div>
</div>
</body>
</html>

复制代码

潜意式 · 发表于 2016-11-15 18:25:43

完成很不错哦，效果都出来了，赞~

[作业] 请指教

共1个回复最后回复于 2016-11-15 18:25

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 请指教

共1个回复 最后回复于 2016-11-15 18:25

共1个回复最后回复于 2016-11-15 18:25