小企鹅upup

前端三剑客入门一文解决

文章目录

HTML
- 快速开发网站Flask
- 页面结构
- 标签
- - 基础标签
  - 超链接
  - 图片
  - 列表
  - 下拉框
  - 表格
  - input系列
  - 多行文本
  - form表单
- 网络请求
- HTML案例
CSS
- CSS盒模型
- CSS样式定义
- - CSS选择器
- CSS样式使用
- - - 1. 在标签上直接写
    - 2. 在head标签中写
    - 3.写到css文件中
  - 标签样式
  - - 1. 高度和宽度
    - 2. 块级和行内标签
    - 3.字体设置
    - 4.文字对齐方式
    - 5.浮动
    - 6.内边距
    - 7.外边距
- CSS样式案例
- - 1.头部导航条
  - 2.二级菜单
  - 3.推荐区域
- CSS布局
- - hover（伪类）
  - after（伪类）
  - display
  - position
  - - 1. fixed
    - - 案例：返回顶部
      - 案例：对话框
    - 2. relative和absolute
    - - 案例：二级菜单图片
BootStrap框架
- 初识BootStrap
- 导航条
- 栅格系统
- container
- 面板
- 媒体对象
- 分页
- BootStrap案例
- - 登录案例
  - 后台管理案例1
- 图标
- BootStrap依赖jQuery
- JavaScript定义
- - JS特点
  - 变量名
  - 代码位置
  - 注释
  - typeof操作符
- JavaScript中的几个重要概念
- - 标识符
  - 关键字
  - 保留字
  - 大小写
  - 注释
  - - 单行注释
    - 多行注释
  - 定义变量
  - 赋值
  - - var关键字
    - let和const关键字
- 数据类型
- - 数据类型
  - 字符串类型
  - - 跑马灯案例
  - 数组
  - - 案例：动态数据
  - 对象（字典）
  - - 案例：动态表格
- 类型汇总
- - 基础类型
  - - String类型
    - Number类型
    - Boolean类型
    - Null类型
    - Undefined类型
    - Symbol类型
  - 引用类型
  - - Object类型
    - Array类型
    - Function类型
- 运算符
- - 算数运算符
  - 赋值运算符
  - 字符串运算符
  - 自增、自减运算符
  - 比较运算符
  - 逻辑运算符
- 输出语句
- - alert()函数
  - confirm()函数
  - console.log()
  - document.write()
  - innerHTML
- 条件判断
- - if语句
  - if else语句
  - if else if else语句
  - swith case语句
  - while循环语句
  - do while循环语句
  - for循环语句
  - break和continue
  - - break语句
    - continue语句
- JS函数
- - 定义函数
  - 调用函数
  - 默认参数
  - 函数返回值
- 事件
- - 事件处理
  - DOM
  - 事件绑定
  - 事件示例
- 作用域
- - 全局作用域
  - 局部作用域
- 案例：表单验证
- - 验证码demo
  - 必填字段验证
  - 数据格式验证
jQuery库
- 快速上手
- 寻找标签
- - 直接寻找
  - 间接寻找
  - 案例：菜单切换
- 样式操作
- - 值操作
  - 案例：动态创建数据
- 事件
- - 案例：表格数据删除
- 综合案例：数据录入
- 总结

HTML

快速开发网站Flask

pip install flask
# 安装flask框架

from flask import Flask # 导入Flask类

app = Flask(__name__)  # 习惯性书写


# 创建了网址/show/info和函数的对应关系
# 以后用户在浏览器上访问/show/info，网址自动执行index
@app.route("/show/info")
def index():
    return "中国你好"


if __name__ == '__main__':
    app.run()

Flask框架支持将标签写入文件

from flask import Flask,render_template

app = Flask(__name__)

@app.route("/show/info")
def index():
    # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
    # 默认：去当前项目目录的templates文件夹中找。
    return render_template("index.html")

if __name__ == '__main__':
    app.run()

创建如图所示文件夹:templates

index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demotitle>
head>
<body>
    <h1>中国h1>
    <span>你好span>

body>
html>

页面结构

DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端基础title>
head>
<body>
    <span>普通文本，用于分区span>
    <strong>这是加粗标签strong>
    <input type="text" value="行内块标签">
    <p>这是一个段落，会换行p>
    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>
    <ul>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
    ul>
    <div>盒标签，用于分区
        <span>hello worldspan>
    div>
body>
html>

<h1>数据表格h1>
<table>
    <thead>
        <tr>    <th>idth> <th>姓名th> <th>年龄th>tr>
    thead>
    <tbody>
        <tr>    <td>001td> <td>hzhtd> <td>22td>   tr>
        <tr>    <td>001td> <td>hzhtd> <td>22td>   tr>
        <tr>    <td>001td> <td>hzhtd> <td>22td>   tr>
        <tr>    <td>001td> <td>hzhtd> <td>22td>   tr>
        <tr>    <td>001td> <td>hzhtd> <td>22td>   tr>

    tbody>
table>

demo

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get_liststitle>
    <style>
        /*修改a标签为块级标签*/
        a {display: block}
    style>
head>
<body>
    <h1>用户列表h1>
    <table border="1">

        <thead>
            <tr>
                <th>idth>
                <th>姓名th>
                <th>年龄th>
                <th>图片th>
                <th>更多th>
            tr>
        thead>

        <tbody>
            <tr>
                <td>001td>
                <td>hzhtd>
                <td>22td>
                <td>
                    <img src="/static/pic.jpg" alt="此图片不存在" style="height: 50px;width: 50px">
                td>
                <td>
                    <a href="https://www.bilibili.com/" target="_blank">点击跳转a>
                    <a href="/get/news" target="_blank">查看详情a>
                td>
            tr>
                    <tr>
                <td>002td>
                <td>lainuotd>
                <td>23td>
                <td>
                    <img src="/static/pic1.jpg" alt="" style="height: 50px;width: 50px">
                td>
                <td>
                    <a href="https://www.bilibili.com/" target="_blank">点击跳转a>
                    <a href="/get/news" target="_blank">查看详情a>
                td>
            tr>
                    <tr>
                <td>003td>
                <td>pabitd>
                <td>18td>
                <td>
                    <img src="/static/pic1.jpg" alt="" style="height: 50px;width: 50px">
                td>
                <td>
                    <a href="https://www.bilibili.com/" target="_blank">点击跳转a>
                    <a href="/get/news" target="_blank">查看详情a>
                td>
            tr>
        tbody>
    table>
body>
html>

在HTML中，元素用于插入图像。alt是元素的一个属性，它表示图像的替代文本（alternative text）或者称为"alt文本"。

alt属性提供了一个描述图像的文本，当图像无法加载时或者用户使用辅助技术（例如屏幕阅读器）浏览网页时，这个文本将显示出来。这样做的目的是为了让用户了解图像的内容，即使图像无法显示也能够传达相关信息。此外，alt属性还可以在图像加载失败时显示错误信息，帮助用户知道该图像未能正确加载。

input系列

<span>输入框span>
<input type="text">
<span>密码框span>
<input type="password">
<span>文件上传span>
<input type="file">
<span>单选框span>

<input type="radio" name="n1">男
<input type="radio" name="n1">女
<span>复选框span>
<input type="checkbox">篮球
<input type="checkbox">网球
<input type="checkbox">足球
<span>按钮span>
<input type="button" value="普通按钮">
<input type="submit" value="提交表单">

多行文本

<h1>多行文本h1>

<textarea rows = "3">textarea>

form表单

form标签包裹要提交的数据的标签。
- 提交方式：method="get"
- 提交的地址：action="/xxx/xxx/xx"
- 在form标签里面必须有一个submit标签。
在form里面的一些标签：input/select/textarea
- 一定要写name属性

网络请求

在浏览器的URL中写入地址，点击回车，访问。

浏览器会发送数据过去，本质上发送的是字符串：
"GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"

浏览器会发送数据过去，本质上发送的是字符串：
"POST /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n数据库"

浏览器向后端发送请求时
- GET请求【URL方法 / 表单提交】
  - 现象：GET请求、跳转、向后台传入数据数据会拼接在URL上。
```
https://www.sogou.com/web?query=安卓&age=19&name=xx
```
    注意：GET请求数据会在URL中体现。
- POST请求【表单提交】
  - 现象：提交数据不在URL中而是在请求体中。
    - 比如登录操作from data中（请求体）

GET请求

@app.route("/get/reg", methods=["GET"])
def get_reg():
    # 1.接收用户通过get形式发送过来的数据
    print(request.args)
    # 2.给用户返回结果
    return "注册成功!"

会显示在url上

POST请求

@app.route("/post/reg", methods=["POST"])
def post_reg():
    # 1.接收用户通过post形式发送过来的数据
    print(request.form)
    # 2.给用户返回结果
    return "注册成功!"

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yAiuVoSu-1692854467500)(image/image-20230728210308801.png)]

HTML案例

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/register", methods=["GET", "POST"])
def register():
    if request.method == "GET":
        return render_template("register.html")
    else:
        # 1.接收用户通过post形式发送过来的数据
        username = request.form.get("username")
        pwd = request.form.get("pwd")
        gender = request.form.get("gender")
        hobby_list = request.form.get("hobby")
        city = request.form.get("city")
        remark = request.form.get("remark")
        print(username, pwd, gender, hobby_list, city, remark)
        # 2.给用户返回结果
        return "注册成功!"

if __name__ == "__main__":
    app.run()

register.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册title>
head>
<body>
    <h1>用户注册h1>
    <form method="post" action="/register">
        <div>
            用户名:<input type="text" name="username">
        div>
        <div>
            密码:<input type="password" name="pwd">
        div>
        <div>
            性别:
                <input type="radio" name="gender" value="1"> 男
                <input type="radio" name="gender" value="2"> 女
        div>
        <div>
            爱好:
            <input type="checkbox" name="hobby" value="1"> 篮球
            <input type="checkbox" name="hobby" value="2"> 网球
            <input type="checkbox" name="hobby" value="3"> 足球
        div>
        <div>
            城市:
            <select name="city">
                <option value="c1">北京option>
                <option value="c2">上海option>
            select>
        div>
        <div>
            备注:
            <textarea name="remark">textarea>
        div>
        <div>
            <input type="submit" value="submit提交">
        div>
    form>
body>
html>

CSS

CSS盒模型

浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型 (CSS basic box model)，将所有元素表示为一个个矩形的盒子(box)

Width：主体宽度
Height：主体高度
Border：边框
Padding：内边距
Margin：外边距，针对盒子四周的边距，跟其他盒子的隔离，不影响本身元素的宽高

只有padding width height border会影响实际的大小

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒模型title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background: red;
            padding: 30px;
            border: 20px solid black;
            margin: 50px auto;
        }
        .box_content {
            width: 100%;
            height: 100%;
            background: blue;
            font-size: 24px;
            color: white;
            text-align: center;
        }
    style>
head>
<body>
    <div class = "box">
        <div class = "box_content">
            主体
        div>
    div>    
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-unUpLTHx-1692854467500)(image/image-20230726160144092.png)]

盒子实际大小：(300+30+20+30+20) *(300+30+20+30+20) = 400 * 400

CSS样式定义

CSS 层叠样式表(Cascading Style Sheets)
样式定义如何显示HTML元素
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
权重（优先级）
- !important>行内样式>ID选择器>类选择器|属性选择器1伪类选择器>元素选择器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=cas, initial-scale=1.0">
    <title>css基础title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
        }
        /* class选择器.类名 */
        /* 在语句后添加!important关键字，这个语句变成权重最高 */
        .bd {
            background: green !important;
        }
        /* id选择器.id名 */
        #bd_pink {
            background: pink;
        }

    style>
    
head>
<body>
    <div style="width: 100px;height: 100px;background: red;">这是行内样式div>
    <div>这是内部样式div>
    <div class = "bd">class选择器div>
    <div class = "bd">class选择器div>
    <div class = "bd" id = "bd_pink">id选择器div>

body>
html>

/* 在语句后添加!important关键字，这个语句变成权重最高 */
        .bd {
            background: green !important;
        }

CSS选择器

ID选择器
```
#c1{
    
}

'c1'>
```
类选择器（最多）
```
.c1{
    
}

'c1'>
```
标签选择器
```
div{
    
}

xxx
```

属性选择器

input[type='text']{
	border: 1px solid red;
}
.v1[xx="456"]{
	color: gold;
}

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

<div class="v1" xx="123">sdiv>
<div class="v1" xx="456">fdiv>
<div class="v1" xx="999">adiv>

后代选择器

.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选择器

样式覆盖：

Title

中国联通

CSS样式使用

1. 在标签上直接写

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

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

2. 在head标签中写

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            color:red;
        }
    style>
head>
<body>

<h1 class='c1'>用户登录h1>
<h1 class='c1'>用户登录h1>
<h1 class='c1'>用户登录h1>
<h1 class='c1'>用户登录h1>
    
body>
html>

3.写到css文件中

.c1{
    height:100px;
}

.c2{
    color:red;
}

"en">

    "UTF-8">
    Title
    "stylesheet" href="common.css" />



'c1'>用户登录
'c2'>用户登录
'c2'>用户登录
'c1'>用户登录

外部引用样式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=cas, initial-scale=1.0">
    <title>css基础title>
    
    <link rel="stylesheet" href="./style.css">
    
head>

/* style.css */
/* 不需要style标签声明 */
div {
    width: 100px;
    height: 100px;
    background: yellow;
    margin-bottom: 20px;
}
/* class选择器.类名 */
.bd {
    background: green;
}
/* id选择器.id名 */
#bd_pink {
    background: pink;
}

在flask框架下，css文件必须放在static目录下

三种使用方式：

属性名: 值

行内样式
内部样式

通过选择器来选择对于的元素进行样式的设置
- 元素选择器
- 类名选择器 class 一对多
- id 选择器唯一性
引用方式

标签样式

1. 高度和宽度

.c1{
    height: 300px;
    width: 500px;
}

注意事项：

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

2. 块级和行内标签

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

示例：行内&块级特性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

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

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

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

注意：块级 + 块级&行内。

3.字体设置

颜色
大小
加粗
字体格式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            color: #00FF7F;
            font-size: 58px;
            font-weight: 600;
            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>Titletitle>
    <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>

5.浮动

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>Titletitle>
    <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>

如果你让标签浮动起来之后，就会脱离文档流。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

6.内边距

内边距，我自己的内部设置一点距离。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>Titletitle>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            
            padding: 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>Titletitle>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding: 20px 10px 5px 20px;
        }
    style>
head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话div>
        <div>
            小朋友你是否下水道发
        div>
    div>
body>
html>

7.外边距

外边距，我与别人加点距离。

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

CSS样式案例

1.头部导航条

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
       
        body{
            margin: 0;
        }
        .header{
            background: #333;
        }
        .container{
            width: 1000px;
            margin: 0 auto;
        }

        .container .menu{
            float: left;
        }
        .container .account{
            float: right;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin: 0 10px;
        }
    style>
head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a>小米官网a>
                <a>小米商城a>
                <a>MIUIa>
                <a>LoTa>
                <a>云服务a>
                <a>天星科技a>
            div>
            <div class="account">
                <a>登录a>
                <a>注册a>
            div>
             
            <div style="clear: both">div>
        div>
    div>

body>
html>

body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？
```
body{
	margin: 0;
}
```

内容居中

文本居中，文本会在这个区域中居中。

<div style="width: 200px; text-align: center;">武沛齐div>

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

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

<div class="container">
	adfasdf
div>

父亲没有高度或没有宽度，被孩子支撑起来。
如果存在浮动，一定记得加入。

2.二级菜单

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>site_headertitle>
    <style>
        body{
            margin: 0;
        }
        .site_header .container{
            width: 1226px;
            margin: 0 auto;
        }
        .site_header .ht{
            height: 100px;
        }
        .site_header .container .logo{
            float: left;
            width: 234px;

        }
        .site_header .container .logo a{
            display: inline-block;
            margin-top: 22px;
        }
        .site_header .container .menu_list{
            float: left;
            /*纵向高度100px居中，*/
            line-height: 100px;
        }
        .site_header .container a{
            display: inline-block;
            /*上下内边距0左右内边距10px*/
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .site_header .container a:hover{
            color: #ff6700;
        }
        .site_header .container .search{
            float: right;
        }
    style>
head>
<body>
    <div class="site_header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/">
                    <img src="/static/logo_m2.png" alt="" style="width: 56px;height: 56px">
                a>
            div>
            <div class="ht menu_list">
                <a href="https://www.mi.com/">Xiaomi手机a>
                <a href="https://www.mi.com/">Redmi手机a>
                <a href="https://www.mi.com/">电视a>
                <a href="https://www.mi.com/">笔记本a>
                <a href="https://www.mi.com/">平板a>
                <a href="https://www.mi.com/">家电a>
                <a href="https://www.mi.com/">路由器a>
                <a href="https://www.mi.com/">服务中心a>
                <a href="https://www.mi.com/">社区a>
            div>
            <div class="ht search">div>
            <div style="clear:both">div>
        div>
    div>

body>
html>

一二级菜单整合：

xiaomi_index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一级二级菜单title>
    <link rel="stylesheet" href="/static/xiaomi_index.css">
head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com/">小米官网a>
                <a href="https://www.mi.com/">小米商城a>
                <a href="https://www.mi.com/">MIUIa>
                <a href="https://www.mi.com/">LoTa>
                <a href="https://www.mi.com/">云服务a>
                <a href="https://www.mi.com/">天星数技a>
                <a href="https://www.mi.com/">有品a>
                <a href="https://www.mi.com/">小爱开放平台a>
                <a href="https://www.mi.com/">企业团购a>
                <a href="https://www.mi.com/">资质证照a>
                <a href="https://www.mi.com/">协议规则a>
                <a href="https://www.mi.com/">下载appa>
                <a href="https://www.mi.com/">Select Locationa>
            div>
            <div class="account">
                <a href="https://www.mi.com/">登录a>
                <a href="https://www.mi.com/">注册a>
                <a href="https://www.mi.com/">消息通知a>
            div>
            <div style="clear: both">div>
        div>
    div>
    <div class="site_header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/">
                    <img src="/static/logo_m2.png" alt="" style="width: 56px;height: 56px">
                a>
            div>
            <div class="ht menu_list">
                <a href="https://www.mi.com/">Xiaomi手机a>
                <a href="https://www.mi.com/">Redmi手机a>
                <a href="https://www.mi.com/">电视a>
                <a href="https://www.mi.com/">笔记本a>
                <a href="https://www.mi.com/">平板a>
                <a href="https://www.mi.com/">家电a>
                <a href="https://www.mi.com/">路由器a>
                <a href="https://www.mi.com/">服务中心a>
                <a href="https://www.mi.com/">社区a>
            div>
            <div class="ht search">div>
            <div style="clear:both">div>
        div>
    div>
body>
html>

xiaomi_index.css

body{
    margin: 0;
}
.header{
    background: #333;
}
.header .container{
    width: 1000px;
    margin: 0 auto;
}

.header .menu{
    float: left;
}
.header .account{
    float: right;
}
.header a{
    color: #b0b0b0;
    line-height: 40px;
    display: inline-block;
    font-size: 12px;
    margin: 0 5px;
    text-decoration: none;
}
.header a:hover{
    color: white ;
}
      .site_header .container{
        width: 1226px;
        margin: 0 auto;
    }
    .site_header .ht{
        height: 100px;
    }
    .site_header .container .logo{
        float: left;
        width: 234px;

    }
    .site_header .container .logo a{
        display: inline-block;
        margin-top: 22px;
    }
    .site_header .container .menu_list{
        float: left;
        /*纵向高度100px居中，*/
        line-height: 100px;
    }
    .site_header .container a{
        display: inline-block;
        /*上下内边距0左右内边距10px*/
        padding: 0 10px;
        color: #333;
        font-size: 16px;
        text-decoration: none;
    }
    .site_header .container a:hover{
        color: #ff6700;
    }
    .site_header .container .search{
        float: right;
    }

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

3.推荐区域

html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一级二级菜单title>
    <link rel="stylesheet" href="/static/xiaomi_index.css">
head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com/">小米官网a>
                <a href="https://www.mi.com/">小米商城a>
                <a href="https://www.mi.com/">MIUIa>
                <a href="https://www.mi.com/">LoTa>
                <a href="https://www.mi.com/">云服务a>
                <a href="https://www.mi.com/">天星数技a>
                <a href="https://www.mi.com/">有品a>
                <a href="https://www.mi.com/">小爱开放平台a>
                <a href="https://www.mi.com/">企业团购a>
                <a href="https://www.mi.com/">资质证照a>
                <a href="https://www.mi.com/">协议规则a>
                <a href="https://www.mi.com/">下载appa>
                <a href="https://www.mi.com/">Select Locationa>
            div>
            <div class="account">
                <a href="https://www.mi.com/">登录a>
                <a href="https://www.mi.com/">注册a>
                <a href="https://www.mi.com/">消息通知a>
            div>
            <div style="clear: both">div>
        div>
    div>
    <div class="site_header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/">
                    <img src="/static/logo_m2.png" alt="" style="width: 56px;height: 56px">
                a>
            div>
            <div class="ht menu_list">
                <a href="https://www.mi.com/">Xiaomi手机a>
                <a href="https://www.mi.com/">Redmi手机a>
                <a href="https://www.mi.com/">电视a>
                <a href="https://www.mi.com/">笔记本a>
                <a href="https://www.mi.com/">平板a>
                <a href="https://www.mi.com/">家电a>
                <a href="https://www.mi.com/">路由器a>
                <a href="https://www.mi.com/">服务中心a>
                <a href="https://www.mi.com/">社区a>
            div>
            <div class="ht search">div>
            <div style="clear:both">div>
        div>
    div>
    <div class="slider">
        <div class="container">
            <div class="item">
                <img src="/static/big_banner.png" alt="图片不存在">
            div>
        div>
    div>
    <div class="news">
        <div class="container">
            <div class="channel left">
                <div class="item">
                    <a href="#">
                        <img src="/static/button4.png" alt="">
                        <span>保障服务span>
                    a>
                div>
                 <div class="item">
                    <a href="#">
                        <img src="/static/button4.png" alt="">
                        <span>保障服务span>
                    a>
                div>
                <div class="item">
                    <a href="#">
                        <img src="/static/button4.png" alt="">
                        <span>保障服务span>
                    a>
                div>
                <div class="item">
                    <a href="#">
                        <img src="/static/button4.png" alt="">
                        <span>保障服务span>
                    a>
                div>
                <div class="item">
                    <a href="#">
                        <img src="/static/button4.png" alt="">
                        <span>保障服务span>
                    a>
                div>
                <div class="item">
                    <a href="#">
                        <img src="/static/button4.png" alt="">
                        <span>保障服务span>
                    a>
                div>
                <div class="item">
                    <a href="#">
                        <img src="/static/button4.png" alt="">
                        <span>保障服务span>
                    a>
                div>
                <div style="clear: both">div>
            div>
            <div class="list-item left">
                <a href="#">
                    <img src="/static/button1.jpg" alt="">
                a>
            div>
            <div class="list-item left">
                <a href="#">
                    <img src="/static/button2.jpg" alt="">
                a>
            div>
            <div class="list-item left">
                <a href="#">
                    <img src="/static/button3.jpg" alt="">
                a>
            div>
            <div style="clear: both">div>
        div>
    div>

body>
html>

css

body{
    margin: 0;
}
img{
    width: 100%;
    height: 100%;
}
.left{
    float: left;
}
.container{
    width: 1226px;
    margin: 0 auto;
}


.header{
    background: #333;
}
.header .container{
    width: 1000px;
    margin: 0 auto;
}

.header .menu{
    float: left;
}
.header .account{
    float: right;
}
.header a{
    color: #b0b0b0;
    line-height: 40px;
    display: inline-block;
    font-size: 12px;
    margin: 0 5px;
    text-decoration: none;
}
.header a:hover{
    color: white ;
}
      .site_header .container{
        width: 1226px;
        margin: 0 auto;
    }
    .site_header .ht{
        height: 100px;
    }
    .site_header .container .logo{
        float: left;
        width: 234px;

    }
    .site_header .container .logo a{
        display: inline-block;
        margin-top: 22px;
    }
    .site_header .container .menu_list{
        float: left;
        /*纵向高度100px居中，*/
        line-height: 100px;
    }
    .site_header .container a{
        display: inline-block;
        /*上下内边距0左右内边距10px*/
        padding: 0 10px;
        color: #333;
        font-size: 16px;
        text-decoration: none;
    }
    .site_header .container a:hover{
        color: #ff6700;
    }
    .site_header .container .search{
        float: right;
    }
    .slider .item{
        width: 1226px;
        height: 460px;
        margin: 0 auto;
    }
    .news{
         margin-top: 14px;
    }

    .news .channel{
        width: 228px;
        height: 164px;
        background-color: #5f5750;
        padding: 3px;
    }
    .news .channel .item{
        height: 82px;
        width: 76px;
        float: left;
        text-align: center;

    }
    .news .channel a{
        display: inline-block;
        font-size: 12px;
        padding-top: 10px;
        color: #fff;
        text-decoration: none;
        opacity: 0.7;
    }
    .news .channel a:hover{
        opacity: 1;
    }
    .news span{
        display: block;
    }
    。news .channel .item img{
        height: 24px;
        width: 24px;
        display: block;
        margin: 0 auto 4px;
    }

    .news .list-item{
        width: 316px;
        height: 170px;
        margin-left: 14px
    }
    .news .list-item a:hover{
        opacity: 0.6;
    }

设置透明度
```
opacity:0.5;    /* 0 ~ 1 */
```

CSS布局

hover（伪类）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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: red;
        }
    style>
head>
<body>
<div class="c1">联通div>
<div class="c2">广西div>

<div class="app">
    <div class="title">下载APPdiv>
    <div class="download">
        <img src="images/qcode.png" alt="">
    div>
div>

body>
html>

after（伪类）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>Titletitle>
    <style>
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
        }

    style>
head>
<body>
    <div class="clearfix">
        <div class="item">1div>
        <div class="item">2div>
        <div class="item">3div>
    div>
body>
html>