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. BZOJ 3721: PA2014 Final Bazarek【乱搞】

    有n件商品,选出其中的k个,要求它们的总价为奇数,求最大可能的总价. Input 第一行一个整数n(1<=n<=1000000),表示商品数量.接下来一行有n个整数,表示每件商品的价格,范 ...

  2. 【网络流】codeforces C. Heidi and Library (hard)

    http://codeforces.com/contest/802/problem/C

  3. java web 项目常用框架

    java框架实在是太多了,网上一搜索一大箩筐,根本就了解不到什么. 我还是以我的经验来说一下j2ee的框架. 1.首先力推struts2框架,这是最经典的框架(可以说没有“之一”).可以帮你快速搭建出 ...

  4. 最长链（codevs 1814）

    题目描述 Description 现给出一棵N个结点二叉树,问这棵二叉树中最长链的长度为多少,保证了1号结点为二叉树的根. 输入描述 Input Description 输入的第1行为包含了一个正整数 ...

  5. [NOIP2002] 提高组 洛谷P1033 自由落体

    题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公式为 d＝1/2*g* ...

  6. POJ 1741 树上 点的 分治

    题意就是求树上距离小于等于K的点对有多少个 n2的算法肯定不行,因为1W个点 这就需要分治.可以看09年漆子超的论文 本题用到的是关于点的分治. 一个重要的问题是,为了防止退化,所以每次都要找到树的重 ...

  7. rabbitmq management Login Failed

    默认用户guest 只允许localhost登录. so... 我们自己建立用户 1. 用户管理 用户管理包括增加用户,删除用户,查看用户列表,修改用户密码. 相应的命令 (1) 新增一个用户 rab ...

  8. C. Wilbur and Points---cf596C

    http://codeforces.com/problemset/problem/596/C 题目大意:  给你n个数对  确保如果(x,y)存在这个集合  那么  0<=x'<=x &a ...

  9. Wannafly挑战赛4

    A(枚举) =w= B(枚举) 分析: 枚举每一位,考虑每位贡献,就是相当于在一段区间内找有多少1在奇数位上,有多少个1在偶数位上,维护一下各自前缀和就行了 时间复杂度O(32n) C(签到) D(d ...

  10. hdu6196 happpy happy happy (meet in middle + 剪枝)

    题意 从1到n共计n(<=90)个物品,每个物品有一个价值a[i],儿子和爸爸轮流做游戏,儿子先手.儿子每次选价值最大的{最左边,最右边}的物品,如果价值一样大, 则选取最左边的物品. 爸爸每次 ...