电子商务毕业设计网站建设业务,建设网站 xp,wordpress 语法,郑州做网站远辰文章目录 前端开发1.快速开发网站2.标签2.1 编码2.2 title2.3 标题2.4 div和span2.5 超链接2.6 图片小结标签的嵌套2.7 列表2.8 表格2.9 input系列2.10 下拉框2.11 多行文本用户注册案例: 用户注册GET 方式POST 方式表单数据提交优化 3.CSS样式3.1 快速上手3.2 CSS应用方式1. 在… 文章目录 前端开发1.快速开发网站2.标签2.1 编码2.2 title2.3 标题2.4 div和span2.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. hover8. after9. position9.1 fixed9.2 relative和absolute 10. border11. 背景色 4.案例: 小米商城4.1 小米顶部4.2 二级菜单4.3 推荐区域 5. Bootstrap5.1 初识Bootstrap5.2 栅格系统5.3 container5.4 面板5.5 媒体对象5.6 分页案例: 登录案例: 后台管理5.7 图标优化5.8 Bootstrap实现动态效果 6. Javascript6.1 代码位置6.2 注释6.3 变量6.3.1 字符串类型案例: 跑马灯6.3.2 数组案例: 动态数据6.3.3 对象(字典)案例: 动态表格 6.4 条件语句6.5 函数6.6 DOM事件的绑定 7. JQuery7.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目录 [roothecs-33592 ~]# mkdir -p /root/python/FlaskWeb
[roothecs-33592 ~]# cd /root/python/FlaskWeb
[roothecs-33592 FlaskWeb]# pwd
/root/python/FlaskWeb创建一个名为web.py的python文件
from flask import Flaskapp Flask(__name__)# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
app.route(/show/info)
def index():return 中国联通if __name__ __main__:app.run(host0.0.0.0, port5100, debugFalse) 运行
[roothecs-33592 ~]# /usr/bin/python3 /root/python/FlaskWeb/web.py浏览器进行访问: http://[你的ip]:5100/show/info 这种 return 方式返回 HTML 内容的方式不方便进行管理,因此我们会引入templates模板 from flask import Flask, render_templateapp Flask(__name__)# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
app.route(/show/info)
def index():# 默认去当前目录的 templates 文件夹中找return render_template(index.html)if __name__ __main__:app.run(host0.0.0.0, port5100, debugFalse)创建templates目录
mkdir /root/python/FlaskWeb/templates/编写index.html文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1中国联通/h1
/body
/html重新运行Flask,浏览器刷新访问 当然这个templates目录也可以自定义名称 # 例如目录名称为xxx
app Flask(__name__, template_folderxxx)2.标签
2.1 编码
meta charsetUTF-82.2 title
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head2.3 标题
bodyh1一级标题/h1h2二级标题/h1h3三级标题/h1h4四级标题/h1h5五级标题/h1
/body2.4 div和span
div内容/divspanasd/spandiv: 占一整行(块级标签)span: 用多少占多少(行内标签/内联标签) 两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着
2.5 超链接 这里就很有意思了,你可以选择跳转自己网站的地址,或者跳转外部的网站 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title我的联通/title
/head
bodya href/get/news点击跳转自己的网站/a/bra hrefhttp://www.baidu.com点击跳转别人的网站百度/a
/body
/html然后需要修改web.py文件
from flask import Flask, render_templateapp 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(host0.0.0.0, port5100, debugFalse)在templates目录下新添加一个 get_news.html 文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1我是内部链接/h1
/body
/html重新运行Flask,刷新页面 点击第一行后,跳转到如下页面 点击点击第二行后,跳转到百度 自行脑补百度页面哈 在新的 Tab 标签页打开链接 添加 target“_blank” bodya hrefhttps://www.mi.com/shop/buy/detail?product_id16642 target_blankimg srchttps://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png stylewidth: 150px;//a
/body2.6 图片
bodyh1我是内部链接/h1img srchttps://t7.baidu.com/it/u848096684,3883475370fm193fGIF/
/body刷新浏览器 尝试访问服务器本地图片 在/root/python/FlaskWeb/下新建目录static 放入一张图片dog.jpg 修改get_news.html
bodyh1我是内部链接/h1img src/static/dog.jpg/
/body刷新浏览器 跟刚才一样 然后可以调整一下图片的高度与宽度
bodyh1我是内部链接/h1img styleheight: 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_templateapp 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(host0.0.0.0, port5100, debugFalse)在templates下新增一个get_product.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya hrefhttps://www.mi.com/shop/buy/detail?product_id16642img srchttps://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png stylewidth: 150px;//a
/body
/html访问页面 点击图片进行url跳转
2.7 列表 无序列表 ulli中国移动/lili中国联通/lili中国电信/li
/ul有序列表 olli中国移动/lili中国联通/lili中国电信/li
/ol2.8 表格
修改web.py新增一个访问路径
app.route(/get/table)
def get_table():return render_template(get_table.html)在templates页面下新建get_table.html文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytabletheadtrthID/thth姓名/thth年龄/th/tr/theadtbodytrtd10/tdtd张三/tdtd20/td/trtrtd11/tdtd李四/tdtd20/td/trtrtd12/tdtd王五/tdtd20/td/trtrtd13/tdtd赵六/tdtd20/td/tr/tbody/table
/body
/html重新运行并访问页面 为表格增加边框 table border12.9 input系列
!-- 文本与密码 --
input typetext /
input typepassword /!-- 选择文件 --
input typefile /!-- 单选框 --
input typeradio namen1 /男
input typeradio namen1 /女!-- 复选框 --
input typecheckbox /唱
input typecheckbox /跳
input typecheckbox /Rap
input typecheckbox /篮球!-- 按钮 --
input typebutton value提交/ 普通按钮
input typesubmit value提交/ 提交表单2.10 下拉框
selectoption北京/optionoption上海/optionoption深圳/option
/select2.11 多行文本
textarea/textarea用户注册
修改web.py
app.route(/register)
def register():return render_template(register.html)在templates下新建register.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1用户注册/h1div用户名: input typetext //divdiv密码: input typepassword //divdiv性别: input typeradio namesex/男 input typeradio namesex/女/divdiv爱好:input typecheckbox唱input typecheckbox跳input typecheckboxRapinput typecheckbox篮球/divdiv城市:selectoption北京/optionoption上海/optionoption深圳/option/select/divdiv备注: textarea cols30 rows10/textarea/divdivinput typebutton valuebutton提交input typesubmit valuesubmit提交/div
/body
/html顺便说一下 GET 方法与 POST 方法的区别 GET: 可通过URL/表单提交 POST: 只能通过表单提交,提交数据不在URL而是在请求体中 案例: 用户注册
新建项目 在/root/python下新建目录:
accounttemplate
在account下新建app.py文件
from flask import Flask, render_templateapp Flask(__name__)app.route(/register)
def register():return render_template(register.html)if __name__ __main__:app.run(host0.0.0.0, port5200, debugFalse)在templates下新建register.html文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1用户注册/h1
/body
/html运行,浏览器进行访问
表单可以提交的前提条件:
提交方式: method“get”提交地址: action“/xxx/xxx/xxx”在form标签里面必须有一个submit标签每个标签有name属性
接下来尝试接收用户提交的表单数据
GET 方式
修改app.py,导入request方法,使用/do/register接收用户数据并展示
from flask import Flask, render_template, requestapp 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.argsreturn get_infoif __name__ __main__:app.run(host0.0.0.0, port5200, debugTrue)修改templates下的register.html 点击注册后跳转至路由/do/register !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1用户注册/h1form action/do/register methodgetdiv用户名: input typetext nameusername/divdiv密码: input typepassword namepasswd/divinput typesubmit value提交/form
/body
/htmlPOST 方式
修改app.py
app.route(/post/register, methods[POST])
def post_register():get_info request.formreturn get_info修改register.html form action/post/register methodpost bodyh1用户注册/h1form action/post/register methodpostdiv用户名: input typetext nameusername/divdiv密码: input typepassword namepasswd/divinput typesubmit value提交/form
/body浏览器访问 可以发现,跟上面的GET方法不同的是, 提交后跳转的页面的URL后并没有我们提交的参数,而是提交到了后台
表单数据提交优化
修改register.html 添加 name 与 value 属性 在控制台输出数据 修改app.py
app.route(/post/register, methods[POST])
def post_register():get_info request.formusername 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.argsreturn get_info3.CSS样式
3.1 快速上手
img src... stypeheight: 100px3.2 CSS应用方式
1. 在标签上
img src... stypeheight: 100px2. 在 head 标签的 style 上
...
headmeta charsetUTF-8titleDocument/titlestyle.c1 {color: red;}/style/head
bodyh1 classc1用户注册/h1...3. 写到文件中
common.css
.c1 {color: red;
}调用common.css
...
headmeta charsetUTF-8titleDocument/titlelink relstylesheet hrefcommon.css //head
bodyh1 classc1用户注册/h1...3.3 选择器
1. ID选择器
#c1 {color: red;
}div idc1/div2. 类选择器
.c1 {color: red;
}div classc1/div3. 标签选择器
div{color: red;
}divxxx/div4. 属性选择器 下面的例子中,所有的text类型的input都会生效 headtitleDocument/titlelink relstylesheet href/static/commons.cssstyleinput[typetext]{border: 1px solid red;}/style
/head还有另一种方式,看下面的例子 style.v1[xx456]{color: gold; !-- 橙色 --}
/style...body
...div classv1 xx123a/divdiv classv1 xx456b/divdiv classv1 xx789c/div
...
/body5. 后代选择器 这个选择器很有意思,你可以指定标签让它下面对应的标签全部生效,也可以指定标签让他下面的n级标签生效,具体看例子 style.zz h2{color:chartreuse;}
/style
/headbodydiv classzz divh2我是div里面的h2/h2/divh2我是div外面的h2/h2
...如果只想让第一层的h1生效,可以添加号 style.zz h2{color:chartreuse;}
/style关于样式的覆盖问题
当一个标签引用了多个 css 样式时,可能会遇到样式属性重复的问题
style.c2 {color: darkgoldenrod;}.c3 {color:hotpink;}
/stylebodydiv classc2 c3我是天才/div
/body观察到,c3生效,而c2没有生效,这是因为c3在c2的下面,会将上面的c2属性覆盖掉 如果不想让上面的被覆盖掉怎么办呢? 可以在对应的属性后面添加!important style.c2 {color: darkgoldenrod !important;}.c3 {color:hotpink;}
/style3.4 样式
1. 高度和宽度
.c4 {height: 300px;width: 500px;}注意事项:
支持百分比行内标签: 默认无效块级标签: 默认有效(右边的剩余空白区域也会被占用)
2. 块级和行内标签 display:inline-block 使行内标签对 height 和 width 生效 style
.c4 {display: inline-block;height: 300px;width: 500px;border: 1px solid red;}
/style...bodyspan classc4联通/span
/body块级与行内标签的转换 div styledisplay: inline;移动/divspan styledisplay: block;联通/span注意:
块级标签 块级行内标签
3. 字体和对齐方式 设置字体颜色/大小/粗细/字体样式 headmeta charsetUTF-8titleDocument/titlestyle.c1 {color: #00FF7F; /* 字体颜色 */font-size: 20px; /* 字体大小 */font-weight: 600; /* 字体粗细 */font-family: Microsoft Yahei; /* 字体样式 */text-align: center; /* 水平方向居中 */line-height: 50px; /* 垂直方向居中 */border: 1px solid red; /* 边框 */}/style
/head4. 浮动 如果在块级标签中加入了float属性那么这个块级标签奖不会再占用一整行而是自己有多大就占用多大 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.item {float: left;width: 280px;height: 170px;border: 1px solid red;}/style
/head
bodydivdiv classitem/divdiv classitem/divdiv classitem/div/div
/body
/html如果你让标签浮动起来之后就会脱离文档流。 例如下面的例子中我们给div的父标签赋予了一个蓝色的背景但是你不会看到蓝色背景。因为他被浮动的div字标签挡住了。 bodydiv stylebackground-color: blue;div classitem/divdiv classitem/divdiv classitem/div/div
/body解决办法: 在同级子标签的最下面添加 styleclear: both; bodydiv stylebackground-color: blue;div classitem/divdiv classitem/divdiv classitem/divdiv styleclear: both;/div/div
/body5. 内边距 padding-top | padding-left | padding-right | padding-botton !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.outer {border: 1px solid red;height: 200px;width: 200px;padding-top: 20px;padding-left: 20px;padding-right: 20px;padding-bottom: 20px;}/style
/head
bodydiv classouterdivhello/divdivworld/div/div
/body
/html其实上面的四个上下左右的padding可以简写为padding: 20px 20px 20px 20px,顺序为上右下左(顺时针方向)
6. 外边距 margin bodydiv styleheight: 200px; background-color: aquamarine;/divdiv styleheight: 200px; background-color:blueviolet; margin-top: 20px;/div
/body7. hover
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.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
bodydiv classc1字体碰到鼠标变成绿色/divdiv classc2边框碰到鼠标变成绿色/divdiv classappdiv鼠标放我这里触发显示二维码/divdiv classdownloadimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png alt/div/div
/body
/html8. after
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.c1:after {content: 大帅比}/style
/head
bodydiv classc1张三/div
/body
/htmlafter一般像下面这样用,不用每次都写stypeclear: both; !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.clearfix:after {content: ;display: block;clear: both;}.item {float: left;}/style
/head
bodydiv classclearfixdiv classitem1/divdiv classitem2/divdiv classitem3/div/div
/body
/html9. position
fixedrelativeabsolute
9.1 fixed 返回顶部 .back {position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 50px;bottom: 50px;}对话框 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestylebody {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
bodydiv styleheight: 1000px;/div!-- 如果css中不加 z-index 设置优先级的话 --!-- 那么下面的 dialog 如果在 mask 的上面,对话框就显示不出来了 --!-- 设置优先级可以解决此问题 --div classdialog/divdiv classmask/div
/body
/html9.2 relative和absolute 在小米商城案例的基础上进行测试 ....app{position: relative;}.app .download {position: absolute;display: none;height: 100px;width: 100px;}.app:hover .download {display: block;}/style/head
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com小米商城/aa hrefhttps://www.mi.comMIUI/aa hrefhttps://www.mi.com云平台/aa hrefhttps://www.mi.com有品/aa hrefhttps://www.mi.com小爱开放平台/aa hrefhttps://www.mi.com classappapp下载div classdownloadimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png alt/div/a/divdiv classaccounta hrefhttps://www.mi.com登录/aa hrefhttps://www.mi.com注册/aa hrefhttps://www.mi.com消息通知/a/divdiv styleclear: both;/div/div/div
...10. border
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.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
bodydiv classc1 left我是虚线~/divdiv classc2 left我是实线~左边框是绿色,上下右边框是红色/divdiv classc3 left我是透明色,鼠标碰到我边框会变色哦~/divdiv styleclear: both;/div
/body
/html11. 背景色 background-color: bisque; 无需多言☺ 注意: 以上不是所有的CSS样式,这些是最常用的标签 4.案例: 小米商城
4.1 小米顶部
!DOCTYPE html
html langen
headmeta charsetUTF-8title小米商城/titlestyle/* 去掉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 .account {float: right;color: white;}/style
/head
bodydiv classheaderdiv classcontainerdiv classmenua小米商城/aaMIUI/aa云平台/aa有品/aa小爱开放平台/a/divdiv classaccounta登录/aa注册/aa消息通知/a/divdiv styleclear: both;/div/div/div
/body
/html4.2 二级菜单
!DOCTYPE html
html langen
headmeta charsetUTF-8title小米商城/titlestyle/* 去掉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
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com小米商城/aa hrefhttps://www.mi.comMIUI/aa hrefhttps://www.mi.com云平台/aa hrefhttps://www.mi.com有品/aa hrefhttps://www.mi.com小爱开放平台/a/divdiv classaccounta hrefhttps://www.mi.com登录/aa hrefhttps://www.mi.com注册/aa hrefhttps://www.mi.com消息通知/a/divdiv styleclear: both;/div/div/divdiv classsub-headerdiv classcontainerdiv classhw logoa hrefhttps://www.mi.comimg srchttps://s02.mifile.cn/assets/static/image/logo-mi2.png alt小米官网/a/divdiv classhw menua hrefhttps://www.mi.comXiaomi手机/aa hrefhttps://www.mi.comRedmi手机/aa hrefhttps://www.mi.com电视/aa hrefhttps://www.mi.com笔记本/aa hrefhttps://www.mi.com平板/a/divdiv classhw search/divdiv styleclear: both;/div/div/div
/body
/html4.3 推荐区域
!DOCTYPE html
html langen
headmeta charsetUTF-8title小米商城/titlestyle/* 去掉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
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com小米商城/aa hrefhttps://www.mi.comMIUI/aa hrefhttps://www.mi.com云平台/aa hrefhttps://www.mi.com有品/aa hrefhttps://www.mi.com小爱开放平台/a/divdiv classaccounta hrefhttps://www.mi.com登录/aa hrefhttps://www.mi.com注册/aa hrefhttps://www.mi.com消息通知/a/divdiv styleclear: both;/div/div/divdiv classsub-headerdiv classcontainerdiv classhw logoa hrefhttps://www.mi.comimg srchttps://s02.mifile.cn/assets/static/image/logo-mi2.png alt小米官网/a/divdiv classhw menua hrefhttps://www.mi.comXiaomi手机/aa hrefhttps://www.mi.comRedmi手机/aa hrefhttps://www.mi.com电视/aa hrefhttps://www.mi.com笔记本/aa hrefhttps://www.mi.com平板/a/divdiv classhw search/divdiv styleclear: both;/div/div/divdiv classsliderdiv classcontainerdivimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/454c1da2c5b64a3f2c07c5a4c01aa9c4.jpg?thumb1w1533h575fwebpq90 alt推荐商品/div/div/divdiv classnewsdiv classcontainerdiv classchannel leftdiv classitema hrefhttps://www.mi.comimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w48h48 altdiv保障服务/div/a/divdiv classitema hrefhttps://www.mi.comimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w48h48 altdiv企业团购/div/a/divdiv classitema hrefhttps://www.mi.comimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w48h48 altdivF码通道/div/a/divdiv classitema hrefhttps://www.mi.comimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w48h48 altdiv米粉卡/div/a/divdiv classitema hrefhttps://www.mi.comimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w48h48 altdiv以旧换新/div/a/divdiv classitema hrefhttps://www.mi.comimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w48h48 altdiv话费充值/div/a/divdiv styleclear: both;/div/divdiv classlist-item left margin_leftimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d0c515086acb3c3a3e976ad20901aac5.jpg?w632h340 alt/divdiv classlist-item left margin_leftimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/254c711cc71facf156ac955b8719dffa.jpg?w632h340 alt/divdiv classlist-item left margin_leftimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2b120c0dddc056dcb36e847269fb92cd.jpg?w632h340 alt/divdiv styleclear: both;/div/div/div
/body
/html5. 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?pwdmh5b
提取码mh5b 下载完成后解压,目录如下: 在服务器中创建必要的目录
[roothecs-33592 python]# cd bootstrap/
[roothecs-33592 bootstrap]# ls
main.py templates
[roothecs-33592 bootstrap]# mkdir static
[roothecs-33592 bootstrap]# cd static/
[roothecs-33592 static]# ls
[roothecs-33592 static]# mkdir css
[roothecs-33592 static]# mkdir js
[roothecs-33592 static]# mkdir img
[roothecs-33592 static]# mkdir plugins[roothecs-33592 static]# tree /root/python/bootstrap/
/root/python/bootstrap/
├── main.py
├── static
│ ├── css
│ ├── img
│ ├── js
│ └── plugins
└── templates
我会把刚刚下载好的bootstrap-3.4.1-dist.zip解压放到plugins下
[roothecs-33592 plugins]# ls
bootstrap-3.4.1-dist.zip
[roothecs-33592 plugins]# unzip bootstrap-3.4.1-dist.zip
[roothecs-33592 plugins]# mv bootstrap-3.4.1-dist bootstrap-3.4.1
[roothecs-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!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title!-- 开发版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css!-- 生产版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.min.css/head
bodyinput typebutton value提交input typebutton value提交 classbtn btn-primaryinput typebutton value提交 classbtn btn-successinput typebutton value提交 classbtn btn-dangerinput typebutton value提交 classbtn btn-danger btn-xs
/body
/html接下来使用已经写好的导航栏 链接地址: https://v3.bootcss.com/components/ 复制上面的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title!-- 开发版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css!-- 生产版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.min.css/headbodynav classnavbar navbar-defaultdiv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#Brand/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#Link span classsr-only(current)/span/a/lilia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button/formul classnav navbar-nav navbar-rightlia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --/nav
/body/html访问效果如下: 其实你仔细看会发现这个导航栏是有圆角的 接下来我们去掉圆角 F12调试页面 覆盖.navbar样式
style.navbar {border-radius: 0;}
/style再次访问就没有圆角了 可以在相应的位置进行修改,代码部分自己测试修改哈 5.2 栅格系统
栅格系统介绍 整体划分为了12格 大致分为四种风格 .col-xs- .col-sm- .col-md- .col-lg- 响应式:根据页面的宽度,动态的改变布局
.col-sm- : 750px.col-md- : 970px.col-lg- : 1170px
非响应式:
.col-xs-
div classcol-xs-2 stylebackground-color: brown; height: 20px;/div
div classcol-xs-10 stylebackground-color: green;height: 20px;/div列偏移 col-sm-offset- div classcol-sm-offset-3 col-sm-2 stylebackground-color: brown; height: 20px;/div
div classcol-sm-7 stylebackground-color: green;height: 20px;/div5.3 container
container
div classcontainer clearfixdiv classcol-sm-9左边/divdiv classcol-sm-3右边/div
/divcontainer-fluid
div classcontainer-fluid clearfixdiv classcol-sm-9左边/divdiv classcol-sm-3右边/div
/div5.4 面板
地址: https://v3.bootcss.com/components/#panels
bodynav classnavbar navbar-defaultdiv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#我的导航/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#Link span classsr-only(current)/span/a/lilia href#联通/a/lilia href#移动/a/lilia href#电信/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button/formul classnav navbar-nav navbar-rightlia href#Link/a/lilia href#登录/a/lilia href#注册/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --/navdiv classcontainer clearfixdiv classcol-sm-9左边/divdiv classcol-sm-3div classpanel panel-defaultdiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/divdiv classpanel panel-primarydiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/divdiv classpanel panel-warningdiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/div/div/div/body5.5 媒体对象
添加媒体对象 由于官方文档给的示例代码不全,所以可以F12查看源码,复制页面中的样式 div classcol-sm-9div classmediadiv classmedia-left media-middlea href#img classmedia-object data-srcholder.js/64x64 alt64x64stylewidth: 64px; height: 64px;srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue/a/divdiv classmedia-bodyh4 classmedia-headingMiddle aligned media/h4pCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./p/div/divdiv classmediadiv classmedia-left media-middlea href#img classmedia-object data-srcholder.js/64x64 alt64x64stylewidth: 64px; height: 64px;srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue/a/divdiv classmedia-bodyh4 classmedia-headingMiddle aligned media/h4pCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./p/div/divdiv classmediadiv classmedia-left media-middlea href#img classmedia-object data-srcholder.js/64x64 alt64x64stylewidth: 64px; height: 64px;srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue/a/divdiv classmedia-bodyh4 classmedia-headingMiddle aligned media/h4pCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./p/div/divdiv classmediadiv classmedia-left media-middlea href#img classmedia-object data-srcholder.js/64x64 alt64x64stylewidth: 64px; height: 64px;srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue/a/divdiv classmedia-bodyh4 classmedia-headingMiddle aligned media/h4pCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./p/div/div5.6 分页
链接: https://v3.bootcss.com/components/#pagination
ul classpaginationli classdisableda href# aria-labelPreviousspan aria-hiddentrue«/span/a/lili classactivea href#1 span classsr-only(current)/span/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href# aria-labelNextspan aria-hiddentrue»/span/a/li/ul案例: 登录 宽度 区域居中内边距
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.cssstyle.ct {margin-left: auto; /* 设置水平居中 */margin-right: auto;margin-top: 200px;width: 500px;height: 350px;border: 2px solid black;padding: 20px 40px; /* 设置内边距 */border-radius: 10px; /* 设置圆角*/box-shadow: 5px 5px 10px #aaa; /* 设置阴影 水平 垂直 厚度 颜色*/background-color:bisque;}.ct h1 {text-align: center;margin-top: 10px;}.ct button {margin: 20px;}/style/headbodydiv classctdivh1用户登录/h1/divdivformdiv classform-grouplabel forexampleInputEmail1用户名/labelinput typeemail classform-control idexampleInputEmail1 placeholder请输入用户名/divdiv classform-grouplabel forexampleInputPassword1密码/labelinput typepassword classform-control idexampleInputPassword1 placeholderPassword/divdiv styletext-align: centerbutton typesubmit classbtn btn-primary登 录/buttonbutton typesubmit classbtn btn-default注 册/button/div/form/div/div
/body/html案例: 后台管理
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title!-- 开发版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css!-- 生产版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.min.cssstyle.bt {margin: 20px;}/style/headbodydiv classcontainernav classnavbar navbar-defaultdiv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#我的导航/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#Link span classsr-only(current)/span/a/lilia href#联通/a/lilia href#移动/a/lilia href#电信/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebuttonaria-haspopuptrue aria-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button/formul classnav navbar-nav navbar-rightlia href#Link/a/lilia href#登录/a/lilia href#注册/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebuttonaria-haspopuptrue aria-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --/navdiv classpanel panel-infodiv classpanel-headingspan classglyphicon glyphicon-pencil aria-hiddentrue/span表单区域/divdiv classpanel-bodyform classform-inlinediv classform-grouplabel forexampleInputName2Name/labelinput typetext classform-control idexampleInputName2 placeholderJane Doe/divdiv classform-grouplabel forexampleInputEmail2Email/labelinput typeemail classform-control idexampleInputEmail2placeholderjane.doeexample.com/divbutton typesubmit classbtn btn-successspan classglyphicon glyphicon-file aria-hiddentrue/span 保 存/button/form/div/divdiv classpanel panel-infodiv classpanel-headingspan classglyphicon glyphicon-th-list aria-hiddentrue/span数据列表/divdiv classpanel-body注意: 以下内容是筛选出来的/divdivtable classtable table-hovertheadtrth#/ththFirst Name/ththLast Name/thth操作/th/tr/theadtbodytrth scoperow1/thtdMark/tdtdOtto/tdtda classbtn btn-primary btn-xs编辑/aa classbtn btn-danger btn-xs删除/a/td/trtrth scoperow2/thtdJacob/tdtdThornton/tdtda classbtn btn-primary btn-xs编辑/aa classbtn btn-danger btn-xs删除/a/td/trtrth scoperow3/thtdLarry/tdtdthe Bird/tdtda classbtn btn-primary btn-xs编辑/aa classbtn btn-danger btn-xs删除/a/td/tr/tbody/table/div/divnav aria-labelPage navigationul classpaginationlia href# aria-labelPreviousspan aria-hiddentruelaquo;/span/a/lilia href#1/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href# aria-labelNextspan aria-hiddentrueraquo;/span/a/li/ul/nav/div
/body
/html5.7 图标
上面的后台管理案例中,Bootstrap提供的图标不是太够用,我们需要一个专业做图标的网站 地址: https://fontawesome.dashgame.com/ 下载 下载好后,上传至服务器的static/plugins下并解压 打开网址https://fontawesome.dashgame.com/ 放在代码的这里 访问 以此类推,很简单
优化 针对前面的导航页面进行优化 !DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title!-- 开发版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css!-- 生产版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.min.csslink relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.cssstyle.distance {margin-left: 40px;} /style/headbodynav classnavbar navbar-defaultdiv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#我的导航/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#Link span classsr-only(current)/span/a/lilia href#联通/a/lilia href#移动/a/lilia href#电信/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaulti classfa fa-search aria-hiddentrue/i/button/formul classnav navbar-nav navbar-rightlia href#Link/a/lilia href#登录/a/lilia href#注册/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --/navdiv classcontainer clearfixdiv classcol-sm-9div classmediadiv classmedia-left media-middlea href#img classmedia-object data-srcholder.js/64x64 alt64x64stylewidth: 64px; height: 64px;srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue/a/divdiv classmedia-bodyh4 classmedia-headingMiddle aligned media/h4divi classfa fa-star aria-hiddentrue stylecolor: #f0ad4e;/ii classfa fa-star aria-hiddentrue stylecolor: #f0ad4e;/ii classfa fa-star aria-hiddentrue stylecolor: #f0ad4e;/ii classfa fa-star aria-hiddentrue stylecolor: #f0ad4e;/ii classfa fa-star aria-hiddentrue/i/divpCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./pdivi classfa fa-calendar aria-hiddentrue/i 2022-12-07i classfa fa-user distance aria-hiddentrue/i poker i classfa fa-comment distance aria-hiddentrue/i 1234/div/div/divdiv classmediadiv classmedia-left media-middlea href#img classmedia-object data-srcholder.js/64x64 alt64x64stylewidth: 64px; height: 64px;srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue/a/divdiv classmedia-bodyh4 classmedia-headingMiddle aligned media/h4pCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./p/div/divdiv classmediadiv classmedia-left media-middlea href#img classmedia-object data-srcholder.js/64x64 alt64x64stylewidth: 64px; height: 64px;srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue/a/divdiv classmedia-bodyh4 classmedia-headingMiddle aligned media/h4pCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./p/div/divdiv classmediadiv classmedia-left media-middlea href#img classmedia-object data-srcholder.js/64x64 alt64x64stylewidth: 64px; height: 64px;srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue/a/divdiv classmedia-bodyh4 classmedia-headingMiddle aligned media/h4pCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./p/div/divul classpaginationli classdisableda href# aria-labelPreviousspan aria-hiddentrue«/span/a/lili classactivea href#1 span classsr-only(current)/span/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href# aria-labelNextspan aria-hiddentrue»/span/a/li/ul/divdiv classcol-sm-3div classpanel panel-defaultdiv classpanel-headingi classfa fa-fire aria-hiddentrue stylecolor: red;/i 最新推荐/divdiv classpanel-bodyPanel content/div/divdiv classpanel panel-primarydiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/divdiv classpanel panel-warningdiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/div/div/div
/body
/html5.8 Bootstrap实现动态效果 依赖:
JQueryJavascript JQuery 是 Javascript 的类库 下载JQuery: https://jquery.com/download/ 因为我的项目在服务器中,所以我可以在服务器中使用wget命令直接下载 放在static/js下
[roothecs-33592 js]# pwd
/root/python/bootstrap/static/js
[roothecs-33592 js]# wget https://code.jquery.com/jquery-3.6.1.min.js
--2022-12-07 14:08:39-- https://code.jquery.com/jquery-3.6.1.min.js
Resolving code.jquery.com (code.jquery.com)... 69.16.175.42, 69.16.175.10, 2001:4de0:ac18::1:a:1a, ...
Connecting to code.jquery.com (code.jquery.com)|69.16.175.42|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 89664 (88K) [application/javascript]
Saving to: ‘jquery-3.6.1.min.js’100%[] 89,664 209KB/s in 0.4s 2022-12-07 14:08:40 (209 KB/s) - ‘jquery-3.6.1.min.js’ saved [89664/89664]以之前的导航页面做演示 放在body标签中的最下面 body
...script srcstatic/js/jquery-3.6.1.min.js/scriptscript srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.min.js/script
/body浏览器刷新访问 接下来看一下Javascript 地址: https://v3.bootcss.com/javascript/
div classcontainer!-- Button trigger modal --button typebutton classbtn btn-primary btn-lg data-togglemodal data-target#myModalLaunch demo modal/button!-- Modal --div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabelModal title/h4/divdiv classmodal-body.../divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div/div
/div可以观察一下这个是怎么实现点击跳出窗口的 !-- Button trigger modal --
button typebutton classbtn btn-primary btn-lg data-togglemodal data-target#myModalLaunch demo modal
/button上面的代码中,data-togglemodal data-target#myModal,点击按钮后会寻找带有idmyModal的标签
!-- Modal --
div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabelModal title/h4/divdiv classmodal-body.../divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div
/div因此我们可以知道,使用其他的标签一样可以触发点击跳转 将右上角的注册按钮设置为点击跳转窗口 lia href# data-togglemodal data-target#myModal注册/a/li6. Javascript 意义: 实现动态效果 先准备基础目录,拷贝之前的bootstrap目录
[roothecs-33592 python]# cp -r bootstrap javascript删除javascript中无用的html文件
[roothecs-33592 python]# cd javascript/
[roothecs-33592 javascript]# ls
main.py static templates
[roothecs-33592 javascript]# cd templates/
[roothecs-33592 templates]# ls
01.html 02.html 03.html 04.html 05.html
[roothecs-33592 templates]# rm -rf ./*首先编写一个小样例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.menus {width: 200px;border: 1px solid red;}.menus .header {background-color: gold;padding: 20px 10px;}/style
/head
bodydiv classmenusdiv classheader onclickmyFunc()大标题/divdiv classitem内容/div/divscript typetext/javascriptfunction myFunc() {alert(hello)}/script/body
/html访问测试 跳出对话框 更改,使用confirm
script typetext/javascriptfunction myFunc() {// alert(hello)confirm(是否要继续?)}
/script浏览器刷新访问
6.1 代码位置
js代码的存在形式: 在当前HTML文件中 head中body中(推荐) 注意: 如果写在了head中,body的html代码不会执行,会先执行head中的javascript之后,才会显示html代码 在其他js文件中,导入使用(一般放在 body 中)
bodyscript srcstatic/js/my.js/script
/body6.2 注释
HTML的注释
!-- 注释内容 --CSS的注释
/* 注释内容 */Javascript的注释
// 注释内容/* 注释内容 */6.3 变量
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyscript typetext/javascriptvar name poker;console.log(name); //打印变量/script
/body
/html6.3.1 字符串类型
//声明
var name helloworld;
var name String(helloworld);常见功能
var name 中国联通
var v1 name.length;
var v2 name[0];
var v3 name.trim(); //去除空白
var v4 name.substring(0,2) //切片, 前取后不取案例: 跑马灯
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodydiv idtxt欢迎中国联通领导poker莅临指导/divscript typetext/javascriptfunction show() {//1.去HTML中找到某个标签并获取他的内容 (DOM)var tag document.getElementById(txt);var dataString tag.innerText;//2.动态起来,把文本中的第一个字符放在字符串的最后面var firstChar dataString[0];var otherString dataString.substring(1, dataString.length);var newText otherString firstChar;//3.在HTML标签中更新内容tag.innerText newText;}//Javascript中的定时器//每秒钟执行这个show函数setInterval(show, 1000); //毫秒/script
/body
/html6.3.2 数组
var v1 [11,22,33,44];
var v2 Array([11,22,33,44]);//操作
var v1 [11,22,33,44];v1[1]
v1[0] poker//追加
v1.push(联通); //尾部追加 [11,22,33,44,联通]
v1.unshift(联通); //头部追加 [联通,11,22,33,44]
v1.splice(索引,0,元素);
v1.splice(1,0,中国); //指定位置追加 [11,中国,22,33,44]//删除
v1.pop(); //尾部删除
v1.shift(); //头部删除
v1.splice(索引位置,1);
v1.splice(2,1); //索引为 2 的元素删除 [11,22,44]//循环
var v1 [11,22,33,44];
//循环的是索引
for(var index in v1){//datav1[index]...
}for(var i0; iv1.length; i){...
}案例: 动态数据
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyul idcity!-- li北京/lili天津/lili上海/li --/ulscript typetext/javascriptvar cityList [北京,天津,上海];for(var idx in cityList) {var text cityList[idx];//创建 li/li 标签var tag document.createElement(li);//在 li 标签中写入内容tag.innerText text;//添加到 idcity 那个标签的里面 DOMvar parentTag document.getElementById(city);parentTag.appendChild(tag);}/script
/body
/html6.3.3 对象(字典)
info {name:poker,age:18,
}info {name:poker,age:18
}info.age;
info.name tokerinfo[age]
info[name] toker;delete info[age]//循环
for(var key in info){//key值 datainfo[key]...
}案例: 动态表格
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodytable border1theadtrthID/thth姓名/thth年龄/th/tr/theadtbody idbodytr!-- td1/tdtdpoker/tdtd25/td --/tr/tbody/tablescript typetext/javascriptvar dataList [{ id: 1, name: poker, age: 25 },{ id: 1, name: poker, age: 25 },{ id: 1, name: poker, age: 25 },{ id: 1, name: poker, age: 25 },{ id: 1, name: poker, age: 25 },{ id: 1, name: poker, age: 25 },];for (var idx in dataList) {var info dataList[idx]//1.创建 tr 标签var tr document.createElement(tr)for (var key in info) {var text info[key];//2.创建 td 标签var td document.createElement(td);td.innerText text;tr.appendChild(td);}//3. 追加数据var bodyTag document.getElementById(body);bodyTag.appendChild(tr);}/script
/body
/html6.4 条件语句
if (条件) {...
}else{...
}if (条件) {...
else if (条件){...
}else{...
}6.5 函数
function func(){...
}//执行
func()6.6 DOM DOM 是一个模块,模块可以对HTML页面中的标签进行操作 //根据 ID 获取标签
var tag doucment.getElementById(xx);//获取标签中的文本
tag.innerText//修改标签中的文本
tag.innerText hhhhhhh;如标题 6.3.2 中的案例
bodyul idcity!-- li北京/lili天津/lili上海/li --/ulscript typetext/javascriptvar cityList [北京,天津,上海];for(var idx in cityList) {var text cityList[idx];//创建 li/li 标签var tag document.createElement(li);//在 li 标签中写入内容tag.innerText text;//添加到 idcity 那个标签的里面 DOMvar parentTag document.getElementById(city);parentTag.appendChild(tag);}/script
/body事件的绑定
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodyinput typetext placeholder请输入内容 idcontentinput typebutton value点击添加 onclickaddCityInfo()ul idcity/ulscript typetext/javascriptfunction addCityInfo() {//1.找到标签var userContent document.getElementById(content);//2.获取input中用户输入的内容var newString userContent.value;//判断用户输入是否为空if (newString.length 0) {//3.创建 li 标签,传入用户输入的内容var newTag document.createElement(li);newTag.innerText newString;//4.标签添加到 ul 中var parentTag document.getElementById(city);parentTag.appendChild(newTag);//5.将 input text 内容清空userContent.value ;}else{alert(输入不能为空!)}}/script
/body
/html还有很多的DOM操作没有介绍,我们后面会使用JQuery来实现DOM的功能,所以这里的内容了解即可 7. JQuery
JQuery是一个JavaScript的第三方模块(第三方类库)
基于JQuery自己开发一个功能现成的工具依赖JQuery, 例如: Bootstrap动态效果
JQuery的安装方式参考本文的 5.8 Bootstrap实现动态效果
7.1 快速上手
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyh1 idtxt中国联通/h1script srcstatic/js/jquery-3.6.1.min.js/scriptscript typetext/javascript//使用JQuery修改内容$(#txt).text(广西移动);/script/body
/html7.2 寻找标签(直接)
7.2.1 ID选择器
h1 idtxt中国联通/h1
h1中国联通/h1
h1中国联通/h1JQuery操作:
$(#txt)7.2.2 样式选择器
h1 classc1中国联通/h1
h1 classc2中国联通/h1
h1 classc3中国联通/h1JQuery操作:
$(.c1)7.2.3 标签选择器
h1 classc1中国联通/h1
h1 classc2中国联通/h1
h1 classc3中国联通/h1JQuery操作:
$(h1)7.2.4 层级选择器
div classc1div classc2h1123/h1/div
/divJQuery操作:
$(.c1 .c2 h1)7.2.5 多选择器
div classc1div classc2h1123/h1/div
/div
div classc3div classc4h1123/h1li456/li/div
/divJQuery操作:
$(#c1,#c2,li)7.2.6 属性选择器
input typetext namen1 /
input typetext namen2 /
input typetext namen3 /JQuery操作:
$(input[namen1])7.3 寻找标签(间接)
7.3.1 找到上一个兄弟
divdiv北京/divdiv idc1上海/divdiv深圳/divdiv广州/div
/divJQuery操作:
$(#c1).prev() //上一个
$(#c1)
$(#c1).next() //下一个
$(#c1).next().next() //下一个的下一个
$(#c1).siblings() //所有的7.3.2 找父子
divdivdiv北京/divdiv idc1div浦东新区/divdiv静安区/divdiv奉贤区/div/divdiv深圳/divdiv广州/div/divdivdiv北京/divdiv idc1上海/divdiv深圳/divdiv广州/div/div
/divJQuery操作:
$(#c1).parent() //父亲
$(#c1).parent().parent() //父亲的父亲$(#c1).children() //所有的儿子
$(#c1).children(.p10) //所有的儿子中寻找classp10$(#c1).find(.p10) //所有的子孙中寻找classp10
$(#c1).children(div) //所有的儿子中寻找标签 div案例: 菜单的切换
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle.menus {width: 200px;height: 1000px;border: 1px solid red;}.menus .header {background-color: royalblue;padding: 5px 5px;border-bottom: 1px dotted gray;cursor: pointer;}.menus .content a {display: block;padding: 5px 5px;border-bottom: 1px dotted gray;}.hide {display: none;}/style
/headbodydiv classmenusdiv classitemdiv classheader onclickclickMe(this);天津/divdiv classcontent hidea静海区/aa东丽区/aa西青区/aa宝坻区/aa滨海新区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海/divdiv classcontent hidea静安区/aa奉贤区/aa浦东新区/aa徐汇区/aa青浦区/a/div/div/divscript srcstatic/js/jquery-3.6.1.min.js/scriptscript typetext/javascriptfunction clickMe(self) {var hasHide $(self).next().hasClass(hide);if (hasHide) {$(self).next().removeClass(hide);} else {$(self).next().addClass(hide);}}/script
/body
/html功能升级: 只允许有一个是展开的 !DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle.menus {width: 200px;height: 1000px;border: 1px solid red;}.menus .header {background-color: royalblue;padding: 5px 5px;border-bottom: 1px dotted gray;cursor: pointer;}.menus .content a {display: block;padding: 5px 5px;border-bottom: 1px dotted gray;}.hide {display: none;}/style
/headbodydiv classmenusdiv classitemdiv classheader onclickclickMe(this);天津/divdiv classcontenta静海区/aa东丽区/aa西青区/aa宝坻区/aa滨海新区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海/divdiv classcontent hidea静安区/aa奉贤区/aa浦东新区/aa徐汇区/aa青浦区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海1/divdiv classcontent hidea静安区/aa奉贤区/aa浦东新区/aa徐汇区/aa青浦区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海2/divdiv classcontent hidea静安区/aa奉贤区/aa浦东新区/aa徐汇区/aa青浦区/a/div/div/divscript srcstatic/js/jquery-3.6.1.min.js/scriptscript typetext/javascriptfunction clickMe(self) {//1.让菜单展示出来$(self).next().removeClass(hide);//2.找父亲,父亲的所有兄弟,再去每个兄弟的子孙中寻找 classcontent, 添加 hide 样式$(self).parent().siblings().find(.content).addClass(hide);}/script
/body
/html7.4 值的操作
div idc1内容/div
input typetext idc2/JQuery操作:
$(#c1).text() //获取文本内容
$(#c1).text(abc) //设置文本内容$(#c2).val() //获取用户输入的值
$(#c2).val(嘿嘿嘿) //设置值案例: 动态创建数据
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodyinput typetext idtxtUser placeholder用户名input typetext idtxtEmail placeholder密码input typebutton value提交 onclickgetInfo()ul idview/ulscript srcstatic/js/jquery-3.6.1.min.js/scriptscriptfunction getInfo() {//1.获取用户输入的用户名与密码var username $(#txtUser).val();var email $(#txtEmail).val();dataString username : email//2.创建li标签, 在li内部写入内容var newLi $(li).text(dataString);//3.把新创建的li标签添加到ul里面$(#view).append(newLi);}/script
/body
/html7.5 事件
bodyulli百度/lili谷歌/lili搜狗/li/ulscript srcstatic/js/jquery-3.6.1.min.js/scriptscript$(li).click(function(){// 点击li标签时,自动执行这和函数// $(this) 当前你点击的是哪个标签});/script
/body在JQuery可以删除指定的标签
script srcstatic/js/jquery-3.6.1.min.js/script
script$(li).click(function(){// 点击li标签时,自动执行这和函数// $(this) 当前你点击的是哪个标签$(this).remove();});
/script当页面框架加载完成之后执行代码
案例: 表格操作
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodytable border1theadtrthID/thth姓名/thth年龄/th/tr/theadtbody idbodytrtd1/tdtdpoker/tdtdinput typebutton value删除 classdelete //td/trtrtd1/tdtdpoker/tdtdinput typebutton value删除 classdelete //td/trtrtd1/tdtdpoker/tdtdinput typebutton value删除 classdelete //td/trtrtd1/tdtdpoker/tdtdinput typebutton value删除 classdelete //td/tr/tbody/tablescript srcstatic/js/jquery-3.6.1.min.js/scriptscript$(function () {$(.delete).click(function () {$(this).parent().parent().remove();});})/script
/body
/html8. 前端整合
HTMLCSSJavascript
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title!-- 开发版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.csslink relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.css!-- 生产版本 --!-- link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.min.css --style/* 去除导航栏圆角 */.navbar {border-radius: 0;}/style/headbodynav classnavbar navbar-inversediv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-9 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#Brand/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-9ul classnav navbar-navli classactivea href#Home/a/lilia href#Link/a/lilia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulul classnav navbar-nav navbar-rightlia href#登录/a/lilia href#注册/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalsepoker span classcaret/span/aul classdropdown-menulia href#个人资料/a/lilia href#我的账户/a/lilia href#个性设置/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --/nav!-- Button trigger modal --button typebutton classbtn btn-primary btn-lg data-togglemodal data-target#myModalLaunch demo modal/button!-- Modal --div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabelModal title/h4/divdiv classmodal-body.../divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div/divdivbutton typebutton classbtn btn-default data-toggletooltip data-placementbottomtitleTooltip on leftTooltip on left/buttonbutton typebutton classbtn btn-default data-toggletooltip data-placementtoptitleTooltip on topTooltip on top/buttonbutton typebutton classbtn btn-default data-toggletooltip data-placementbottomtitleTooltip on bottomTooltip on bottom/buttonbutton typebutton classbtn btn-default data-toggletooltip data-placementrighttitleTooltip on rightTooltip on right/button/divdiva idtab tabindex0 classbtn btn-lg btn-danger rolebutton data-togglepopover data-triggerfocus titleDismissible popover data-contentAnd heres some amazing content. Its very engaging. Right?可消失的弹出框/a/divscript srcstatic/js/jquery-3.6.1.min.js/scriptscript srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.js/scriptdiv classcontainer stylewidth: 800px;height:600pxdiv idcarousel-example-generic classcarousel slide data-ridecarouselol classcarousel-indicatorsli data-target#carousel-example-generic data-slide-to0 class/lili data-target#carousel-example-generic data-slide-to1 class/lili data-target#carousel-example-generic data-slide-to2 classactive/li/oldiv classcarousel-inner rolelistboxdiv classitemimg data-srcholder.js/900x500/auto/#777:#555/text:First slide altFirst slide [900x500] srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0PGRlZnMPHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE4NGY0NjIyODJjIHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGUPC9kZWZzPjxnIGlkPSJob2xkZXJfMTg0ZjQ2MjI4MmMiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNzc3Ii8PGcPHRleHQgeD0iMzA4LjI4NzQ5MDg0NDcyNjU2IiB5PSIyNzAuMTYwMDAxMzczMjkxMDQiPkZpcnN0IHNsaWRlPC90ZXh0PjwvZz48L2cPC9zdmc data-holder-renderedtrue/divdiv classitemimg data-srcholder.js/900x500/auto/#666:#444/text:Second slide altSecond slide [900x500] srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xODRmNDYxZjZhOCB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjQ1cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGY0NjFmNmE4Ij48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjxnPjx0ZXh0IHg9IjI2NC45NDM3NDA4NDQ3MjY1NiIgeT0iMjcwLjE2MDAwMTM3MzI5MTA0Ij5TZWNvbmQgc2xpZGU8L3RleHQPC9nPjwvZz48L3N2Zz4 data-holder-renderedtrue/divdiv classitem activeimg data-srcholder.js/900x500/auto/#555:#333/text:Third slide altThird slide [900x500] srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0PGRlZnMPHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE4NGY0NjFmMTEyIHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGUPC9kZWZzPjxnIGlkPSJob2xkZXJfMTg0ZjQ2MWYxMTIiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8PGcPHRleHQgeD0iMjk4LjMxMjUiIHk9IjI3MC4xNjAwMDEzNzMyOTEwNCIVGhpcmQgc2xpZGU8L3RleHQPC9nPjwvZz48L3N2Zz4 data-holder-renderedtrue/div/diva classleft carousel-control href#carousel-example-generic rolebutton data-slideprevspan classglyphicon glyphicon-chevron-left aria-hiddentrue/spanspan classsr-onlyPrevious/span/aa classright carousel-control href#carousel-example-generic rolebutton data-slidenextspan classglyphicon glyphicon-chevron-right aria-hiddentrue/spanspan classsr-onlyNext/span/a/div/divscript$(function () {$([data-toggletooltip]).tooltip()});$(#tab).popover(hide).popover({trigger: click, placement: bottom});/script
/body
/html案例: 添加数据页面 人员信息录入功能,需要提供用户信息: 用户名年龄薪资部门入职时间 … 对于时间的选择: 插件(datetimepicker),或者可以直接使用input typedate classform-control placeholder入职时间
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title!-- 开发版本 --link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.csslink relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.css!-- 生产版本 --!-- link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.min.css --style/style/headbodydiv classcontainerform classform-horizontal stylemargin-top: 30px;!-- 引入栅格系统 --!-- 姓名和年龄 --div classrow clearfixdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label姓名/labeldiv classcol-sm-10input typetext classform-control placeholder姓名/div/div/divdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label年龄/labeldiv classcol-sm-10input typetext classform-control placeholder年龄/div/div/div/div!-- 部门和薪资 --div classrow clearfixdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label部门/labeldiv classcol-sm-10select classform-controloptionIT部/optionoption运营部/optionoption销售部/optionoption售前部/option/select/div/div/divdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label薪资/labeldiv classcol-sm-10input typetext classform-control placeholder薪资/div/div/div/div!-- 入职时间和密码 --div classrow clearfixdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label入职时间/labeldiv classcol-sm-10input typedate classform-control placeholder入职时间/div/div/divdiv classcol-xs-6div classform-grouplabel forinputPassword3 classcol-sm-2 control-label密码/labeldiv classcol-sm-10input typepassword classform-control placeholder密码/div/div/div/divdiv classrow clearfixdiv classcol-xs-6div classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-primarySign in/button/div/div/div/div/form/div/body
/html
