HTML5基础知识2

# 第二天课程

## 1.CSS布局..

- 默认情况下，所有的网页标签都在**标准流**布局中

  从上到下，从左到右

- **脱离标准流**的方法有:

  float  属性       (    让指定的标签浮动到父标签的左边-left或者右边-right    )

  position 属性    和    left、right、top、bottom   属性值

### 1.Float  浮动属性

**Float:**

​    可以指定的**子标签浮动在父标签**的左边和右边

​    **注意：**所有的标签一旦脱离标准流， 标签的类型就会自动变成**行内-块级**标签（行内-块级：同一行内可以存在多个标签，并可以设计标签的宽和高）

**Float：** 属性的常用值有

- **left**：`脱离标准流`，浮动在父标签的最左边


- **right**：`脱离标准流`，浮动在父标签的最右边

**案例：**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Float属性</title>
    <!--
       Float:
        可以让子标签浮动在父标签的左边和右边
        注意：所有的标签一旦脱离标准流， 标签的类型就会自动变成行内-块级标签
    -->
    <style>
        #main{
            width:400px;
            height:300px;
            background-color:red;
        }
        .test1{
            background-color:blue;
            /*float浮动*/
            float:left;

            /*行内块级标签*/
            width: 100px;
            height:30px;
        }
        .test2{
            background-color:plum;
            /*float浮动*/
            float:right;
        }

        .test3{
            background-color:green;
        }
        
        li{
            float: left;

            /*display: inline-block;*/
            list-style: none;
        }

    </style>
</head>
<body>

    <div id="main">
        <div class="test1">
            左边
        </div>
        <div class="test3">标签流布局</div>
        <div class="test2">
            右边
        </div>
        
    </div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>
```



### 2.Position  定位属性

**属性值：**



**用法：**

**子绝父相**   :在子标签指定绝对布局（absolute）在父标签指定相对布局（relative）

**案例：**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-position</title>
    <!--子绝父相-->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            background-color: red;
            width: 300px;
            height: 300px;
            /*相对(只要这个不是static就行)*/
            position: relative;
            margin-top: 20px;
        }

        .test1 {
            background-color: yellow;
            /*每一个标签内部都会有一个position的属性*/
            /*position: static;*/
            /*绝对*/
            position: absolute;
            /*定位*/
            left: 30px;
            top: 40px;
        }
        .test2{
            background-color: green;
        }
        .test3 {
            background-color: yellow;
            /*绝对*/
            position: absolute;
            /*定位*/
            bottom: 0px;
            right: 0px;
        }

        .top{
            background-color: purple;
            /*相对于浏览器定位*/
            position: fixed;
            top: 0px;
            left: 30px;
            right: 30px;
        }
        .bottom{
            background-color: blue;
            /*相对于浏览器定位*/
            position: fixed;
            bottom: 0px;
            left: 30px;
            right: 30px;
        }

    </style>
</head>
<body>
    <div id="main">
        <div class="test1">
            定位1
        </div>
        <div class="test2">
            定位2
        </div>
        <div class="test3">
            定位3
        </div>
    </div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</body>
</html>
```



## 2.标签的居中..

### 2.1水平居中

- **行内标签**和**行内-块级标签**水平居中

  在父标签中设计：`text-align:center; `   属性。是对**整个标签**水平居中

- **块级标签**水平居中

  1.在父标签中设计：text-align:center; 属性。  是对子标签中的**内容（文字..）**水平居中

  2.在自身标签中设计：`margin : 0px auto ;  `  属性。是对**整个块级标签**水平居中

  **案例：**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-水平居中</title>
    <style>
        #main{
            width: 500px;
            height: 400px;
            background-color: red;
            /*行内标签居中*/
            text-align: center;
        }
        .test1{
            background-color: yellow;
        }
        .test2{
            background-color: blue;
            width: 200px;
            /*块级标签居中*/
            /*margin-left: 150px;*/
            margin: 0 auto;
        }
        .test3{
            background-color: plum;
            /*行内块级标签居中*/
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="main">
            <button class="test3"> 行内-块级标签</button>
        <p class="test2">块级标签</p>
           <span class="test1">行内标签代表</span>
    </div>
</body>
</html>
```



### 2.2垂直居中

- **行内标签**和**行内-块级标签**垂直居中

  在父标签中设计：`line-heigth:xx px; `  属性。是对**整个标签**水平居中

- **块级标签**垂直居中

   1.在父亲标签中设计：`line-heigth:xx px;`  属性。 仅仅使**文字** 在**父标签**垂直居中

  2.在自己标签中设计：`line-heigth:xx px;  `  属性。 仅仅使**文字**在**自己标签**垂直居中

  **3.定位**

  ​    1.`子绝父相`  ; 

  ​    2.在子标签中设计相对`left:50%  ; top:50% ;` ; 

  ​    3.对子标签进行平移`transform:translate(-50% , -50%)`

**案例：**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-水平居中和垂直居中</title>

    <style>
        #main{
            width: 500px;
            height: 400px;
            background-color: red;
            /*行内标签居中*/
            text-align: center;

            /*垂直居中，设计行高*/
            line-height: 400px;

            position: relative;
        }
        .test1{
            background-color: yellow;
        }
        .test2{
            background-color: blue;
            width: 200px;
            /*块级标签居中*/
            /*margin-left: 150px;*/
            margin: 0 auto;

            height: 200px;
            /*垂直居中，设计行高*/
            line-height: 200px;
            /*垂直居中，通过定位*/
            position: absolute;
            /*top: 100px;*/
            /*left: 150px;*/
            top:50%;
            left: 50%;
            transform:translate(-50% , -50%);
        }
        .test3{
            background-color: plum;
            /*行内块级标签居中*/
            text-align: center;
        }
    </style>
</head>
<body>
<div id="main">
   <!--<button class="test3"> 行内块级标签</button>-->
      <p class="test2">块级标签</p>
    <!--<span class="test1">
            行内标签代表
        </span>-->
</div>

</body>
</html>
```



## 3.百度首页..

### 3.1新建一个项目（百度首页）





### 3.2引入外部样式



### 3.3盖房子（html）

#### 1.搭建整体框架

#### 2头部内容和结构

糯米 新闻 hao123 地图 视频 贴吧 登录 设置 更多产品  9

!



#### 3中间内容和结构



​    

#### 4尾部内容和结构



### 3.4装修房子(CSS)

#### 1.头部样式

- 默认设计

  ```css
  /*默认*/
  *{
      margin: 0;
      padding: 0;
  }
  ```

- 头部子标签向右对齐

  ```css
   #top{
       /*头部子标签向右对齐*/
      text-align: right;
   }
  ```

- 设计上下外边框(margin)

  ```css
   #top{
   
      /*设计上下外边框*/
      margin-top: 20px;
      margin-bottom: 15px;
    }
  ```

  ​

- 设计文字的样式（间距  , 颜色，粗细，字体，大小）

  ```css
  #top a{

      margin-right: 8px;
      color: black;
      /*粗细*/
      font-weight: 300;
      /*字体*/
      font-family: Arial;
      font-size: 15px;
  }
  #top a.no-weight{
      /*粗细*/
      font-weight: 100;
  }
  ```

  ​

- 设计更多产品的样式（颜色，背景，内去除下划线，内边距）

  ```css

  #top a.more-product{
      color: white;
      background-color: blue;
      /*去除下划线*/
      text-decoration: none;
      /*内边距*/
      padding:4px;
  }
  ```

#### 2.搜索框的样式

- 设计百度Logo图片的大小

  ```css
  /*logo*/
  #middle .img-logo img{
      width: 270px;
      height: 129px;
  }
  ```

- Logo水平居中

  ```css
  #middle .img-logo{
      /*logo水平居中*/
      text-align: center;
  }
  ```

  ​

- 设计整个搜索框的大小和水平居中

  ```css
  #middle .ser{
      background-color: red;
      width: 600px;
      height: 35px;

      /*块级标签水平居中*/
      margin: 0 auto;
      margin-bottom: 30px;
  }
  ```

- 给搜索框中的input标签添加浮动

  ```css
  #middle .ser .int{
      float: left;
  }
  #middle .ser .btn{
      float: left;
  }
  ```

- 设计编辑输入框的大小和改变盒子大小默认的计算方式等

  ```css
  #middle .ser .int{
      float: left;
      width: 500px;
      height: 100%;
      /*添加盒子的边框*/
      border: 1px solid #dddddd;
      /*改变盒子的大小的计算方式*/
      box-sizing: border-box;

      font-size: 15px;
      padding-left: 15px;
  }
  ```

  ​

- 给input标签添加伪类选着器

  ```css
  #middle .ser .int:hover{
      /*border: 1px solid blue;*/
  }

  #middle .ser .int:focus{
      /*去除外边线*/
      outline: none;
      /*重新添加外边线*/
      border: 1px solid #33dddd;
  }
  ```

  ​

- 设计百度一下的宽高，背景颜色和字体大小

  ```css
  #middle .ser .btn{
      float: left;

      border: 0;
      width: 100px;
      height:100%;

      color: white;
      font-size: 16px;
      background-color: #3385ff;
  }
  ```

  ​

#### 3.图片样式

- 设计图片的大小和间距

  ```css
  #middle .img-ser img{
      width: 130px;
      /*图片间距*/
      margin: 0 5px;
      margin-bottom: 10px;
  }
  ```

- 设计图片水平居中

  ```css
  #middle .img-ser{
      /*水平居中*/
      text-align: center;
  }
  ```

  ​

- 设计图片的圆角

  ```css
  #middle .img-ser img{
      ...

      border-radius: 8px;
  }
  ```

- 设计图片的伪类（不透明）

  ```css
  #middle .img-ser img:hover {
      /*设计透明度，0是不透明 100是全透明*/
      opacity: 0.5;
  }
  ```

  ​

#### 4.尾部样式

- 设计尾部水平居中和上下间距

  ```css
  /*尾部*/
  #bottom{
      margin-top: 60px;
      margin-bottom: 50px;

      /*水平居中*/
      text-align: center;
  }

  #bottom .bottom-top{
      margin-bottom: 8px;
  }
  ```

- 设计所有的字体颜色

  ```css
  #bottom p{
      color: gray;
  }
  #bottom a{
      color: gray;
  }
  ```


- 设a标签之间的间距

  ```css
  #bottom a{
     ...
      margin: 0 6px;
  }
  ```

  ​

#### 5.背景样式

- 给body添加背景

  ```
  body{
      /*添加背景*/
      background: url("../image/bg.jpg");
  }
  ```

- 给背景设计尺寸（cover 跟随变化）

  ```
  body{
      ...
      /*设计背景尺寸*/
      background-size: cover;
  }
  ```

- 更换百度logo图片

  ```
    <!--百度LOGO-->
    <div class="img-logo">
      <img src="image/logo_white_ee663702.png" alt="百度logo">
    </div>
  ```

  ​

- 修改头部的高度和背景

  ```
  /*头部*/
  #top{
      /*头部子标签向右对齐*/
      text-align: right;

      /*设计上下外边框*/
      /*margin-top: 20px;*/
      margin-bottom: 15px;

      /*头部高度和背景*/
      height: 45px;
      background-color: rgba(0,0,0,0.4);
  }
  ```

  ​

- 头部文字垂直居中和字体颜色

  ```
  #top{
      ...
      /*文字垂直居中*/
      line-height:45px;
  }
  #top a{
      ...
      color: white;
  }
  ```

  ​

  ​

## 4.登陆界面..



### 4.1新建一个项目并引入样式




### 4.2盖房子（HTML）

#### 1.搭建整体框架



#### 2.头部内容和结构



#### 3.输入用户名和密码





#### 4.下次自动登陆和忘记密码



#### 5.登陆和注册



#### 6.尾部







### 4.3装修房子(CSS)

#### 1.设计背景样式

```css
/*默认配置*/
*{
    margin: 0;
    padding: 0;
}
body {
    /*设计背景图片*/
    background: url("../image/bg.jpg");
    /*背景图片跟随缩放*/
    background-size: cover;
}
```

#### 2.设计面板样式

- 设计面板背景颜色

  ```css
  /*面板*/
  #panel {
      background-color: white;
  }
  ```

- 改变面板标签类型为：行内块级标签

  ```css
  /*面板*/
  #panel {
      ...
      /*改变标签类型*/
      display: inline-block;
  }
  ```

- 面板居中显示，面板的子标签靠左

  ```css
  body {
      ...
      /*面板居中*/
      text-align: center;
  }
  /*面板*/
  #panel {
      ...
      /*靠左*/
      text-align: left;
  }
  ```

- 设计面板的上边距

  ```css
  /*面板*/
  #panel {
      ...
      /*上边距*/
      margin-top: 100px;
  }
  ```

  ​

- 设计面板的内边距

  ```css
  /*面板*/
  #panel {
      ...
      /*内边距*/
      padding: 20px;
  }
  ```

- 设计面板的圆角

  ```css
  /*面板*/
  #panel {
      ...
      /*圆角*/
      border-radius: 5px; 
  }
  ```

- 设计面板的快阴影

  ```css
  /*面板*/
  #panel {
      ...
      /*块阴影效果: 0 0 代表是四周都要给阴影，70是阴影的范围*/
      box-shadow: 0 0 70px white;
  }
  ```

  ​

#### 3.面板头部样式

```css
#panel-top {
    /*水平居中*/
    text-align: center;
    /*外边距*/
    margin-bottom: 15px;
    /*下边框*/
    border-bottom: 1px solid #dddddd;
    /*内边距*/
    padding-bottom: 15px;

    /*字体的颜色,h2会继承该字体颜色*/
    color: gray;
}
```

#### 4.面板中间输入框样式

- 设计用户名与密码盒子之间的间距和高度

  ```css
  #panel-center .user-pwd {
      background-color: red;
      /*用户与密码之间的间距*/
      margin-bottom: 15px;
      height: 38px;
  }
  ```

- 定位用户名与密码左边的图片

  ```css
  #panel-center .user-pwd {
      ...
      /*定位：父相*/
      position: relative;
  }
  #panel-center .user-pwd img{
      /*定位:子绝*/
      position: absolute;
      left: 6px;
      top:5px;
  }
  ```

- 设计输入框的宽高

  ```css
  #panel-center .user-pwd input{
      width: 100%;
      height:100%;
  }
  ```

  ​

- 修改盒子默认大小的计算方式

  ```css
  #panel-center .user-pwd input{
      /*盒子大小的计算方式*/
      box-sizing: border-box;
  }
  ```

  ​

- 设计输入框内边距，圆角和边界

  ```css
  #panel-center .user-pwd input{
      padding-left: 38px;
      border-radius: 3px;
      border: 1px solid #dddddd;
  }
  ```

- 设计输入框聚焦时样式

  ```css
  #panel-center .user-pwd input:focus {
      /*去掉外边框*/
      outline: none;
      /*外边框*/
      border: 1px solid orange;
      /*阴影效果*/
      box-shadow: 0 0 5px orange;
  }
  ```

  ​

#### 5.面板中间登陆与忘记密码样式

- 忘记密码右浮动，和该面板的下边距

  ```css
  #setting .pull-rigth{
      /**右浮动*/
      float: right;
  }
  #setting{
      /**下边距*/
      margin-bottom: 10px;
  }
  ```

- 统一字体颜色 ,去掉下划线和字体大小

  ```css
  #setting a{
      color: darkgrey;
      /*去除下划线*/
      text-decoration: none;
      font-size: 13px;
  }
  ```

  ​

#### 6.面板中间登陆样式

```css
#btn-login{
    width: 100%;
    height: 36px;
    background-color: orange;
    /*边框*/
    border: 0px;
    margin-bottom: 15px;
    /*圆角*/
    border-radius: 5px;
    color: white;
    font-size: 16px;
}
/*聚焦时*/
#btn-login:focus{
    /*去除外边框*/
    outline: none;
}
```

#### 7.面板中间注册样式

```
#reg{
    /*水平居中*/
    text-align: center;
    margin-bottom: 15px;
}

#reg a{
    /*去除下划线*/
    text-decoration: none;
    color: orange;
    font-size: 15px;
}
```

#### 8.面板尾部样式

- 设计尾部面板和图片的高度

  ```
  #panel-bottom{
      height: 50px;
  }

  #panel-bottom img{
      height: 40px;
  }
  ```

  ​

- 设计文字垂直居中

  ```
  #panel-bottom{
      ...
      /*文字垂直居中*/
      line-height: 50px;
  }
  ```

  ​

- 设计图片垂直居中

  ```
  #panel-bottom img{
         ....
      /*图片垂直居中*/
      vertical-align: middle; 
  }
  ```



## 5.宠物店..

#### 1.新建一个项目并引入样式



#### 2.搭建整体框架



#### 3.设计背景样式

```
*{
    margin: 0;
    padding: 0;
}
body{
    /*设计背景，平铺效果*/
    background: url("../image/pattern.gif");
}
```

#### 4.设计头部高度和背景

```
#top{
    background-color: red;
    height: 3px;
}
```



#### 5.实现头部导航栏的内容和结构

home   about    service    gallery    contact   5





#### 6.设计头部导航栏的样式




- 设计a标签的样式

  ```
  a{
      color: white;
      /*去掉下划线*/
      text-decoration: none;
  }
  ```

- 清楚li标签的圆点

  ```
  ul{
      /*清楚圆点*/
      list-style: none;
  }
  ```

- 改变标签类型

  ```
  #nav ul li{
      /*改变标签类型*/
      display: inline-block;
  }
  ```

- 让标签居中

  ```
  #nav{
      /*让子标签居中*/
      text-align: center;
  }
  ```

- 设计a标签的宽高，字体大小，改变a标签的类型

  ```
  #nav ul li a {
      height: 40px;
      width: 200px;

      /*改变标签类型*/
      display: inline-block;
      font-size: 30px;
  }
  ```

- 设计文字垂直居中

  ```
  #nav ul li a {
      ...
      /*垂直居中*/
      line-height: 40px;
  }
  ```

- 设计默认第一条item选中

  1.改html布局 ,给第一个a标签添加一个class="selected"

  ```
  <!--头部导航栏-->
     <div id="nav">
          <ul>
              <!--添加一个-->
              <li><a href="" class="selected">home</a></li>
              <li><a href="">about</a></li>
              <li><a href="">service</a></li>
              <li><a href="">gallery</a></li>
              <li><a href="">contact</a></li>
          </ul>
     </div>
  ```

  2.设计样式

  ```
  #nav ul li a.selected {
      background-color: white;
      color: black;
  }
  ```

- 给a标签添加伪类

  ```
  #nav ul li a:hover{
      background-color: white;
      color: black;
  }
  ```

- 设计a标签的外边距

  ```
  #nav ul li a {
      /*外边框*/
      margin: 0 8px 8px 0;
  }
  ```

  ​

  ​

#### 7.导入字体样式

css导入自定义字体  :  http://blog.youkuaiyun.com/qq_17034925/article/details/53585153

```
/*导入字体*/
@font-face {
    font-family: BebasNeue-webfont;   /**字体的名称*/
    src: url('../fonts/BebasNeue-webfont.ttf');   /**字体文件的位置*/
}

body{
    /*应用字体*/
    font-family: BebasNeue-webfont;
}
```



#### 8.实现中间列表内容和结构





#### 9.设计中间列表样式

- 修改love标签类型，背景颜色，宽度和重写父亲的字体

  ```
  #content .love{
      background-color: white;
      /*该表标签类型*/
      display: inline-block;
      /*给图片宽度*/
      width: 382px;
      /*重新设计字体样式*/
      font-family: sans-serif;
  }
  ```

  ​

- 设计文字上下10px间距和首行缩进

  ```
  #content .love p{
      /*上下间距*/
      margin: 10px 0;
      /*首行缩进*/
      text-indent: 28px;
  }
  ```

- 设计read more的样式

  ```

  #content .love button{
      width: 120px;
      height: 40px;
      font-size: 23px;
      color: #fff;

      /*去除边框*/
      border: 0;
      /*设计背景*/
      background-color: orange;
      /*圆角*/
      border-radius: 5px;
  }
  ```

- 给read more 添加伪类

  ```
  #content .love button:hover{
      background-color: black;
      color: white;
  }
  ```

#### 10.实现多列表的内容和结构

复制多个item





#### 11.设计列表的样式

```
#content{
    /*整个列表居中*/
    text-align: center;
    margin-top: 100px;
    background-color: white;
}


#content .love{
    ...
    /*重写父亲的属性*/
    text-align: left;
    /*设计盒子的间距*/
    margin: 20px;
}
```



#### 12.实现底部的内容和结构



#### 12.设计底部的样式

```

#footer{
    /*标签居中*/
    text-align: center;
    margin: 20px 0;
}
#footer ul li {
    /*该表标签的类型*/
    display: inline-block;
}

#footer ul li img{
    /*图片之间的间距*/
    margin: 5px 5px;
}

#footer ul li img:hover {
    /*设计透明度*/
    opacity: 0.5;
}

#footer h2{
    color: white;
}
```





#### 13.响应性（自适应）布局

```
/*监听设备屏幕的最大值*/
@media screen and (max-width: 1092px){
    /*如果屏幕设备的最大宽度等于1092px时，使用下面的样式*/
    #nav ul li a {
        width: 150px;
        font-size: 25px;
    }

}

/*监听设备屏幕的最大值*/
@media screen and (max-width: 860px){
    /*如果屏幕设备的最大宽度等于860px时，使用下面的样式*/
    #nav ul li a {
        width: 90px;
        font-size: 20px;
    }

}

/*监听设备屏幕的最大值*/
@media screen and (max-width: 546px){
    /*如果屏幕设备的最大宽度等于546px时，使用下面的样式*/
    #nav ul li a {
        width: 70px;
        font-size: 15px;
    }

    #content{
        margin-top: 60px;
    }

    #content .love{
        width: 360px;
    }

}
```



## 6.初识BootStrap

### 6.1什么是BootStarp

[Bootstrap](http://www.bootcss.com/)是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目

### 6.2项目集成BootStrap





### 6.3使用BootStrap

- 使用BootStrap中的样式控制button的样式



- 使用自己的样式控制button的样式



- 使用BootStrap 进度条 组件

  

- 使用BootStrap  中的文字图标  组件






## 8.总结：


1. CSS布局：
2. 标签的居中：
3. 百度首页：
4. 登陆界面：
5. 宠物店：
6. BootStrap入门：