目的：开发一个平台(网站)
- 前端开发：HTML、CSS、JavaScript
- Web框架：接收请求并处理
- MySQL数据库：存储数据地方
快速上手：
基于Flask Web框架让你快速搭建一个网站出来。
深入学习：
基于Django框架(主要)
1.快速开发网站
from flask import Flask
app = Flask(__name__)
# 创建了网站/show/info和函数index的对应关系
# 以后用户在浏览器上访问/show/info，网站自动执行index
@app.route("/show/info")
def index():
return "中国联通"
if __name__ == '__main__':
app.run()
老师在P2的26分22秒使用的画图软件是Excalidraw
2.HTML
2.1编码
<meta charset="UTF-8">
2.2 title
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
2.4 HTML标签
2.4.1 div和span
- div
一人占一整行。[块级标签] - span
自己多大占多大。[行内标签、内联标签]
2.4.2 超链接
<!-- 别人的链接 -->
<a href="http://www.baidu.com">点击跳转</a>
<!-- 自己的链接 -->
<a href="/get/news">点击跳转</a>
2.4.3 图片
<img />标签，称为自闭合标签。
显示别人的图片
<img src="图片地址" />
显示自己的图片
- 自己项目中创建：static目录，图片要放在static目录
- 在页面上引入图片
<img src="/static/图片名称" />
引用别人网站的图片，可能会因为有防盗链而引用不上。
2.4.4 列表
无序列表
<ul>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ul>
有序列表
<ol>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ol>
2.4.5 表格
<table border="1">
<thead>
<tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
</thead>
<tbody>
<tr> <td>10</td> <td>张三</td> <td>19</td></tr>
<tr> <td>11</td> <td>张三</td> <td>19</td></tr>
<tr> <td>12</td> <td>张三</td> <td>19</td></tr>
</tbody>
</table>
2.4.6 input系列
<input type="text">
<input type="password">
<input type="file">
<input type="radio" name="n1">男
<input type="radio" name="n1">女
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球
<input type="button" value="提交"> --普通的按钮
<input type="submit" value="提交"> --提交表单
2.4.7 下拉框
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
2.4.8 多行文本
<textarea rows="3"></textarea>
网络请求
案例：用户注册
- 新建项目
- 创建Flask代码
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'GET':
return render_template("register.html")
else:
user = request.form.get('user')
pwd = request.form.get('pwd')
gender = request.form.get('gender')
hobby = request.form.getlist('hobby')
city = request.form.get('city')
skill_list = request.form.getlist('skill')
more = request.form.get('more')
print(user, pwd, gender, hobby, city, skill_list, more)
# 将用户信息写入到数据库中实现注册
return "注册成功"
if __name__ == '__main__':
app.run()
- HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<form method="post" action="/register">
<div>
用户名: <input type="text" name="user"/>
</div>
<div>
密码: <input type="password" name="pwd"/>
</div>
<div>
性别:
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
</div>
<div>
爱好:
<input type="checkbox" name="hobby" value="10">篮球
<input type="checkbox" name="hobby" value="20">足球
<input type="checkbox" name="hobby" value="30">乒乓球
</div>
<div>
城市:
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
</div>
<div>
擅长领域:
<select name="skill" multiple >
<option value="100">打游戏</option>
<option value="101">歌唱</option>
<option value="102">跑步</option>
</select>
</div>
<div>
备注: <textarea name="more"></textarea>
</div>
<div>
<input type="button" value="button提交">
<input type="submit" value="submit提交">
</div>
</form>
</body>
</html>
- 页面上的数据，想要提交到后台：
- form标签包裹要提交的含数据的标签
- 提交方式：method=”get“
- 提交的地址：action=“/xxx/xx/xx”
- 在form标签里面必须有一个submit标签
- 在form里面的一些标签：input/select/textarea
- 一定要写name属性：
<input type='text' name='user'/>
- 一定要写name属性：
3.CSS样式
css，专门用来”美化“标签。
- 基础CSS，写简单页面&看懂&改。
- 模板，调整和修改。
3.1CSS应用方式
1.在标签上用
<img src="..." style="height:100px" >
2.在head标签中写style标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red;
}
</style>
</head>
可以在多个标签中复用
3.写到文件中
把样式都写到common.css文件中，然后在html中引入该文件。
# html
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel='stylesheet' href='common.css' />
</head>
.c1{
color:red;
}
可以在多个HTML文件中复用
3.3 CSS选择器
- id选择器
# id选择器
#c1{
}
<div id='c1'></div>
- 类选择器(用的最多)
# 类选择器
.c1{
}
<div class='c1'></div>
- 标签选择器
# 标签选择器
div{
color:red;
}
<div>xxx</div>
- 属性选择器
input[type='text']{
border: 1px solid red;
}
<input type='text'>
- 后代选择器
.yy li{
color: red;
}
.yy > li{
color: pink;
}
<div class='yy'>
<ul>
<li></li>
<li></li>
</ul>
</div>
.yy li会去yy类的子子孙孙找li标签
而.yy > li只会去yy类的儿子里找li标签
多个样式的应用和覆盖问题
如果不想下面的覆盖上面的样式，则可以使用! important来标注上面的样式。
3.4 样式
1.高度和宽度
.c1{
height: 300px;
width: 500px;
}
宽度，支持百分比。高度不支持
对行内标签，高度和宽度默认无效，(后面会知道，边距也无效)
对块级标签，默认有效，但霸道，即使右侧区域空白，也不给你占用
2.块级和行内标签
- 块级标签(太霸道)
- 行内标签(太软弱)
- css样式：标签->
display:inline-block(兼容两者)
<style>
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
</style>
<body>
<span class="c1">中国</span>
<span class="c1">联通</span>
</body>
div并不是一定是块级标签，span也不是一定是行内标签，可以通过在样式中修改display来修改
3.字体设置
.c1{
color: #00FF7F; /* 字的颜色 */
font-size: 59px; /* 字的大小 */
font-weight: 600; /* 字的粗细 */
font-family: Microsoft Yahei; /* 字体 */
}
4.文字对齐方式
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
text-align: center; /* 水平方向居中 */
line-height: 59px; /* 方向水平居中 */
}
5.浮动
<div>
<span>左边</span>
<span style="float:right">右边</span>
</div>
div默认块级标签(霸道-占整行）,但如果浮动起来了，就不一样了。会只占设定的宽度。
如果你让标签浮动起来之后，就会脱离文档流（如下)，这时候需要在用完float的最后一个div后面加上带style=“clear：both;”的快标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
float: left;
width: 280px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<div style="background-color: dodgerblue">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
6.内边距
内边距：我自己的内部设置的一点距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold">听妈妈的话</div>
<div>
小朋友你是否有很多问号
</div>
</div>
</body>
</html>
内边距会把标签撑大
内边距还有两种等价写法：
padding: 20px; 表示四个方向的内边距都是20px
padding: 20px 20px 20px 20px; 表示上右下左四个方向的内边距
7.外边距
外边距，我与别人的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:200px; background-color: dodgerblue"></div>
<div style="height:100px; background-color: red; margin-top: 10px;"></div>
</body>
</html>
案例：小米商城
小米顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.header {
background: #333;
}
.container {
width: 1226px;
margin: 0 auto; /* 上下为0，左右为auto */
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a>小米官网</a>
<a>小米商城</a>
<a>MIUI</a>
<a>IoT</a>
<a>云服务</a>
<a>天星数科</a>
<a>有品</a>
<a>小爱开放平台</a>
<a>企业团购</a>
<a>资质证照</a>
<a>协议规则</a>
<a>下载app</a>
<a>Select Location</a>
</div>
<div class="account">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
小结
一定记得加入<div style="clear: both"></div>
二级菜单
log部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.sub-header{
height: 100px;
background-color: #b0b0b0;
}
.container{
width: 1128px;
margin: auto;
border: 1px solid red;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float: left;
border: 1px solid red;
}
.sub-header .logo a{
display: inline-block;
margin-top: 22px;
}
.sub-header .logo img{
height: 56px;
width:56px
}
.sub-header .menu-list{
float: left;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<a href="https://www.mi.com/shop">
<img src="/images/小米-logo.png">
</a>
</div>
<div class="ht menu-list">f</div>
<div class="ht search">f</div>
<div class="clear:both;"></div>
</div>
</div>
</body>
</html>
菜单部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.sub-header{
height: 100px;
}
.container{
width: 1226px;
margin: auto;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .logo a{
display: inline-block;
margin-top: 22px;
}
.sub-header .logo img{
height: 56px;
width:56px
}
.sub-header .menu-list{
float: left;
line-height:100px;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none; /* 去掉下划线 */
}
.sub-header .menu-list a:hover{
color: #ff6700;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<a href="https://www.mi.com/shop">
<img src="/images/小米-logo.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search">f</div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
整合：顶部菜单+二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.header {
background: #333;
}
.container {
width: 1226px;
margin: 0 auto; /* 上下为0，左右为auto */
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
display: inline-block;
margin-top: 22px;
}
.sub-header .logo img {
height: 56px;
width: 56px
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none; /* 去掉下划线 */
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="http://www.mi.com">小米官网</a>
<a href="http://www.mi.com">小米商城</a>
<a href="http://www.mi.com">MIUI</a>
<a href="http://www.mi.com">IoT</a>
<a href="http://www.mi.com">云服务</a>
<a href="http://www.mi.com">天星数科</a>
<a href="http://www.mi.com">有品</a>
<a href="http://www.mi.com">小爱开放平台</a>
<a href="http://www.mi.com">企业团购</a>
<a href="http://www.mi.com">资质证照</a>
<a href="http://www.mi.com">协议规则</a>
<a href="http://www.mi.com">下载app</a>
<a href="http://www.mi.com">Select Location</a>
</div>
<div class="account">
<a href="http://www.mi.com">登录</a>
<a href="http://www.mi.com">注册</a>
<a href="http://www.mi.com">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<a href="https://www.mi.com/shop">
<img src="/images/小米-logo.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
小结
案例：推荐区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.left{
float: left;
}
img {
width: 100%;
height: 100%;
}
.header {
background: #333;
}
.container {
width: 1226px;
margin: 0 auto; /* 上下为0，左右为auto */
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
display: inline-block;
margin-top: 22px;
}
.sub-header .logo img {
height: 56px;
width: 56px
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none; /* 去掉下划线 */
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.slider .sd-img {
width: 1226px;
height: 460px;
}
.news{
margin-top: 14px;
}
.news .channel{
width: 228px;
height: 164px;
background: #5f5750;
padding: 3px;
}
.news .channel .item{
height: 82px;
width: 76px;
float: left;
text-align: center;
background: #5f5750;
}
.news .channel .item a{
display: block;
padding-top: 18px;
font-size: 12px;
color: #fff;
opacity: .7; /* 透明度 */
text-decoration: none;
}
.news .channel .item a:hover{
opacity: 1;
}
.news .channel .item img{
display: block;
width: 24px;
height: 24px;
margin: 0 auto 4px;
}
.news .list-item{
width: 316px;
height: 170px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="http://www.mi.com">小米官网</a>
<a href="http://www.mi.com">小米商城</a>
<a href="http://www.mi.com">MIUI</a>
<a href="http://www.mi.com">IoT</a>
<a href="http://www.mi.com">云服务</a>
<a href="http://www.mi.com">天星数科</a>
<a href="http://www.mi.com">有品</a>
<a href="http://www.mi.com">小爱开放平台</a>
<a href="http://www.mi.com">企业团购</a>
<a href="http://www.mi.com">资质证照</a>
<a href="http://www.mi.com">协议规则</a>
<a href="http://www.mi.com">下载app</a>
<a href="http://www.mi.com">Select Location</a>
</div>
<div class="account">
<a href="http://www.mi.com">登录</a>
<a href="http://www.mi.com">注册</a>
<a href="http://www.mi.com">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<a href="https://www.mi.com/shop">
<img src="/images/小米-logo.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div style="clear: both"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="/images/小米商城图片.jpg">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div style="clear: both;"></div>
</div>
<div class="list-item left" style="margin-left: 14px">
<img src="/images/小米商城图片1.jpg" />
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="/images/小米商城图片2.jpg" />
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="/images/小米商城图片3.jpg" />
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
小结
- 设置不透明度
opacity: 0.5; /* 0-1 */
CSS知识点
2.1 hover(伪类)
可以hover到某一个标签，然后修改内部其他标签的样式，如.app:hover .download{ ... }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:hover{
color: red;
}
.download{
display: none;
}
.app:hover .download{
display: block;
}
.app:hover .title{
color: red;
}
</style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div>
<div class="app">
<div class="title">下载APP</div>
<div class="download">
<img src="images/小米-logo.png">
</div>
</div>
</body>
</html>
2.2 after
after可以往尾部加东西(很少直接用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
content: "大帅哥";
}
</style>
</head>
<body>
<div class="c1">张三</div>
<div class="c1">李四</div>
</body>
</html>
after的应用-clearfix清除浮动
参考资料：clearfix（清除浮动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after {
content: "";
display: block;
clear: both;
}
.item{
float: left;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
将display设置为block的原因是:after是伪元素，要想获得clear属性必须转换为block
2.3 position
fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
position: fixed;
width: 60px;
height: 60px;
border: 1px solid red;
right: 10px;
bottom: 50px;
}
</style>
</head>
<body>
<div style="height: 1000px;background-color: #5f5750"></div>
<div class="back"></div>
</body>
</html>
无论浏览器窗口如何放大缩小，都在固定的位置
案例：对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.mask{
background-color: black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.7;
z-index: 999;
}
.dialog{
position: fixed;
width: 500px;
height: 300px;
background-color: white;
border: 1px solid red;
left: 0;
right: 0;
margin: 0 auto;
top: 200px;
z-index: 1000;
}
</style>
</head>
<body>
<div style="height: 1000px">asdfasdfasdfsdf</div>
<div class="mask"></div>
<div class="dialog"></div>
</body>
</html>
relative和absolute的配合使用
absolute的元素位置会相对于relative的元素位置确定。出现二维码，出现对话框，其实都是基于relative和absolute实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 500px;
border: 1px solid red;
margin: 100px;
position: relative;
}
.c1 .c2{
height: 59px;
width: 59px;
background-color: #00FF7F;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
案例：小米商城下载APP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.left{
float: left;
}
img {
width: 100%;
height: 100%;
}
.header {
background: #333;
}
.container {
width: 1226px;
margin: 0 auto; /* 上下为0，左右为auto */
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
display: inline-block;
margin-top: 22px;
}
.sub-header .logo img {
height: 56px;
width: 56px
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none; /* 去掉下划线 */
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.slider .sd-img {
width: 1226px;
height: 460px;
}
.news{
margin-top: 14px;
}
.news .channel{
width: 228px;
height: 164px;
background: #5f5750;
padding: 3px;
}
.news .channel .item{
height: 82px;
width: 76px;
float: left;
text-align: center;
background: #5f5750;
}
.news .channel .item a{
display: block;
padding-top: 18px;
font-size: 12px;
color: #fff;
opacity: .7; /* 透明度 */
text-decoration: none;
}
.news .channel .item a:hover{
opacity: 1;
}
.news .channel .item img{
display: block;
width: 24px;
height: 24px;
margin: 0 auto 4px;
}
.news .list-item{
width: 316px;
height: 170px;
}
.app{
position: relative;
}
.app:hover .download{
display: block;
}
.app .download{
display: none;
position: absolute;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="http://www.mi.com">小米官网</a>
<a href="http://www.mi.com">小米商城</a>
<a href="http://www.mi.com">MIUI</a>
<a href="http://www.mi.com">IoT</a>
<a href="http://www.mi.com">云服务</a>
<a href="http://www.mi.com">天星数科</a>
<a href="http://www.mi.com">有品</a>
<a href="http://www.mi.com">小爱开放平台</a>
<a href="http://www.mi.com">企业团购</a>
<a href="http://www.mi.com">资质证照</a>
<a href="http://www.mi.com">协议规则</a>
<a href="http://www.mi.com" class="app">下载app
<div class="download">
<img src="/images/qcode.png"/>
</div>
</a>
<a href="http://www.mi.com">Select Location</a>
</div>
<div class="account">
<a href="http://www.mi.com">登录</a>
<a href="http://www.mi.com">注册</a>
<a href="http://www.mi.com">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<a href="https://www.mi.com/shop">
<img src="/images/小米-logo.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div style="clear: both"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="/images/小米商城图片.jpg">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/shop">
<img src="/images/v1.png" alt="保障服务">
<span>保障服务</span>
</a>
</div>
<div style="clear: both;"></div>
</div>
<div class="list-item left" style="margin-left: 14px">
<img src="/images/小米商城图片1.jpg" />
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="/images/小米商城图片2.jpg" />
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="/images/小米商城图片3.jpg" />
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
2.4 border
- 透明色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 50px;
width: 500px;
background-color: #5f5750;
border-left: 3px solid transparent;
}
.c1:hover{
border-left: 3px solid red;
}
</style>
</head>
<body>
<div class="c1">菜单</div>
</body>
</html>
2.5 背景色
容易，略
3.BootStrap
别人已经帮我们写好的css。想使用，需要下载和引用。
- 下载
- 使用
- 在页面上引用BootStrap
- 编写时，按BootStrap的规则编写+自定制
3.1初识
v3版bootstrap
目录结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发版本 -->
<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>
<input type="button" value="提交" />
<input type="button" value="提交" class="btn btn-primary" />
<input type="button" value="提交" class="btn btn-success" />
<input type="button" value="提交" class="btn btn-danger" />
<input type="button" value="提交" class="btn btn-danger btn-xs" />
</body>
</html>
3.2 导航
3.3栅格
https://v3.bootcss.com/css/#grid
-
把整体划分为12个格子
-
分类
- 响应式
根据屏幕的宽度不同，做不同的响应。.col-sm- 页面宽度大于750px生效 .col-md- 970px .col-lg- 1170px - 非响应式
无论如何滑动页面大小，格子划分永远固定。<div class="col-xs-6" style="background-color: red">1</div> <div class="col-xs-6" style="background-color: green">2</div> - 列偏移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> </head> <body> <div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div> </body> </html>
- 响应式
3.4 container
- container-fluid
<div class="container-fluid"> <!-- 平铺，然后9-3分 -->
<div class="col-sm-9">左边</div>
<div class="col-sm-3">右边</div>
</div>
- container
<div class="container"> <!-- 平铺，然后9-3分 -->
<div class="col-sm-9">左边</div>
<div class="col-sm-3">右边</div>
</div>
3.5 面板
案例
效果图
布局图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.navbar {
border-radius: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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 navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<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="#">Link</a></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="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></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="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<!--<div class="container"> 包住，然后9-3分-->
<div class="container-fluid"> <!-- 平铺，然后9-3分 -->
<div class="col-sm-9">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">最新推荐</div>
<div class="panel-body">
Panel content
Panel content
Panel content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">最新推荐</div>
<div class="panel-body">
Panel content
Panel content
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">最新推荐</div>
<div class="panel-body">
Panel content
Panel content
Panel content
</div>
</div>
</div>
</div>
</body>
</html>
案例：登录
效果图
- 定义宽度+区域居中
- 内边距
- bootstrap表单
- 阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
<style>
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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 navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中国联通xx系统</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">广西</a></li>
<li><a href="#">上海</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
表单区域
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-save" aria-hidden="true"></i>
保 存
</button>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
数据列表
</div>
<!--
<div class="panel-body">
注意：以下是我们经过筛选出来的重要数据。
</div>
-->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>
<a class="btn btn-primary btn-xs">编辑</a>
<a class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>
<a class="btn btn-primary btn-xs">编辑</a>
<a class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>
<a class="btn btn-primary btn-xs">编辑</a>
<a class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</div>
</body>
</html>
3.6 图标
- bootstrap提供了一些图标，不多
- font awesome组件
fontawesome网站- 下载
- 引入
- 使用
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
<style>
.navbar {
border-radius: 0;
}
.more .more-item{
display: inline-block;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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 navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<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="#">Link</a></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="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></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="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<!--<div class="container"> 包住，然后9-3分-->
<div class="container-fluid"> <!-- 平铺，然后9-3分 -->
<div class="col-sm-9">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div>
<i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
<i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
<i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
<i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
<div class="more clearfix">
<div class="more-item">
<i class="fa fa-calendar" aria-hidden="true"></i> 2021-11-11
</div>
<div class="more-item">
<i class="fa fa-user-circle" aria-hidden="true"></i> xxx
</div>
<div class="more-item">
<i class="fa fa-comments-o" aria-hidden="true"></i> 1000
</div>
<div class="more-item" style="float: right">
<i class="fa fa-comments-o" aria-hidden="true"></i> 1000
</div>
</div>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODhiY2Y0NzJjYiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4OGJjZjQ3MmNiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NTgzMzIwNjE3Njc1NzgiIHk9IjM2LjQwMDAwMDA5NTM2NzQzIj42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-fire" aria-hidden="true" style="color: red; font-size:18px"></i>
最新推荐
</div>
<div class="panel-body">
Panel content
Panel content
Panel content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">最新推荐</div>
<div class="panel-body">
Panel content
Panel content
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">最新推荐</div>
<div class="panel-body">
Panel content
Panel content
Panel content
</div>
</div>
</div>
</div>
</body>
</html>
BootStrap依赖
BootStrap依赖JavaScript的类库，JQuery。
- 下载JQuery，在页面上应用上JQuery。https://jquery.com/download/
- 在页面上应用BootStrap的JavaScript类库。
<script src="static/js/jquery-3.7.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
4.JavaScript
- javascript,是一门编程语言。浏览器就是javascript语言的解释器。
- dom和bom
相当于编程语言内置的模块。
例如：python中的re、random、time、json模块等。
- jquery
相当于是编程语言的第三方模块。
例如：requests、openpyxl
4.1 代码位置
位置1：head的css样式下面
位置2：body的最尾部(推荐)
js代码的存在形式
- 可以写在当前html中
- 写在其他js文件中，导入使用
<script src="static/my.js"></script>
4.2 注释
在HTML中的注释
<!-- 注释内容 -->
在css中的注释，<style>代码块
/* 注释内容 */
在js中的注释，<script>代码块
// 注释内容
/* 注释内容 */
4.3 编程语言中的变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var name ="高倩";
console.log(name);
</script>
</body>
</html>
4.4 字符串类型
// 声明
var name = "高倩";
var name = String("高倩");
// 常见功能
var name="中国联通"
var v1 = name.length;
var v2 = name[0]; // = name.charAt(0)
var v3 = name.trim();
var v4 = name.substring(0, 2); // 前取后不取
案例：跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="txt">欢迎中国联通领导高倩莅临指导</span>
<script type="text/javascript">
function 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.innerHTML = newText;
}
// javascript中的定时器，如：每1000ms执行一次show函数。
setInterval(show, 1000);
</script>
</body>
</html>
4.5 数组
// 定义
var v1 = [11, 22, 33, 44];
var v2 = Array([11, 22, 33, 44]);
// 操作
v1[1]
v1[0] = "高倩";
v1.push("联通"); // 尾部追加 [11, 22, 33, 44, "联通"]
v1.unshift("联通"); // 尾部追加 ["联通", 11, 22, 33, 44]
v1.pop();
v1.shift();
v1.splice(索引位置, 1);
v1.splice(2, 1);
// 循环
for (var idx in v1){
// idx=0/1/2/3 data=v1[idx]
}
for (var i=0; i<v1.length; i++){
// i=0/1/2/3 data=v1[i]
}
案例：动态数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="city">
<!-- <li>北京</li>-->
</ul>
<script type="text/javascript">
var cityList = ["北京", "上海", "深圳"];
for (var idx in cityList) {
var text = cityList[idx];
// 创建<li>标签
var tag = document.createElement("li");
// 在li标签中写入内容
tag.innerText = text;
// 添加到id=city那个标签的里面
var parentTag = document.getElementById('city')
parentTag.appendChild(tag);
}
</script>
</body>
</html>
4.6对象(字典)
案例：动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="body">
<tr>
</tr>
</tbody>
</table>
<script type="text/javascript">
var datalist = [
{id: 1, name: "郭智", age: 19},
{id: 1, name: "郭智", age: 19},
{id: 1, name: "郭智", age: 19},
{id: 1, name: "郭智", age: 19},
{id: 1, name: "郭智", age: 19},
];
for (var idx in datalist) {
var info = datalist[idx]
var tr = document.createElement('tr');
for (var key in info) {
var td = document.createElement('td');
var text = info[key];
td.innerText = text;
tr.appendChild(td);
}
// console.log(tr)
var bodyTag = document.getElementById('body');
bodyTag.appendChild(tr);
}
</script>
</body>
</html>
4.7 条件语句
4.8 函数
5. DOM
dom，一个模块，模块可以对HTML页面中的标签进行操作。
5.1 事件的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser">
<input type="button" value="点击添加" ondblclick="addCityInfo()">
<ul id="city">
</ul>
<script type="text/javascript">
function addCityInfo() {
// 1.找到输入的标签
var txtTag = document.getElementById('txtUser');
// 2.获取input框中用户输入的内容
var newString = txtTag.value;
// 判断用户输入是否为空，只有不为空才能继续。
if (newString.length > 0) {
var newTag = document.createElement('li');
newTag.innerText = newString;
var parentTag = document.getElementById('city');
parentTag.appendChild(newTag);
// 3.将input框内容清空
txtTag.value = "";
} else {
alert("输入不能为空");
}
}
</script>
</body>
</html>
dom可以实现很多功能，但比较繁琐，页面上效果，一般用jQuery来实现/vue.js/react.js。
总结1
- 编码相关
- 计算机中的单位
- 字符串格式化(三种)
- 数据类型
- 运算符
- 推导式(简化生成数据)
- 函数编程
- 模块
- 面向对象
- 前端
6.jQuery
jQuery是一个javaScript第三方模块(第三方类库)。
- 基于jquery，自己开发一个功能。
- 现成的工具依赖jquery，例如：bootstrap动态效果。
6.1 初识jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="txt">中国联通</h1>
<script src="static/js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
// 利用jquery中的功能实现某些效果
// 1.找到id=txt的标签 // 2.内容修改
$("#txt").text("广西联通");
</script>
</body>
</html>
6.2 寻找标签(直接寻找)
- id选择器：
$("#txt") - 样式选择器：
$(".c1") - 标签选择器：
$("h1") - 层级选择器：
$(".c1 .c2 a") - 多选择器：
$(".c3,.c2,li") - 属性选择器：
$("input[name='n1']")
6.3 寻找标签(间接寻找)
- 找到上一个兄弟
- 找父子
案例：菜单的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus {
height: 200px;
height: 800px;
border: 1px solid red;
}
.menus .header {
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.menus .content a {
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div>
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
</div>
<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
function clickMe(self) {
var hasHide = $(self).next().hasClass('hide');
if (hasHide) {
$(self).next().removeClass('hide');
} else {
$(self).next().addClass('hide');
}
// $(slef) -> 当前点击的那个标签
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus {
height: 200px;
height: 800px;
border: 1px solid red;
}
.menus .header {
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.menus .content a {
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div>
<div class="content">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">上海2</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京2</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
</div>
<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
function clickMe(self) {
$(self).next().removeClass('hide');
$(self).parent().siblings().find('.content').addClass('hide');
}
</script>
</body>
</html>
6.4 操作样式
- addClass
- removeClass
- hasClass
6.5 值的操作
6.6 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
$("li").click(function () {
var text = $(this).text();
console.log(text);
});
</script>
</body>
</html>
在jQuery中可以删除某个标签
<div id="c1">内容</div>
$("#c1").remove();
# 案例
<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
$("li").click(function () {
$(this).remove();
});
当页面框架加载完成之后执行代码(不必等img标签的图片传回完成)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
$(function () {
// 当页面的框架加载完成之后，自动就执行。
$("li").click(function () {
$(this).remove();
});
})
</script>
</body>
</html>
4.7 案例：表格操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
</table>
<script src="static/js/jquery-3.7.0.min.js"></script>
<script>
$(function (){
$(".delete").click(function (){
$(this).parent().parent().remove()
})
})
</script>
</body>
</html>
7.前端整合
- HTML
- CSS
- JavaScrip、JQuery
- BootStrap（动态效果依赖jQuery）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
<style>
.navbar {
border-radius: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></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="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">张三 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">个人资料</a></li>
<li><a href="#">我的账号</a></li>
<li><a href="#">修改密码</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">注销</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div style="width: 100%; height: 100px;line-height: 100px;border: 1px solid green;text-align:center;">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
title="Tooltip on bottom">Tooltip on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
</div>
<script src="static/js/jquery-3.7.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
案例：添加数据页面
人员信息录入功能，需要提供用户信息：
用户名、年龄、薪资、部门、入职时间（*）
对于事件的选择：不能输入；选择；插件：datetimepicker
- 下载插件
- 应用插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="static/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
</head>
<body>
<div class="container" style="margin-top: 20px;">
<form class="form-horizontal">
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="姓名">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="年龄">
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">薪资</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="薪资">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">部门</label>
<div class="col-sm-10">
<select class="form-control">
<option>IT部门</option>
<option>销售部门</option>
<option>运营部门</option>
</select>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">入职日期</label>
<div class="col-sm-10">
<input type="text" id="dt" class="form-control" placeholder="入职日期">
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="static/js/jquery-3.7.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="static/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="static/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="static/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
$(function () {
$("#dt").datetimepicker({
format: "dd MM yyyy - hh:ii",
startDate: "0",
language: "zh-CN",
autoclose: true
});
})
</script>
</body>
</html>
7360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
