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

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

admin 阅读： 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 class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«span> a> li> <li><a href="#">1a>li> <li><a href="#">2a>li> <li><a href="#">3a>li> <li><a href="#">4a>li> <li><a href="#">5a>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>
  • 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表单
  • 阴影
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"> <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"> <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="#">中国联通xx系统a> div> <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> div> 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 addresslabel> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword3">Passwordlabel> <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> <table class="table table-bordered table-hover"> <thead> <tr> <th>#th> <th>First Nameth> <th>Last Nameth> <th>操作th> tr> thead> <tbody> <tr> <th scope="row">1th> <td>Marktd> <td>Ottotd> <td> <a class="btn btn-primary btn-xs">编辑a> <a class="btn btn-danger btn-xs">删除a> td> tr> <tr> <th scope="row">2th> <td>Jacobtd> <td>Thorntontd> <td> <a class="btn btn-primary btn-xs">编辑a> <a class="btn btn-danger btn-xs">删除a> td> tr> <tr> <th scope="row">3th> <td>Larrytd> <td>the Birdtd> <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="#">2a>li> <li><a href="#">3a>li> <li><a href="#">4a>li> <li><a href="#">5a>li> <li><a href="#" aria-label="Next"><span aria-hidden="true">»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网站
    • 下载
    • 引入
    • 使用
      示例：
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"> <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"> <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"> <i class="fa fa-search" aria-hidden="true">i> button> 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> <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 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 class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«span> a> li> <li><a href="#">1a>li> <li><a href="#">2a>li> <li><a href="#">3a>li> <li><a href="#">4a>li> <li><a href="#">5a>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>
  • 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 src="static/js/jquery-3.7.0.min.js">script> <script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js">script>
  • 1
  • 2

4.JavaScript

  • javascript,是一门编程语言。浏览器就是javascript语言的解释器。
  • dom和bom
相当于编程语言内置的模块。 例如：python中的re、random、time、json模块等。
  • 1
  • 2
  • jquery
相当于是编程语言的第三方模块。 例如：requests、openpyxl
  • 1
  • 2

4.1 代码位置

位置1：head的css样式下面
位置2：body的最尾部(推荐)
在这里插入图片描述

js代码的存在形式

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

4.2 注释

在HTML中的注释

  • 1

在css中的注释，