6_练习

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

6_练习
2022.5.6（晴）
2022.11.17（晴）
2022.11.17（晴）
6_。
6_函数
6_布局
6_集合
Android Chart框架 MPAndroidChart学习
2021.3.3（晴）

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大纲算法我们可以通过各种工具去查看当前页面，这里推荐使用一个测试工具：HTML5 Outliner，网...
2022.5.6（晴）
今天值班。6_
2022.11.17（晴）
今天继续核酸，测试。6_
2022.11.17（晴）
今天继续核酸，测试。6_
6_。
我们熬夜只是没有勇气结束这一天，许多人会说，晚安，我睡了你早点休息，却没有等你睡了我再睡的那个人。这是矫情到什么地...
6_函数
函数参数与返回值无参数函数多参数函数无返回值函数省略返回箭头（->）和返回类型。注意严格上来说，虽然没有...
6_布局
常用布局方式固定布局注：设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。大多数设计者选择960或...
6_集合
什么是集合？集合是一个可变的大小的容器；容器中的每一个数据称为一个元素；集合的特点：类型可以不确定，大小不固...
Android Chart框架 MPAndroidChart学习
Android Chart框架 MPAndroidChart学习笔记6_柱状图点击这里查看项目源码 1.xml布...
2021.3.3（晴）
上午开会，下午一堆事。特色方案、好习惯、大课间、督导检查。有点头蒙。6_

6_练习

HTML5大纲算法

练习

常用快捷方式

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

网站开发流程

项目

相关文章

6_练习

2022.5.6（晴）

2022.11.17（晴）

2022.11.17（晴）

6_。

6_函数

6_布局

6_集合

Android Chart框架 MPAndroidChart学习

2021.3.3（晴）

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读