Python Web开发记录 Day2：CSS（样式表语言，样式）

名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪）
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）

目录

二、CSS
1、CSS-初始入门
①快速了解
②CSS应用方式
③选择器
④样式

2、CSS-常见样式和案例
①浮动
②内边距
③外边距

3、CSS-样式和小米商城
①CSS案例
②小结

4、CSS-案例：小米商城新品部分
①案例：推荐区域
②案例实现

5、CSS-边框和背景色
①:hover（伪类）
②:after（伪元素）
③position属性
④relative和absolute定位
⑤border属性
⑥background-color属性

二、CSS

1、CSS-初始入门

HTML vs CSS

1️⃣ 超文本标记语言HTML，使用多种“标签”来描述网页的结构和内容。(网页扩展名为.html)

在这里插入图片描述

2️⃣ 层叠样式表CSS，从审美角度来描述网页的样式。(文件扩展名为.css)
在这里插入图片描述

CSS，专门用来”美化“标签，HTML如果是"身体"，CSS就是在身体外的各种装饰，可以美化HTML写出来的"身体"。

基础CSS，写简单页面 & 看懂 & 修改；
模块，调整和修改。

①快速了解

CSS是一种用于描述HTML或XML（包括各种XML语言，如SVG或XHTML）文档的样式的语言。CSS描述了这些文档在屏幕、纸张、语音阅读器等媒介上的呈现方式。

1.基础概念

选择器（Selectors）：用于选择你想要样式化的HTML元素。
属性（Properties）：定义了如何样式化元素。
值（Values）：属性的具体设置。
声明（Declarations）：由属性和值组成，如 color: red;。
声明块（Declaration Blocks）：用大括号 {} 包围的一系列声明。
规则集（Rule Sets）：由选择器和声明块组成。

2.基本语法

selector {
  property: value;
}

示例

p {
  color: red;
  font-size: 14px;
}

这个示例会将所有 <p>（段落）元素的文字颜色设置为红色，并且字体大小为14像素。

3.常用属性

color: 文本颜色
background-color: 背景色
font-size: 字体大小
border: 边框
margin: 外边距
padding: 内边距
width 和 height: 宽度和高度

<img src="..." style="height:100px"/>

<div style="color:red;">中国联通</div>

4.响应式设计

媒体查询（Media Queries）：允许你根据不同的屏幕尺寸或设备特性应用不同的样式。

示例

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

②CSS应用方式

1.在标签上应用

直接在标签里进行添加。

<img src="..." style="height:100px"/>

<div style="color:red;">中国联通</div>

2.在head标签中写style标签( * )

在头部head标签中添加style标签，在style标签中来进行添加CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
      <form method="post" action="/login">
          用户名：<input type="text" name="username">
          密码：<input type="text" name="password">
          <input type="submit" value="提交">
      </form>
</body>
</html>

3.写到文件中( * )

写到文件里，直接使用文件里的样式。

.c1{
   height:100px; 
}

.c2{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" href="common.css" />
</head>
<body>
    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
</body>
</html>

案例：flask中的应用（登录注册）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/commons.css">
</head>
<body>
  <h1 class="xx">用户注册</h1>

  <form action="/register" method="post">
  <div>
    用户名: <input type="text" name="user">
  </div>

  <div>
    密码: <input type="password" name="pwd">
  </div>

  <div>
    <input type="submit" value="注册">
  </div>

  </form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/commons.css">
</head>
<body>
  <h1 class="xx">用户注册</h1>

  <form action="/register" method="post">
  <div>
    用户名: <input type="text" name="user">
  </div>

  <div>
    密码: <input type="password" name="pwd">
  </div>

  <div>
    <input type="submit" value="注册">
  </div>

  </form>
</body>
</html>

.xx{
    color: green;
}

问题：用Flask框架开发有些不便之处：

每次都需要重启
规定有些文件必须要放在特定的文件夹
新创建一个页面
- 函数
- HTML文件

有没有一种方式，可以快速编写前端代码及查看响应效果，最后将页面集成到Flask中？

Pycharm为我们提供了一种非常便捷开发前端页面的工具，鼠标滑到界面右侧即可显示，打开此处页面可以实时地看到代码更新所带来的页面变化。

③选择器

在CSS中，选择器用于定位一个或多个元素，以便应用样式。

1.ID选择器

通过HTML元素的id属性选择特定元素。ID是唯一的，在一个HTML页面中，每个ID只能出现一次。ID选择器在CSS中以#字符开始，后跟ID的名称。例如，#navbar选择具有id="navbar"的元素。

#c1{
    
}

<div id='c1'>
    
</div>

2.类选择器（使用较多）

通过HTML元素的class属性选择一个或多个元素。同一类可以应用于页面上的多个元素，一个元素也可以有多个类。类选择器在CSS中以.字符开始，后跟类的名称。例如，.button选择所有具有class="button"的元素。

.c1{

}

<div class='c1'>
    
</div>

3.标签选择器（使用较多）

又称为元素选择器，通过元素名称选择所有特定类型的元素。例如，div选择页面上的所有div元素。

div{

}

<div>
    xxx
</div>

4.属性选择器

根据元素的属性及属性值来选择元素。它们用方括号[]表示，内部可以指定属性名，也可以指定属性名和值。例如，[type=“text”]选择所有type属性值为text的元素。

input[type='text']{
	border:1px solid red;
}

.v1[xx="456"]{
	color: gold;
}

<input type="text">
<input type="password">

<div class="v1" xx="123">
    s
</div>

<div class="v1" xx="456">
    f
</div>

<div class="v1" xx="999">
    a
</div>

在这里插入图片描述

5.后代选择器（使用较多）

用于选择一个元素的后代元素，即位于指定元素内部的元素，不论是直接还是间接后代。后代选择器通过空格分隔父元素和子元素的选择器来表示。例如，div p选择所有位于div元素内部的p元素。

      .yy li{
          color: pink;
      }

      .yy > a{
          color: dodgerblue;
      }

<div class="yy">
            <a>百度</a>
            <div>
                <a>谷歌</a>
            </div>
            <ul>
                <li>美国</li>
                <li>日本</li>
                <li>韩国</li>
            </ul>
      </div>

在这里插入图片描述

关于选择器：

日常使用多少：
多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器

关于多个样式和覆盖的问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .c1{
        color: red !important;
        border: 1px solid red;
      }
      .c2{
        font-size: 28px;
        color: green;
      }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

在这里插入图片描述

④样式

1.高度和宽度

.c1{
	/*height高度 width宽度*/
    height:300px;
    width:500px;
}

注意：

宽度，支持百分比。
行内标签：默认无效
块级标签：默认有效（霸道，右侧区域空白，也不给你占用）

2.块级和行内标签

块级
行内
CSS样式：标签-> display:inline-block

示例1：行内+块级特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;

            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>
    <span class="c1">联通</span>
    <span class="c1">联通</span>
    <span class="c1">联通</span>
</body>
</html>

在这里插入图片描述

示例2：块级和行内标签的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div style="display: inline;">中国</div>
    <span style="display: block;">联通</span>
</body>
</html>

在这里插入图片描述

注意：块级+跨级和行内

3.字体设置

颜色 color
大小 font-size
加粗 font-weight
字体格式 font-family

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .c1{
        color: #66CDAA;
        font-size: 50px;
        font-weight: 500;
        font-family:"Microsoft Yahei";
      }
    </style>
</head>
<body>
    <div class="c1">中国联通</div>
    <div>中国移动</div>
</body>
</html>

在这里插入图片描述

4.文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;

            text-align: center; /*水平方向居中*/
            line-height: 59px; /*垂直方向居中*/
        }
    </style>
</head>
<body>
      <div class="c1">张三</div>
</body>
</html>

在这里插入图片描述

2、CSS-常见样式和案例

①浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <div>
        <span>左边</span>
        <span style="float: right">右边</span>
      </div>
</body>
</html>

在这里插入图片描述

div默认块级标签（比较霸道），如果浮动起来，就不一样了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
          float: left;
          width: 280px;
          height: 170px;
          border: 1px solid red;
        }
    </style>
</head>
<body>
      <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
</body>
</html>

在这里插入图片描述

可是如果你让标签浮动起来之后，就会脱离文档流，那该怎么解决呢？

可以通过添加这个语句<div style="clear: both"></div>解决。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
          float: left;
          width: 280px;
          height: 170px;
          border: 1px solid red;
        }
    </style>
</head>
<body>
      <div style="background-color: dodgerblue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both"></div>
      </div>
      <div>你好</div>

</body>
</html>

在这里插入图片描述

为什么添加<div style="clear: both"></div>能够解决呢？

在HTML中，<div style="clear: both"></div> 用于控制布局，特别是在使用浮动（float）元素时。浮动元素会脱离文档流的正常排列，可能导致布局混乱。clear 属性用来清除元素的左侧、右侧或两侧的浮动，确保不会有浮动元素影响到它的布局。

具体来说，clear: both; 表示清除前面元素的左右浮动，使得接下来的内容显示在浮动元素的下方，而不是旁边或者覆盖浮动元素。这个技术常用于确保父容器能够包含其内部浮动的子元素，防止布局错乱。

例如，如果你有几个浮动的 <div> 元素用于创建并排的布局，之后你希望接下来的内容不受这些浮动元素的影响，显示在它们下面，那么可以在浮动元素之后使用 <div style="clear: both"></div> 来实现这个布局需求。这样，它会创建一个不可见的分界线，确保浮动不会影响到后续的内容布局。

②内边距

内部距离，自己内部的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .outer{
           border: 1px solid red;
           height: 200px;
           width: 200px;
           padding-top: 20px;
           padding-left: 20px;
           padding-right: 20px;
           padding-bottom: 20px;
         }
    </style>
</head>
<body>
      <div class="outer">
          <div style="background-color: gold">听妈妈的话</div>
          <div>
            小朋友你是否有很多问号？
          </div>
      </div>
</body>
</html>

③外边距

外部距离，自己与别人之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <div style="height: 200px;background-color: dodgerblue"></div>
      <div style="background-color: red;height: 100px; margin-top: 20px"></div>
</body>
</html>

综合案例：小米商城

案例1 小米商城顶部

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

        .header{
              background: #333;
        }

        .container{
            width: 1226px;
            margin: 0 auto;
        }

        .header .menu{
          float: left;
          color: white;
          height: 38px;
          line-height: 38px;
        }

        .header .account{
          float: right;
          color: white;
          height: 38px;
          line-height: 38px;
        }

        .header a{
                color: #b0b0b0;
                line-height: 40px;
                display: inline-block;
                font-size: 12px;
                margin-right: 10px;
        }
    </style>
</head>
<body>
      <div class="header">
          <div class="container">
              <div class="menu">
                  <a>小米官网</a>
                  <a>小米商城</a>
                  <a>小米澎湃OS</a>
                  <a>云服务</a>
                  <a>小爱开放平台</a>
                  <a>下载app</a>
              </div>
              <div class="account">
                  <a>登录</a>
                  <a>注册</a>
                  <a>消息通知</a>
              </div>
              <div style="clear:both"></div>
          </div>
      </div>
</body>
</html>

小结

body标签，默认有一个边距，会造成页面四周有白色间隙，如何去除？

body{
	margin:0;
}

内容居中

文本居中

<div style="width: 200px; background-color:pink; text-align: center">张三</div>

区域居中，自己要有宽度 + margin-left:auto; margin-right:auto;

.container{
	width: 980px;
 	margin: 0 auto;
}

<div class="container">
    asddqsadas
</div>

父亲没有高度或没有宽度，被孩子支撑起来。
如果存在浮动，要加上<div style="clear:both"></div>
如果想用别人实现的样式
关于布局，不知道如何下手的话，学会分析页面的布局

3、CSS-样式和小米商城

案例应用（利用之前所学知识）
CSS知识点
模版 + CSS + 构建页面

①CSS案例

1.内容回顾

HTML标签

固定格式，记住标签长什么样，例如：
h / div / span / a / img / ul / li / table / input / form

CSS样式

引用CSS：标签、头部、文件

.xx{
	...
}

<div class='xx xx'></div>

高度height / 宽度width /块级 or 行内 or 块级行内 / 浮动float / 字体font / 文字对齐方式text-align / 内边距 / 外边距

关于边距：
	- body
	- 区域居中

页面布局

根据你看到的页面把他们划分成很多小的区域，再去填充样式。

2.案例：二级菜单

a.分析布局

b.搭建骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        .sub-header{
            height: 100px;
            background-color: #b0b0b0;
        }

        .container{
            width: 1128px;
            margin: 0 auto;
        }

        .sub-header .ht{
            height: 100px;

        }
        .sub-header .logo{
            width: 234px;
            float: left;
        }

        .sub-header .menu-list{
            float: left;
        }

        .sub-header .search{
            float: right;
        }
    </style>
</head>
<body>
      <div class="sub-header">
        <div class="container">
            <div class="ht logo">1</div>
            <div class="ht menu-list">2</div>
            <div class="ht search">3</div>
            <div style="clear: both"></div>
        </div>
      </div>
      <div>
          <div class="logo"></div>
      </div>
</body>
</html>

c.完善logo区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        .sub-header{
            height: 100px;
            background-color: #b0b0b0;
        }

        .container{
            width: 1128px;
            margin: 0 auto;
        }

        .sub-header .ht{
            height: 100px;

        }
        .sub-header .logo{
            width: 234px;
            float: left;
            border: 1px solid red;
            line-height: 100px;
        }

        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block
        }

        .sub-header .logo a img{
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list{
            float: left;
        }

        .sub-header .search{
            float: right;
        }
    </style>
</head>
<body>
      <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <!--a,行内标签，默认设置高度、边距无效 解决：转换成块级 OR 行内&块级-->
                <a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block">
                    <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt="">
                </a>
            </div>
            <div class="ht menu-list">2</div>
            <div class="ht search">3</div>
            <div style="clear: both"></div>
        </div>
      </div>
      <div>
          <div class="logo"></div>
      </div>
</body>
</html>

在这里插入图片描述

d.布置菜单区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        .sub-header{
            height: 100px;
        }

        .container{
            width: 1128px;
            margin: 0 auto;
        }

        .sub-header .ht{
            height: 100px;

        }
        .sub-header .logo{
            width: 234px;
            float: left;

            line-height: 100px;
        }

        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block
        }

        .sub-header .logo a img{
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list{
            float: left;
            line-height: 100px;
        }

        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

        .sub-header .menu-list a:hover{
            color: #ff6700;
        }
        
        .sub-header .search{
            float: right;
        }
    </style>
</head>
<body>
      <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <!--a,行内标签，默认设置高度、边距无效 解决：转换成块级 OR 行内&块级-->
                <a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block">
                    <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt="">
                </a>
            </div>

            <div class="ht menu-list">
                <a href="https://www.mi.com/shop">Xiaomi手机</a>
                <a href="https://www.mi.com/shop">Redmi手机</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">电笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
                <a href="https://www.mi.com/shop">路由器</a>
            </div>
            <div class="ht search">3</div>
            <div style="clear: both"></div>
        </div>
      </div>
      <div>
          <div class="logo"></div>
      </div>
</body>
</html>

在这里插入图片描述

3.综合案例：顶部菜单+二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米顶部</title>
    <style>
        body{
          margin: 0;
        }
        .header{
              background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
          float: left;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header .account{
          float: right;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header a{
                color: #b0b0b0;
                line-height: 40px;
                display: inline-block;
                font-size: 12px;
                margin-right: 10px;
                text-decoration: none;
        }

        .header a:hover{
            color: white;
        }

        .sub-header{
            height: 100px;
        }
        .sub-header .ht{
            height: 100px;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
            line-height: 100px;
        }
        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block;
        }
        .sub-header .logo a img{
            height: 56px;
            width: 56px;
        }
        .sub-header .menu-list{
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .sub-header .menu-list a:hover{
            color: #ff6700;
        }
        .sub-header .search{
            float: right;
            padding-top: 35px; /* Adjust padding to align search box as needed */
        }
        .search input[type="text"]{
                right: 51px;
                z-index: 1;
                width: 223px;
                height: 48px;
                padding: 0 10px;
                font-size: 14px;
                line-height: 48px;
                vertical-align: middle;
        }
        .search input[type="submit"]{
                right: 0;
                z-index: 2;
                width: 52px;
                height: 50px;
                font-size: 24px;
                line-height: 24px;
                background: #fff;
                color: #616161;
        }

        .search-btn {
                background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */
                border: 1px solid;
                cursor: pointer; /* 鼠标悬停时显示手形图标 */
                width: 52px;
                height: 50px;
                background-size: contain; /* 使背景图像适应按钮大小 */
                vertical-align: middle;
        }

         /*可能需要的额外样式调整*/
        .search-btn:focus {
                outline: none; /* 移除聚焦时的轮廓线 */
        }

    </style>
</head>
<body>
      <div class="header">
          <div class="container">
              <div class="menu">
                  <a href="https://www.mi.com/shop">小米官网</a>
                  <a href="https://www.mi.com/shop">小米商城</a>
                  <a href="https://www.mi.com/shop">小米澎湃OS</a>
                  <a href="https://www.mi.com/shop">云服务</a>
                  <a href="https://www.mi.com/shop">小爱开放平台</a>
                  <a href="https://www.mi.com/shop">下载app</a>
              </div>
              <div class="account">
                  <a>登录</a>
                  <a>注册</a>
                  <a>消息通知</a>
              </div>
              <div style="clear:both"></div>
          </div>
      </div>
      <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block">
                    <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt="">
                </a>
            </div>

            <div class="ht menu-list">
                <a href="https://www.mi.com/shop">Xiaomi手机</a>
                <a href="https://www.mi.com/shop">Redmi手机</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">电笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
                <a href="https://www.mi.com/shop">路由器</a>
            </div>

             <div class="ht search">
                <form action="/search" method="get">
                    <input type="text" name="q" placeholder="搜索产品" required>
                    <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont">
                </form>
            </div>

            <div style="clear: both"></div>
        </div>
      </div>
</body>
</html>

②小结

a标签是行内标签，行内标签的高度、内外边距，默认无效。
垂直方向居中
- 文本 line-height
- 图片边距
a标签默认有下划线
鼠标放上去之后hover
```
.c1:hover{
    ...
}
a:hover{
    
}
```

4、CSS-案例：小米商城新品部分

①案例：推荐区域

1.划分区域

2.搭建骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米顶部</title>
    <style>
        body{
          margin: 0;
        }
        .header{
              background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
          float: left;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header .account{
          float: right;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header a{
                color: #b0b0b0;
                line-height: 40px;
                display: inline-block;
                font-size: 12px;
                margin-right: 10px;
                text-decoration: none;
        }

        .header a:hover{
            color: white;
        }

        .sub-header{
            height: 100px;
        }
        .sub-header .ht{
            height: 100px;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
            line-height: 100px;
        }
        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block;
        }
        .sub-header .logo a img{
            height: 56px;
            width: 56px;
        }
        .sub-header .menu-list{
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .sub-header .menu-list a:hover{
            color: #ff6700;
        }
        .sub-header .search{
            float: right;
            padding-top: 35px; /* Adjust padding to align search box as needed */
        }
        .search input[type="text"]{
                right: 51px;
                z-index: 1;
                width: 223px;
                height: 48px;
                padding: 0 10px;
                font-size: 14px;
                line-height: 48px;
                vertical-align: middle;
        }
        .search input[type="submit"]{
                right: 0;
                z-index: 2;
                width: 52px;
                height: 50px;
                font-size: 24px;
                line-height: 24px;
                background: #fff;
                color: #616161;
        }

        .search-btn {
                background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */
                border: 1px solid;
                cursor: pointer; /* 鼠标悬停时显示手形图标 */
                width: 52px;
                height: 50px;
                background-size: contain; /* 使背景图像适应按钮大小 */
                vertical-align: middle;
        }

         /*可能需要的额外样式调整*/
        .search-btn:focus {
                outline: none; /* 移除聚焦时的轮廓线 */
        }

        .slider img{
            width: 1226px;
            height: 460px;
            text-align: right;
        }

    </style>
</head>
<body>
      <div class="header">
          <div class="container">
              <div class="menu">
                  <a href="https://www.mi.com/shop">小米官网</a>
                  <a href="https://www.mi.com/shop">小米商城</a>
                  <a href="https://www.mi.com/shop">小米澎湃OS</a>
                  <a href="https://www.mi.com/shop">云服务</a>
                  <a href="https://www.mi.com/shop">小爱开放平台</a>
                  <a href="https://www.mi.com/shop">下载app</a>
              </div>
              <div class="account">
                  <a>登录</a>
                  <a>注册</a>
                  <a>消息通知</a>
              </div>
              <div style="clear:both"></div>
          </div>
      </div>
      <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block">
                    <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt="">
                </a>
            </div>

            <div class="ht menu-list">
                <a href="https://www.mi.com/shop">Xiaomi手机</a>
                <a href="https://www.mi.com/shop">Redmi手机</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">电笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
                <a href="https://www.mi.com/shop">路由器</a>
            </div>

             <div class="ht search">
                <form action="/search" method="get">
                    <input type="text" name="q" placeholder="搜索产品" required>
                    <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont">
                </form>
            </div>

            <div style="clear: both"></div>
        </div>
      </div>
      <div class="slider">
          <div class="container">
              <div class="sd-img">
                  <img src="images/b1.jpg" alt="">
              </div>
          </div>
      </div>
      <div class="news">
          <div class="container">
              <div class="channel"></div>
              <div class="list-item"></div>
              <div class="list-item"></div>
              <div class="list-item"></div>
          </div>
      </div>

</body>
</html>

在这里插入图片描述

②案例实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米顶部</title>
    <style>
        body{
          margin: 0;
        }
        .header{
              background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }

        .left{
            float: left;
        }
        .header .menu{
          float: left;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header .account{
          float: right;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header a{
                color: #b0b0b0;
                line-height: 40px;
                display: inline-block;
                font-size: 12px;
                margin-right: 10px;
                text-decoration: none;
        }

        .header a:hover{
            color: white;
        }

        .sub-header{
            height: 100px;
        }
        .sub-header .ht{
            height: 100px;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
            line-height: 100px;
        }
        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block;
        }
        .sub-header .logo a img{
            height: 56px;
            width: 56px;
        }
        .sub-header .menu-list{
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .sub-header .menu-list a:hover{
            color: #ff6700;
        }
        .sub-header .search{
            float: right;
            padding-top: 35px; /* Adjust padding to align search box as needed */
        }
        .search input[type="text"]{
                right: 51px;
                z-index: 1;
                width: 223px;
                height: 48px;
                padding: 0 10px;
                font-size: 14px;
                line-height: 48px;
                vertical-align: middle;
        }
        .search input[type="submit"]{
                right: 0;
                z-index: 2;
                width: 52px;
                height: 50px;
                font-size: 24px;
                line-height: 24px;
                background: #fff;
                color: #616161;
        }

        .search-btn {
                background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */
                border: 1px solid;
                cursor: pointer; /* 鼠标悬停时显示手形图标 */
                width: 52px;
                height: 50px;
                background-size: contain; /* 使背景图像适应按钮大小 */
                vertical-align: middle;
        }

         /*可能需要的额外样式调整*/
        .search-btn:focus {
                outline: none; /* 移除聚焦时的轮廓线 */
        }

        .slider img{
            width: 1226px;
            height: 460px;
            text-align: right;
        }

        .news{
            margin-top: 14px;
        }
        .news .channel{
            width: 228px;
            height: 164px;
            background-color:#5f5750;
            padding: 3px;
        }

        .news .channel .item img{
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto 4px;
        }

        .news .channel .item{
            height: 82px;
            width: 76px;
            float: left;
            text-align: center;
        }

        .news .channel .item a{
            display: inline-block;
            font-size: 12px;
            padding-top: 18px;
            color: #ffffff;
            text-decoration: none;
            opacity: 0.7;
        }

        .news .channel .item a:hover{
            opacity: 1;
        }

        .news .list-item img{
            width: 316px;
            height: 170px;
            display: block;
            margin: 0 auto 4px;
        }
    </style>
</head>
<body>
      <div class="header">
          <div class="container">
              <div class="menu">
                  <a href="https://www.mi.com/shop">小米官网</a>
                  <a href="https://www.mi.com/shop">小米商城</a>
                  <a href="https://www.mi.com/shop">小米澎湃OS</a>
                  <a href="https://www.mi.com/shop">云服务</a>
                  <a href="https://www.mi.com/shop">小爱开放平台</a>
                  <a href="https://www.mi.com/shop">下载app</a>
              </div>
              <div class="account">
                  <a>登录</a>
                  <a>注册</a>
                  <a>消息通知</a>
              </div>
              <div style="clear:both"></div>
          </div>
      </div>
      <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block">
                    <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt="">
                </a>
            </div>

            <div class="ht menu-list">
                <a href="https://www.mi.com/shop">Xiaomi手机</a>
                <a href="https://www.mi.com/shop">Redmi手机</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">电笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
                <a href="https://www.mi.com/shop">路由器</a>
            </div>

             <div class="ht search">
                <form action="/search" method="get">
                    <input type="text" name="q" placeholder="搜索产品" required>
                    <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont">
                </form>
            </div>

            <div style="clear: both"></div>
        </div>
      </div>
      <div class="slider">
          <div class="container">
              <div class="sd-img">
                  <img src="images/b1.jpg" alt="">
              </div>
          </div>
      </div>
      <div class="news">
          <div class="container">
              <div class="channel left">
                  <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c1.png" alt="">
                          <span>保障服务</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c2.png" alt="">
                          <span>企业团购</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c3.png" alt="">
                          <span>F码通道</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c4.png" alt="">
                          <span>米粉卡</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c5.png" alt="">
                          <span>以旧换新</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c6.png" alt="">
                          <span>话费充值</span>
                      </a>
                  </div>
                  <div class="clear:both"></div>
              </div>
              <div class="list-item left" style="margin-left: 14px">
                  <img src="/images/w1.png" alt="">
              </div>
              <div class="list-item left" style="margin-left: 15px">
                  <img src="/images/w2.jpg" alt="">
              </div>
              <div class="list-item left" style="margin-left: 15px">
                  <img src="/images/w3.png" alt="">
              </div>
          </div>
      </div>

</body>
</html>

设置透明度
通过opacity来设置

opacity:0.5 /* 透明度为0.5 透明度范围：0~1 */

5、CSS-边框和背景色

①:hover（伪类）

用于定义鼠标悬停在元素上时的样式。例如，a:hover { color: red; }会使链接在鼠标悬停时变为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .c1{
          color: red;
          font-size: 18px;
      }
      
      .c1:hover{
        color: green;
        font-size: 50px;
      }
      
      .c2{
          height: 300px;
          width: 500px;
          border: 3px solid red;
      }

      .c2:hover{
          border: 3px solid green;
      }

      .download{
          display: none;
      }

      .app:hover .download{
          display: block;
      }

      .app:hover .title{
          color: yellowgreen;
      }
    </style>
</head>
<body>
      <div class="c1">联通</div>
      <div class="c2">广西</div>

      <div class="app">
          <div class="title">下载App</div>
          <div class="download">
              <img src="images/QRcode.png" alt="">
          </div>
      </div>
</body>
</html>

在这里插入图片描述

②:after（伪元素）

用于在元素的内容之后插入额外的内容。它通常与content属性一起使用。例如，p:after { content: “Read more”; }会在所有p元素的内容后添加"Read more"文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .c1:after{
        content:"大帅哥";
      }
    </style>
</head>
<body>
    <div class="c1">张三</div>
    <div class="c1">李四</div>
</body>
</html>

很重要的应用，可以清除浮动，以免脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

③position属性

用于设置元素的定位方式。它的值可以是static、relative、absolute、fixed或sticky，分别对应不同的定位行为。常用的三个方式如下：

fixed
relative
absolute

a.fixed

固定在窗口的某个位置

案例1：返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米顶部</title>
    <style>
        body{
          margin: 0;
        }
        .header{
              background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }

        .left{
            float: left;
        }
        .header .menu{
          float: left;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header .account{
          float: right;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header a{
                color: #b0b0b0;
                line-height: 40px;
                display: inline-block;
                font-size: 12px;
                margin-right: 10px;
                text-decoration: none;
        }

        .header a:hover{
            color: white;
        }

        .sub-header{
            height: 100px;
        }
        .sub-header .ht{
            height: 100px;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
            line-height: 100px;
        }
        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block;
        }
        .sub-header .logo a img{
            height: 56px;
            width: 56px;
        }
        .sub-header .menu-list{
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .sub-header .menu-list a:hover{
            color: #ff6700;
        }
        .sub-header .search{
            float: right;
            padding-top: 35px; /* Adjust padding to align search box as needed */
        }
        .search input[type="text"]{
                right: 51px;
                z-index: 1;
                width: 223px;
                height: 48px;
                padding: 0 10px;
                font-size: 14px;
                line-height: 48px;
                vertical-align: middle;
        }
        .search input[type="submit"]{
                right: 0;
                z-index: 2;
                width: 52px;
                height: 50px;
                font-size: 24px;
                line-height: 24px;
                background: #fff;
                color: #616161;
        }

        .search-btn {
                background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */
                border: 1px solid;
                cursor: pointer; /* 鼠标悬停时显示手形图标 */
                width: 52px;
                height: 50px;
                background-size: contain; /* 使背景图像适应按钮大小 */
                vertical-align: middle;
        }

         /*可能需要的额外样式调整*/
        .search-btn:focus {
                outline: none; /* 移除聚焦时的轮廓线 */
        }

        .slider img{
            width: 1226px;
            height: 460px;
            text-align: right;
        }

        .news{
            margin-top: 14px;
        }
        .news .channel{
            width: 228px;
            height: 164px;
            background-color:#5f5750;
            padding: 3px;
        }

        .news .channel .item img{
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto 4px;
        }

        .news .channel .item{
            height: 82px;
            width: 76px;
            float: left;
            text-align: center;
        }

        .news .channel .item a{
            display: inline-block;
            font-size: 12px;
            padding-top: 18px;
            color: #ffffff;
            text-decoration: none;
            opacity: 0.7;
        }

        .news .channel .item a:hover{
            opacity: 1;
        }

        .news .list-item img{
            width: 316px;
            height: 170px;
            display: block;
            margin: 0 auto 4px;
        }

        .back{
          position: fixed;
          width: 60px;
          height: 60px;
          border: 1px solid red;

          right: 10px;
          bottom: 50px;
        }
    </style>
</head>
<body>
      <div class="header">
          <div class="container">
              <div class="menu">
                  <a href="https://www.mi.com/shop">小米官网</a>
                  <a href="https://www.mi.com/shop">小米商城</a>
                  <a href="https://www.mi.com/shop">小米澎湃OS</a>
                  <a href="https://www.mi.com/shop">云服务</a>
                  <a href="https://www.mi.com/shop">小爱开放平台</a>
                  <a href="https://www.mi.com/shop">下载app</a>
              </div>
              <div class="account">
                  <a>登录</a>
                  <a>注册</a>
                  <a>消息通知</a>
              </div>
              <div style="clear:both"></div>
          </div>
      </div>
      <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block">
                    <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt="">
                </a>
            </div>

            <div class="ht menu-list">
                <a href="https://www.mi.com/shop">Xiaomi手机</a>
                <a href="https://www.mi.com/shop">Redmi手机</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">电笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
                <a href="https://www.mi.com/shop">路由器</a>
            </div>

             <div class="ht search">
                <form action="/search" method="get">
                    <input type="text" name="q" placeholder="搜索产品" required>
                    <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont">
                </form>
            </div>

            <div style="clear: both"></div>
        </div>
      </div>
      <div class="slider">
          <div class="container">
              <div class="sd-img">
                  <img src="images/b1.jpg" alt="">
              </div>
          </div>
      </div>
      <div class="news">
          <div class="container">
              <div class="channel left">
                  <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c1.png" alt="">
                          <span>保障服务</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c2.png" alt="">
                          <span>企业团购</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c3.png" alt="">
                          <span>F码通道</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c4.png" alt="">
                          <span>米粉卡</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c5.png" alt="">
                          <span>以旧换新</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c6.png" alt="">
                          <span>话费充值</span>
                      </a>
                  </div>
                  <div class="clear:both"></div>
              </div>
              <div class="list-item left" style="margin-left: 14px">
                  <img src="/images/w1.png" alt="">
              </div>
              <div class="list-item left" style="margin-left: 15px">
                  <img src="/images/w2.jpg" alt="">
              </div>
              <div class="list-item left" style="margin-left: 15px">
                  <img src="/images/w3.png" alt="">
              </div>
          </div>
      </div>

      <div style="height: 1000px;"></div>
      <div class="back"></div>
</body>
</html>

在这里插入图片描述

案例2：对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body{
        margin: 0;
      }
      .dialog{
        position: fixed;
        height: 300px;
        width: 500px;
        background-color: white;
        
        /*left: 50%;*/
        /*margin-left: -250px;*/

        left: 0;
        right: 0;
        margin: 0 auto;

        top: 200px;
        z-index: 1000;
      }
      .mask{
        background-color: black;
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        opacity: 0.7;
        z-index: 999;
      }
    </style>
</head>
<body>
      <div class="mask"></div>

      <div style="height: 1000px;">qwewqeqw</div>

      <div class="dialog"></div>
</body>
</html>

在这里插入图片描述

④relative和absolute定位

relative定位：是position属性的一个值，表示元素将相对于其正常位置进行定位。也就是说，即使你对元素应用了定位，它仍然占据原来的空间，但可以通过top、right、bottom、left属性移动位置。
absolute定位：也是position属性的一个值，表示元素相对于最近的已定位的祖先元素（不是static定位的元素）进行定位。如果没有这样的元素，则相对于文档体()元素定位。绝对定位的元素不占据文档流中的空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            margin: 100px;
            position: relative;
          }
          
          .c1 .c2{
            height: 59px;
            width: 59px;
            background-color: #00FF7F;

            position: absolute;
            right: 20px;
            bottom: 10px;
          }
    </style>
</head>
<body>
      <div class="c1">

        <div class="c2"></div>


      </div>
</body>
</html>

案例1：小米商城下载app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米顶部</title>
    <style>
        body{
          margin: 0;
        }
        .header{
              background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }

        .left{
            float: left;
        }
        .header .menu{
          float: left;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header .account{
          float: right;
          color: white;
          height: 38px;
          line-height: 38px;
        }
        .header a{
                color: #b0b0b0;
                line-height: 40px;
                display: inline-block;
                font-size: 12px;
                margin-right: 10px;
                text-decoration: none;
        }

        .header a:hover{
            color: white;
        }

        .sub-header{
            height: 100px;
        }
        .sub-header .ht{
            height: 100px;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
            line-height: 100px;
        }
        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block;
        }
        .sub-header .logo a img{
            height: 56px;
            width: 56px;
        }
        .sub-header .menu-list{
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .sub-header .menu-list a:hover{
            color: #ff6700;
        }
        .sub-header .search{
            float: right;
            padding-top: 35px; /* Adjust padding to align search box as needed */
        }
        .search input[type="text"]{
                right: 51px;
                z-index: 1;
                width: 223px;
                height: 48px;
                padding: 0 10px;
                font-size: 14px;
                line-height: 48px;
                vertical-align: middle;
        }
        .search input[type="submit"]{
                right: 0;
                z-index: 2;
                width: 52px;
                height: 50px;
                font-size: 24px;
                line-height: 24px;
                background: #fff;
                color: #616161;
        }

        .search-btn {
                background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */
                border: 1px solid;
                cursor: pointer; /* 鼠标悬停时显示手形图标 */
                width: 52px;
                height: 50px;
                background-size: contain; /* 使背景图像适应按钮大小 */
                vertical-align: middle;
        }

         /*可能需要的额外样式调整*/
        .search-btn:focus {
                outline: none; /* 移除聚焦时的轮廓线 */
        }

        .slider img{
            width: 1226px;
            height: 460px;
            text-align: right;
        }

        .news{
            margin-top: 14px;
        }
        .news .channel{
            width: 228px;
            height: 164px;
            background-color:#5f5750;
            padding: 3px;
        }

        .news .channel .item img{
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto 4px;
        }

        .news .channel .item{
            height: 82px;
            width: 76px;
            float: left;
            text-align: center;
        }

        .news .channel .item a{
            display: inline-block;
            font-size: 12px;
            padding-top: 18px;
            color: #ffffff;
            text-decoration: none;
            opacity: 0.7;
        }

        .news .channel .item a:hover{
            opacity: 1;
        }

        .news .list-item img{
            width: 316px;
            height: 170px;
            display: block;
            margin: 0 auto 4px;
        }

        .app .download{
            position: absolute;
            height: 100px;
            width: 100px;
            display: none;
        }

        .app .download img{
          height: 100px;
          width: 100px;
        }
        .app:hover .download{
          display: block;
        }
    </style>
</head>
<body>
      <div class="header">
          <div class="container">
              <div class="menu">
                  <a href="https://www.mi.com/shop">小米官网</a>
                  <a href="https://www.mi.com/shop">小米商城</a>
                  <a href="https://www.mi.com/shop">小米澎湃OS</a>
                  <a href="https://www.mi.com/shop">云服务</a>
                  <a href="https://www.mi.com/shop">小爱开放平台</a>
                  <a href="https://www.mi.com/shop" class="app">下载app
                      <div  class="download">
                        <img src="images/QRcode.png" alt="">
                      </div>
                  </a>
              </div>
              <div class="account">
                  <a>登录</a>
                  <a>注册</a>
                  <a>消息通知</a>
              </div>
              <div style="clear:both"></div>
          </div>
      </div>
      <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block">
                    <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt="">
                </a>
            </div>

            <div class="ht menu-list">
                <a href="https://www.mi.com/shop">Xiaomi手机</a>
                <a href="https://www.mi.com/shop">Redmi手机</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">电笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
                <a href="https://www.mi.com/shop">路由器</a>
            </div>

             <div class="ht search">
                <form action="/search" method="get">
                    <input type="text" name="q" placeholder="搜索产品" required>
                    <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont">
                </form>
            </div>

            <div style="clear: both"></div>
        </div>
      </div>
      <div class="slider">
          <div class="container">
              <div class="sd-img">
                  <img src="images/b1.jpg" alt="">
              </div>
          </div>
      </div>
      <div class="news">
          <div class="container">
              <div class="channel left">
                  <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c1.png" alt="">
                          <span>保障服务</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c2.png" alt="">
                          <span>企业团购</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c3.png" alt="">
                          <span>F码通道</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c4.png" alt="">
                          <span>米粉卡</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c5.png" alt="">
                          <span>以旧换新</span>
                      </a>
                  </div>
                 <div class="item">
                      <a href="https://www.mi.com/shop">
                          <img src="images/c6.png" alt="">
                          <span>话费充值</span>
                      </a>
                  </div>
                  <div class="clear:both"></div>
              </div>
              <div class="list-item left" style="margin-left: 14px">
                  <img src="/images/w1.png" alt="">
              </div>
              <div class="list-item left" style="margin-left: 15px">
                  <img src="/images/w2.jpg" alt="">
              </div>
              <div class="list-item left" style="margin-left: 15px">
                  <img src="/images/w3.png" alt="">
              </div>
          </div>
      </div>

</body>
</html>

⑤border属性

用于设置元素边框的样式、宽度和颜色。例如，border: 1px solid black;会给元素添加一条1像素宽、实线、黑色的边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .c1{
        height: 50px;
        width: 500px;
        /*1、边框粗细3px 2、实线 solid/虚线 dotted 3、边框颜色red*/
        /*border: 3px solid red;*/
        /*border-left: 3px solid transparent;*/
        margin: 100px;
        background-color: #5f5750;
        border-left: 2px solid transparent;
        /*position: relative;*/
      }

      .c1:hover{
          border-left: 2px solid red;
      }
    </style>
</head>
<body>
    <div class="c1">菜单</div>
</body>
</html>

⑥background-color属性

用于设置元素的背景颜色。例如，background-color: blue;会将元素的背景颜色设置为蓝色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .c1{
        height: 50px;
        width: 500px;
        margin: 100px;
        background-color: #66CDAA;
      }
    </style>
</head>
<body>
    <div class="c1">菜单</div>
</body>
</html>

在这里插入图片描述

注意：以上不是所有的CSS样式，上述仅为开发中常用的核心知识点，通过此篇内容可以帮助你大致了解页面的样式和标签：

后续会了解一些模版，内容包括：

模版的基本使用逻辑
模版 + 自己CSS知识点（开发页面）

很感谢你能看到这里，如有相关疑问，还请下方评论留言。
笔记记录来源：B站 python的web开发全家桶（django+前端+数据库）
Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）
如果对大家有帮助的话，希望大家能多多点赞+关注！这样我的动力会更足！