[学习笔记]python的web开发全家桶1-前端-前端-CSS教程

源学习视频

目的：开发一个平台(网站)

前端开发：HTML、CSS、JavaScript
Web框架：接收请求并处理
MySQL数据库：存储数据地方

快速上手：
基于Flask Web框架让你快速搭建一个网站出来。

深入学习：
基于Django框架(主要)

1.快速开发网站

python">from flask import Flask

app = Flask(__name__)


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

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

老师在P2的26分22秒使用的画图软件是Excalidraw

2.HTML

2.1编码

<meta charset="UTF-8">

2.2 title

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

2.4 HTML标签

2.4.1 div和span

div
一人占一整行。[块级标签]
span
自己多大占多大。[行内标签、内联标签]

2.4.2 超链接

<!-- 别人的链接 -->
<a href="http://www.baidu.***">点击跳转</a>
<!-- 自己的链接 -->
<a href="/get/news">点击跳转</a>

2.4.3 图片

<img />标签，称为自闭合标签。

显示别人的图片
<img src="图片地址" />
显示自己的图片
	- 自己项目中创建：static目录，图片要放在static目录
	- 在页面上引入图片
<img src="/static/图片名称" />

引用别人网站的图片，可能会因为有防盗链而引用不上。

2.4.4 列表

无序列表
    <ul>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ul>
有序列表
    <ol>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ol>

2.4.5 表格

    <table border="1">
        <thead>
            <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
        </thead>
        <tbody>
            <tr> <td>10</td> <td>张三</td> <td>19</td></tr>
            <tr> <td>11</td> <td>张三</td> <td>19</td></tr>
            <tr> <td>12</td> <td>张三</td> <td>19</td></tr>
        </tbody>
    </table>

2.4.6 input系列

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

    <input type="radio" name="n1">男
    <input type="radio" name="n1">女

    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
    <input type="checkbox">棒球

    <input type="button" value="提交"> --普通的按钮
    <input type="submit" value="提交"> --提交表单

2.4.7 下拉框

    <select>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>

    <select multiple>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>

2.4.8 多行文本

    <textarea rows="3"></textarea>

网络请求

案例：用户注册

新建项目
创建Flask代码

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:
        user = request.form.get('user')
        pwd = request.form.get('pwd')
        gender = request.form.get('gender')
        hobby = request.form.getlist('hobby')
        city = request.form.get('city')
        skill_list = request.form.getlist('skill')
        more = request.form.get('more')
        print(user, pwd, gender, hobby, city, skill_list, more)
        # 将用户信息写入到数据库中实现注册

        return "注册成功"


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

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户注册</h1>

    <form method="post" action="/register">
        <div>
          用户名: <input type="text" name="user"/>
        </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="10">篮球
            <input type="checkbox" name="hobby" value="20">足球
            <input type="checkbox" name="hobby" value="30">乒乓球
        </div>

        <div>
          城市:
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select>
        </div>

        <div>
          擅长领域:
            <select name="skill" multiple >
                <option value="100">打游戏</option>
                <option value="101">歌唱</option>
                <option value="102">跑步</option>
            </select>
        </div>

        <div>
            备注: <textarea name="more"></textarea>
        </div>

        <div>
            <input type="button" value="button提交">
            <input type="submit" value="submit提交">
        </div>
    </form>
</body>
</html>

页面上的数据，想要提交到后台：
- form标签包裹要提交的含数据的标签
- 提交方式：method=”get“
- 提交的地址：action=“/xxx/xx/xx”
- 在form标签里面必须有一个submit标签
在form里面的一些标签：input/select/textarea
- 一定要写name属性：<input type='text' name='user'/>

3.CSS样式

css，专门用来”美化“标签。

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

3.1CSS应用方式

1.在标签上用

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

2.在head标签中写style标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>

可以在多个标签中复用

3.写到文件中

把样式都写到***mon.css文件中，然后在html中引入该文件。

# html
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel='stylesheet' href='***mon.css' />
</head>

.c1{
   color:red;
}

可以在多个HTML文件中复用

3.3 CSS选择器

id选择器

# id选择器
#c1{

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

类选择器(用的最多)

# 类选择器
.c1{

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

标签选择器

# 标签选择器
div{
	color:red;
}
<div>xxx</div>

属性选择器

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

后代选择器

.yy li{
	color: red;
}
.yy > li{
	color: pink;
}
<div class='yy'>
	<ul>
		<li></li>
		<li></li>
	</ul>
</div>

.yy li会去yy类的子子孙孙找li标签
而.yy > li只会去yy类的儿子里找li标签

多个样式的应用和覆盖问题

如果不想下面的覆盖上面的样式，则可以使用! important来标注上面的样式。

3.4 样式

1.高度和宽度

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

宽度，支持百分比。高度不支持
对行内标签，高度和宽度默认无效，(后面会知道，边距也无效)
对块级标签，默认有效，但霸道，即使右侧区域空白，也不给你占用

2.块级和行内标签

块级标签(太霸道)
行内标签(太软弱)
css样式：标签->display:inline-block (兼容两者)

<style>
	.c1{
		display: inline-block;
		
		height: 100px;
		width: 300px;
		border: 1px solid red;
	}
</style>
<body>
	<span class="c1">中国</span>
	<span class="c1">联通</span>
</body>

div并不是一定是块级标签，span也不是一定是行内标签，可以通过在样式中修改display来修改

3.字体设置

.c1{
	color: #00FF7F;   /* 字的颜色 */
	font-size: 59px;  /* 字的大小 */
	font-weight: 600; /* 字的粗细 */
	font-family: Microsoft Yahei;  /* 字体 */
}

4.文字对齐方式

.c1{
	height: 59px;
	width: 300px;
	border: 1px solid red;

	text-align: center; /* 水平方向居中 */
	line-height: 59px; /* 方向水平居中 */
}

5.浮动

  <div>
    <span>左边</span>
    <span style="float:right">右边</span>
  </div>

div默认块级标签(霸道-占整行）,但如果浮动起来了，就不一样了。会只占设定的宽度。
如果你让标签浮动起来之后，就会脱离文档流（如下)，这时候需要在用完float的最后一个div后面加上带style=“clear：both;”的快标签。

<!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 style="background-color: dodgerblue">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div style="clear: both;"></div>
    </div>
  </div>
</body>
</html>

6.内边距

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

<!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>

内边距会把标签撑大
内边距还有两种等价写法：
padding: 20px; 表示四个方向的内边距都是20px
padding: 20px 20px 20px 20px; 表示上右下左四个方向的内边距

7.外边距

外边距，我与别人的距离。

<!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="height:100px; background-color: red; margin-top: 10px;"></div>

</body>
</html>

案例：小米商城

小米顶部

<!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; /* 上下为0，左右为auto */
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header .a***ount {
            float: right;
            color: white;
        }

        .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>MIUI</a>
            <a>IoT</a>
            <a>云服务</a>
            <a>天星数科</a>
            <a>有品</a>
            <a>小爱开放平台</a>
            <a>企业团购</a>
            <a>资质证照</a>
            <a>协议规则</a>
            <a>下载app</a>
            <a>Select Location</a>
        </div>
        <div class="a***ount">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>
</body>
</html>

小结

一定记得加入<div style="clear: both"></div>

二级菜单

log部分

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

      border: 1px solid red;
    }
    .sub-header .ht{
      height: 100px;
    }
    .sub-header .logo{
      width: 234px;
      float: left;
      border: 1px solid red;
    }
    .sub-header .logo a{
      display: inline-block;
      margin-top: 22px;
    }
    .sub-header .logo 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 href="https://www.mi.***/shop">
          <img src="/images/小米-logo.png">
        </a>
      </div>
      <div class="ht menu-list">f</div>
      <div class="ht search">f</div>
      <div class="clear:both;"></div>
    </div>
  </div>

</body>
</html>

菜单部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body {
      margin: 0;
    }
    .sub-header{
      height: 100px;
    }
    .container{
      width: 1226px;
      margin: auto;

    }
    .sub-header .ht{
      height: 100px;
    }
    .sub-header .logo{
      width: 234px;
      float: left;
    }
    .sub-header .logo a{
      display: inline-block;
      margin-top: 22px;
    }
    .sub-header .logo 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 href="https://www.mi.***/shop">
          <img src="/images/小米-logo.png">
        </a>
      </div>
      <div class="ht menu-list">
        <a href="https://www.mi.***/">Xiaomi手机</a>
        <a href="https://www.mi.***/">Redmi手机</a>
        <a href="https://www.mi.***/">电视</a>
        <a href="https://www.mi.***/">笔记本</a>
        <a href="https://www.mi.***/">平板</a>
        <a href="https://www.mi.***/">家电</a>
        <a href="https://www.mi.***/">路由器</a>
        <a href="https://www.mi.***/">服务中心</a>
        <a href="https://www.mi.***/">社区</a>
      </div>
      <div class="ht search">f</div>
      <div style="clear: both"></div>
    </div>
  </div>

</body>
</html>

整合：顶部菜单+二级菜单

<!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; /* 上下为0，左右为auto */
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header .a***ount {
            float: right;
            color: white;
        }

        .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;
        }

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

        .sub-header .logo 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;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="menu">
            <a href="http://www.mi.***">小米官网</a>
            <a href="http://www.mi.***">小米商城</a>
            <a href="http://www.mi.***">MIUI</a>
            <a href="http://www.mi.***">IoT</a>
            <a href="http://www.mi.***">云服务</a>
            <a href="http://www.mi.***">天星数科</a>
            <a href="http://www.mi.***">有品</a>
            <a href="http://www.mi.***">小爱开放平台</a>
            <a href="http://www.mi.***">企业团购</a>
            <a href="http://www.mi.***">资质证照</a>
            <a href="http://www.mi.***">协议规则</a>
            <a href="http://www.mi.***">下载app</a>
            <a href="http://www.mi.***">Select Location</a>
        </div>
        <div class="a***ount">
            <a href="http://www.mi.***">登录</a>
            <a href="http://www.mi.***">注册</a>
            <a href="http://www.mi.***">消息通知</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.***/shop">
                <img src="/images/小米-logo.png">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.***/">Xiaomi手机</a>
            <a href="https://www.mi.***/">Redmi手机</a>
            <a href="https://www.mi.***/">电视</a>
            <a href="https://www.mi.***/">笔记本</a>
            <a href="https://www.mi.***/">平板</a>
            <a href="https://www.mi.***/">家电</a>
            <a href="https://www.mi.***/">路由器</a>
            <a href="https://www.mi.***/">服务中心</a>
            <a href="https://www.mi.***/">社区</a>
        </div>
        <div class="ht search"></div>
        <div style="clear: both"></div>
    </div>
</div>
</body>
</html>

小结

案例：推荐区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .left{
            float: left;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .header {
            background: #333;
        }

        .container {
            width: 1226px;
            margin: 0 auto; /* 上下为0，左右为auto */
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header .a***ount {
            float: right;
            color: white;
        }

        .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;
        }

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

        .sub-header .logo 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;
        }

        .slider .sd-img {
            width: 1226px;
            height: 460px;
        }
        .news{
            margin-top: 14px;
        }
        .news .channel{
            width: 228px;
            height: 164px;
                background: #5f5750;
            padding: 3px;
        }
        .news .channel .item{
            height: 82px;
            width: 76px;
            float: left;
            text-align: center;
            background: #5f5750;
        }

        .news .channel .item a{
            display: block;
            padding-top: 18px;
            font-size: 12px;
            color: #fff;
                opacity: .7; /* 透明度 */
            text-decoration: none;
        }
        .news .channel .item a:hover{
            opacity: 1;
        }

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

        .news .list-item{
            width: 316px;
            height: 170px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="menu">
            <a href="http://www.mi.***">小米官网</a>
            <a href="http://www.mi.***">小米商城</a>
            <a href="http://www.mi.***">MIUI</a>
            <a href="http://www.mi.***">IoT</a>
            <a href="http://www.mi.***">云服务</a>
            <a href="http://www.mi.***">天星数科</a>
            <a href="http://www.mi.***">有品</a>
            <a href="http://www.mi.***">小爱开放平台</a>
            <a href="http://www.mi.***">企业团购</a>
            <a href="http://www.mi.***">资质证照</a>
            <a href="http://www.mi.***">协议规则</a>
            <a href="http://www.mi.***">下载app</a>
            <a href="http://www.mi.***">Select Location</a>
        </div>
        <div class="a***ount">
            <a href="http://www.mi.***">登录</a>
            <a href="http://www.mi.***">注册</a>
            <a href="http://www.mi.***">消息通知</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.***/shop">
                <img src="/images/小米-logo.png">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.***/">Xiaomi手机</a>
            <a href="https://www.mi.***/">Redmi手机</a>
            <a href="https://www.mi.***/">电视</a>
            <a href="https://www.mi.***/">笔记本</a>
            <a href="https://www.mi.***/">平板</a>
            <a href="https://www.mi.***/">家电</a>
            <a href="https://www.mi.***/">路由器</a>
            <a href="https://www.mi.***/">服务中心</a>
            <a href="https://www.mi.***/">社区</a>
        </div>
        <div class="ht search"></div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="/images/小米商城图片.jpg">
        </div>
    </div>


</div>

<div class="news">
    <div class="container">
        <div class="channel left">
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="list-item left" style="margin-left: 14px">
            <img src="/images/小米商城图片1.jpg" />
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="/images/小米商城图片2.jpg" />
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="/images/小米商城图片3.jpg" />
        </div>
        <div style="clear:both;"></div>
    </div>
</div>
</body>
</html>

小结

设置不透明度

opacity: 0.5; /* 0-1 */

CSS知识点

2.1 hover(伪类)

可以hover到某一个标签，然后修改内部其他标签的样式，如.app:hover .download{ ... }

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

        .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">下载APP</div>
    <div class="download">
        <img src="images/小米-logo.png">
    </div>
</div>
</body>
</html>

2.2 after

after可以往尾部加东西(很少直接用)

<!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>

after的应用-clearfix清除浮动

参考资料：clearfix（清除浮动）

<!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>

将display设置为block的原因是:after是伪元素，要想获得clear属性必须转换为block

2.3 position

fixed

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

            right: 10px;
            bottom: 50px;
        }
    </style>
</head>
<body>

<div style="height: 1000px;background-color: #5f5750"></div>
<div class="back"></div>
</body>
</html>

无论浏览器窗口如何放大缩小，都在固定的位置

案例：对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .mask{
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.7;
            z-index: 999;
        }
        .dialog{
            position: fixed;
            width: 500px;
            height: 300px;
            background-color: white;
            border: 1px solid red;

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

            top: 200px;
            z-index: 1000;
        }
    </style>
</head>
<body>

<div style="height: 1000px">asdfasdfasdfsdf</div>
<div class="mask"></div>
<div class="dialog"></div>
</body>
</html>

relative和absolute的配合使用

absolute的元素位置会相对于relative的元素位置确定。出现二维码，出现对话框，其实都是基于relative和absolute实现的。

<!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: 0;
        top: 0;
      }
    </style>
</head>
<body>
  <div class="c1">
    <div class="c2"></div>
  </div>
</body>
</html>

案例：小米商城下载APP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .left{
            float: left;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .header {
            background: #333;
        }

        .container {
            width: 1226px;
            margin: 0 auto; /* 上下为0，左右为auto */
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header .a***ount {
            float: right;
            color: white;
        }

        .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;
        }

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

        .sub-header .logo 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;
        }

        .slider .sd-img {
            width: 1226px;
            height: 460px;
        }
        .news{
            margin-top: 14px;
        }
        .news .channel{
            width: 228px;
            height: 164px;
                background: #5f5750;
            padding: 3px;
        }
        .news .channel .item{
            height: 82px;
            width: 76px;
            float: left;
            text-align: center;
            background: #5f5750;
        }

        .news .channel .item a{
            display: block;
            padding-top: 18px;
            font-size: 12px;
            color: #fff;
                opacity: .7; /* 透明度 */
            text-decoration: none;
        }
        .news .channel .item a:hover{
            opacity: 1;
        }

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

        .news .list-item{
            width: 316px;
            height: 170px;
        }

        .app{
            position: relative;
        }
        .app:hover .download{
            display: block;
        }
        .app .download{
            display: none;
            position: absolute;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="menu">
            <a href="http://www.mi.***">小米官网</a>
            <a href="http://www.mi.***">小米商城</a>
            <a href="http://www.mi.***">MIUI</a>
            <a href="http://www.mi.***">IoT</a>
            <a href="http://www.mi.***">云服务</a>
            <a href="http://www.mi.***">天星数科</a>
            <a href="http://www.mi.***">有品</a>
            <a href="http://www.mi.***">小爱开放平台</a>
            <a href="http://www.mi.***">企业团购</a>
            <a href="http://www.mi.***">资质证照</a>
            <a href="http://www.mi.***">协议规则</a>
            <a href="http://www.mi.***" class="app">下载app
                <div class="download">
                    <img src="/images/qcode.png"/>
                </div>
            </a>
            <a href="http://www.mi.***">Select Location</a>
        </div>
        <div class="a***ount">
            <a href="http://www.mi.***">登录</a>
            <a href="http://www.mi.***">注册</a>
            <a href="http://www.mi.***">消息通知</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.***/shop">
                <img src="/images/小米-logo.png">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.***/">Xiaomi手机</a>
            <a href="https://www.mi.***/">Redmi手机</a>
            <a href="https://www.mi.***/">电视</a>
            <a href="https://www.mi.***/">笔记本</a>
            <a href="https://www.mi.***/">平板</a>
            <a href="https://www.mi.***/">家电</a>
            <a href="https://www.mi.***/">路由器</a>
            <a href="https://www.mi.***/">服务中心</a>
            <a href="https://www.mi.***/">社区</a>
        </div>
        <div class="ht search"></div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="/images/小米商城图片.jpg">
        </div>
    </div>


</div>

<div class="news">
    <div class="container">
        <div class="channel left">
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.***/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="list-item left" style="margin-left: 14px">
            <img src="/images/小米商城图片1.jpg" />
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="/images/小米商城图片2.jpg" />
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="/images/小米商城图片3.jpg" />
        </div>
        <div style="clear:both;"></div>
    </div>
</div>
</body>
</html>

2.4 border

透明色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .c1{
      height: 50px;
      width: 500px;
      background-color: #5f5750;
      border-left: 3px solid transparent;
    }
    .c1:hover{
      border-left: 3px solid red;
    }
  </style>
</head>
<body>
  <div class="c1">菜单</div>
</body>
</html>

2.5 背景色

容易，略

3.BootStrap

别人已经帮我们写好的css。想使用，需要下载和引用。

下载
使用
- 在页面上引用BootStrap
- 编写时，按BootStrap的规则编写+自定制

3.1初识

v3版bootstrap
目录结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <!-- 生产版本 -->
<!--    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">  -->
</head>
<body>

<input type="button" value="提交" />
<input type="button" value="提交" class="btn btn-primary" />
<input type="button" value="提交" class="btn btn-su***ess" />
<input type="button" value="提交" class="btn btn-danger" />
<input type="button" value="提交" class="btn btn-danger btn-xs" />
</body>
</html>

3.2 导航

3.3栅格

https://v3.bootcss.***/css/#grid

把整体划分为12个格子

分类

响应式
根据屏幕的宽度不同，做不同的响应。

.col-sm-	页面宽度大于750px生效
.col-md-	970px
.col-lg-		1170px

非响应式
无论如何滑动页面大小，格子划分永远固定。

    <div class="col-xs-6" style="background-color: red">1</div>
    <div class="col-xs-6" style="background-color: green">2</div>

列偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
    <div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div>
</body>
</html>

3.4 container

container-fluid

<div class="container-fluid"> <!-- 平铺，然后9-3分 -->
  <div class="col-sm-9">左边</div>
  <div class="col-sm-3">右边</div>
</div>

container

<div class="container"> <!-- 平铺，然后9-3分 -->
  <div class="col-sm-9">左边</div>
  <div class="col-sm-3">右边</div>
</div>

3.5 面板

案例

效果图

布局图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>

<!--<div class="container"> 包住，然后9-3分-->
<div class="container-fluid"> <!-- 平铺，然后9-3分 -->
    <div class="col-sm-9">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin ***modo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
        </div>

        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin ***modo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
        </div>

        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin ***modo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
        </div>

        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                Panel content
                Panel content
                Panel content
            </div>
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                Panel content
                Panel content
                Panel content
            </div>
        </div>

        <div class="panel panel-danger">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                Panel content
                Panel content
                Panel content
            </div>
        </div>
    </div>
</div>

</body>
</html>

案例：登录

效果图

定义宽度+区域居中
内边距
bootstrap表单
阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>

    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#">中国联通xx系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">广西</a></li>
                <li><a href="#">上海</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
            表单区域
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail3">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="exampleInputPassword3">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-su***ess">
                    <i class="fa fa-save" aria-hidden="true"></i>
                    保 存
                </button>
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            数据列表
        </div>
        <!--
        <div class="panel-body">
            注意：以下是我们经过筛选出来的重要数据。
        </div>
        -->

        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
    <ul class="pagination">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
    </ul>

</div>


</body>
</html>

3.6 图标

bootstrap提供了一些图标，不多
font awesome组件
fontawesome网站
- 下载
- 引入
- 使用
  示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .navbar {
            border-radius: 0;
        }

        .more .more-item{
            display: inline-block;
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">
                    <i class="fa fa-search" aria-hidden="true"></i>
                </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>

<!--<div class="container"> 包住，然后9-3分-->
<div class="container-fluid"> <!-- 平铺，然后9-3分 -->
    <div class="col-sm-9">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                <div>
                    <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
                    <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
                    <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
                    <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin ***modo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
                <div class="more clearfix">
                    <div class="more-item">
                        <i class="fa fa-calendar" aria-hidden="true"></i> 2021-11-11
                    </div>
                    <div class="more-item">
                        <i class="fa fa-user-circle" aria-hidden="true"></i> xxx
                    </div>
                    <div class="more-item">
                        <i class="fa fa-***ments-o" aria-hidden="true"></i> 1000
                    </div>
                    <div class="more-item" style="float: right">
                        <i class="fa fa-***ments-o" aria-hidden="true"></i> 1000
                    </div>
                </div>
            </div>
        </div>

        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin ***modo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
        </div>

        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin ***modo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
        </div>

        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-fire" aria-hidden="true" style="color: red; font-size:18px"></i>
                最新推荐
            </div>
            <div class="panel-body">
                Panel content
                Panel content
                Panel content
            </div>
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                Panel content
                Panel content
                Panel content
            </div>
        </div>

        <div class="panel panel-danger">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                Panel content
                Panel content
                Panel content
            </div>
        </div>
    </div>
</div>

</body>
</html>

BootStrap依赖

BootStrap依赖JavaScript的类库，JQuery。

下载JQuery，在页面上应用上JQuery。https://jquery.***/download/
在页面上应用BootStrap的JavaScript类库。

<script src="static/js/jquery-3.7.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>

4.JavaScript

javascript,是一门编程语言。浏览器就是javascript语言的解释器。
dom和bom

相当于编程语言内置的模块。
例如：python中的re、random、time、json模块等。

jquery

相当于是编程语言的第三方模块。
例如：requests、openpyxl

4.1 代码位置

位置1：head的css样式下面
位置2：body的最尾部(推荐)

js代码的存在形式

可以写在当前html中
写在其他js文件中，导入使用

<script src="static/my.js"></script>

4.2 注释

在HTML中的注释

<!-- 注释内容 -->

在css中的注释，<style>代码块

/* 注释内容 */

在js中的注释，<script>代码块

// 注释内容
/* 注释内容 */

4.3 编程语言中的变量

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


    <script type="text/javascript">
      var name ="高倩";
      console.log(name);
    </script>
</body>
</html>

4.4 字符串类型

// 声明
var name = "高倩";
var name = String("高倩");
// 常见功能
var name="中国联通"
var v1 = name.length;
var v2 = name[0]; // = name.charAt(0)
var v3 = name.trim();
var v4 = name.substring(0, 2); // 前取后不取

案例：跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="txt">欢迎中国联通领导高倩莅临指导</span>

<script type="text/javascript">
    function show() {
        // 1.去HTML中找到某个标签并获取他的内容(DOM）
        var tag = document.getElementById("txt");
        var dataString = tag.innerText

        // 2.动态起来，把问二八年第一个字符放在字符串的最后面
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar;

        // 3.在HTML标签中更新内瓤
        tag.innerHTML = newText;
    }

    // javascript中的定时器，如：每1000ms执行一次show函数。
    setInterval(show, 1000);
</script>
</body>
</html>

4.5 数组

// 定义
var v1 = [11, 22, 33, 44];
var v2 = Array([11, 22, 33, 44]);
// 操作
v1[1]
v1[0] = "高倩";
v1.push("联通"); // 尾部追加 [11, 22, 33, 44, "联通"]
v1.unshift("联通"); // 尾部追加 ["联通", 11, 22, 33, 44]

v1.pop();
v1.shift();
v1.splice(索引位置, 1);
v1.splice(2, 1);

// 循环
for (var idx in v1){
	// idx=0/1/2/3 data=v1[idx]
}

for (var i=0; i<v1.length; i++){
	// i=0/1/2/3 data=v1[i]
}

案例：动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="city">
<!--        <li>北京</li>-->
    </ul>

    <script type="text/javascript">
        var cityList = ["北京", "上海", "深圳"];
        for (var idx in cityList) {
            var text = cityList[idx];

            // 创建<li>标签
            var tag = document.createElement("li");

            // 在li标签中写入内容
            tag.innerText = text;

            // 添加到id=city那个标签的里面
            var parentTag = document.getElementById('city')
            parentTag.appendChild(tag);
        }
    </script>
</body>
</html>

4.6对象(字典)

案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">
    <tr>
    </tr>
    </tbody>
</table>


<script type="text/javascript">
    var datalist = [
        {id: 1, name: "郭智", age: 19},
        {id: 1, name: "郭智", age: 19},
        {id: 1, name: "郭智", age: 19},
        {id: 1, name: "郭智", age: 19},
        {id: 1, name: "郭智", age: 19},
    ];
    for (var idx in datalist) {
        var info = datalist[idx]

        var tr = document.createElement('tr');
        for (var key in info) {
            var td = document.createElement('td');
            var text = info[key];
            td.innerText = text;
            tr.appendChild(td);
        }
        // console.log(tr)
        var bodyTag = document.getElementById('body');
        bodyTag.appendChild(tr);
    }
</script>
</body>
</html>

4.7 条件语句

4.8 函数

5. DOM

dom，一个模块，模块可以对HTML页面中的标签进行操作。

5.1 事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser">
<input type="button" value="点击添加" ondblclick="addCityInfo()">
<ul id="city">

</ul>

<script type="text/javascript">
    function addCityInfo() {
        // 1.找到输入的标签
        var txtTag = document.getElementById('txtUser');
        // 2.获取input框中用户输入的内容
        var newString = txtTag.value;
        // 判断用户输入是否为空，只有不为空才能继续。
        if (newString.length > 0) {
            var newTag = document.createElement('li');
            newTag.innerText = newString;
            var parentTag = document.getElementById('city');
            parentTag.appendChild(newTag);

            // 3.将input框内容清空
            txtTag.value = "";
        } else {
            alert("输入不能为空");
        }
    }
</script>
</body>
</html>

dom可以实现很多功能，但比较繁琐，页面上效果，一般用jQuery来实现/vue.js/react.js。

总结1

编码相关
计算机中的单位
字符串格式化(三种)
数据类型
运算符
推导式(简化生成数据)
函数编程
模块
面向对象
前端

6.jQuery

jQuery是一个javaScript第三方模块(第三方类库)。

基于jquery，自己开发一个功能。
现成的工具依赖jquery，例如：bootstrap动态效果。

6.1 初识jquery

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

<h1 id="txt">中国联通</h1>

<script src="static/js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
  // 利用jquery中的功能实现某些效果
  // 1.找到id=txt的标签  // 2.内容修改
  $("#txt").text("广西联通");
</script>
</body>
</html>

6.2 寻找标签(直接寻找)

id选择器：$("#txt")
样式选择器：$(".c1")
标签选择器：$("h1")
层级选择器：$(".c1 .c2 a")
多选择器：$(".c3,.c2,li")
属性选择器：$("input[name='n1']")

6.3 寻找标签(间接寻找)

找到上一个兄弟
找父子

案例：菜单的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus {
            height: 200px;
            height: 800px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
            cursor: pointer;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="item">
        <div class="header" onclick="clickMe(this);">上海</div>
        <div class="content hide">
            <a>宝山区</a>
            <a>青浦区</a>
            <a>浦东新区</a>
            <a>普陀区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="clickMe(this);">北京</div>
        <div class="content hide">
            <a>海淀区</a>
            <a>朝阳区</a>
            <a>大兴区</a>
            <a>昌平区</a>
        </div>
    </div>
</div>


<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
    function clickMe(self) {
        var hasHide = $(self).next().hasClass('hide');
        if (hasHide) {
            $(self).next().removeClass('hide');
        } else {
            $(self).next().addClass('hide');
        }
        // $(slef) -> 当前点击的那个标签

    }
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus {
            height: 200px;
            height: 800px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
            cursor: pointer;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="item">
        <div class="header" onclick="clickMe(this);">上海</div>
        <div class="content">
            <a>宝山区</a>
            <a>青浦区</a>
            <a>浦东新区</a>
            <a>普陀区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="clickMe(this);">北京</div>
        <div class="content hide">
            <a>海淀区</a>
            <a>朝阳区</a>
            <a>大兴区</a>
            <a>昌平区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="clickMe(this);">上海2</div>
        <div class="content hide">
            <a>海淀区</a>
            <a>朝阳区</a>
            <a>大兴区</a>
            <a>昌平区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="clickMe(this);">北京2</div>
        <div class="content hide">
            <a>海淀区</a>
            <a>朝阳区</a>
            <a>大兴区</a>
            <a>昌平区</a>
        </div>
    </div>
</div>


<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
    function clickMe(self) {
        $(self).next().removeClass('hide');
        $(self).parent().siblings().find('.content').addClass('hide');
    }
</script>

</body>
</html>

6.4 操作样式

addClass
removeClass
hasClass

6.5 值的操作

6.6 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
  <li>百度</li>
  <li>谷歌</li>
  <li>搜狗</li>
</ul>

<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
  $("li").click(function () {
      var text = $(this).text();
      console.log(text);
  });
</script>
</body>
</html>

在jQuery中可以删除某个标签

<div id="c1">内容</div>

$("#c1").remove();

# 案例
<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
  $("li").click(function () {
      $(this).remove();
  });

当页面框架加载完成之后执行代码(不必等img标签的图片传回完成)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>

<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
    $(function () {
        // 当页面的框架加载完成之后，自动就执行。
        $("li").click(function () {
            $(this).remove();
        });
    })

</script>
</body>
</html>

4.7 案例：表格操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>
            <input type="button" value="删除" class="delete">
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>
            <input type="button" value="删除" class="delete">
        </td>
    </tr>
</table>

<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
    $(function (){
        $(".delete").click(function (){
            $(this).parent().parent().remove()
        })
    })
</script>
</body>
</html>

7.前端整合

HTML
CSS
JavaScrip、JQuery
BootStrap（动态效果依赖jQuery）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">

            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">张三 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">我的账号</a></li>
                        <li><a href="#">修改密码</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注销</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="width: 100%; height: 100px;line-height: 100px;border: 1px solid green;text-align:center;">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
        Tooltip on left
    </button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on top
    </button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
            title="Tooltip on bottom">Tooltip on bottom
    </button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
        Tooltip on right
    </button>
</div>

<script src="static/js/jquery-3.7.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
</body>
</html>

案例：添加数据页面

人员信息录入功能，需要提供用户信息：
用户名、年龄、薪资、部门、入职时间（*）
对于事件的选择：不能输入；选择；插件：datetimepicker

下载插件

应用插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="static/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
</head>
<body>
<div class="container" style="margin-top: 20px;">
    <form class="form-horizontal">
        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="姓名">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="年龄">
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">薪资</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="薪资">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-10">
                        <select class="form-control">
                            <option>IT部门</option>
                            <option>销售部门</option>
                            <option>运营部门</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">入职日期</label>
                    <div class="col-sm-10">
                        <input type="text" id="dt" class="form-control" placeholder="入职日期">
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="static/js/jquery-3.7.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="static/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="static/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="static/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-***.js"></script>
<script>
    $(function () {
        $("#dt").datetimepicker({
            format: "dd MM yyyy - hh:ii",
            startDate: "0",
            language: "zh-***",
            autoclose: true
        });
    })
</script>
</body>
</html>

python 学习笔记 web

转载请说明出处内容投诉
CSS教程_站长资源网 » [学习笔记]python的web开发全家桶1-前端

56

分享到：