6_练习

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

最后编辑于：2017.12.05 01:30:36

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,657评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,662评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,143评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,732评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,837评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,036评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,126评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,868评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,315评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,641评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,773评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,470评论 4赞 333
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,126评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,859评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,095评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,584评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,676评论 2赞 351

6_练习

HTML5大纲算法

练习

常用快捷方式

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

网站开发流程

项目

推荐阅读更多精彩内容