[学习笔记]python的web开发全家桶(ing)

这篇具有很好参考价值的文章主要介绍了[学习笔记]python的web开发全家桶(ing)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

源学习视频

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

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

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

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

1.快速开发网站

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.com">点击跳转</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>

网络请求

[学习笔记]python的web开发全家桶(ing)

案例:用户注册

  • 新建项目
  • 创建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.写到文件中

把样式都写到common.css文件中,然后在html中引入该文件。

# html
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel='stylesheet' href='common.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标签

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

[学习笔记]python的web开发全家桶(ing)

如果不想下面的覆盖上面的样式,则可以使用! 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来修改
[学习笔记]python的web开发全家桶(ing)

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 .account {
            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="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>
</body>
</html>

小结

[学习笔记]python的web开发全家桶(ing)
一定记得加入<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.com/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.com/shop">
          <img src="/images/小米-logo.png">
        </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">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 .account {
            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.com">小米官网</a>
            <a href="http://www.mi.com">小米商城</a>
            <a href="http://www.mi.com">MIUI</a>
            <a href="http://www.mi.com">IoT</a>
            <a href="http://www.mi.com">云服务</a>
            <a href="http://www.mi.com">天星数科</a>
            <a href="http://www.mi.com">有品</a>
            <a href="http://www.mi.com">小爱开放平台</a>
            <a href="http://www.mi.com">企业团购</a>
            <a href="http://www.mi.com">资质证照</a>
            <a href="http://www.mi.com">协议规则</a>
            <a href="http://www.mi.com">下载app</a>
            <a href="http://www.mi.com">Select Location</a>
        </div>
        <div class="account">
            <a href="http://www.mi.com">登录</a>
            <a href="http://www.mi.com">注册</a>
            <a href="http://www.mi.com">消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <a href="https://www.mi.com/shop">
                <img src="/images/小米-logo.png">
            </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>

小结

[学习笔记]python的web开发全家桶(ing)

案例:推荐区域

<!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 .account {
            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.com">小米官网</a>
            <a href="http://www.mi.com">小米商城</a>
            <a href="http://www.mi.com">MIUI</a>
            <a href="http://www.mi.com">IoT</a>
            <a href="http://www.mi.com">云服务</a>
            <a href="http://www.mi.com">天星数科</a>
            <a href="http://www.mi.com">有品</a>
            <a href="http://www.mi.com">小爱开放平台</a>
            <a href="http://www.mi.com">企业团购</a>
            <a href="http://www.mi.com">资质证照</a>
            <a href="http://www.mi.com">协议规则</a>
            <a href="http://www.mi.com">下载app</a>
            <a href="http://www.mi.com">Select Location</a>
        </div>
        <div class="account">
            <a href="http://www.mi.com">登录</a>
            <a href="http://www.mi.com">注册</a>
            <a href="http://www.mi.com">消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <a href="https://www.mi.com/shop">
                <img src="/images/小米-logo.png">
            </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="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.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/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 .account {
            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.com">小米官网</a>
            <a href="http://www.mi.com">小米商城</a>
            <a href="http://www.mi.com">MIUI</a>
            <a href="http://www.mi.com">IoT</a>
            <a href="http://www.mi.com">云服务</a>
            <a href="http://www.mi.com">天星数科</a>
            <a href="http://www.mi.com">有品</a>
            <a href="http://www.mi.com">小爱开放平台</a>
            <a href="http://www.mi.com">企业团购</a>
            <a href="http://www.mi.com">资质证照</a>
            <a href="http://www.mi.com">协议规则</a>
            <a href="http://www.mi.com" class="app">下载app
                <div class="download">
                    <img src="/images/qcode.png"/>
                </div>
            </a>
            <a href="http://www.mi.com">Select Location</a>
        </div>
        <div class="account">
            <a href="http://www.mi.com">登录</a>
            <a href="http://www.mi.com">注册</a>
            <a href="http://www.mi.com">消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <a href="https://www.mi.com/shop">
                <img src="/images/小米-logo.png">
            </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="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.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/shop">
                    <img src="/images/v1.png" alt="保障服务">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a  href="https://www.mi.com/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
目录结构:
[学习笔记]python的web开发全家桶(ing)

<!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-success" />
<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.com/css/#grid

  • 把整体划分为12个格子

  • 分类
    [学习笔记]python的web开发全家桶(ing)

    • 响应式
      根据屏幕的宽度不同,做不同的响应。
      .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 面板

案例

效果图
[学习笔记]python的web开发全家桶(ing)
布局图
[学习笔记]python的web开发全家桶(ing)
代码

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

案例:登录

效果图
[学习笔记]python的web开发全家桶(ing)

  • 定义宽度+区域居中
  • 内边距
  • 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-success">
                    <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 commodo. 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-comments-o" aria-hidden="true"></i> 1000
                    </div>
                    <div class="more-item" style="float: right">
                        <i class="fa fa-comments-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 commodo. 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 commodo. 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.com/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的最尾部(推荐)
[学习笔记]python的web开发全家桶(ing)

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对象(字典)

[学习笔记]python的web开发全家桶(ing)

案例:动态表格

<!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 条件语句

[学习笔记]python的web开发全家桶(ing)

4.8 函数

[学习笔记]python的web开发全家桶(ing)

5. DOM

dom,一个模块,模块可以对HTML页面中的标签进行操作。
[学习笔记]python的web开发全家桶(ing)
[学习笔记]python的web开发全家桶(ing)

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

  • 编码相关
    [学习笔记]python的web开发全家桶(ing)
    [学习笔记]python的web开发全家桶(ing)
    [学习笔记]python的web开发全家桶(ing)
    [学习笔记]python的web开发全家桶(ing)
  • 计算机中的单位
  • 字符串格式化(三种)
    [学习笔记]python的web开发全家桶(ing)
  • 数据类型
    [学习笔记]python的web开发全家桶(ing)
  • 运算符
    [学习笔记]python的web开发全家桶(ing)
  • 推导式(简化生成数据)
  • 函数编程
    [学习笔记]python的web开发全家桶(ing)
  • 模块
    [学习笔记]python的web开发全家桶(ing)
    [学习笔记]python的web开发全家桶(ing)
    [学习笔记]python的web开发全家桶(ing)
  • 面向对象
    [学习笔记]python的web开发全家桶(ing)
  • 前端
    [学习笔记]python的web开发全家桶(ing)

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 寻找标签(间接寻找)

  • 找到上一个兄弟
    [学习笔记]python的web开发全家桶(ing)
  • 找父子
    [学习笔记]python的web开发全家桶(ing)
    [学习笔记]python的web开发全家桶(ing)

案例:菜单的切换

<!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 值的操作

[学习笔记]python的web开发全家桶(ing)

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文章来源地址https://www.toymoban.com/news/detail-444018.html

  • 下载插件
  • 应用插件
<!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-CN.js"></script>
<script>
    $(function () {
        $("#dt").datetimepicker({
            format: "dd MM yyyy - hh:ii",
            startDate: "0",
            language: "zh-CN",
            autoclose: true
        });
    })
</script>
</body>
</html>

到了这里,关于[学习笔记]python的web开发全家桶(ing)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web开发学习笔记(2.js)

    1.引入 2.js的两种引入方式 3.输出语句 4.全等运算符 5.定义函数 6.数组 7.数组属性 8.字符串对象的对应方法 9.自定义对象 10.json对象 11.bom属性 12.window属性 13.定时刷新时间  14.跳转网址 15.DOM文档对象模型 16.获取DOM对象,根据DOM对象来操作网页 如下图,使用js来更改html内容 17

    2024年02月01日
    浏览(34)
  • web安全学习笔记【21】——安全开发

    安全开发-PHP应用留言板功能超全局变量数据库操作第三方插件引用 #知识点: 1、 PHP留言板前后端功能实现 2、 数据库创建架构 增删改查 3、 内置超全局变量HTMLJS混编 4、 第三方应用插件传参对象调用 DAY1 #章节点 PHP: 功能: 新闻 列表, 会员中心 , 资源下载 , 留言 版,

    2024年04月14日
    浏览(52)
  • web开发学习笔记(9.Tomcat介绍)

            1.简介 2.tomcat和nginx等web应用服务器的区别 http://t.csdnimg.cn/OL9Qt 3.tomcat基本使用 4.tomcat更改端口号 5. 部署

    2024年01月21日
    浏览(41)
  • web开发学习笔记(6.element ui)

    1.安装 2.在app.vue中引入ElementView中的内容 3.表格控件,当页大小发生变化,当当前页发生变化 4.对话框组件 5.将form表单中的数据打印出来 6.当遇到日期选择器得到的数据为昨日时,应该加入 value-format=\\\"yyyy-MM-dd\\\"即可避免这个问题 7.vue中安装axios 8.使用插槽构建三元表达式 9.v

    2024年01月17日
    浏览(48)
  • web开发学习笔记(1.html css)

    css负责布局 js负责动作 2.磁盘路径 3.水平线标签 4.引入css 5.无语义标签 6.选择器 7.播放视频和音频 8.换行 br 9.段落标签 p/p 10.首行缩进 11.边距 12.盒子模型,居中显示,  margin后面的四个值顺序为上右下左,auto表示自动 13.表格标签 14.表单标签 15.表单项 16.表单示例

    2024年01月23日
    浏览(54)
  • web开发学习笔记(13.mybatis基于注解配置)

    1.使用mybatis基本步骤 2.引入依赖 3.配置application.properties   配置数据库连接信息 4.编写实体类和接口 5.编写测试类 6.或者使用stream流的方式进行输出 7.设置查看mapper层里的提示信息,方便操作 8.  使用jdbc连接数据库 9.数据库连接池 10.lombok,在编译时,会自动生成对应的java代

    2024年01月23日
    浏览(49)
  • 《Java Web轻量级整合开发入门》学习笔记

    轻量级Java Web整合开发 第一章 轻量级Java Web开发概述 1.2  java web 开发概述 1.JSP是一种编译执行的前台页面技术。对于每个JSP页面,Web服务器都会生成一个相应的Java文件,然后再编译该Java文件,生成相应的Class类型文件。在客户端访问到的JSP页面,就是相应Class文件执行的结果

    2024年02月08日
    浏览(58)
  • python3 爬虫相关学习8:python 的常见报错内容汇总(持续收集ing)

    目录 1 低级错误(比如拼写错误等)  1.1 NameError:  1.2 属性错误 AttributeError:  属性拼写错误 2  应用错误(类型应用,属性使用的错误) 2.1 类型错误 TypeError:  如字符串连接错误 2.2  属性应用错误  AttributeError 3 模块相关错误 3.1 找不到对应模块 ModuleNotFoundError: 3.2 相关模

    2024年02月04日
    浏览(44)
  • web开发学习笔记(10.postman请求响应,后端接口基础知识)

    1.springboot使用get请求接受简单参数 上述写法不去别get或者post请求 2.postman各种提交方式的区别 1、form-data:                     就是http请求中的 multipart/form-data ,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。当上传

    2024年01月20日
    浏览(55)
  • 【python学习笔记】:实现网页视频自动下载并保存

    如何使用python爬虫实现网页视频自动下载并保存: 使用python爬取页面,然后自动下载视频,但是这样会有一个问题,我并不是需要所有视频,有些是垃圾视频不需要下载,python似乎还没法做到识别我对哪些视频是有价值的,所以这一步人工绕不开,我选择直接把目标视频的详

    2024年02月11日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包