3月20号

1.浮动的特点

1.浮动的元素不占用标准流的位置

2.浮动特性会让行内元素和块级元素都变成行内块元素，具有行内块的特性.

行内块的特点：宽高起作用，可以一行显示多个，margin,padding四面都有效

3.如果父盒子中有子盒子的话，一般的用法就是，让子盒子，要浮动都浮动，要不浮动都不浮动。

4.父盒子中的子元素，无论如何浮动，都不会超出父盒子。

5.浮动的元素跟上一个元素的位置有关系

2.设置图片在垂直方向的对齐方式

vertical-algin: top / middle /bottom

3.清除浮动的方式

1.给父元素设置一个高度很少用

2.额外标签法： clear:both 给额外的标签添加一个此属性，来清除左右的浮动，进而消除浮动对后面元素的影响

缺点是：白白的增加了一个额外的标签，会使页面标签变得冗余

3.overflow:hidden 给父元素添加overflow:hidden属性几乎不用

缺点是：会造成额外溢出来的元素被隐藏掉

4.单伪元素清除法用的很多，百度，淘宝，网易就经常的在使用

.clearfix::after {
      content:'.';    /*给生成的标签元素添加一个象征性的内容*/
      display:block; /*将这个行内伪元素转换成块级伪元素*/
      clear: both;   /*给生成的伪元素添加清除浮动的功能*/
      height: 0;    /*将content内容中的.不在页面中显示*/
      visibility: hidden;  /*再加一层保险，将多余的部分隐藏掉，不要对页面布局造成影响*/
   }
     .clearfix {
       *zoom: 1;
     }   /* IE6、7 专有 */

5.双伪元素用的也很多

.clearfix:after,
    .clearfix:before {
      content:'';
      display:table;
   }
    .clearfix:after {
      clear:both;
   }
    .clearfix {   
     *zoom: 1;  /*兼容到IE6 7 浏览器*/
   }

4.元素的显示方式分类

块级元素

行内元素

行内块元素

最近在做一个“学城在线”小项目，一次大的知识点的整合，这段时间发现自己好多知识点都知道，但是配合使用的时候就懵逼了，各种标签搭配的时候出现思维混乱，一些功能没有思路，可能是初学的这几天代码抄多了，每次看见案例就直接F12看源码了，今天强迫自己默写了一遍所学的功能，功能还没有完全做完，明天要学定位，抓紧时间预习下，效果如下图，做个纪念。。。

<!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>学成在线</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 头部内容开始 -->
  <header class="w clearfix">
    <div class="logo fl">
      <h1><a href="#">学成在线</a></h1>
    </div>
    <div class="nav fl">
      <ul>
        <li><a href="#" class="current">首页</a></li>
        <li><a href="#">课程</a></li>
        <li><a href="#">职业规划</a></li>
      </ul>
    </div>
    <div class="search fl">
      <input type="text" placeholder="输入关键词" autofocus/>
      <input type="image" src="./images/btn.png"/>
    </div>
    <div class="user fl">
      <a href="#"><img src="./images/user.png" title="Fuck You!">路飞</a>
    </div>
  </header>
  <!-- 头部内容结束 -->

  <!-- 中间导航部分开始 -->
  <nav>
    <div class="w clearfix slider">
      <div class="nav-left fl">
        <ul>
          <li><a href="#" class="current">前端开发<span>></span></a></li>
          <li><a href="#">后端开发<span>></span></a></li>
          <li><a href="#">移动开发<span>></span></a></li>
          <li><a href="#">人工智能<span>></span></a></li>
          <li><a href="#">商业预测<span>></span></a></li>
          <li><a href="#">云计算&大数据<span>></span></a></li>
          <li><a href="#">运维&测试<span>></span></a></li>
          <li><a href="#">UI设计<span>></span></a></li>
          <li><a href="#">产品<span>></span></a></li>
        </ul>
      </div>
      <div class="nav-right fr">
        <h2>我的课程表</h2>
        <ul>
          <li><a href="#"><h5>继续学习 <em>程序设计语言</em></h5>
            <span>正在学习-使用对象</span>
            </a>
          </li>
        </ul>
        <ul>
          <li><a href="#"><h5>继续学习 <em>程序设计语言</em></h5>
            <span>正在学习-使用对象</span>
            </a>
          </li>
        </ul>
        <ul>
          <li class="current"><a href="#"><h5>继续学习 <em>程序设计语言</em></h5>
            <span>正在学习-使用对象</span>
            </a>
          </li>
        </ul>
        <a href="#">全部课程</a>
      </div>
    </div>
  </nav>

  <!-- 中间导航部分结束 -->

  <!-- 底部内容开始 -->
  <footer class="w clearfix">
    <div class="ft-content">
      <div class="ft-content-left fl">
        <div class="logo"><a href="#">学成在线</a>
        </div>
        <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p>
        <p>©2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
        <a href="#">下载APP</a>
      </div>
      <div class="ft-content-right fl">
        <dl>
          <dt>关于学成网</dt>
          <dd><a href="#">关于</a></dd>
          <dd><a href="#">管理团队</a></dd>
          <dd><a href="#">工作机会</a></dd>
          <dd><a href="#">客户服务</a></dd>
          <dd><a href="#">帮助</a></dd>
        </dl>
        <dl>
          <dt>新手注册</dt>
          <dd><a href="#">如何注册</a></dd>
          <dd><a href="#">如何选课</a></dd>
          <dd><a href="#">如何拿到毕业证</a></dd>
          <dd><a href="#">学分是什么</a></dd>
          <dd><a href="#">考试未通过怎么办</a></dd>
        </dl>
        <dl>
          <dt>合作伙伴</dt>
          <dd><a href="#">合作机构</a></dd>
          <dd><a href="#">合作导师</a></dd>
        </dl>
      </div>
    </div>
  </footer>


  <!-- 底部内容结束 -->
</body>
</html>

index.html

/* 这个文件夹里面存放公共样式 
  1. 可以用来清除标签默认的样式;
  2. 设置页面中公共的样式 字体大小 字体风格 页面颜色;
*/

html,body,head,div,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt,dd {
  margin: 0;
  padding: 0;
}

input {
  outline: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

em,i,s,del,ins,b,strong,a {
  font-style: normal;   /* 将原来的默认样式都去掉，让它变成一个没有默认样式的标签，方便配合选择器对页面特定内容进行修饰 */
}

h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
}

.fl {
  float: left;
}
.fr {
  float: right;
}

body {
  background-color: #f3f6f8;
}

.w {
  width: 1200px;
  margin: 0 auto;
}
.clearfix:after {
  content: ".";
  height: 0;
  clear: both;
  visibility: hidden;
  display: block;
}
.clearfix {
  *zoom: 1;
}

base.css

/* 里面存放index.html主页面的样式 */

/* 头部样式开始 */
header .logo a {
  width: 264px;
  height: 100px;
  background-color: green;
  background: url(../images/logo.png) no-repeat left
  30px;
  display: inline-block;
  text-indent: -9999em;
}
header .nav ul li {
  height: 100px;
  line-height: 100px;
  float: left;
  width: 90px;
}
header .nav a {
  font-size: 20px;
  color: #040707;
}
header .nav a.current {
  border-bottom: 2px solid #02a6ff;
}
header .search {
  height: 70px;
  line-height: 70px;
  padding-top: 30px;
  margin-left: 30px;
}
header .search input:first-child {
  width: 358px;
  height: 34px;
  text-indent: 2em;
  float: left;
}
header .search input:last-child {
  float: left;
}
header .user {
  height: 100px;
  line-height: 100px;
}
header .user img {
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 10px 0 30px;
}
/* 头部样式结束 */

/* 中间导航栏开始 */
nav {
  height: 420px;
  background-color: #1b046b;
}
.slider {
  height: 420px;
  background: url(../images/banner2.png) no-repeat;
}
nav .nav-left {
  width: 190px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 12px 0;
}
nav .nav-left li a{
  height: 44px;
  line-height: 44px;
  padding: 0 20px;
  display: block;
  font-size: 15px; 
  color: #fff;
}
.nav-left li a span {
  float: right;
}
nav .nav-left li a:hover {
  background-color: blue;
}
nav .nav-left li a.current {
  color: #0681c4;
}
.nav-right {
  width: 230px;
  height: 300px;
  background-color: #fff;
  margin-top: 50px;
}
.nav-right h2 {
  height: 50px;
  background-color: #9acfea;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 22px;
}
.nav-right li {
  padding: 14px 0 6px 20px;
  border-bottom: 1px solid #eee;
}
.nav-right li h5 {
  font-size: 18px;
  color: #535353;
} 
.nav-right li h5 em {
  font-size: 16px;
  color: #535353;
}
.nav-right li span {
  font-size: 13px;
  color: #afafaf;
}
.nav-right .current {
  border-bottom: none;
}
.nav-right > a {
  width: 198px;
  height: 38px;
  display: block;
  color: #0ea2f9;
  border: 1px solid;
  text-align: center;
  line-height: 38px;
  margin: 3px 0 0 14px;
}
.nav-right > a:hover {
  background-color: #0ea2f9;
  color: #fff;
}
/* 中间导航栏结束 */


/* 底部内容开始 */
footer .ft-content {
  margin-top: 34px;
}
footer .ft-content .logo a {
  height: 74px;
  width: 646px;
  background-color: green;
  display: inline-block;
  background: url(../images/logo.png) no-repeat left center;
  text-indent: -9999px;
  margin-bottom: 10px;
}
footer .ft-content-left p {
  font-size: 12px;
  color: #5a5a5a;
}
footer .ft-content-left p:last-child {
  padding: 5px 0;
}
footer .ft-content-left > a {
  border: 1px solid #03a5ff;
  width: 118px;
  height: 34px;
  display: inline-block;
  text-align: center;
  line-height: 34px;
  color: #03a5ff;
  font-size: 16px;
  margin-top: 16px;
}
footer .ft-content-left>a:hover {
  background-color: #03a5ff;
  color: #fff;
}

footer .ft-content-right dl {
  float: left;
  width: 224px;
}
footer .ft-content-right dl:last-child {
  width: 94px;
}
footer .ft-content-right dt {
    font-weight: 600;
    color: #000;
    margin-bottom: 6px;
}
footer .ft-content-right dd {
  margin-bottom: 6px;
}
footer .ft-content-right dd a {
    color: #333;
    font-size: 14px;
}
/* 底部内容结束 */

index.css

1.浮动的特点

2.设置图片在垂直方向的对齐方式

3.清除浮动的方式

4.元素的显示方式分类

猜你喜欢