您现在的位置是：首页 > 技术教程 正文

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

admin 阅读：35 2024-03-31
后台-插件-广告管理-内容页头部广告（手机）

源学习视频

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

  • 前端开发：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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

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

2.HTML

2.1编码

  • 1

2.2 title

<head> <meta charset="UTF-8"> <title>Titletitle> head>
  • 1
  • 2
  • 3
  • 4

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>
  • 1
  • 2
  • 3
  • 4

2.4.3 图片

标签，称为自闭合标签。

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

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

2.4.4 列表

无序列表 <ul> <li>中国移动li> <li>中国联通li> <li>中国电信li> ul> 有序列表 <ol> <li>中国移动li> <li>中国联通li> <li>中国电信li> ol>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

2.4.5 表格

<table border="1"> <thead> <tr> <th>IDth> <th>姓名th> <th>年龄th> tr> thead> <tbody> <tr> <td>10td> <td>张三td> <td>19td>tr> <tr> <td>11td> <td>张三td> <td>19td>tr> <tr> <td>12td> <td>张三td> <td>19td>tr> tbody> table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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="提交"> --提交表单
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

2.4.7 下拉框

<select> <option>北京option> <option>上海option> <option>深圳option> select> <select multiple> <option>北京option> <option>上海option> <option>深圳option> select>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

2.4.8 多行文本

<textarea rows="3">textarea>
  • 1

网络请求

在这里插入图片描述

案例：用户注册

  • 新建项目
  • 创建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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • HTML代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 页面上的数据，想要提交到后台：
    • form标签包裹要提交的含数据的标签
    • 提交方式：method=”get“
    • 提交的地址：action=“/xxx/xx/xx”
    • 在form标签里面必须有一个submit标签
  • 在form里面的一些标签：input/select/textarea
    • 一定要写name属性：

3.CSS样式

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

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

3.1CSS应用方式

1.在标签上用

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

2.在head标签中写style标签

<head> <meta charset="UTF-8"> <title>Titletitle> <style> .c1{ color:red; } style> head>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

可以在多个标签中复用

3.写到文件中

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

# html <head> <meta charset="UTF-8"> <title>Titletitle> <link rel='stylesheet' href='common.css' /> head>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
.c1{ color:red; }
  • 1
  • 2
  • 3

可以在多个HTML文件中复用

3.3 CSS选择器

  • id选择器
# id选择器 #c1{ } <div id='c1'>div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 类选择器(用的最多)
# 类选择器 .c1{ }
'c1'>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 标签选择器
# 标签选择器 div{ color:red; } xxx
  • 1
  • 2
  • 3
  • 4
  • 5
  • 属性选择器
input[type='text']{ border: 1px solid red; } <input type='text'>
  • 1
  • 2
  • 3
  • 4
  • 后代选择器
.yy li{ color: red; } .yy > li{ color: pink; } <div class='yy'> <ul> <li>li> <li>li> ul> div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

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

在这里插入图片描述

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

3.4 样式

1.高度和宽度

.c1{ height: 300px; width: 500px; }
  • 1
  • 2
  • 3
  • 4

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

div并不是一定是块级标签，span也不是一定是行内标签，可以通过在样式中修改display来修改
在这里插入图片描述

3.字体设置

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

4.文字对齐方式

.c1{ height: 59px; width: 300px; border: 1px solid red; text-align: center; /* 水平方向居中 */ line-height: 59px; /* 方向水平居中 */ }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

5.浮动

<div> <span>左边span> <span style="float:right">右边span> div>
  • 1
  • 2
  • 3
  • 4

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

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> .item{ float: left; width: 280px; height: 170px; border: 1px solid red; } style> head> <body> <div> <div 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

6.内边距

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

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> .outer { border: 1px solid red; height: 200px; width: 200px; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } style> head> <body> <div class="outer"> <div style="background-color: gold">听妈妈的话div> <div> 小朋友你是否有很多问号 div> div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

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

7.外边距

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

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div style="height:200px; background-color: dodgerblue">div> <div style="height:100px; background-color: red; margin-top: 10px;">div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

案例：小米商城

小米顶部

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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>MIUIa> <a>IoTa> <a>云服务a> <a>天星数科a> <a>有品a> <a>小爱开放平台a> <a>企业团购a> <a>资质证照a> <a>协议规则a> <a>下载appa> <a>Select Locationa> div> <div class="account"> <a>登录a> <a>注册a> <a>消息通知a> div> <div style="clear: both">div> div> div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66

小结

在这里插入图片描述
一定记得加入

二级菜单

log部分
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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">fdiv> <div class="ht search">fdiv> <div class="clear:both;">div> div> div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
菜单部分
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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">fdiv> <div style="clear: both">div> div> div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79

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

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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">MIUIa> <a href="http://www.mi.com">IoTa> <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">下载appa> <a href="http://www.mi.com">Select Locationa> 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135

小结

在这里插入图片描述

案例：推荐区域

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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">MIUIa> <a href="http://www.mi.com">IoTa> <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">下载appa> <a href="http://www.mi.com">Select Locationa> 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251

小结

  • 设置不透明度
opacity: 0.5; /* 0-1 */
  • 1

CSS知识点

2.1 hover(伪类)

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

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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">下载APPdiv> <div class="download"> <img src="images/小米-logo.png"> div> div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

2.2 after

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

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> .c1:after{ content: "大帅哥"; } style> head> <body> <div class="c1">张三div> <div class="c1">李四div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
after的应用-clearfix清除浮动

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

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> .clearfix:after { content: ""; display: block; clear: both; } .item{ float: left; } style> head> <body> <div class="clearfix"> <div class="item">1div> <div class="item">2div> <div class="item">3div> div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

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

2.3 position

fixed
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

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

案例：对话框
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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">asdfasdfasdfsdfdiv> <div class="mask">div> <div class="dialog">div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
relative和absolute的配合使用

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

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
案例：小米商城下载APP
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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">MIUIa> <a href="http://www.mi.com">IoTa> <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 Locationa> 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268

2.4 border

  • 透明色
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

2.5 背景色

容易，略

3.BootStrap

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

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

3.1初识

v3版bootstrap
目录结构：
在这里插入图片描述

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

3.2 导航

3.3栅格

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

  • 把整体划分为12个格子

  • 分类
    在这里插入图片描述

    • 响应式
      根据屏幕的宽度不同，做不同的响应。.col-sm- 页面宽度大于750px生效 .col-md- 970px .col-lg- 1170px
      • 1
      • 2
      • 3
    • 非响应式
      无论如何滑动页面大小，格子划分永远固定。 <div class="col-xs-6" style="background-color: red">1div> <div class="col-xs-6" style="background-color: green">2div>
      • 1
      • 2
    • 列偏移DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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">2div> body> html>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

3.4 container

  • container-fluid
<div class="container-fluid"> <div class="col-sm-9">左边div> <div class="col-sm-3">右边div> div>
  • 1
  • 2
  • 3
  • 4
  • container
<div class="container"> <div class="col-sm-9">左边div> <div class="col-sm-3">右边div> div>
  • 1
  • 2
  • 3
  • 4

3.5 面板

案例

效果图
在这里插入图片描述
布局图
在这里插入图片描述
代码

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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"> <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 navigationspan> <span class="icon-bar">span> <span class="icon-bar">span> <span class="icon-bar">span> button> <a class="navbar-brand" href="#">Branda> div> <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="#">Linka>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="#">Actiona>li> <li><a href="#">Another actiona>li> <li><a href="#">Something else herea>li> <li role="separator" class="divider">li> <li><a href="#">Separated linka>li> <li role="separator" class="divider">li> <li><a href="#">One more separated linka>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">Submitbutton> form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Linka>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="#">Actiona>li> <li><a href="#">Another actiona>li> <li><a href="#">Something else herea>li> <li role="separator" class="divider">li> <li><a href="#">Separated linka>li> ul> li> ul> div> div> div> <div class="container-fluid"> <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 headingh4> 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 headingh4> 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 headingh4> 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< classpagination=""> li<> a< href#="" aria-labelPrevious=""> span< aria-hiddentrue="">«span> a> 1li>li<> a<href#="">a> 2li>li<> a<href#="">a> 3li>li<> a<href#="">a> 4li>li<> a<href#="">a> 5li>li<> a<href#="">a> »li>li<> a<href#=""aria-labelNext=""> span<aria-hiddentrue=""> span> a> li> ul> 最新推荐div> div<classcol-sm-3=""> div<classpanel panel-default=""> div<classpanel-heading=""> Panel content Panel content Panel content div> div<classpanel-body=""> div> 最新推荐div> div<classpanel panel-primary=""> div<classpanel-heading=""> Panel content Panel content Panel content div> div<classpanel-body=""> div> 最新推荐div> div<classpanel panel-danger=""> div<classpanel-heading=""> Panel content Panel content Panel content div> div<classpanel-body=""> div> div> div> div> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171

    • 案例：登录

    效果图


    在这里插入图片描述
    • 定义宽度+区域居中
    • 内边距
    • bootstrap表单
    • 阴影
      • Title DOCTYPEhtml> html<langen="">head<> meta<charsetUTF-8="">title<> title> link<relstylesheet=""hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css=""> link<relstylesheet=""hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.css="">style<> style> Toggle navigationhead>body<> div<classnavbar navbar-default=""> div<classcontainer=""> div<classnavbar-header=""> button<typebutton=""classnavbar-toggle collapsed=""data-togglecollapse=""data-target#bs-example-navbar-collapse-1=""aria-expandedfalse=""> span<classsr-only=""> span> span<classicon-bar=""> span> span<classicon-bar=""> span> span<classicon-bar=""> span> 中国联通xx系统button> a<classnavbar-brand=""href#=""> a> 广西div> div<classcollapse navbar-collapse=""idbs-example-navbar-collapse-1=""> ul<classnav navbar-nav="">li<> a<href#="">a> 上海li>li<> a<href#="">a> li> 登录ul> ul<classnav navbar-nav navbar-right="">li<> a<href#="">a> 注册li>li<> a<href#="">a> li> ul> div> div> div> div<classcontainer=""> div<classpanel panel-default=""> div<classpanel-heading=""> span<classglyphicon glyphicon-edit=""aria-hiddentrue=""> 表单区域 span> Email addressdiv> div<classpanel-body=""> form<classform-inline=""> div<classform-group=""> label<classsr-only=""forexampleInputEmail3=""> label> input<typeemail=""classform-control=""idexampleInputEmail3=""placeholderEmail=""> Passworddiv> div<classform-group=""> label<classsr-only=""forexampleInputPassword3=""> label> input<typepassword=""classform-control=""idexampleInputPassword3=""placeholderPassword=""> div> button<typesubmit=""classbtn btn-success=""> i<classfa fa-save=""aria-hiddentrue=""> 保 存 i> button> form> div> div> div<classpanel panel-default=""> div<classpanel-heading=""> span<classglyphicon glyphicon-th-list=""aria-hiddentrue=""> 数据列表 span> #div> table<classtable table-bordered table-hover="">thead<>tr<>th<> First Nameth>th<> Last Nameth>th<> 操作th>th<> th> tr> 1thead>tbody<>tr<> th<scoperow=""> Markth>td<> Ottotd>td<> 编辑td>td<> a<classbtn btn-primary btn-xs=""> 删除a> a<classbtn btn-danger btn-xs=""> a> td> 2tr>tr<> th<scoperow=""> Jacobth>td<> Thorntontd>td<> 编辑td>td<> a<classbtn btn-primary btn-xs=""> 删除a> a<classbtn btn-danger btn-xs=""> a> td> 3tr>tr<> th<scoperow=""> Larryth>td<> the Birdtd>td<> 编辑td>td<> a<classbtn btn-primary btn-xs=""> 删除a> a<classbtn btn-danger btn-xs=""> a> td> tr> tbody> table> «div> ul<classpagination=""> li<classdisabled=""> a<href#=""aria-labelPrevious=""> span<aria-hiddentrue="">span>a> 1 (current)li> li<classactive=""> a<href#=""> span<classsr-only="">span>a> 2li>li<> a<href#="">a> 3li>li<> a<href#="">a> 4li>li<> a<href#="">a> 5li>li<> a<href#="">a> »li>li<> a<href#=""aria-labelNext=""> span<aria-hiddentrue="">span>a> li> ul> div> body> html>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79
      • 80
      • 81
      • 82
      • 83
      • 84
      • 85
      • 86
      • 87
      • 88
      • 89
      • 90
      • 91
      • 92
      • 93
      • 94
      • 95
      • 96
      • 97
      • 98
      • 99
      • 100
      • 101
      • 102
      • 103
      • 104
      • 105
      • 106
      • 107
      • 108
      • 109
      • 110
      • 111
      • 112
      • 113
      • 114
      • 115
      • 116
      • 117
      • 118
      • 119
      • 120
      • 121
      • 122
      • 123
      • 124
      • 125
      • 126
      • 127
      • 128
      • 129
      • 130
      • 131
      • 132
      • 133

        • 3.6 图标

        • bootstrap提供了一些图标，不多
        • font awesome组件fontawesome网站

          • 下载
          • 引入
          • 使用 示例：

            • Title DOCTYPEhtml> html<langen="">head<> meta<charsetUTF-8="">title<> title> link<relstylesheet=""hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css=""> link<relstylesheet=""hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.css="">style<> 0 inline-block 20px .navbar{border-radius:;}.more .more-item{display:;margin-right:;} style> Toggle navigationhead>body<> div<classnavbar navbar-default=""> div<classcontainer-fluid=""> div<classnavbar-header=""> button<typebutton=""classnavbar-toggle collapsed=""data-togglecollapse=""data-target#bs-example-navbar-collapse-1=""aria-expandedfalse=""> span<classsr-only=""> span> span<classicon-bar=""> span> span<classicon-bar=""> span> span<classicon-bar=""> span> Brandbutton> a<classnavbar-brand=""href#=""> a> Link (current)div> div<classcollapse navbar-collapse=""idbs-example-navbar-collapse-1=""> ul<classnav navbar-nav=""> li<classactive=""> a<href#=""> span<classsr-only="">span>a> Linkli>li<> a<href#="">a> Dropdown li> li<classdropdown=""> a<href#=""classdropdown-toggle=""data-toggledropdown=""rolebutton=""aria-haspopuptrue=""aria-expandedfalse=""> span<classcaret="">span> Actiona> ul<classdropdown-menu="">li<> a<href#="">a> Another actionli>li<> a<href#="">a> Something else hereli>li<> a<href#="">a> li> li<roleseparator=""classdivider=""> Separated linkli>li<> a<href#="">a> li> li<roleseparator=""classdivider=""> One more separated linkli>li<> a<href#="">a> li> ul> li> ul> form<classnavbar-form navbar-left=""> div<classform-group=""> input<typetext=""classform-control=""placeholderSearch=""> div> button<typesubmit=""classbtn btn-default=""> i<classfa fa-search=""aria-hiddentrue=""> i> button> Linkform> ul<classnav navbar-nav navbar-right="">li<> a<href#="">a> Dropdown li> li<classdropdown=""> a<href#=""classdropdown-toggle=""data-toggledropdown=""rolebutton=""aria-haspopuptrue=""aria-expandedfalse=""> span<classcaret="">span> Actiona> ul<classdropdown-menu="">li<> a<href#="">a> Another actionli>li<> a<href#="">a> Something else hereli>li<> a<href#="">a> li> li<roleseparator=""classdivider=""> Separated linkli>li<> a<href#="">a> li> ul> li> ul> div> div> div> div<classcontainer-fluid=""> div<classcol-sm-9=""> div<classmedia=""> div<classmedia-left=""> a<href#=""> img<classmedia-object=""data-srcholder.js/64x64=""alt64x64=""srcdata:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg===""data-holder-renderedtrue=""style=" 64px 64pxwidth:;height:;"> a> Media headingdiv> div<classmedia-body=""> h4<classmedia-heading=""> h4>div<> i<classfa fa-star=""aria-hiddentrue=""style=" #f0ad4ecolor:"> i> i<classfa fa-star=""aria-hiddentrue=""style=" #f0ad4ecolor:"> i> i<classfa fa-star=""aria-hiddentrue=""style=" #f0ad4ecolor:"> i> i<classfa fa-star=""aria-hiddentrue=""style=" #f0ad4ecolor:"> i> i<classfa fa-star-o=""aria-hiddentrue=""> i> 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<classmore clearfix=""> div<classmore-item=""> i<classfa fa-calendar=""aria-hiddentrue=""> 2021-11-11 i> div> div<classmore-item=""> i<classfa fa-user-circle=""aria-hiddentrue=""> xxx i> div> div<classmore-item=""> i<classfa fa-comments-o=""aria-hiddentrue=""> 1000 i> div> div<classmore-item=""style=" rightfloat:"> i<classfa fa-comments-o=""aria-hiddentrue=""> 1000 i> div> div> div> div> div<classmedia=""> div<classmedia-left=""> a<href#=""> img<classmedia-object=""data-srcholder.js/64x64=""alt64x64=""srcdata:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg===""data-holder-renderedtrue=""style=" 64px 64pxwidth:;height:;"> a> Media headingdiv> div<classmedia-body=""> h4<classmedia-heading=""> 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. h4> div> div> div<classmedia=""> div<classmedia-left=""> a<href#=""> img<classmedia-object=""data-srcholder.js/64x64=""alt64x64=""srcdata:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg===""data-holder-renderedtrue=""style=" 64px 64pxwidth:;height:;"> a> Media headingdiv> div<classmedia-body=""> h4<classmedia-heading=""> 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. h4> div> «div> ul<classpagination="">li<> a<href#=""aria-labelPrevious=""> span<aria-hiddentrue=""> span> a> 1li>li<> a<href#="">a> 2li>li<> a<href#="">a> 3li>li<> a<href#="">a> 4li>li<> a<href#="">a> 5li>li<> a<href#="">a> »li>li<> a<href#=""aria-labelNext=""> span<aria-hiddentrue=""> span> a> li> ul> div> div<classcol-sm-3=""> div<classpanel panel-default=""> div<classpanel-heading=""> i<classfa fa-fire=""aria-hiddentrue=""style=" red 18pxcolor:;font-size:"> 最新推荐 i> Panel content Panel content Panel content div> div<classpanel-body=""> div> 最新推荐div> div<classpanel panel-primary=""> div<classpanel-heading=""> Panel content Panel content Panel content div> div<classpanel-body=""> div> 最新推荐div> div<classpanel panel-danger=""> div<classpanel-heading=""> Panel content Panel content Panel content div> div<classpanel-body=""> div> div> div> div> body> html>
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7
            • 8
            • 9
            • 10
            • 11
            • 12
            • 13
            • 14
            • 15
            • 16
            • 17
            • 18
            • 19
            • 20
            • 21
            • 22
            • 23
            • 24
            • 25
            • 26
            • 27
            • 28
            • 29
            • 30
            • 31
            • 32
            • 33
            • 34
            • 35
            • 36
            • 37
            • 38
            • 39
            • 40
            • 41
            • 42
            • 43
            • 44
            • 45
            • 46
            • 47
            • 48
            • 49
            • 50
            • 51
            • 52
            • 53
            • 54
            • 55
            • 56
            • 57
            • 58
            • 59
            • 60
            • 61
            • 62
            • 63
            • 64
            • 65
            • 66
            • 67
            • 68
            • 69
            • 70
            • 71
            • 72
            • 73
            • 74
            • 75
            • 76
            • 77
            • 78
            • 79
            • 80
            • 81
            • 82
            • 83
            • 84
            • 85
            • 86
            • 87
            • 88
            • 89
            • 90
            • 91
            • 92
            • 93
            • 94
            • 95
            • 96
            • 97
            • 98
            • 99
            • 100
            • 101
            • 102
            • 103
            • 104
            • 105
            • 106
            • 107
            • 108
            • 109
            • 110
            • 111
            • 112
            • 113
            • 114
            • 115
            • 116
            • 117
            • 118
            • 119
            • 120
            • 121
            • 122
            • 123
            • 124
            • 125
            • 126
            • 127
            • 128
            • 129
            • 130
            • 131
            • 132
            • 133
            • 134
            • 135
            • 136
            • 137
            • 138
            • 139
            • 140
            • 141
            • 142
            • 143
            • 144
            • 145
            • 146
            • 147
            • 148
            • 149
            • 150
            • 151
            • 152
            • 153
            • 154
            • 155
            • 156
            • 157
            • 158
            • 159
            • 160
            • 161
            • 162
            • 163
            • 164
            • 165
            • 166
            • 167
            • 168
            • 169
            • 170
            • 171
            • 172
            • 173
            • 174
            • 175
            • 176
            • 177
            • 178
            • 179
            • 180
            • 181
            • 182
            • 183
            • 184
            • 185
            • 186
            • 187
            • 188
            • 189
            • 190
            • 191
            • 192
            • 193
            • 194
            • 195
            • 196
            • 197
            • 198
            • 199
            • 200
            • 201
            • 202
            • 203

              • BootStrap依赖

              BootStrap依赖JavaScript的类库，JQuery。

              • 下载JQuery，在页面上应用上JQuery。https://jquery.com/download/
              • 在页面上应用BootStrap的JavaScript类库。
                • script<srcstatic/js/jquery-3.7.0.min.js=""> script> script<srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.js=""> 相当于编程语言内置的模块。 例如：python中的re、random、time、json模块等。 相当于是编程语言的第三方模块。 例如：requests、openpyxl script>
                • 1
                • 2

                  • 4.JavaScript

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

                          • 4.1 代码位置

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



                          在这里插入图片描述

                          js代码的存在形式

                          • 可以写在当前html中
                          • 写在其他js文件中，导入使用
                            • script<srcstatic/my.js=""> script>
                            • 1

                              • 4.2 注释

                              在HTML中的注释

                              • 1

                                • 在css中的注释，