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

Django web开发(一) - 前端

admin 阅读：49 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. 前端整合
- - 案例: 添加数据页面

前端开发

说明:

本人的实验环境在云服务器(CentOS7操作系统)上,在VSCode软件上SSH远程连接云服务器进行代码编写
因为文章所有内容和代码是纯手敲的缘故,所以演示的代码可能跟武沛齐(据说是小猪佩奇的远房表哥)老师视频中的有所不同,但原理相同

目的: 开发一个平台 - 前端开发: HTML CSS JavaScript - 接收请求并处理 - Mysql数据库: 存储数据快速上手: 基于Flask Web框架快速搭建一个网站深入学习: 基于Django框架

1.快速开发网站

python 安装 Flask web 框架

pip install flask

创建Flask的python目录

[root@hecs-33592 ~]# mkdir -p /root/python/FlaskWeb [root@hecs-33592 ~]# cd /root/python/FlaskWeb [root@hecs-33592 FlaskWeb]# pwd /root/python/FlaskWeb

创建一个名为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)

运行

[root@hecs-33592 ~]# /usr/bin/python3 /root/python/FlaskWeb/web.py

run_flask_web
浏览器进行访问: http://[你的ip]:5100/show/info
web1

这种 return 方式返回 HTML 内容的方式不方便进行管理,因此我们会引入templates模板

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)

创建templates目录

mkdir /root/python/FlaskWeb/templates/

编写index.html文件
在这里插入图片描述

重新运行Flask,浏览器刷新访问
在这里插入图片描述

当然这个templates目录也可以自定义名称

# 例如目录名称为"xxx" app = Flask(__name__, template_folder="xxx")

2.标签

2.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>

2.3 标题

<body> <h1>一级标题h1> <h2>二级标题h1> <h3>三级标题h1> <h4>四级标题h1> <h5>五级标题h1> body>

2.4 div和span

<div>内容div> <span>asdspan>

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>

然后需要修改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)

在templates目录下新添加一个 get_news.html 文件

重新运行Flask,刷新页面
在这里插入图片描述
点击第一行后,跳转到如下页面
点击点击第二行后,跳转到百度

自行脑补百度页面哈

在新的 Tab 标签页打开链接

添加 target=“_blank”

2.6 图片

<body> <h1>我是内部链接h1> <img src="https://t7.baidu.com/it/u=848096684,3883475370&fm=193&f=GIF"/> body>

在这里插入图片描述
刷新浏览器

尝试访问服务器本地图片

在/root/python/FlaskWeb/下新建目录static
放入一张图片dog.jpg
在这里插入图片描述
修改get_news.html

<body> <h1>我是内部链接h1> <img src="/static/dog.jpg"/> body>

刷新浏览器
在这里插入图片描述

跟刚才一样

然后可以调整一下图片的高度与宽度

<body> <h1>我是内部链接h1> <img style="height: 100px; width: 200px;" src="/static/dog.jpg"/> body>

在这里插入图片描述

小结

- 块级标签 - <h1>h1> - <div>div> - 行内标签 - <span>span> - <a>a> - <img />

标签的嵌套

实现: 点击图片,跳转至指定页面

修改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)

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

访问页面
在这里插入图片描述
点击图片进行url跳转

2.7 列表

无序列表

<ul> <li>中国移动li> <li>中国联通li> <li>中国电信li> ul>

在这里插入图片描述

有序列表

<ol> <li>中国移动li> <li>中国联通li> <li>中国电信li> ol>

在这里插入图片描述

2.8 表格

修改web.py新增一个访问路径

@app.route("/get/table") def get_table(): return render_template("get_table.html")

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

重新运行并访问页面
在这里插入图片描述

为表格增加边框

在这里插入图片描述

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="提交"/> 提交表单

2.10 下拉框

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

2.11 多行文本

<textarea>textarea>

用户注册

修改web.py

@app.route("/register") def register(): return render_template("register.html")

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

在这里插入图片描述

顺便说一下 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)

在templates下新建register.html文件

运行,浏览器进行访问
在这里插入图片描述

表单可以提交的前提条件:

提交方式: 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)

修改templates下的register.html

点击注册后跳转至路由/do/register

在这里插入图片描述

POST 方式

修改app.py

@app.route("/post/register", methods=['POST']) def post_register(): get_info = request.form return get_info

修改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>

浏览器访问
在这里插入图片描述

可以发现,跟上面的GET方法不同的是, 提交后跳转的页面的URL后并没有我们提交的参数,而是提交到了后台

表单数据提交优化

修改register.html

添加 name 与 value 属性

在这里插入图片描述

在控制台输出数据

修改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

在这里插入图片描述

整合GET与POST方法

在这里插入图片描述
将上面图片中的内容整合

@app.route('/register', methods=['GET', 'POST']) def register(): if request.method == "GET": return render_template('register.html') else: 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) get_info = request.args return get_info

3.CSS样式

3.1 快速上手

3.2 CSS应用方式

1. 在标签上

2. 在 head 标签的 style 上

... <head> <meta charset="UTF-8"> <title>Documenttitle> <style> .c1 { color: red; } style> head> <body> <h1 class="c1">用户注册h1> ...

3. 写到文件中

common.css

.c1 { color: red; }

调用common.css

... <head> <meta charset="UTF-8"> <title>Documenttitle> <link rel="stylesheet" href="common.css" /> head> <body> <h1 class="c1">用户注册h1> ...

3.3 选择器

1. ID选择器

#c1 { color: red; } <div id='c1'>div>

2. 类选择器

.c1 { color: red; } <div class='c1'>div>

3. 标签选择器

div{ color: red; } <div>xxxdiv>

4. 属性选择器

下面的例子中,所有的text类型的input都会生效

<head> <title>Documenttitle> <link rel="stylesheet" href="/static/commons.css"> <style> input[type="text"]{ border: 1px solid red; } style> head>

在这里插入图片描述

还有另一种方式,看下面的例子

在这里插入图片描述

5. 后代选择器

这个选择器很有意思,你可以指定标签让它下面对应的标签全部生效,也可以指定标签让他下面的n级标签生效,具体看例子

在这里插入图片描述

如果只想让第一层的h1生效,可以添加>号

在这里插入图片描述

关于样式的覆盖问题

当一个标签引用了多个 css 样式时,可能会遇到样式属性重复的问题

在这里插入图片描述

观察到,c3生效,而c2没有生效,这是因为c3在c2的下面,会将上面的c2属性覆盖掉
如果不想让上面的被覆盖掉怎么办呢?
可以在对应的属性后面添加!important

在这里插入图片描述

3.4 样式

1. 高度和宽度

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

注意事项:

支持百分比
行内标签: 默认无效
块级标签: 默认有效(右边的剩余空白区域也会被占用)

2. 块级和行内标签

display:inline-block 使行内标签对 height 和 width 生效

在这里插入图片描述

块级与行内标签的转换

<div style="display: inline;">移动div> <span style="display: block;">联通span>

注意:

块级标签 + 块级&行内标签

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>

4. 浮动

如果在块级标签中，加入了float属性，那么这个块级标签奖不会再占用一整行，而是自己有多大就占用多大

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>

在这里插入图片描述

如果你让标签浮动起来之后，就会脱离文档流。
例如下面的例子中，我们给div的父标签赋予了一个蓝色的背景，但是你不会看到蓝色背景。因为他被浮动的div字标签挡住了。

解决办法: 在同级子标签的最下面添加 style="clear: both;"

在这里插入图片描述

5. 内边距

padding-top | padding-left | padding-right | padding-botton

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可以简写为padding: 20px 20px 20px 20px,顺序为上右下左(顺时针方向)

6. 外边距

margin

在这里插入图片描述

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>

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>

在这里插入图片描述

after一般像下面这样用,不用每次都写stype="clear: both;"

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>

9. position

fixed
relative
absolute

9.1 fixed

返回顶部

.back { position: fixed; width: 60px; height: 60px; border: 1px solid red; right: 50px; bottom: 50px; }

对话框

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>

在这里插入图片描述

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> div>' <div style="clear: both;">div> div> div> ...

在这里插入图片描述

10. border

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> .left { float: left; } .c1 { height: 200px; width: 300px; border: 3px dotted red; margin: 50px; } .c2 { height: 200px; width: 300px; border: 3px solid red; border-left: 3px solid green; margin: 50px; } .c3 { height: 200px; width: 300px; margin: 50px; background-color: bisque; border-left: 2px solid transparent; /* 透明色 */ } .c3:hover { border-left: 2px solid rgb(35, 211, 19); } style> head> <body> <div class="c1 left">我是虚线~div> <div class="c2 left">我是实线~左边框是绿色,上下右边框是红色div> <div class="c3 left">我是透明色,鼠标碰到我边框会变色哦~div> <div style="clear: both;">div> body> html>

在这里插入图片描述

11. 背景色

background-color: bisque;
无需多言☺

注意: 以上不是所有的CSS样式,这些是最常用的标签

4.案例: 小米商城

4.1 小米顶部

在这里插入图片描述

4.2 二级菜单

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城title> <style> /* 去掉body的边距 */ body { margin: 0; } .header { background-color: #333; } /* 让中间内容居中 */ .container { width: 1226px; margin: 0 auto; /* 上下为0, 左右为auto */ } /* header class 下的标签 a 自动应用这个样式 */ .header a { color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; } .header .menu { float: left; color: white; } .header a { text-decoration: none; } .header a:hover { color: white; } .header .account { float: right; color: white; } .sub-header { height: 100px; } .sub-header .hw { width: 234px; height: 100px; } .sub-header .logo { float: left; } /* a标签是行内标签,默认不支持设置高度与边距因此设置padding是不起作用的,因此可以加上 inline-block */ .sub-header .logo a { padding-top: 22px; padding-bottom: 22px; display: inline-block; } /* 设置logo的图片像素大小 */ .sub-header .logo img { height: 56px; width: 56px; } .sub-header .menu { width: 400px; float:left; line-height: 100px; /* 与行高度保持一致 */ } .sub-header .menu a { text-decoration: none; /* 去掉 a 标签的下划线 */ color: #333; font-size: 16px; padding: 0 10px; /* 设置字体的左右外边距 */ display: inline-block; } /* 鼠标放到字体时,使字体变红 */ .sub-header .menu a:hover { color: #ff6700; } .sub-header .search { float: right; } 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> 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> div>' <div style="clear: both;">div> div> div> <div class="sub-header"> <div class="container"> <div class="hw logo"> <a href="https://www.mi.com"> <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="小米官网"> a> div> <div class="hw menu"> <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> div> <div class="hw search">div> <div style="clear: both;">div> div> div> body> html>

在这里插入图片描述

4.3 推荐区域

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城title> <style> /* 去掉body的边距 */ body { margin: 0; } img { width: 100%; height: 100%; } .left { float: left; } .margin_left { margin-left: 14.5px; } .header { background-color: #333; } /* 让中间内容居中 */ .container { width: 1226px; margin: 0 auto; /* 上下为0, 左右为auto */ } /* header class 下的标签 a 自动应用这个样式 */ .header a { color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; } .header .menu { float: left; color: white; } .header a { text-decoration: none; } .header a:hover { color: white; } .header .account { float: right; color: white; } .sub-header { height: 100px; } .sub-header .hw { width: 234px; height: 100px; } .sub-header .logo { float: left; } /* a标签是行内标签,默认不支持设置高度与边距因此设置padding是不起作用的,因此可以加上 inline-block */ .sub-header .logo a { padding-top: 22px; padding-bottom: 22px; display: inline-block; } /* 设置logo的图片像素大小 */ .sub-header .logo img { height: 56px; width: 56px; } .sub-header .menu { width: 400px; float:left; line-height: 100px; /* 与行高度保持一致 */ } .sub-header .menu a { text-decoration: none; /* 去掉 a 标签的下划线 */ color: #333; font-size: 16px; padding: 0 10px; /* 设置字体的左右外边距 */ display: inline-block; } /* 鼠标放到字体时,使字体变红 */ .sub-header .menu a:hover { color: #ff6700; } .sub-header .search { float: right; } .slider { height: 460px; } .news{ margin-top: 14px; } .news .channel { width: 228px; height: 164px; background-color: #5f5750; padding: 3px; } .news .channel .item { width: 76px; height: 82px; float: left; text-align: center; } .news .channel .item img { width: 24px; height: 24px; display: block; /* 让图片自已占一整行 */ margin: 0 auto; /* 让图片垂直居中 */ margin-bottom: 4px; /* 设置图片与下方字体的间距 */ } .news .channel .item a { display: inline-block; font-size: 12px; /* 设置字体大小 */ text-decoration: none; /* a标签去掉下划线 */ padding-top: 18px; color: #fff; /* 设置字体为白色 */ opacity: 0.7; /* 设置透明度 */ } .news .channel .item a:hover { opacity: 1; /* 设置透明度 */ } .news .list-item { width: 316px; height: 170px; } 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> 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> div>' <div style="clear: both;">div> div> div> <div class="sub-header"> <div class="container"> <div class="hw logo"> <a href="https://www.mi.com"> <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="小米官网"> a> div> <div class="hw menu"> <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> div> <div class="hw search">div> <div style="clear: both;">div> div> div> <div class="slider"> <div class="container"> <div> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/454c1da2c5b64a3f2c07c5a4c01aa9c4.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt="推荐商品"> div> div> div> <div class="news"> <div class="container"> <div class="channel left"> <div class="item"> <a href="https://www.mi.com"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt=""> <div>保障服务div> a> div> <div class="item"> <a href="https://www.mi.com"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt=""> <div>企业团购div> a> div> <div class="item"> <a href="https://www.mi.com"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt=""> <div>F码通道div> a> div> <div class="item"> <a href="https://www.mi.com"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt=""> <div>米粉卡div> a> div> <div class="item"> <a href="https://www.mi.com"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt=""> <div>以旧换新div> a> div> <div class="item"> <a href="https://www.mi.com"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt=""> <div>话费充值div> a> div> <div style="clear: both;">div> div> <div class="list-item left margin_left"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d0c515086acb3c3a3e976ad20901aac5.jpg?w=632&h=340" alt=""> div> <div class="list-item left margin_left"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/254c711cc71facf156ac955b8719dffa.jpg?w=632&h=340" alt=""> div> <div class="list-item left margin_left"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2b120c0dddc056dcb36e847269fb92cd.jpg?w=632&h=340" alt=""> div> <div style="clear: both;">div> div> div> body> html>

在这里插入图片描述

5. Bootstrap

别人已经帮忙写好的CSS样式

使用方式:

下载Bootstrap
使用:
- 在页面上引入 Bootstrap
- 编写HTML时,按照Bootstrap的规定来编写或者自定制

由于我没有下载Pycharm,无法本地实时测试,我使用的VSCode进行的编辑,所以我继续使用Flaskweb进行页面的访问测试

在这里插入图片描述

5.1 初识Bootstrap

下载地址: https://v3.bootcss.com/
在这里插入图片描述

BaiDuNetDisk Download: 链接：https://pan.baidu.com/s/1rcZldkNHrpC11f2plUv-rg?pwd=mh5b 提取码：mh5b

下载完成后解压,目录如下:
在这里插入图片描述
在服务器中创建必要的目录

[root@hecs-33592 python]# cd bootstrap/ [root@hecs-33592 bootstrap]# ls main.py templates [root@hecs-33592 bootstrap]# mkdir static [root@hecs-33592 bootstrap]# cd static/ [root@hecs-33592 static]# ls [root@hecs-33592 static]# mkdir css [root@hecs-33592 static]# mkdir js [root@hecs-33592 static]# mkdir img [root@hecs-33592 static]# mkdir plugins [root@hecs-33592 static]# tree /root/python/bootstrap/ /root/python/bootstrap/ ├── main.py ├── static │ ├── css │ ├── img │ ├── js │ └── plugins └── templates

我会把刚刚下载好的bootstrap-3.4.1-dist.zip解压放到plugins下

[root@hecs-33592 plugins]# ls bootstrap-3.4.1-dist.zip [root@hecs-33592 plugins]# unzip bootstrap-3.4.1-dist.zip [root@hecs-33592 plugins]# mv bootstrap-3.4.1-dist bootstrap-3.4.1 [root@hecs-33592 plugins]# tree bootstrap-3.4.1 bootstrap-3.4.1 ├── css │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js ├── bootstrap.js ├── bootstrap.min.js └── npm.js

在这里插入图片描述

在这里插入图片描述
接下来使用已经写好的导航栏
链接地址: https://v3.bootcss.com/components/

复制上面的代码

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"> head> <body> <nav 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> Another action