6_练习

作者: Zd_silent | 来源:发表于2016-12-12 18:13 被阅读8次

HTML5大纲算法

我们可以通过各种工具去查看当前页面，这里推荐使用一个测试工具：HTML5 Outliner，网址如下：https://gsnedders.html5.org/outliner/

了解一下section和div的区别
- div元素在html5之前是最常用的最流行的标签，但他本身是没有任何语义的，它只不过是用来布局页面和CSS样式以及JS调用。
- 在html5中section标签并不是用来取代div的。他是具有语义的文档标签，在大纲规范中规定section至少要包含一个标题。也就是section标签内至少包含一个h1~h6.
- 如果是页面布局，且不是header、footer之类的专属区域，都应该使用div;
body、nav、section都是需要有标题的才规范.header和div则是不需要标题的。
section和nav元素大纲要求有标题h1~h6，但是section必须有才规范，而nav如果没有标题，也是合理的。给他添加了标题会让大纲更好看，所以我们可以添加完了在隐藏，就不会破坏布局了。

练习

常用快捷方式

乘法: ul>li5 在编辑器中输入缩写代码：ul>li*5 ，然后按下拓展键（默认为tab），即可得到代码片段：
后代 >：nav>ul>li
兄弟 +:div+h3+p*3
缩写：(div>dl>(dt+dd)*3)+footer>p
自增符号：$: ul>li.item$*5
缩写：#header
缩写：p.class1.class2.class3
缩写：ul>.class

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

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

网站开发流程

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

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

项目

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

@charset "UTF-8";
*{
  margin: 0;
  padding: 0;
}

body{
  background: rgb(211, 214, 206);
}

header{
  width: 100%;
  height: 50px;
  background-image: url(./`img?`/bj.png);
  background-repeat: repeat-x;
}

nav{
  width: 1000px;
  height: 50px;
  margin: 0 auto;
}
.headh{
  text-indent: -9999px;
}
ul{
  list-style-type: none;
}

a{
  text-decoration: none;
}

h1{
  color: rgb(255, 255, 255);
  float: left;
  font:bold 40px 隶书;
  margin-left: 50px;
}

nav li{
  float: left;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  letter-spacing: 5px;
  margin-right: 5px;
  width: 100px;
  text-align: center;
}

nav a{
  color: rgb(252, 252, 252);
}

aside{
  /*以窗口定位*/
  position: fixed;
  left: 50px;*/
  top: 100px;

}

/*.switch:after{
  content: "";
  display: block;
  clear: both;
}*/
/*图片轮播部分*/
.switch{
  width: 1000px;
  margin: 0 auto;
  background: rgb(255, 255, 255);
  overflow: hidden;
  margin-top: 15px;
}

.swi{
  width: 1000px;
  float: left;
}

.swi1{
  float: left;
  text-align: center;
  margin: 10px 14px 10px 14px;
}
/*
.kong{
  clear: both;
}*/

.swi1:hover,.swi1:active{
  color: rgb(242, 148, 36);
}

.sw{
  width: 4000px;
  position: relative;
  animation: sw`img?` 9s linear infinite normal;
}

@keyframes sw`img?` {
  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: rgb(247, 181, 35);
}

.mid-nav li{
  float: left;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  width: 80px;
}

.mid-nav li a{
  color: rgb(255, 255, 255);
}

.more{
  clear: both;
  width: 1000px;
  height: 50px;
  line-height: 50px;
  background: rgb(255, 255, 255);
  text-align: center;
  font-size: 24px;
  margin: 2-px auto; 20px aut0;
}

.more a{
  color: rgb(0, 0, 0);
}

/***************底部********************/
.footer{
  width: 100%;
  background: rgb(153, 158, 158);
}

.footer1{
  width: 1000px;
  margin: 0px auto;
  background: rgb(145, 145, 138);
  display: flex;
  text-align: center;
}

.footnav{
  height: 180px;
  border-right: 1px solid rgb(180, 183, 190);
}

.footnav h3{
  font-weight: normal;
  color: rgb(60, 80, 7);
}

.footnav3{
  border: none;
}

.footer2{
  width: 100%;
  height: 50px;
  background: rgb(80, 78, 75);
}

.foot{
  width: 1000px;
  margin: 0px auto;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  color: rgb(255, 255, 255);
}

.foot a{
  color: rgb(255, 255, 255);
}

.m`img?`{
  float: left;
  background: rgb(255, 255, 255);
}

.m`img?` li a{
  color: rgb(0, 0, 0);
}

.m`img?` li{
  text-align: center;
  float: left;
  margin: 10px 14px 10px 14px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>仿360囧图</title>
  <link rel="stylesheet" href="./f360.css" media="screen" title="no title">
</head>
<body>
  <h1 class="headh">360笑话</h1>
  <header>
    <h1 class="headh">360笑话</h1>
    <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 class="">
    <h3 class="headh">xx</h3>
    <`img?` src="./`img?`/fixed.jpg" alt="" />
  </aside>
  <section class="switch">
    <h3 class="headh">xx</h3>
    <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?`/s6.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?`/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?`/s6.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?`/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?`/s6.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?`/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?`/s6.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?`/s8.jpg" alt=""></a>
          <p>只想安静的吃个饭而已</p>
        </li>
      </ul>
      <!-- <div class="kong">

      </div> -->
    </div>

  </section>
  <section class="mid">
    <h3 class="headh">xx</h3>
    <div class="mid-nav">
      <ul>
        <li><a href="" class="all">全部</a></li>
        <li><a href="">推荐</a></li>
        <li><a href="">热门</a></li>
        <li><a href="">内涵</a></li>
      </ul>
    </div>
    <div id="main">
      <ul class="m`img?` ">
            <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>
  </section>
  <footer>
    <section class="footer1">
      <h3 class="headh">xx</h3>
            <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">
      <h3 class="headh">xx</h3>
      <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>

练习.gif

6_练习

HTML5大纲算法

练习

常用快捷方式

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

网站开发流程

项目

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读