pythonav资源分享

本节课程主要包含两部分内容：上节作业小米商城讲解 和 CSS样式补充。

### 3.1 讲解：小米商城头部页面

练习题参考源代码提取地址，如链接失效请联系 武沛齐 获取：

```
链接: https://pan.baidu.com/s/11IX2NAxdo2yvBYdhy-ME-Q
提取码: yqeq
```

注意：由还没有讲 `background`属性，所以 logo 部分可暂用图片实现。

### 3.2 CSS样式

本节继续学习CSS常见样式。

#### 3.2.1 border 边框

用于给标签设置边框。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        div{
            height: 40px;
            width: 400px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid #333333;"></div>
    <div style="border: 1px solid #333333;"></div>
    <div style="border: 2px solid #333333;"></div>
    <div style="border: 1px dotted red;"></div>
    <div style="border: 1px dotted goldenrod;"></div>
    <div style="border: 3px dotted goldenrod;border-right: 0"></div>
</body>
</html>
```

**扩展**：`border-radius`也可以设置圆角边框。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        div {
            height: 40px;
            width: 400px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div style="border: 2px solid #333333;border-radius: 10px;"></div>
    <div style="border: 1px solid #333333;border-bottom-right-radius: 20px;"></div>
    <div style="border: 1px solid #333333;border-bottom-right-radius: 20px;border-top-left-radius: 20px;"></div>
    <div style="border: 1px solid #333333;width: 100px;height: 100px;border-radius: 30px;"></div>
    <div style="border: 2px solid red;width: 80px;height: 80px;border-radius: 50%;"></div>
</body>
</html>
```

##### 练习：实现小米商城闪购

仅需要实现布局及顶部变宽即可，内部细节不需要实现。

#### 3.2.2 background 背景

background用于设置标签背景，关于background的常用功能有：

- `background-color`，设置背景颜色
- `backgroud-imgage`，设置背景图片
- `background-repeat`，背景图片如何重复
- `background-postion`，背景图片位置

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        .search {
            display: inline-block;width: 40px;height: 40px;
            border: 1px solid #9d9d9d;
            background-image: url("https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_sousuo1.adc352a.png");
            background-size: 16px 16px;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }

.car {
            display: inline-block;width: 32px;height: 32px;
            border: 1px solid #9d9d9d;
            background-image: url("https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_5.png");
            background-repeat: no-repeat;
            background-position: -105px -110px;
        }

.phone {
            display: inline-block;width: 24px;height: 24px;
            border: 1px solid #9d9d9d;
            background-image: url("https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_5.png");
            background-repeat: no-repeat;
            background-position: -154px -176px;
        }
    </style>
</head>
<body>
<a class="search"></a>
<a class="car"></a>
<a class="phone"></a>
</body>
</html>
```

#####  练习：实现小米商城logo

小米商城中的logo是基于背景图片实现。

#### 3.2.3 cursor 光标

cursor指鼠标放在标签上之后显示的形状。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
</head>
<body>
    <a href="#">你是谁？</a>
    <div>我是你永远的得不到的爸爸。</div>
    <div style='cursor: pointer;'>我去你麻辣个鸡。</div>
    <div style='cursor: help;'>你是个傻吊吗？。</div>
    <div style='cursor: move;'>不，我是个傻爹？。</div>
</body>
</html>
```

#### 3.2.5 position 定位

position用于对屏幕上的标签进行定位，定位相关知识点可以分为两种：

- `position:fixed`，生成绝对定位的元素，相对于浏览器窗口进行定位。例如最常见的广告位和返回顶部，都是基于它来实现。

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>CSS学习</title>
      <style>
          body{
              margin: 0;
          }
          .back-top{
              width: 45px;
              height: 45px;
              border: 1px solid #dddddd;
              background-color: white;
              position: fixed;
              right: 2px;
              bottom: 100px;
              font-size: 12px;
              text-align: center;
              color: #757575;
          }
          .back-top img{
              display: block;
              width: 20px;
              margin: 3px auto;
          }
      </style>
  </head>
  <body>
      <div style="height: 48px;background-color: black"></div>
      <div style="height: 500px;background-color: #f5f5f5;"></div>
      <div style="height: 500px;background-color: white;"></div>
      <div style="height: 500px;background-color: #f5f5f5;"></div>
  
      <div class="back-top">
          <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_backtop.png" alt="">
          回顶部
      </div>
  </body>
  </html>
  ```

- `position:absolute` ，生成绝对定位的元素，相对于特定第一个父元素进行定位，常与`position:relative`结课使用。例如：想要让某标签相对某指定标签位置显示。

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>小米商城</title>
      <link rel="shortcut icon" href="img/favicon.ico">
      <style>
  
          body {
              margin: 0;
              font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
          }
  
          .container {
              width: 1190px;
              margin: 0 auto;
          }
  
          .left {
              float: left;
          }
  
          .right {
              float: right;
          }
  
          .header {
              height: 40px;
              line-height: 40px;
              background-color: #333;
              color: #b0b0b0;
              font-size: 12px;
          }
  
          .header .menus ul {
              list-style: none;
              padding: 0;
              margin: 0;
          }
  
          .header .menus ul li {
              float: left;
          }
  
          .header .menus a, .header .account a, .header .car a {
              text-decoration: none;
              display: inline-block;
              padding: 0 5px;
          }
  
          .header .menus .app {
              position: relative;
          }
  
          .header .menus .app .download {
              padding: 10px;
              background-color: white;
              border: 1px solid #dddddd;
              position: absolute;
              left: 5px;
              top: 40px;
          }
  
          .header .menus .app .download img {
              display: block;
              width: 80px;
              height: 80px;
          }
  
          .header .menus .app .download div {
              margin-top: 5px;
              line-height: 20px;
              text-align: center;
          }
  
          .header .car a {
              display: inline-block;
              height: 40px;
              padding: 0 15px;
              margin-left: 20px;
              background-color: #424242;
          }
      </style>
  </head>
  <body>
  <div class="header">
      <div class="container">
          <div class="menus">
              <ul>
                  <li><a>小米商城</a></li>
                  <li><a>MIUI</a></li>
                  <li><a>IoT</a></li>
                  <li><a>云服务</a></li>
                  <li class="app">
                      <a>下载app</a>
                      <div class="download">
                          <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png" alt="">
                          <div>快来扫码下载</div>
                      </div>
                  </li>
                  <li><a>规则协议</a></li>
              </ul>
          </div>
          <div class="car right"><a>购物车（0）</a></div>
  
          <div class="account right">
              <a>登录</a>
              <a>注册</a>
              <a>消息通知</a>
          </div>
          <div style="clear: both;"></div>
      </div>
  </div>
  
  </body>
  </html>
  ```

**总结**：如果在使用absolute定位时，找不到特定的父级标签，absolute根据整个<span style="color:red;">页面</span>大小的进行定位。

- fixed，只能根据浏览器窗口进行定位，将标签固定在浏览器窗口的某个位置。
- absolute，可结合relative实现相对定位；也可单独使用，将标签固定页面的某个位置。

##### 扩展应用：后台管理布局

position中的定位也常用于后台管理布局。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        body {
            margin: 0;
        }

.header {
            height: 48px;
            background-color: #499ef3;
        }
        .body .menu{
            position: fixed; 
            top: 48px;
            left: 0;
            bottom: 0;
            width: 220px;
            border-right: 1px solid #dddddd;
            overflow: scroll;
        }
        .body .content{
            position: fixed; 
            top: 48px;
            right: 0;
            bottom: 0;
            left: 225px;
            /* 超出范围的话，出现滚轮 */
            overflow: scroll;
        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="body">
    <div class="menu"></div>
    <div class="content"></div>
</div>
</body>
</html>
```

##### 练习：小米商城扫码&返回顶部

#### 3.2.4 opacity 透明度

给标签设置透明度，例如：常见的加载、登录框等显示都是基于它实现。

实现思路：

- 基于z-index属性把页面分为三层：最底层是文章、中间层是黑色遮罩、最上层是登录框。

- 为中间的黑色遮罩设置透明度，否则无法看到最底层，透明度值范围：0~1，越大越不透明，例如：

```css
  filter:alpha(opacity=50); /* IE */
  -moz-opacity:0.5; /* 老版Mozilla */
  -khtml-opacity:0.5; /* 老版Safari */
  opacity: 0.5; /* 支持opacity的浏览器*/
  ```

##### 案例：对话框示例代码

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .container{
            width: 980px;
            margin: 0 auto;
        }
        .header{
            height: 48px;
            background-color: #499ef3;
        }

.shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.7;
            
        }

.login{
            width: 400px;
            height: 300px;
            background-color: white;
            border: 1px solid #dddddd;
            position: fixed;
            top: 60px;
            left: 50%;
            margin-left: -200px;
        }
    </style>
</head>
<body>

<div class="shade"></div>

<div class="login">
        <h2 style="text-align: center">用户登录</h2>
    </div>
</body>
</html>
```

#### 3.2.6 hover 伪类

hover伪类作用：当鼠标放在标签上时，可以能够设置一些样式。

- 示例1：鼠标放在标签上方，标签特殊显示。
  <img src="/media/uploads/2019/front/image-20191027140130017.png" alt="image-20191027140130017" style="zoom:30%;" />

- 示例2：鼠标放在标签上方，显示额外菜单。
  <img src="/media/uploads/2019/front/image-20191027140519182.png" alt="image-20191027140519182" style="zoom:33%;" />

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>小米商城</title>
      <link rel="shortcut icon" href="img/favicon.ico">
      <style>
  
          body {
              margin: 0;
              font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
          }
  
          .container {
              width: 1190px;
              margin: 0 auto;
          }
  
          .left {
              float: left;
          }
  
          .right {
              float: right;
          }
  
          .header {
              height: 40px;
              line-height: 40px;
              background-color: #333;
              color: #b0b0b0;
              font-size: 12px;
          }
  
          .header .menus ul {
              list-style: none;
              padding: 0;
              margin: 0;
          }
  
          .header .menus ul li {
              float: left;
          }
  
          .header .menus a, .header .account a, .header .car a {
              text-decoration: none;
              display: inline-block;
              padding: 0 5px;
          }
  
          .header .menus .app {
              position: relative;
          }
  
          .header .menus .app .download {
              padding: 10px;
              background-color: white;
              border: 1px solid #dddddd;
              position: absolute;
              left: 5px;
              top: 40px;
              display: none;
          }
  
          .header .menus .app .download img {
              display: block;
              width: 80px;
              height: 80px;
          }
  
          .header .menus .app .download div {
              margin-top: 5px;
              line-height: 20px;
              text-align: center;
          }
  
          .header .car a {
              display: inline-block;
              height: 40px;
              padding: 0 15px;
              margin-left: 20px;
              background-color: #424242;
          }
  
          .header .menus .app:hover .download{
              display: block;
          }
  
      </style>
  </head>
  <body>
  <div class="header">
      <div class="container">
          <div class="menus">
              <ul>
                  <li><a>小米商城</a></li>
                  <li><a>MIUI</a></li>
                  <li><a>IoT</a></li>
                  <li><a>云服务</a></li>
                  <li class="app">
                      <a>下载app</a>
                      <div class="download">
                          <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png" alt="">
                          <div>快来扫码下载</div>
                      </div>
                  </li>
                  <li><a>规则协议</a></li>
              </ul>
          </div>
          <div class="car right"><a>购物车（0）</a></div>
  
          <div class="account right">
              <a>登录</a>
              <a>注册</a>
              <a>消息通知</a>
          </div>
          <div style="clear: both;"></div>
      </div>
  </div>
  
  </body>
  </html>
  ```

#### 3.2.7 after 伪元素

after伪元素作用：在自己内部标签底部设置元素。

- 示例1：在标签后面设置文字。

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>CSS学习</title>
      <link rel="shortcut icon" href="img/favicon.ico">
      <style>
          li:after{
              content: '戴帽子';
              color: green;
              font-weight: 500;
          }
      </style>
  </head>
  <body>
      <ul>
          <li>王宝强</li>
          <li>陈羽凡</li>
          <li>贾乃亮</li>
      </ul>
  </body>
  </html>
  ```

- 示例2：在标签后添加标签，解决float脱离文档流的问题，不用再额外手动添加标签了。
  学习after伪元素之后，再处理脱离文档流的问题时候，只需要为父标签应用 `clearfix`样式即可（严重推荐）。

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>CSS学习</title>
      <style>
          .clearfix:after{
              content: '';
              display: block;
              clear: both;
          }
  
          .row{
              background-color: pink;
          }
          .item{
              float: left;
              width: 100px;
              height: 50px;
              border: 1px solid red;
          }
  
      </style>
  </head>
  <body>
      <div class="row clearfix">
          <div class="item"></div>
          <div class="item"></div>
      </div>
  
      <div style="background-color: goldenrod;" class="clearfix">
          <div style="float: left;">向左走</div>
          <div style="float: right;">向右走</div>
      </div>
  
  </body>
  </html>
  ```

### 3.3 今日作业

实现小米商城首页所有功能（无需实现最底部功能）。

http://www.mi.com

用户评论

登录或注册后才能发表评论