html5--项目实战-仿360囧图

实例：

代码

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>仿360囧途</title>

 <link rel="stylesheet" type="text/css" href="css/f360.css">

 </head>

 <body>

     <header>

         <nav>

             <h1>360笑话</h1>

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

                 <li><a href="#">娱闻</a></li>

             </ul>

         </nav>

     </header>

     <aside><img src="img/fixed.jpg" alt=""></aside>

     <section class="switch">

         <div class="sw">

             <ul class="swi">

                 <li class="swi1"><a href=""><img src="img/p1.jpg" alt=""></a><p>一招制敌</p></li>

                 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麦霸的不为人知的一面</p></li>

                 <li class="swi1"><a href=""><img src="img/s2.jpg" alt=""></a><p>每个妹子心里都有梦想</p></li>

                 <li class="swi1"><a href=""><img src="img/s3.jpg" alt=""></a><p>妹子把粽子的枣藏哪了</p></li>

                 <li class="swi1"><a href=""><img src="img/s4.jpg" alt=""></a><p>妹子我来喂你吧</p></li>

                 <li class="swi1"><a href=""><img src="img/s5.jpg" alt=""></a><p>让我辨别下是否有凶兆</p></li>

                 <li class="swi1"><a href=""><img src="img/s7.jpg" alt=""></a><p>原来这才是正解</p></li>

                 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麦霸的不为人知的一面</p></li>

                 <li class="swi1"><a href=""><img src="img/s8.jpg" alt=""></a><p>只想安静的吃个饭而已</p></li>

             </ul>

             <ul class="swi">

                 <li class="swi1"><a href=""><img src="img/p21.jpg" alt=""></a><p>一招制敌</p></li>

                 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麦霸的不为人知的一面</p></li>

                 <li class="swi1"><a href=""><img src="img/s2.jpg" alt=""></a><p>每个妹子心里都有梦想</p></li>

                 <li class="swi1"><a href=""><img src="img/s3.jpg" alt=""></a><p>妹子把粽子的枣藏哪了</p></li>

                 <li class="swi1"><a href=""><img src="img/s4.jpg" alt=""></a><p>妹子我来喂你吧</p></li>

                 <li class="swi1"><a href=""><img src="img/s5.jpg" alt=""></a><p>让我辨别下是否有凶兆</p></li>

                 <li class="swi1"><a href=""><img src="img/s7.jpg" alt=""></a><p>原来这才是正解</p></li>

                 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麦霸的不为人知的一面</p></li>

                 <li class="swi1"><a href=""><img src="img/s8.jpg" alt=""></a><p>只想安静的吃个饭而已</p></li>

             </ul>

             <ul class="swi">

                 <li class="swi1"><a href=""><img src="img/p31.jpg" alt=""></a><p>一招制敌</p></li>

                 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麦霸的不为人知的一面</p></li>

                 <li class="swi1"><a href=""><img src="img/s2.jpg" alt=""></a><p>每个妹子心里都有梦想</p></li>

                 <li class="swi1"><a href=""><img src="img/s3.jpg" alt=""></a><p>妹子把粽子的枣藏哪了</p></li>

                 <li class="swi1"><a href=""><img src="img/s4.jpg" alt=""></a><p>妹子我来喂你吧</p></li>

                 <li class="swi1"><a href=""><img src="img/s5.jpg" alt=""></a><p>让我辨别下是否有凶兆</p></li>

                 <li class="swi1"><a href=""><img src="img/s7.jpg" alt=""></a><p>原来这才是正解</p></li>

                 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麦霸的不为人知的一面</p></li>

                 <li class="swi1"><a href=""><img src="img/s8.jpg" alt=""></a><p>只想安静的吃个饭而已</p></li>

             </ul>

             <ul class="swi">

                 <li class="swi1"><a href=""><img src="img/p1.jpg" alt=""></a><p>一招制敌</p></li>

                 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麦霸的不为人知的一面</p></li>

                 <li class="swi1"><a href=""><img src="img/s2.jpg" alt=""></a><p>每个妹子心里都有梦想</p></li>

                 <li class="swi1"><a href=""><img src="img/s3.jpg" alt=""></a><p>妹子把粽子的枣藏哪了</p></li>

                 <li class="swi1"><a href=""><img src="img/s4.jpg" alt=""></a><p>妹子我来喂你吧</p></li>

                 <li class="swi1"><a href=""><img src="img/s5.jpg" alt=""></a><p>让我辨别下是否有凶兆</p></li>

                 <li class="swi1"><a href=""><img src="img/s7.jpg" alt=""></a><p>原来这才是正解</p></li>

                 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麦霸的不为人知的一面</p></li>

                 <li class="swi1"><a href=""><img src="img/s8.jpg" alt=""></a><p>只想安静的吃个饭而已</p></li>

             </ul>

         </div>

     </section>

     <section class="mid">

         <div class="midnav">

             <a href="" class="all">全部</a>

             <a href="">推荐</a>

             <a href="">热门</a>

             <a href="">内涵</a>

         </div>

         <div class="more">

             <a href="">点击加载更多图片</a>

         </div>

     </section>

     <div class="mid">

         <div class="mid-nav">

             <a href="" class="all" style="color: orange">全部</a>

             <a href="">推荐</a>

             <a href="">热门</a>

             <a href="">内涵</a>

         </div>

         <div id="main">

             <ul class="mimg ">

             <li>

                 <a href="">

                     <img src="img/t01e9dcc801f3b3c6ec.jpg" alt="妹子你回头，跟你说点事">

                     <p>妹子你回头，跟你说点事</p>

                 </a>

             </li>

             </li>

              <li>

                 <a href="">

                     <img src="img/t01ad56ca632896bdcb.jpg" alt="这样吃会消化不良的">

                     <p>这样吃会消化不良的</p>

                 </a>

              </li>

             <li>

                 <a href="">

                     <img src="img/t0154db49ae752416fa.jpg" alt="真是个不拘小节的妹子">

                     <p>真是个不拘小节的妹子</p>

                 </a>

             </li>

             <li>

                 <a href="">

                     <img src="img/t010906de779e161557.jpg" alt="羡慕那只猪">

                     <p>羡慕那只猪</p>

                 </a>

             </li>

             <li>

                 <a href="d">

                     <img src="img/t013835a8b868e1a8a1.jpg" alt="妹子，你手放哪儿了？">

                     <p>妹子，你手放哪儿了？</p>

                 </a>

             </li>

             <li>

                 <a href="">

                     <img src="img/t019fecc6bf3b299f3f.jpg" alt="谁能把笔拿开！">

                     <p>谁能把笔拿开！</p>

                 </a>

             </li>

             <li>

                 <a href="">

                     <img src="img/t01bbb9d4b9730cb927.jpg" alt="这叫痛并快乐着">

                     <p>这叫痛并快乐着</p>

                 </a>

             </li>

             <li>

                 <a href="">

                     <img src="img/t01878bf50603df8cf9.jpg" alt="我这手法对吗？">

                     <p>我这手法对吗？</p>

                 </a>

             </li>

              <li>

                 <a href="">

                     <img src="img/t017090ab205397ae73.jpg" alt="今天这卧铺买对了">

                     <p>今天这卧铺买对了</p>

                 </a>

             </li>

              <li>

                 <a href="">

                     <img src="img/t01665e60d5cca843cf.jpg" alt="啊呀，姐的蛋蛋呢">

                     <p>啊呀，姐的蛋蛋呢</p>

                 </a>

             </li>

              <li>

                 <a href="">

                     <img src="img/t01d67de6296364e96b.jpg" alt="就喜欢乳臭未干的妹妹">

                     <p>就喜欢乳臭未干的妹妹</p>

                 </a>

             </li>

             <li>

                 <a href="">

                     <img src="img/t0134f57159102d2a54.jpg" alt="姑娘这是洗泡泡浴呐">

                     <p>姑娘这是洗泡泡浴呐</p>

                 </a>

             </li>

             <li>

                 <a href="">

                     <img src="img/t01c0db71ad3effb8a5.jpg" alt="不摸腿根本没法开车">

                     <p>不摸腿根本没法开车</p>

                 </a>

             </li>

              <li>

                 <a href="">

                     <img src="img/t01fc261d409c9d603e.jpg" alt="男生当教练的小心机">

                     <p>男生当教练的小心机</p>

                 </a>

             </li>

             <li>

                 <a href="">

                     <img src="img/t01b5f40006f291f226.jpg" alt="熊孩子理想有点长">

                     <p>熊孩子理想有点长</p>

                 </a>

             </li>

              <li>

                 <a href="">

                     <img src="img/t01e9dcc801f3b3c6ec.jpg" alt="妹子你回头，跟你说点事">

                     <p>妹子你回头，跟你说点事</p>

                 </a>

             </li>

             </li>

              <a href="">

                         <img src="img/t01ad56ca632896bdcb.jpg" alt="这样吃会消化不良的">

                         <p>这样吃会消化不良的</p>

                     </a>

              </li>

         </ul>

         </div>

         <div class="more">

             <a href="">点击加载更多图片</a>

         </div>

     </div>

     <footer>

         <section class="footer1">

             <nav class="footnav footnav1">

                 <h3>轻松生活</h3>

                 <ul class="foot-list foot-list1">

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

                     <li><a href="">心理测试</a></li>

                 </ul>

             </nav>

             <nav class="footnav footnav2">

                 <h3>消磨时间</h3>

                 <ul class="foot-list foot-list2">

                     <li><a href="">小说</a></li>

                     <li><a href="">NBA</a></li>

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

                     <li><a href="">曲艺</a></li>

                 </ul>

             </nav>

             <nav class="footnav footnav3">

                 <h3>游戏大全</h3>

                 <ul class="foot-list foot-list3">

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

                     <li><a href="">三国游戏</a></li>

                 </ul>

             </nav>

         </section>

         <section class="footer2">

             <div class="foot">

                  <a href="">关于我们</a> |

                  <a  href="">广告合作</a>|

                  <a href="">投诉建议</a> |

                  <a href="">挂马监测</a> |

                  <a href="">手机版</a> |

                  <span class="rights">Copyright ©360.cn. ...</span>

                  <a href="">京ICP证080047号</a>

                  <a href="">京公网安备110000000006号</a>

             </div>

         </section>

     </footer>

 </body>

 </html>
 @charset "utf-8";

 /* CSS Document */

 *{

     margin:;

     padding:;

 }

 body{

     background: rgba(20,20,20,0.2);

 }

 ul{

     list-style-type: none;

 }

 a{

 /*    color: #fff;*/

     text-decoration: none;

 }

 header{

     height: 50px;

     width: 100%;

     background: url(../img/bj.png) repeat-x;

 }

 nav{

     width: 1000px;

     height: 50px;

     margin: 0 auto;

 /*    background: #AD6162;*/

 }

 nav a{

     color: #fff;

 }

 h1{

     color: #fff;

     font: bold 40px 隶书;

     float: left;

     margin-left: 50px;

 }

 nav li{

     float: left;

     font-size: 20px;

     height: 50px;

     line-height: 50px;

     letter-spacing: 5px;

     margin-right: 5px;

 /*    background: red;*/

     width: 100px;

     text-align: center;

 }

 /***********************第二课***********************/

 aside{

     position:fixed;

     left: 100px;

     top:100px;

 }

 .switch{

     width: 1000px;

     margin: 0 auto;

     background: #fff;

     overflow: hidden;

     margin-top: 15px;

 }

 .swi{

     width: 1000px;

     float: left;

 }

 /*

 .switch:after{

     content: "";display: block;clear: both;

 }

 */

 .swi1{

     text-align: center;

     float:left;

     margin: 10px 15px 10px 15px;

 }

 .swi1:hover,.swi1:active{

     color: orange;

 }

 .sw{

     width: 4000px;

     position: relative;

     animation:swimg 9s linear infinite normal;

 }

 @keyframes swimg{

     0% {left: 0px}

     5% {left: 0px}

     30% {left: -1000px}

     40% {left: -1000px}

     60%{left: -2000px;}

     70% {left: -2000px}

     95%{left:-3000px;}

     100%{left:-3000px;}

 }

 /************************第三节课***********************/

 .mid{

     width: 1000px;

     margin: 0 auto;

     margin-top: 15px;

 }

 .all{

     color: orange;

 }

 .midnav{

     height: 50px;

     line-height: 50px;

 /*    background: green;*/

     font-size: 20px;

 }

 .more{

     width: 1000px;

     height: 50px;

     line-height: 50px;

     background: #fff;

     text-align: center;

     font-size: 24px;

     margin: 20px auto 20px auto;

 }

 .more a{

     color: #000;

 }

 /*****************footer部分********************/

 footer{

     width: 100%;

     background: rgba(60,60,60,0.2);

 }

 .footer2{

     width: 100%;

     height: 50px;

     background: rgba(50,50,50,0.6);

 }

 .footer1 {

     width: 1000px;

     margin:0px auto;

     background: rgba(50,50,50,0.3);

     display: flex;

     text-align: center;

 }

 .footnav {

     height: 180px;

         border-right: 1px solid rgba(60,60,30,0.3);

 }

 .footnav h3{

     font-weight: normal;

     color: rgba(30,30,30,0.8);

 }

 .footnav3{

     border: none;

 }

 .foot{

     width: 1000px;

     margin: 0px auto;

     height:50px;

     line-height:50px;

     font-size:12px;

     color:#c2c2c2;

 }

 .mimg{

     background: #fff;

 }

 .mimg li a{

     color: #000;

 }

 .mimg li{

     text-align: center;

     float: left;

     margin: 10px 14px 10px 14px;

 }

 .foot a{

     color: #FFF;

 }

学习要点

  • 常用快捷方式
  • 清除浮动的技巧
  • 利用css3的动画实现图片轮播。
  • 综合运用我们之前学过的知识来构建一个完整的web页面。

更换你的装备

常用快捷方式

  1. 乘法*: ul>li*5 在编辑器中输入缩写代码：ul>li*5 ，然后按下拓展键（默认为tab），即可得到代码片段：
  2. 后代 >：nav>ul>li
  3. 兄弟 +:div+h3+p*3
  4. 缩写：(div>dl>(dt+dd)*3)+footer>p
  5. 自增符号：$: ul>li.item$*5
  6. 缩写：#header
  7. 缩写：p.class1.class2.class3
  8. 缩写：ul>.class
  9. 其他还有很多，大家可以自己去百度下

内功心法

学习技巧：高手是怎样炼成的

  1. 观摩优秀的网站，可以F12键查看它的源代码。
  2. 分析优秀作品的页面结构。
  3. 模仿优秀的作品,尝试着自己去做一下。
  4. 尝试着创新，在模仿作品中加入自己的创意思路。
  5. 反复进行以上四个步骤，直到你自己可以创作出优秀的作品，把自己变成高手

江湖经验

网站开发流程

网站的基本开发流程如下，明白流程，可以明确自己的职责和项目环节，有重点的学习。

  1. 网站策划--交互设计--网页设计（视觉设计）- 前端开发（前端工程师）-测试网页--网站发布--后期维护
  2. 沟通的重要性：多与后端技术，美工设计等协作人员沟通。

小技巧

清除浮动的技巧：消除子元素浮动对父元素背景/边框/不能被子元素撑开的方法：

  1. 父元素结尾处增加一空元素 div；并清除其浮动。缺点：如果布局复杂需要增加许多空标签
  2. 在父元素定义overflow:hidden（浏览器会自动检查浮动区域的高度，注.不必理会原理，知道用法即可。缺点：超出部分会被隐藏
  3. 利用伪类：after 父元素内容后增加空元素，并清除浮动。

战斗开始啦

  1. 创建项目文件夹存放相应的素材、文档等
  2. 对页面进行结构分析
  3. 准备素材
  4. 开始编写代码

项目实战

  1. 创新从模仿开始，咱们的第一综合实例就从模仿网页-360囧图开始，网址：http://xiaohua.360.cn/jiongtu
  2. 第一个项目采用固定浮动布局，单位为像素.
  3. 由于录制课程的时候使用1024*768的分别率；所以项目设定屏幕分辨率为：1024*768

    4. 建议将LOGO放在h1标签里面，方便浏览器抓取关键字。同时一个页面只建议使用一个h1标签。

    -->

未完，待续...........

  1. ...

代码优化

优化代码使更加符合HTML5大纲算法.步骤如下

  1. 查看页面目录结构，逐项修改有问题部分。
    1. nav中添加标题并将它隐藏。

小技巧

  1. 当width为100%时。可用用min-width来规定一个最小宽度，防止缩放时变形，尤其是背景图片。
  2. 将定位和外边距结合让图片以中心点居中。
  3. 用opcity设置半透明遮罩层。
  4. inline-block可以使用text-align 居中；
  5. 可以给background同时设置半透明渐变和背景图片，来增加背景图片的模糊度来突出背景上的文字。
  6. 用ul列表做导航的好处:逻辑清楚，有条理。

分离css代码

  1. 将代码重用部分比如header footer分离出来，其他需要的文件重复引用即可

html5--项目实战-仿360囧图的更多相关文章

  1. 钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例

    最近一直着手开发h5仿钉钉项目,使用到了h5+css3+zepto+wcPop2等技术进行开发,实现了消息.表情.动图发送,仿QQ多人拼合图像,可以选择本地图片,并可以图片.视频预览,仿微信发红包及打 ...

  2. 商城项目实战 | 1.1 Android 仿京东商城底部布局的选择效果 —— Selector 选择器的实现

    前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 京东商城的底部布局的选择效果看上去很复杂,其实很简单,这主要是要 ...

  3. 商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)

    前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 现在很多的 APP 里面都有自己的自定义风格,特别是京东商城中自 ...

  4. 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)

    本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 上一篇文章<商城项目实战 | 2.1 Android 仿京东商城 ...

  5. ThinkPHP3.2开发仿京东商城项目实战视频教程

    ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...

  6. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  7. 【第二版】高仿Android网易云音乐企业级项目实战课程介绍

    这是一门付费Android项目课程,我们只做付费课程:同时也感谢大家的支持. 这一节,对本课程做一个简单介绍,以及放一些项目效果图,如果想直接查看项目视频演示,可以直接在腾讯课堂查看[高仿Androi ...

  8. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  9. angularJs项目实战！01：模块划分和目录组织

    近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap ...

随机推荐

  1. Coreldraw绘制标准波浪线

    Coreldraw中如何绘制标准波浪线? 先画一根直线,单击工具栏中的“互动式工具组”,选择“互动式变形工具”, 再在弹出的属性栏中选择“拉链变形”,在幅度和频率中分别输入波形的波峰 到波底的值.波浪 ...

  2. selenium启动chrome出错处理：Message: 'chromedriver' executable needs to be in PATH

  3. HaHa's Morning（状压DP）

    描述 HaHa is so happy today, he is going to participate the 7th Hunan University Programming Contest. ...

  4. HDU-2509-Be the Winner,博弈题~~水过~~

    Be the Winner Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ht ...

  5. [Istio]Kubernetes集群部署Istio 1.0

    大部分内容都是可以根据https://istio.io/docs/setup/kubernetes/quick-start/来处理的,这里主要谈部署时一些细节的问题 首先,当我们按照 istio 官方 ...

  6. 《大话设计模式》Python版代码实现

    上一周把<大话设计模式>看完了,对面向对象技术有了新的理解,对于一个在C下写代码比较多.偶尔会用到一些脚本语言写脚本的人来说,很是开阔眼界.<大话设计模式>的代码使用C#写成的 ...

  7. 免费第三方API平台整合

    各大平台免费接口,非常适用 http://developer.51cto.com/art/201412/458778.htm 绝对干货:供个人开发者赚钱免费使用的一些好的API接口http://www ...

  8. django学习之- Ajax

    提示:jquery要使用1版本,因为高版本已不兼容低版本的游览器.参考url:http://www.cnblogs.com/wupeiqi/articles/5703697.html原生ajax:Aj ...

  9. xml建模

    1.建模的由来 就是将指定的xml字符串当作对象来操作 如果说当对一个指定的xml格式字符串完成了建模操作, 好处在于,只需要调用指定的方法就可以完成预定的字符串获取: 2.建模的思路 1.分析需要被 ...

  10. MySQL 资源大全

    干货!MySQL 资源大全 提交 我的留言 加载中 已留言 shlomi-noach 发起维护的 MySQL 资源列表,内容覆盖:分析工具.备份.性能测试.配置.部署.GUI 等. 伯乐在线已在 Gi ...