设为首页收藏本站

开启辅助访问

论坛 › 学院 › 平面设计学院 › 老师为什么这个里面会出现nav 还有为什么会出现a 啊！ ...

发新帖

1 421

电梯直达

跳转到指定楼层

[提问] 老师为什么这个里面会出现nav 还有为什么会出现a 啊！！

章素徐霄华|中级会员 |勤币 170 |学币 0

发表于 2017-11-9 15:14 | 复制链接 | 打印 | 上一主题 | 下一主题

html+css网页前端课程 - 3.5.网页布局实战-Gulp中文网

<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>

举报使用道具

| 回复

共1个回复最后回复于 2017-11-9 16:09

章素徐霄华

勤币 170 学币 0

沙发

发表于 2017-11-9 16:09:06 | 只看该作者

老师我已经知道了看差了

举报使用道具

回复支持反对

发新帖

勤学网 关于我们联系我们

快速回复 返回顶部 返回列表