Django web开发(一) - 前端
admin 阅读： 2024-03-19
| 后台-插件-广告管理-内容页头部广告（手机） |
文章目录
- 前端开发
- 1.快速开发网站
- 2.标签
- 2.1 编码
- 2.2 title
- 2.3 标题
- 2.4 div和span
- 2.5 超链接
- 2.6 图片
- 小结
- 标签的嵌套
- 2.7 列表
- 2.8 表格
- 2.9 input系列
- 2.10 下拉框
- 2.11 多行文本
- 用户注册
- 案例: 用户注册
- GET 方式
- POST 方式
- 表单数据提交优化
- 3.CSS样式
- 3.1 快速上手
- 3.2 CSS应用方式
- 1. 在标签上
- 2. 在 head 标签的 style 上
- 3. 写到文件中
- 3.3 选择器
- 1. ID选择器
- 2. 类选择器
- 3. 标签选择器
- 4. 属性选择器
- 5. 后代选择器
- 关于样式的覆盖问题
- 3.4 样式
- 1. 高度和宽度
- 2. 块级和行内标签
- 3. 字体和对齐方式
- 4. 浮动
- 5. 内边距
- 6. 外边距
- 7. hover
- 8. after
- 9. position
- 9.1 fixed
- 9.2 relative和absolute
- 10. border
- 11. 背景色
- 4.案例: 小米商城
- 4.1 小米顶部
- 4.2 二级菜单
- 4.3 推荐区域
- 5. Bootstrap
- 5.1 初识Bootstrap
- 5.2 栅格系统
- 5.3 container
- 5.4 面板
- 5.5 媒体对象
- 5.6 分页
- 案例: 登录
- 案例: 后台管理
- 5.7 图标
- 优化
- 5.8 Bootstrap实现动态效果
- 6. Javascript
- 6.1 代码位置
- 6.2 注释
- 6.3 变量
- 6.3.1 字符串类型
- 案例: 跑马灯
- 6.3.2 数组
- 案例: 动态数据
- 6.3.3 对象(字典)
- 案例: 动态表格
- 6.4 条件语句
- 6.5 函数
- 6.6 DOM
- 事件的绑定
- 7. JQuery
- 7.1 快速上手
- 7.2 寻找标签(直接)
- 7.2.1 ID选择器
- 7.2.2 样式选择器
- 7.2.3 标签选择器
- 7.2.4 层级选择器
- 7.2.5 多选择器
- 7.2.6 属性选择器
- 7.3 寻找标签(间接)
- 7.3.1 找到上一个兄弟
- 7.3.2 找父子
- 案例: 菜单的切换
- 7.4 值的操作
- 案例: 动态创建数据
- 7.5 事件
- 案例: 表格操作
- 8. 前端整合
- 案例: 添加数据页面
前端开发
目的: 开发一个平台 - 前端开发: HTML CSS JavaScript - 接收请求并处理 - Mysql数据库: 存储数据 快速上手: 基于Flask Web框架快速搭建一个网站 深入学习: 基于Django框架说明:
- 本人的实验环境在云服务器(CentOS7操作系统)上,在VSCode软件上SSH远程连接云服务器进行代码编写
- 因为文章所有内容和代码是纯手敲的缘故,所以演示的代码可能跟武沛齐(据说是小猪佩奇的远房表哥)老师视频中的有所不同,但原理相同
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
1.快速开发网站
python 安装 Flask web 框架
pip install flask- 1
[root@hecs-33592 ~]# mkdir -p /root/python/FlaskWeb [root@hecs-33592 ~]# cd /root/python/FlaskWeb [root@hecs-33592 FlaskWeb]# pwd /root/python/FlaskWeb创建Flask的python目录
- 1
- 2
- 3
- 4
创建一个名为web.py的python文件
from flask import Flask app = Flask(__name__) # 创建了网址 /show/info 和 函数index 的对应关系 # 以后用户在浏览器上访问 /show/info, 网站自动执行 @app.route("/show/info") def index(): return "中国联通" if __name__ == '__main__': app.run(host='0.0.0.0', port=5100, debug=False)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
运行
[root@hecs-33592 ~]# /usr/bin/python3 /root/python/FlaskWeb/web.py- 1
浏览器进行访问: http://[你的ip]:5100/show/info
from flask import Flask, render_template app = Flask(__name__) # 创建了网址 /show/info 和 函数index 的对应关系 # 以后用户在浏览器上访问 /show/info, 网站自动执行 @app.route("/show/info") def index(): # 默认去当前目录的 templates 文件夹中找 return render_template("index.html") if __name__ == '__main__': app.run(host='0.0.0.0', port=5100, debug=False)这种 return 方式返回 HTML 内容的方式不方便进行管理,因此我们会引入templates模板
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
创建templates目录
mkdir /root/python/FlaskWeb/templates/- 1
编写index.html文件
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
重新运行Flask,浏览器刷新访问
# 例如目录名称为"xxx" app = Flask(__name__, template_folder="xxx")当然这个templates目录也可以自定义名称
- 1
- 2
2.标签
2.1 编码
<meta charset="UTF-8">- 1
2.2 title
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head>- 1
- 2
- 3
- 4
- 5
- 6
2.3 标题
<body> <h1>一级标题h1> <h2>二级标题h1> <h3>三级标题h1> <h4>四级标题h1> <h5>五级标题h1> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
2.4 div和span
<div>内容div> <span>asdspan>- 1
- 2
- 3
- div: 占一整行(块级标签)
- span: 用多少占多少(行内标签/内联标签)
- 两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔
- 两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着
2.5 超链接
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的联通title> head> <body> <a href="/get/news">点击跳转自己的网站a>br> <a href="http://www.baidu.com">点击跳转别人的网站百度a> body> html>这里就很有意思了,你可以选择跳转自己网站的地址,或者跳转外部的网站
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
然后需要修改web.py文件
from flask import Flask, render_template app = Flask(__name__) # 创建了网址 /show/info 和 函数index 的对应关系 # 以后用户在浏览器上访问 /show/info, 网站自动执行 @app.route("/show/info") def index(): # 默认去当前目录的 templates 文件夹中找 return render_template("index.html") # 新添加如下配置 @app.route("/get/news") def get_news(): # 默认去当前目录的 templates 文件夹中找 return render_template("get_news.html") if __name__ == '__main__': app.run(host='0.0.0.0', port=5100, debug=False)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
在templates目录下新添加一个 get_news.html 文件
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <h1>我是内部链接h1> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
重新运行Flask,刷新页面
点击第一行后,跳转到如下页面
点击点击第二行后,跳转到百度
自行脑补百度页面哈
在新的 Tab 标签页打开链接
<body> <a href="https://www.mi.com/shop/buy/detail?product_id=16642" target="_blank"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png" style="width: 150px;"/> a> body>添加 target=“_blank”
- 1
- 2
- 3
- 4
- 5
2.6 图片
<body> <h1>我是内部链接h1> <img src="https://t7.baidu.com/it/u=848096684,3883475370&fm=193&f=GIF"/> body>- 1
- 2
- 3
- 4
刷新浏览器
尝试访问服务器本地图片
在/root/python/FlaskWeb/下新建目录static
放入一张图片dog.jpg
修改get_news.html
- 1
- 2
- 3
- 4
刷新浏览器
跟刚才一样
然后可以调整一下图片的高度与宽度
<body> <h1>我是内部链接h1> <img style="height: 100px; width: 200px;" src="/static/dog.jpg"/> body>- 1
- 2
- 3
- 4
小结
- 块级标签 - <h1>h1> - <div>div> - 行内标签 - <span>span> - <a>a> - <img />- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
标签的嵌套
实现: 点击图片,跳转至指定页面
修改web.py,增加get_product
from flask import Flask, render_template app = Flask(__name__) # 创建了网址 /show/info 和 函数index 的对应关系 # 以后用户在浏览器上访问 /show/info, 网站自动执行 @app.route("/show/info") def index(): # 默认去当前目录的 templates 文件夹中找 return render_template("index.html") @app.route("/get/news") def get_news(): return render_template("get_news.html") @app.route("/get/product") def get_product(): return render_template("get_product.html") if __name__ == '__main__': app.run(host='0.0.0.0', port=5100, debug=False)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
在templates下新增一个get_product.html
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <a href="https://www.mi.com/shop/buy/detail?product_id=16642"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png" style="width: 150px;"/> a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
访问页面
点击图片进行url跳转
2.7 列表
<ul> <li>中国移动li> <li>中国联通li> <li>中国电信li> ul>无序列表
- 1
- 2
- 3
- 4
- 5
<ol> <li>中国移动li> <li>中国联通li> <li>中国电信li> ol>有序列表
- 1
- 2
- 3
- 4
- 5
2.8 表格
修改web.py新增一个访问路径
@app.route("/get/table") def get_table(): return render_template("get_table.html")- 1
- 2
- 3
在templates页面下新建get_table.html文件
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <table> <thead> <tr><th>IDth><th>姓名th><th>年龄th>tr> thead> <tbody> <tr><td>10td><td>张三td><td>20td>tr> <tr><td>11td><td>李四td><td>20td>tr> <tr><td>12td><td>王五td><td>20td>tr> <tr><td>13td><td>赵六td><td>20td>tr> tbody> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
重新运行并访问页面
<table border="1">为表格增加边框
- 1
2.9 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" />Rap <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
- 15
- 16
- 17
- 18
- 19
- 20
2.10 下拉框
<select> <option>北京option> <option>上海option> <option>深圳option> select>- 1
- 2
- 3
- 4
- 5
2.11 多行文本
<textarea>textarea>- 1
用户注册
修改web.py
@app.route("/register") def register(): return render_template("register.html")- 1
- 2
- 3
在templates下新建register.html
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <h1>用户注册h1> <div> 用户名: <input type="text" /> div> <div> 密码: <input type="password" /> div> <div> 性别: <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 div> <div> 爱好: <input type="checkbox">唱 <input type="checkbox">跳 <input type="checkbox">Rap <input type="checkbox">篮球 div> <div> 城市: <select> <option>北京option> <option>上海option> <option>深圳option> select> div> <div> 备注: <textarea cols="30" rows="10">textarea> div> <div> <input type="button" value="button提交"> <input type="submit" value="submit提交"> 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
顺便说一下 GET 方法与 POST 方法的区别
GET: 可通过URL/表单提交
POST: 只能通过表单提交,提交数据不在URL而是在请求体中
案例: 用户注册
新建项目
在/root/python下新建目录:
- account
- template
在account下新建app.py文件
from flask import Flask, render_template app = Flask(__name__) @app.route('/register') def register(): return render_template('register.html') if __name__ == '__main__': app.run(host='0.0.0.0', port=5200, debug=False)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
在templates下新建register.html文件
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <h1>用户注册h1> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
运行,浏览器进行访问
表单可以提交的前提条件:
- 提交方式: method=“get”
- 提交地址: action=“/xxx/xxx/xxx”
- 在form标签里面必须有一个submit标签
- 每个标签有name属性
接下来尝试接收用户提交的表单数据
GET 方式
修改app.py,导入request方法,使用/do/register接收用户数据并展示
from flask import Flask, render_template, request app = Flask(__name__) @app.route('/register', methods=['GET']) def register(): return render_template('register.html') @app.route("/do/register", methods=['GET']) def do_register(): get_info = request.args return get_info if __name__ == '__main__': app.run(host='0.0.0.0', port=5200, debug=True)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
修改templates下的register.html
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <h1>用户注册h1> <form action="/do/register" method="get"> <div> 用户名: <input type="text" name="username"> div> <div> 密码: <input type="password" name="passwd"> div> <input type="submit" value="提交"> form> body> html>点击注册后跳转至路由/do/register
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
POST 方式
修改app.py
@app.route("/post/register", methods=['POST']) def post_register(): get_info = request.form return get_info- 1
- 2
- 3
- 4
修改register.html
<body> <h1>用户注册h1> <form action="/post/register" method="post"> <div> 用户名: <input type="text" name="username"> div> <div> 密码: <input type="password" name="passwd"> div> <input type="submit" value="提交"> form> body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
浏览器访问
可以发现,跟上面的GET方法不同的是, 提交后跳转的页面的URL后并没有我们提交的参数,而是提交到了后台
表单数据提交优化
修改register.html
添加 name 与 value 属性
- 1
在控制台输出数据
修改app.py
@app.route("/post/register", methods=['POST']) def post_register(): get_info = request.form username = request.form.get("username") passwd = request.form.get("passwd") sex = request.form.get("sex") hobby_list = request.form.getlist("hobby") city = request.form.get("city") more = request.form.getlist("textarea") print(username, passwd, sex, hobby_list, city, more) return get_info- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
整合GET与POST方法
将上面图片中的内容整合
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
3.CSS样式
3.1 快速上手
<img src="..." stype="height: 100px">- 1
3.2 CSS应用方式
1. 在标签上
<img src="..." stype="height: 100px">- 1
2. 在 head 标签的 style 上
... <head> <meta charset="UTF-8"> <title>Documenttitle> <style> .c1 { color: red; } style> head> <body> <h1 class="c1">用户注册h1> ...- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
3. 写到文件中
- common.css
- 1
- 2
- 3
调用common.css
... <head> <meta charset="UTF-8"> <title>Documenttitle> <link rel="stylesheet" href="common.css" /> head> <body> <h1 class="c1">用户注册h1> ...- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
3.3 选择器
1. ID选择器
#c1 { color: red; } <div id='c1'>div>- 1
- 2
- 3
- 4
- 5
2. 类选择器
.c1 { color: red; } <div class='c1'>div>- 1
- 2
- 3
- 4
- 5
3. 标签选择器
div{ color: red; } <div>xxxdiv>- 1
- 2
- 3
- 4
- 5
4. 属性选择器
<head> <title>Documenttitle> <link rel="stylesheet" href="/static/commons.css"> <style> input[type="text"]{ border: 1px solid red; } style> head>下面的例子中,所有的text类型的input都会生效
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<style> .v1[xx="456"]{ color: gold; } style> ... <body> ... <div class="v1" xx="123">adiv> <div class="v1" xx="456">bdiv> <div class="v1" xx="789">cdiv> ... body>还有另一种方式,看下面的例子
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
5. 后代选择器
<style> .zz h2{ color:chartreuse; } style> head> <body> <div class="zz" > <div> <h2>我是div里面的h2h2> div> <h2>我是div外面的h2h2> ...这个选择器很有意思,你可以指定标签让它下面对应的标签全部生效,也可以指定标签让他下面的n级标签生效,具体看例子
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
<style> .zz > h2{ color:chartreuse; } style>如果只想让第一层的h1生效,可以添加>号
- 1
- 2
- 3
- 4
- 5
关于样式的覆盖问题
当一个标签引用了多个 css 样式时,可能会遇到样式属性重复的问题
<style> .c2 { color: darkgoldenrod; } .c3 { color:hotpink; } style> <body> <div class="c2 c3">我是天才div> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
<style> .c2 { color: darkgoldenrod !important; } .c3 { color:hotpink; } style>观察到,c3生效,而c2没有生效,这是因为c3在c2的下面,会将上面的c2属性覆盖掉
如果不想让上面的被覆盖掉怎么办呢?
可以在对应的属性后面添加!important
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
3.4 样式
1. 高度和宽度
.c4 { height: 300px; width: 500px; }- 1
- 2
- 3
- 4
注意事项:
- 支持百分比
- 行内标签: 默认无效
- 块级标签: 默认有效(右边的剩余空白区域也会被占用)
2. 块级和行内标签
<style> .c4 { display: inline-block; height: 300px; width: 500px; border: 1px solid red; } style> ... <body> <span class="c4">联通span> body>display:inline-block 使行内标签对 height 和 width 生效
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
<div style="display: inline;">移动div> <span style="display: block;">联通span>块级与行内标签的转换
- 1
- 2
注意:
- 块级标签 + 块级&行内标签
3. 字体和对齐方式
<head> <meta charset="UTF-8"> <title>Documenttitle> <style> .c1 { color: #00FF7F; /* 字体颜色 */ font-size: 20px; /* 字体大小 */ font-weight: 600; /* 字体粗细 */ font-family: Microsoft Yahei; /* 字体样式 */ text-align: center; /* 水平方向居中 */ line-height: 50px; /* 垂直方向居中 */ border: 1px solid red; /* 边框 */ } style> head>设置字体颜色/大小/粗细/字体样式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
4. 浮动
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> .item { float: left; width: 280px; height: 170px; border: 1px solid red; } style> head> <body> <div> <div class="item">div> <div class="item">div> <div class="item">div> div> body> html>如果在块级标签中，加入了float属性，那么这个块级标签奖不会再占用一整行，而是自己有多大就占用多大
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
<body> <div style="background-color: blue;"> <div class="item">div> <div class="item">div> <div class="item">div> div> body>如果你让标签浮动起来之后，就会脱离文档流。
例如下面的例子中，我们给div的父标签赋予了一个蓝色的背景，但是你不会看到蓝色背景。因为他被浮动的div字标签挡住了。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
<body> <div style="background-color: blue;"> <div class="item">div> <div class="item">div> <div class="item">div> <div style="clear: both;">div> div> body>解决办法: 在同级子标签的最下面添加 style="clear: both;"
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
5. 内边距
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <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>hellodiv> <div>worlddiv> div> body> html>padding-top | padding-left | padding-right | padding-botton
- 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
其实上面的四个上下左右的padding可以简写为padding: 20px 20px 20px 20px,顺序为上右下左(顺时针方向)
6. 外边距
<body> <div style="height: 200px; background-color: aquamarine;">div> <div style="height: 200px; background-color:blueviolet; margin-top: 20px;">div> body>margin
- 1
- 2
- 3
- 4
7. hover
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> .c1 { color:brown; } .c1:hover { color: green; font-size: 20px; } .c2 { width: 300px; height: 300px; border: 3px solid red; } .c2:hover { border: 3px solid green; } .download { display: none; } .app:hover .download { display: block; } style> head> <body> <div class="c1">字体碰到鼠标变成绿色div> <div class="c2">边框碰到鼠标变成绿色div> <div class="app"> <div>鼠标放我这里触发显示二维码div> <div class="download"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png" alt=""> 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
8. after
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> .c1:after { content: "大帅比" } style> head> <body> <div class="c1">张三div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <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>after一般像下面这样用,不用每次都写stype="clear: both;"
- 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
9. position
- fixed
- relative
- absolute
9.1 fixed
.back { position: fixed; width: 60px; height: 60px; border: 1px solid red; right: 50px; bottom: 50px; }返回顶部
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> body { margin: 0; } .dialog { position: fixed; height: 300px; width: 500px; background-color: white; left: 0; right: 0; margin: 0 auto; top: 200px; z-index: 1000; /* 防止对话框被mask遮住 */ } .mask { background-color: black; position: fixed; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.7; z-index: 999; /* 防止对话框被mask遮住 */ } style> head> <body> <div style="height: 1000px;">div> <div class="dialog">div> <div class="mask">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
9.2 relative和absolute
... .app{ position: relative; } .app .download { position: absolute; display: none; height: 100px; width: 100px; } .app:hover .download { display: block; } style> head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com">小米商城a> <a href="https://www.mi.com">MIUIa> <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" class="app">app下载 <div class="download"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png" alt=""> div> a> div> <div class="account"> <a href="https://www.mi.com">登录a> <a href="https://www.mi.com">注册a> <a href="https://www.mi.com">消息通知a>在小米商城案例的基础上进行测试