- <!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>
复制代码
|
|
点赞26 哪些同学觉得很赞!
- lori棒棒糖 觉得很赞
- 昵昵妹 觉得很赞
- 潜意式 觉得很赞
- 龙猫1212 觉得很赞
- 大大大表哥 觉得很赞
- 依仔101 觉得很赞
- 西卡 觉得很赞
- 一品数码 觉得很赞
- 热爱生活热爱家 觉得很赞
- 我叫大帅比 觉得很赞
|
|
|