论坛

标题: 老师为什么这个里面会出现nav 还有为什么会出现a 啊！！ [打印本页]

作者: 章素徐霄华 时间: 2017-11-9 15:14
标题: 老师为什么这个里面会出现nav 还有为什么会出现a 啊！！
<meta charset="utf-8">
<title>Gulp中文网-网页实例</title>

<style>
*{padding:0; margin:0;}
ul{ list-style:none;}
a{ text-decoration:none;}
body{ font-family:"微软雅黑", "黑体", "宋体";}

.header{ height:50px; width:100%; background:#cf4646;}
.header a{ color:#eee; }
.header a:hover{ color:#fff;}
.hd_con{ width:1100px; height:50px; margin:0 auto;}
.header .logo{ float:left; font-size:18px; line-height:50px;}
.header .nav{ float:right;}
.header .nav li{ float:left;}
.header .nav a{ font-size:14px; line-height:50px; display:block; padding:0 15px;}

.banner{ height:380px; width:100%; background:#cf4646; text-align:center;}
.banner .logo{ margin-top:60px;}
.banner p{ font-size:22px; color:#fff; font-weight:100; margin:10px auto 40px;}
.banner .btn{ font-size:18px; color:#eee; border:1px solid #eee; padding:10px 15px;}
.banner .btn:hover{ color:#fff; border-color:#fff;}

.con{ width:1100px; margin:60px auto 40px; overflow:hidden;}
.con .box{ float:left; padding:0 20px; width:510px;color:#333; margin-bottom:40px;}
.con .box h2{ font-size:30px; font-weight:400; margin-bottom:10px;}
.con .box p{ font-size:18px; color:#555; line-height:1.4em;}

.footer{ width:100%; text-align:center; color:#aaa; font-size:14px; line-height:2.2em; padding:10px 0}

</style>

</head>

<body>
<div class="header">
<div class="hd_con">
<a href="#" class="logo">Gulp中文网</a>
      <ul class="nav">
        <li><a href="#">首页</a></li>
         <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>
      </ul>
</div>
</div>

<div class="banner">
<img src="images/gulp.jpg" class="logo"/>
<p>用自动化构建工具增强你的工作流程！</p>
<a href="#" class="btn">开始使用</a>
</div>

<div class="con">
<div class="box">
<h2>易于使用</h2>
      <p>通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。</p>
</div>

<div class="box">
<h2>构建快速</h2>
      <p>通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。</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">
© Gulp 中文网 2015<br/>

京ICP备11008151号 | 京公网安备11010802014853
</div>

</body>
</html>

作者: 章素徐霄华 时间: 2017-11-9 16:09
老师我已经知道了看差了

欢迎光临论坛 (http://bbs.qinxue.com/)