首页 > 基础资料博客日记

Python开发之一（前端开发之HTML、CSS、Bootstap、Javascript、JQuery）

2024-09-28 12:00:07基础资料围观93次

Java资料网推荐Python开发之一（前端开发之HTML、CSS、Bootstap、Javascript、JQuery）这篇文章给大家，欢迎收藏Java资料网享受知识的乐趣

文章目录

一、Flask网页开发
二、html标签
三、CSS
四、Bootstrap
五、Javascript
6 Jquery
七、前端整合

知识总结：
Python_web前端开发

一、Flask网页开发

python 安装Flask web框架

pip install flask

1.1创建一个名为web1.py的python文件

from flask import Flask

app = Flask(__name__)

#创建了网址和函数的对应关系
#访问网址会自动调用函数
@app.route('/show/info')
def index():
    return 'hello word'

if __name__ == '__main__':
    app.run()

1.2 templates目录

简介：templates用来返回html的页面，而非文本。

创建文件index.html

结构如下

index.xml内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>hello world</h1> ->如果网页还需添加东西，可在<body>下添加
</body>
</html>

web1.py内容如下：

from flask import Flask, render_template

app = Flask(__name__)

#创建了网址和函数的对应关系
#访问网址会自动调用函数
@app.route('/show/info')
def index():
     #Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
     #默认：去当前项目目录的templates文件夹中找
     return render_template('index.html')

if __name__ == '__main__':
    app.run()

重新运行后：

二、html标签

固定格式：h/div/span/a/img/ul/li/table/input/form

2.1 编码

通用的字符编码

< meta charset=“UTF-8”>

2.2title < head >

<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>

2.3 标题< h>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h1>
    <h3>三级标题</h1>
    ...
</body>

2.4 div和span


 <div>内容</div>
 <span>hello world</span>

div:一个人占一整行；
span：用多少占多少【行内标签、内联标签】
***span同行则内容相连，span不同行则内容间有空格。

2.5超链接

设置一个跳转到本地链接和一个跳转到非本地链接。

1.在index.xml文件中补充。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <h1 >自己的网址</h1>
    <a href="/show/get_self">点击跳转到自己的网址</a>
</body>
<body>
    <h1 >别人的网址</h1>
    <a href="https://www.csdn.net/">点击跳转别人的网站百度</a>
</body>
</html>

**注意：**本连链接可以只写路径即可，而非本地链接则需要完整的链接。

2.修改web1.py文件

在文件中添加一个读取自己网址

from flask import Flask, render_template

app = Flask(__name__)

#创建了网址和函数的对应关系
#访问网址会自动调用函数
@app.route('/show/info')
def index():
     #Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
     #默认：去当前项目目录的templates文件夹中找
     return render_template('index.html')

@app.route('/show/get_self')
def get_self():
     #Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
     #默认：去当前项目目录的templates文件夹中找
     return render_template('get_self.html')
if __name__ == '__main__':
    app.run()

3.添加get_self.html

在templates目录下创建get_self.html，并添加以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>自己的网址</h1>
    <div>欢迎来到我的网站</div>
</body>
</html>

4.效果

项目结构：

运行后的效果。

2.6图片

1.格式

<imgsrc="图片链接 ”>

2.图片大小

方法一：百分比

< img style=“height:10% ;width:10% " src=”/static/1711707418779.jpg">
方法二：像素大小
<img style=“height:100px;width:100px “src=”/static/1711707418779.jpg”>

3.本地图片的存放

在项目中创建static目录下，用来存放自己的图片文件。

在index.html文件添加以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <h1 >自己的网址</h1>
    <a href="/show/get_self">点击跳转到自己的网址</a>
    <img style="height:100px;width:10% " src="/static/1711707418779.jpg">
</body>
<body>
    <h1 >别人的网址</h1>
    <a href="https://www.csdn.net/">点击跳转别人的网站百度</a>
    <img style="height:100px;width:100px " src="https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280">
</body>
</html>

效果

小结

块级标签
-< h1> < /h1>

< div>< /div>

行内标签

< span></ span>
< a>< /a>
< img />

标签嵌套：

可以实现点击图片跳转到其他链接。

创建商品列表

在static目录下添加三张图片：

在web1.py中添加一个获取货物链接的方法：

@app.route('/goods/list')
def get_product():
     return render_template('get_product.html')

添加get_product.html，内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tittle</title>
</head>

<body>

 <h1>商品列表</h1>
    <a href="https://www.mi.com/shop/buy/detail?product_id=19715">
        <img src="/static/product1.png" style="width: 150px;"/>
    </a>
   <a href="https://www.mi.com/shop/buy/detail?product_id=19715">
        <img src="/static/product2.png" style="width: 150px;"/>
    </a>
   <a href="https://www.mi.com/shop/buy/detail?product_id=19715">
        <img src="/static/product3.png" style="width: 150px;"/>
    </a>


</body>
</html>

效果图

2.7列表

2.7.1无序列表

在get_product.html文件中添加：

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

2.7.2有序列表

在get_product.html文件中添加：

中国移动
中国联通
中国电信

2.8表格

web1.py添加：

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

创建文件get_table.html并添加内容：

<!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>20</td></tr>
            <tr><td>2</td><td>李四</td><td>20</td></tr>
            <tr><td>3</td><td>王五</td><td>20</td></tr>
            <tr><td>4</td><td>赵六</td><td>20</td></tr>
        </tbody>
    </table>

</body>
</html>

其中border="1”是添加格式框。

2.9 input系列

<!-- 文本与密码 -->
<div><input type= 'text'></div>

<input type="password">
<!-- 选择文件 -->
<input type="file">
<!-- 单选框 -->
<input type="radio" name="n1">男
<input type="radio" name="n2">女
<!-- 复选框 -->
<input type="checkbox" />篮球
<input type="checkbox" />游泳
<input type="checkbox" />羽毛球
<input type="checkbox" />篮球
<!-- 按钮 -->
<input type="button" value="提交">普通提交
<input type="submit" value="提交">提交表单

2.10 下拉框


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

2.11 多行文本

<textarea></textarea>

2.12 用户注册案例

在web1.py文件中添加

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

在register.html文件中添加：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<body>
    <h1>用户注册</h1>
    <div>
        用户名:
        <input type="text" />
    </div>

    <div>
        密码:
        <input type="password" />
    </div>

    <div>
        性别:
       <input type="radio" name="sex"/>男
       <input type="radio" name="sex"/>女
    </div>

    <div>
        爱好:
        <input type="checkbox">唱
        <input type="checkbox">跳
        <input type="checkbox">Rap
        <input type="checkbox">篮球
    </div>

    <div>
        城市:
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select>
    </div>

    <div>
        备注: <textarea cols="30" rows="10"></textarea>
    </div>
    <div>
        <input type="button" value="button提交">
        <input type="submit" value="submit提交">
    </div>
</body>

</html>

2.13案例：简单的用户注册登录系统

提交有两种方式：
GET: 可通过URL/表单提交
POST: 只能通过表单提交,提交数据不在URL而是在请求体中

form表单可以提交的前提条件:
提交方式: method=“get”
提交地址: action=“/xxx/xxx/xxx”
在form标签里面必须有一个submit标签
每个标签有name属性

项目结构：

1.用户注册的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- get方法注册-->

```css
<h1>注册表1</h1>
<form method="post" action="/register">

    <div>
        用户名：<input style="text" name="user">
    </div>
    <div>
        密码：<input style="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="a">篮球
        <input type="checkbox" name="hobby" value="b">足球
        <input type="checkbox" name="hobby" value="c">棒球
    </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="1">打游戏</option>
        <option value="2">英语</option>
        </select>
    </div>
    <div>
        备注:<textarea name="more"></textarea>
    </div>
    <div>
            <input type="submit" value="submit提交">
    </div>

</form>
</body>
</html>

2.用户登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎登录</h1>
<form method="post" action="/login">
  账号：<input type="text" name="user">
  账号：<input type="text" name="pwd">
  提交：<input type="submit" name="button" value="submit">
</form>

</body>
</html>

3.用户登录后的页面

index.html，添加以下内容

<!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>20</td></tr>
            <tr><td>2</td><td>李四</td><td>20</td></tr>
            <tr><td>3</td><td>王五</td><td>20</td></tr>
            <tr><td>4</td><td>赵六</td><td>20</td></tr>
        </tbody>
    </table>

</body>
</html>

4.flask框架搭建web

在web.py中添加

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_list = request.form.getlist('hobby_list')
        city = request.form.get('city')
        skill_list = request.form.getlist('skill_list')
        more = request.form.getlist('more')

        print(user,pwd,gender,hobby_list,city,skill_list,more)
        return "注册成功"

#get方式
@app.route('/login',methods=['GET','POST'])
def do_register():
    if request.method == "GET":
        return render_template('login.html')
    else:
        return render_template('index.html')


if __name__ == '__main__':
    app.run()

5.效果

注册页面
在pycharm后台拿到账号和密码
在登录页面登录
登录完跳转到

三、CSS

简介：专门用来”美化“标签。
高度/宽度/块级or行内or块级行内/浮动/字体/文字对齐方式/内边距/外边距
关于边距：
-body
-区域居中

3.1CSS方式

3.1.1在标签上

<img src="..." stype="height: 100px">
<div stype="height: 100px">hello</div>

3.1.2在head标签的style上(*)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            color:red
        }
    </style>
</head>
<body>

<h1  class="c1">hello</h1>

3.1.3 写到文件中(*)

在static目录下创建 common.css文件

.XX{
    color: red;
}

调用CSS样式::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/common.css">
</head>
<body>

<h1  class="XX">hello</h1>

</body>
</html>

3.2选择器

1.ID选择器 #c1

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #c1 {
	    color: red;
    }
    </style>
</head>
<body>

<h1  id="c1">hello</h1>

</body>

2.类选择器 .c2 **

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #c1 {
	    color: red;
    }
    .c2 {
	    color: green;
    }
    div {
	    color: red;
    }
    </style>
</head>
<body>

<h1  >x</h1>
<div id="c1">小明</div>
<div class="c2">小红宏</div>
<div>小丽丽里</div>

3.标签选择器 **

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div {
	    color: red;
    }
    </style>
</head>
<body>
<div>小丽丽里</div>

4，属性选择器

.v1[value="xx"]{
    color: gold;
}


 <div class="v1">小明</div>
<div class="v1" value="xx">小红宏</div>

找到标签为value=“xx”，才能做相应的操作。

5.后代选择器 **

指定对应的标签生效。

    .ss a{
        color:green;
    }
<div class="ss">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>英国</li>
    </ul>
</div>

指定ss 类下的a标签生效

6.样式覆盖问题

 .c1 {
        color:red;
    }
     .c2 {
        color:gold;
    }
   <div class="c2 c1" value="xx">小红宏</div>

按style的顺序来生效的。class=“c1 c2”或者class=“c2 c1” 都是选择c2进行生效，c1则被覆盖，要使c1不被覆盖则需要增加！important；
eg：

.c1 {
        color:red ！important;
    }

3.3样式

1.高度和宽度

.c1{
height:300px;
widht:30%
}
注意事项：

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

2. 块级和行内标签

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

.c4 {
        display: inline-block;
        height: 300px;
        width: 500px;
        border: 1px solid red;
    }
    </style>


<body>
<span class="c3">块级和行内标签</span>
</body>

块级与行内标签的转换

<div style="display: inline;">块级转行内</div>
 <span style="display: block;">行内转块级</span>

注意：块级+块级&行内

3.字体和对齐方式：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .c1 {
            color: #00FF7F;                   /* 字体颜色 */
            font-size: 20px;                  /* 字体大小 */
            font-weight: 600;                 /* 字体粗细 */
            font-family: Microsoft Yahei;     /* 字体样式 */
            text-align: center;               /* 水平方向居中 */
            line-height: 50px;                /* 垂直方向居中 */
            border: 1px solid red;            /* 边框 */
        }
    </style>
</head>

4. 浮动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .item {
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div>
        <div class="item"></div>

    </div>
</body>
</html>

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

<body>
    <div style="background-color: blue;">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
           </div>
</body>

此时父标签中的背景blue是没有显示的，如图

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

<body>
    <div style="background-color: blue;">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>
    </div>
    </body>

5. 内边距

格式：
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;

  <style>
    .outer {
        border: 1px solid red;
        height: 200px;
        width: 200px;

        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

</style>



<div class="outer">
  <div>小明</div>
  <div>w小红</div>

</div>

6. 外边距

margin

<body>
    <div style="height: 200px; background-color: aquamarine;"></div>
    <div style="height: 200px; background-color:blueviolet; margin-top: 20px;"></div>
</body>

7.全图页面和内容居中

全图页面：

body{
	margin:0;
}

内同居中：

文本居中，文本会在这个区域中居中

<div style="width：200px; text-align:center;">橙汁</div>

2. 区域居中,自己要有宽度+margin-left:auto;margin-right:auto;

 <style>
  .container{
  width:500px;
  margin:0 auto;
  }
    </style>


<div class="container">橙汁2</div>

父亲没有高度或者宽度，被孩子支撑起来

8.hover：设置变色

简介：鼠标接触目标就会显示不同的信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .c1 {
            color:brown;
        }
        .c1:hover {
            color: red;
            font-size: 20px;
        }

        .c2 {
            width: 300px;
            height: 300px;
        }
        .c2:hover {
            border: 3px solid red;
        }

        .download {
            display: none;
        }

        .app:hover .download {
            display: block;
        }

    </style>
</head>
<body>
    <div class="c1">鼠标靠近我变成red</div>
    <div class="c2">鼠标靠近我变成red</div>
    <div class="app">
        <div>鼠标放我这里触发显示二维码</div>
        <div class="download">
            <img src="static/img_1.png" alt="">
        </div>
    </div>
</body>
</html>

9.after 尾部添加东西

用来清除掉浮动，不用每次都写stype=“clear: both;”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfie:after {
            content: "";
            display:block;
            clear:both
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="item">1</div>
        <div class="item">1</div>
        <div class="item">1</div> 
      </div>
</body>
</html>

10 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: 50px;
     bottom: 50px;}
  </style>
</head>
<body>
<div style="height:1000px;background-color:#b0b0b0"></div>
<div class="back"></div>
</body>
</html>

10.对话框

.app{
            position: relative;
        }

        .app .download {
            position: absolute;
            display: none;
            height: 100px;
            width: 100px;
        }

        .app:hover .download {
            display: block;
        }



 <a href="https://www.mi.com" class="app" >下载app
<div class="download"> <img src="static/img_5.png" ></div>
</a>

11.border边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .left {
            float: left;
        }

        .c1 {
            height: 200px;
            width: 300px;
            border: 3px dotted #00FF7F;
            margin: 50px;
        }

        .c2 {
            height: 200px;
            width: 300px;
            border: 3px solid red;
            border-left: 10px solid green;
            margin: 50px;
        }

        .c3 {
            height: 200px;
            width: 300px;
            margin: 50px;
            background-color: bisque;
            border-left: 2px solid transparent;  /* 透明色 */
        }

        .c3:hover {
            border-left: 2px solid rgb(35, 211, 19);
        }

    </style>
</head>
<body>
    <div class="c1 left">虚线~</div>
    <div class="c2 left">实线</div>
    <div class="c3 left">透明色，碰到我会变色哦</div>
    <div style="clear: both;"></div>
</body>
</html>

3.4小米商城案例

1. 案例1：小米顶部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      margin:0
    }

    .site-topbar {
      height: 40px;
      font-size: 12px;
      color: #b0b0b0;
      background: #333;
}

.container{
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
.site-topbar .menu {
    float: left;
    height: 40px;
    line-height: 40px;
}
.site-topbar .accont {
    float: right;
    height: 40px;
    line-height: 40px;
}


  </style>
</head>
<body>

<div class="site-topbar">
  <div class="container">
    <div  class="menu">
      <a>小米官网 </a>
      <a> 小米商城 </a>
      <a>小米澎湃OS</a>
      <a> IoT </a>
      <a> 云服务</a>
    </div>
    <div class="accont">
      <a>登录 </a>
      <a> 注册 </a>
    </div>
  </div>
</div>



</body>
</html>

2.案例2：二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    .body{
      margin:0;
     }
    .sub_header{
      height:100px;
    }
    .container{
      width:1128px;
      margin:0 auto;
  }

    .sub_header .logo_mi{
        width:234px;
        float:left;
     }
    .sub_header .logo_mi a{
        margin-top:22px;
        display:inline-block;
     }
     .sub_header .logo_mi a img{
        height:56px;
        width:56px;
     }

    .sub_header .menu{
        float:left;
        line-height:100px;


     }
     .sub_header .menu a{
        display:inline-block;
        padding:0 15px;
        color:#333;
        font-size: 16px;
        text-decoration:none;

     }
     .sub_header .menu a:hover{
        color:#ff6700;

     }

    .sub_header .search{

        float:left;
     }
  </style>

</head>
<body>


<div class="sub_header">
  <div class="container">
      <div class="hw logo_mi">
        <!--a行内标签;默认设置高度、边距无效,转成块级&行内+块级-->
        <a href="https://www.mi.com/" >
          <img src="static/img_1.png">
        </a>
      </div>
          
      <div class="hw menu">
        <a href="https://www.mi.com/">xiaomi手机</a>
        <a href="https://www.mi.com/">redmi手机</a>
        <a href="https://www.mi.com/">电视</a>
        <a href="https://www.mi.com/">笔记本</a>
      </div>
      <div class="hw search"></div>
      <div style="clear:both;"></div>
  </div>

</div>



</body>
</html>

3.案例3：顶部和菜单整合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        /* 去掉body的边距 */
        body {
            margin: 0;
        }

        .header {
            background-color: #333;
        }

        /* 让中间内容居中 */
        .container {
            width: 1226px;
            margin: 0 auto;     /* 上下为0, 左右为auto */
        }

        /* header class 下的标签 a 自动应用这个样式 */
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header a {
            text-decoration: none;
        }

        .header a:hover {
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

    .sub_header{
      height:100px;
    }

    .sub_header .logo_mi{
        width:234px;
        float:left;
     }
    .sub_header .logo_mi a{
        margin-top:22px;
        display:inline-block;
     }
     .sub_header .logo_mi a img{
        height:56px;
        width:56px;
     }

    .sub_header .menu{
        float:left;
        line-height:100px;


     }
     .sub_header .menu a{
        display:inline-block;
        padding:0 15px;
        color:#333;
        font-size: 16px;
        text-decoration:none;

     }
     .sub_header .menu a:hover{
        color:#ff6700;

     }

    .sub_header .search{

        float:left;
     }
    </style>

</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com">小米商城</a>
                <a href="https://www.mi.com">MIUI</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="account">
                <a href="https://www.mi.com">登录</a>
                <a href="https://www.mi.com">注册</a>
                <a href="https://www.mi.com">消息通知</a>
            </div>'
            <div style="clear: both;"></div>
        </div>
    </div>
<div class="sub_header">
  <div class="container">
      <div class="hw logo_mi">
        <!--a行内标签;默认设置高度、边距无效,转成块级&行内+块级-->
        <a href="https://www.mi.com/" >
          <img src="static/img_1.png">
        </a>
      </div>

      <div class="hw menu">
        <a href="https://www.mi.com/">xiaomi手机</a>
        <a href="https://www.mi.com/">redmi手机</a>
        <a href="https://www.mi.com/">电视</a>
        <a href="https://www.mi.com/">笔记本</a>
      </div>
      <div class="hw search"></div>
      <div style="clear:both;"></div>
  </div>

</div>
</body>
</html>

4.小结

a. a标签是行内标签，行内标签的高度、内外边距、默认无效
b. 垂直方向居中
1）文本—>line-height
2）图片 —> 边距
c. a标签默认有下划线。
1）通过加样式去除。text-decoration:none
d.鼠标放上去之后可变色
1）增加hover

.header a:hover {
        color: white;
    }

5.案例4：推荐区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        body {
            margin: 0;
        }
        img{
            width:100%;
            height:100%;
        }
        .left{
            float:left;
        }
        .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 .logo_mi{
        width:234px;
        float:left;
     }
    .sub_header .logo_mi a{
        margin-top:22px;
        display:inline-block;
     }
     .sub_header .logo_mi a img{
        height:56px;
        width:56px;
     }

    .sub_header .menu{
        float:left;
        line-height:100px;


     }
     .sub_header .menu a{
        display:inline-block;
        padding:0 15px;
        color:#333;
        font-size: 16px;
        text-decoration:none;

     }
     .sub_header .menu a:hover{
        color:#ff6700;

     }

    .sub_header .search{

        float:left;
     }



     .slider img{
        width: 1226px;
        height: 460px;
     }

     .news{
      margin-top: 14px;
     }
     .news .channel{
        width:228px;
        height:164px;
        background-color:#5f5750;
        padding:3px;
     }
      .news .list-item{
        width:316px;
        height:170px;
     }

     .news .channel .item{
        height:82px;
        width:76px;
        float:left;
        text-align:center;

     }
    .news .channel .item img{
        height:26px;
        width:26px;
        display:block;
        margin:0 auto 4px;
     }
         .news .channel .item a{
        display:inline-block;
        font-size:12px;
        padding-top:18px;
        color:#fff;
        opacity:0.7;
        text-decoration:none;
     }
  .news .channel .item a:hover{
    opacity:1;
  }

    </style>

</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com">小米商城</a>
                <a href="https://www.mi.com">MIUI</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="account">
                <a href="https://www.mi.com">登录</a>
                <a href="https://www.mi.com">注册</a>
                <a href="https://www.mi.com">消息通知</a>
            </div>'
            <div style="clear: both;"></div>
        </div>
    </div>
    <div class="sub_header">
  <div class="container">
      <div class="hw logo_mi">
        <!--a行内标签;默认设置高度、边距无效,转成块级&行内+块级-->
        <a href="https://www.mi.com/" >
          <img src="static/img_1.png">
        </a>
      </div>

      <div class="hw menu">
        <a href="https://www.mi.com/">xiaomi手机</a>
        <a href="https://www.mi.com/">redmi手机</a>
        <a href="https://www.mi.com/">电视</a>
        <a href="https://www.mi.com/">笔记本</a>
      </div>
      <div class="hw search"></div>
      <div style="clear:both;"></div>
  </div>

</div>
    <div class="slider">
      <div class="container">
        <div class="sd_img">
          <a>
            <img src="static/img_3.png" alt="">
          </a>
        </div>
      </div>
    </div>

<div class="news">
  <div class="container">
      <div class="channel left">
          <div class="item">
              <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_6.png" alt="">
                  <span>保障服务</span>
              </a></div>
          <div class="item">
          <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_7.png" alt="">
                  <span>企业团购</span>
              </a></div>
          <div class="item"><a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_8.png" alt="">
                  <span>F码通道</span>
              </a></div>
          <div class="item">
              <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_9.png" alt="">
                  <span>米粉卡</span>
              </a></div>
          <div class="item">
              <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_10.png" alt="">
                  <span>以旧换新</span>
              </a></div>
          <div class="item"><a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_11.png" alt="">
                  <span>话费充值</span>
              </a></div>
      </div>
      <div class="list-item left" style="margin-left:10px">
          <img src="static/img_4.png" />
      </div>
      <div class="list-item left" style="margin-left:10px">
          <img src="static/img_5.png" />
      </div>
      <div class="list-item left" style="margin-left:10px">
          <img src="static/img_4.png" />
      </div>
      <div class="clear:both"></div>
  </div>
</div>

</body>
</html>

四、Bootstrap

简介：别人写好的CSS样式。

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

4.1引入bootstrap

1. 下载bootstrap

https://v3.bootcss.com/getting-started/#download

2. 项目结构：

将下载好的bootstrap放在plugins目录下。

3.引入bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>

4.2导航栏

地址：https://v3.bootcss.com/components/#nav

借用代码，进行开发成自己想要的页面。

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

<nav 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 -->
</nav>

</body>
</html>

1. 修改样式

在head中添加相关的样式进行覆盖即可

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

原本引用的插件的样式为border-radius:4; 将其改成了 border-radius:0;

2.修改body中的文本

修改相应的数据即可，

4.3栅格

栅格介绍

栅格主要有4种共分为两种格式：

响应式:根据你的页面的大小来进行调整
.col-sm- : 750px
.col-md- : 970px
.col-lg- : 1170px

<div class="col-md-7" style="background-color: brown;">1</div>
<div class="col-md-5" style="background-color: green;">2</div>

非响应式：固定栅格的比例，不会随页面的大小进行变换
.col-xs-

<div class="col-xs-7" style="background-color: brown;">1</div>
<div class="col-xs-5" style="background-color: green;">2</div>

列偏移
.col-sm-offset-

<div class="col-xs-1" style="background-color: brown;">1</div>
<div class="col-sm-offset-2 col-xs-1" style="background-color: green;">2</div>

4.4 container

container

    <div class="container clearfix">
        <div class="col-sm-6">左边</div>
        <div class="col-sm-6">右边</div>
    </div>

container-fluid

    <div class="container-fluid clearfix">
        <div class="col-sm-6">左边</div>
        <div class="col-sm-6">右边</div>
    </div>

4.5 面板

面板介绍

    <div>
      <div class="col-sm-6">左边</div>
      <div class="col-sm-6">
        <div class="panel panel-default"></div>
        <div class="panel-body">Basic panel example</div>
      </div>
      <div class="col-sm-6">左边</div>
      <div class="col-sm-6">
        <div class="panel panel-default"></div>
        <div class="panel-body">Basic panel example</div>
      </div>
      <div class="col-sm-6">左边</div>
      <div class="col-sm-6">
        <div class="panel panel-default"></div>
        <div class="panel-body">Basic panel example</div>
      </div>

    </div>

4.6分页

分页地址

分页有多种形式可以选择。

4.7图标

> 下载地址

下载完放在plugins文件夹下

如何使用

引入插件

<link href="static/plugins/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">

选取想要的图标

<td>
<button class="btn btn-primary btn-xs" type="button">
<i class="fa fa-address-card-o" aria-hidden="true"></i>保存</button>
<button class="btn btn-warning btn-xs" type="button">退出</button>
</td>

案例一：登录页面

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">

    <style>
        .ct {
            margin-left: auto;                  /* 水平居中 */
            margin-right: auto;
            margin-top: 200px;
            width: 300px;
            height: 300px;
            border-radius: 10px;                /* 圆角*/
            box-shadow: -5px 5px 10px #aaa;    /* 阴影 水平 垂直 厚度 颜色*/
            border: 2px solid black;
            padding: 20px 40px;                 /* 内边距 */
        }

        .ct h1 {
            text-align: center;
            margin-top: 10px;
        }

        .ct button {
            margin: 20px;
        }
    </style>

</head>


<body>
    <div class="ct">
        <div>
            <h1>用户登录</h1>
        </div>
        <div>
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div style="text-align: center">
                    <button type="submit" class="btn btn-primary">登 录</button>
                    <button type="submit" class="btn btn-default">注 册</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

案例二：后台页面

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/plugins/bootstrap-3.4.1/css/bootstrap.css" rel="stylesheet">
</head>

<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1"
                    data-toggle="collapse" type="button">
                <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 aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
                       href="#"
                       role="button">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 class="divider" role="separator"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider" role="separator"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input class="form-control" placeholder="Search" type="text">
                </div>
                <button class="btn btn-default" type="submit">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
                       href="#"
                       role="button">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 class="divider" role="separator"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container clearfix">

    <div style="">
        <div class="panel panel-default">
            <div class="panel-heading">表单列表</div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">账号</label>
                        <input class="form-control" id="exampleInputName2" placeholder="邮箱账号" type="text">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail2">密码</label>
                        <input class="form-control" id="exampleInputEmail2" placeholder="例如:jane.doe@example.com"
                               type="email">
                    </div>
                    <button class="btn btn-default" type="submit">保存</button>
                </form>
            </div>
        </div>
    </div>
    <div class="bs-example " data-example-id="contextual-table" style="margin-top:10px">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>Column heading</th>
                <th>Column heading</th>
                <th>Column heading</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <th scope="row">1</th>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
            <tr class="success">
                <th scope="row">3</th>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>

            </tbody>
        </table>
    </div>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a aria-label="Previous" href="#">
                    <span aria-hidden="true">&laquo;</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 aria-label="Next" href="#">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

</body>
</html>

4.8 Bootstrap动态效果

想要实现页面动态效果，则Bootstrap需要依赖JS（Javascript）和JQuery。且JQuery 是 Javascript 的类库。

下载JQuery

复制链接到中IDM中下载

将下载的文件放在js文件夹中
引入js，因为bootstrap依赖js，故也需要将bootstrap下的js引入。

<body>
······
<script src="static/js/jquery-3.7.1.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
</body>

效果图

五、Javascript

简介：实现页面动态画面

## 5.1间单案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menus {
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: green;
            padding: 20px 10px;
        }

    </style>
</head>
<body>
    <div class="menus">
        <div class="header" onclick="myFunc()">大标题</div>
        <div class="item">内容</div>
    </div>

    <script type="text/javascript">
        function myFunc() {
        <!--confirm("是否要继续?")-->
            alert("hello word")
        }
    </script>

</body>
</html>

在body中间添加script代码，点击绿色部分会弹出相关内容，如图所示：

5.1js放置位置

在HTML中可放在head和body中。

一般放在body体中，执行完html代码再执行JS代码。

放在单独的文件夹中，一般的结构如下

在html文件的body体中添加：

<body>
	<script src="static/js/my.js"></script>
</body>

5.2HTML中相关代码的注释

HTML的注释

CSS的注释

/* 注释内容 */
Javascript的注释
有两种，如下
// 注释内容
/* 注释内容 */

5.3 变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var name = "变量";
        console.log(name);   //打印变量
    </script>
</body>
</html>

会在控制台下打印相关的变量。

5.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 lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <div id="txt">欢迎光临</div>

    <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.innerText = newText;
        }

        //Javascript中的定时器
        //每秒钟执行这个show函数
        setInterval(show, 1000);    //毫秒
    </script>
</body>
</html>

5.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){
	//data=v1[index]
	...
}


for(var i=0; i<v1.length; i++){
	...
}

案例: 动态数据
动态创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <ul id="city">
        <!-- <li>广东</li>
        <li>深圳</li>
        <li>汕头</li> -->
    </ul>

    <script type="text/javascript">
        var cityList = ["广东","深圳","汕头"];
        for(var idx in cityList) {
            var text = cityList[idx];

            //创建 <li></li> 标签
            var tag = document.createElement("li");
            //在 li 标签中写入内容
            tag.innerText = text;

            //添加到 id=city 那个标签的里面 DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>
</html>

5.3.3 字典

info = {
	"name":"poker",
	"age":18,
}

info.age;
info.name = "toker"

info["age"]
info["name"] = "toker";

delete info["age"]

//循环
for(var key in info){
	//key值 data=info[key]
	...
}

案例：动态表格

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
            <tr>
                <!-- <td>1</td>
                <td>poker</td>
                <td>25</td> -->
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">

        var dataList = [
            { 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>
</html>

5.4 条件语句

if (条件) {
	...
else if (条件){
	...
}else{
	...
}

5.5 函数

//函数定义
function func(){
	...
}

//调用函数
func()

5.6 DOM

简介：DOM是一个模块，该功能是对html中的标签进行相应的操作

//根据 ID 获取标签
var tag = doucment.getElementById("xx");

//获取标签中的文本
tag.innerText

//修改标签中的文本
tag.innerText = "hhhhhhh";

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>



<body>

    <ul id="city">
        <!-- <li>广东</li>
        <li>深圳</li>
        <li>汕头</li> -->
    </ul>

    <script type="text/javascript">
        var cityList = ["广东","深圳","汕头"];
        for(var idx in cityList) {
            var text = cityList[idx];

            //创建 <li></li> 标签
            var tag = document.createElement("li");
            //在 li 标签中写入内容
            tag.innerText = text;

            //添加到 id=city 那个标签的里面 DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>

</body>
</html>

5.7 事件绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <input type="text" placeholder="请输入内容" id="content">
    <input type="button" value="点击添加" onclick="addCityInfo()">

    <ul id="city">
    </ul>

    <script type="text/javascript">
        function 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>

5.8总结

了解其大概的作用即可，自己手写SJ代码很繁琐，一般都是用别人做好的DOM，即Jquery。

6 Jquery

简介：是一个简化Javascript的库

6.1快速上手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <h1 id="txt">广东</h1>

    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        //使用JQuery修改内容
        $("#txt").text("汕头");
    </script>

</body>
</html>

这里输出的的是汕头而不再是广州了。

6.2 寻找标签（直接）

6.2.1 ID选择器

再HTML中的代码：

<h1 id="txt">广东</h1>

JQuery操作：

$("#txt")

6.2.2样选择器

再HTML中的代码：

<h1 class="c1">广东</h1>

JQuery操作：

$("h1")

6.2.3标签选择器

再HTML中的代码：

<h1 class="c1">广东</h1>
<h1 class="c2">汕头</h1>

JQuery操作：
会选择h1的所有标签

$("h1")

6.2.4层级选择器

再HTML中的代码：

<div class="c1">
	<div class="c2">
		<h1>123</h1>
	</div>
</div>

JQuery操作：

$(".c1 .c2 h1")

6.2.5多选择器

<div class="c1">
	<div class="c2">
		<h1>123</h1>
	</div>
</div>
<div class="c3">
	<div class="c4">
		<h1>123</h1>
		<li>456</li>
	</div>
</div>

JQuery操作：

$("#c1,#c3,li")

6.2.6属性选择器

<input type="text" name="n1" />
<input type="text" name="n2" />

JQuery操作：

$("input[name='n1']")

6.3 寻标签（间接）

本节操作类似如树查zhao的操作。

6.3.1找兄弟

<div>
	<div>北京</div>
	<div id="c1">上海</div>
	<div>深圳</div>
	<div>广州</div>
</div>

JQuery操作:

$("#c1").prev()			//上一个
$("#c1")				
$("#c1").next()			//下一个
$("#c1").next().next()	//下一个的下一个
$("#c1").siblings()		//所有的

6.3.1找父亲

<div>
	<div>
		<div>北京</div>
		<div id="c1">
			<div>浦东新区</div>
			<div>静安区</div>
			<div>奉贤区</div>
		</div>
		<div>深圳</div>
		<div>广州</div>
	</div>
	<div>
		<div>北京</div>
		<div id="c1">上海</div>
		<div>深圳</div>
		<div>广州</div>
	</div>
</div>

JQuery操作:
$("#c1").parent()			//父亲
$("#c1").parent().parent()	//父亲的父亲

$("#c1").children()			//所有的儿子
$("#c1").children(".p10")	//所有的儿子中寻找class=p10

$("#c1").find(".p10")		//所有的子孙中寻找class=p10
$("#c1").children("div")	//所有的儿子中寻找标签 div

案例一: 菜单的切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .menus {
            width: 200px;
            height: 1000px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: green;
            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>
</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>
                <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>
                <a>青浦区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海1</div>
            <div class="content hide">
                <a>静安区</a>
                <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>
                <a>青浦区</a>
            </div>
        </div>
    </div>

    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        function clickMe(self) {
            //1.让菜单展示出来
            $(self).next().removeClass("hide");

            //2.找父亲,父亲的所有兄弟,再去每个兄弟的子孙中寻找 class="content", 添加 hide 样式
            $(self).parent().siblings().find(".content").addClass("hide");
        }
    </script>
</body>
</html>

点击绿色标签会弹出子标题内容，而其他绿色的子标题都会关闭。

6.4值的操作

<div id="c1">内容</div>
<input type="text " id="c2"/>

JQuery操作:

$("#c1").text()				//获取文本内容
$("#c1").text("abc")		//设置文本内容

$("#c2").val()				//获取用户输入的值
$("#c2").val(123")		//设置值

案例: 动态创建数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <input type="text" id="txtUser" placeholder="用户名">
    <input type="text" id="txtEmail" placeholder="密码">
    <input type="button" value="提交" onclick="getInfo()">

    <ul id="view">
    </ul>

    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script>

        function 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>
</html>

6.5事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <ul>
        <li>广东</li>
        <li>深圳</li>
        <li>汕头</li>
    </ul>

    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script>
        $("li").click(function(){
            // 点击li标签时,自动执行这和函数
            // $(this) 当前你点击的是哪个标签
        });
    </script>
</body>
</html>

在JQuery可以删除指定的标签

 <script src="static/js/jquery-3.6.1.min.js"></script>
<script>
    $("li").click(function(){
        // 点击li标签时,自动执行这和函数
        // $(this) 当前你点击的是哪个标签
        $(this).remove();
    });
</script>

案例: 表格操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
            <tr>
                <td>1</td>
                <td>橙汁</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>橙汁</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>

        </tbody>
    </table>

    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script>
        $(
            function () {
                $(".delete").click(function () {
                    $(this).parent().parent().remove();
                });
            }
        )
    </script>
</body>
</html>

点击删除会删除相关联的一整行。

七、前端整合

HTML、CSS、JS、JQuery的整合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</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="container">
        <form class="form-horizontal" style="margin-top: 30px;">
            <!-- 引入栅格系统 -->
            <!-- 姓名和年龄 -->
            <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">
                            <select class="form-control">
                                <option>IT部</option>
                                <option>运营部</option>
                                <option>销售部</option>
                                <option>售前部</option>
                            </select>
                        </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="date" 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">Sign in</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

</body>
</html>

文章来源:https://blog.csdn.net/qq_46345319/article/details/137031714
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：新手指南-新人入职-maven相关
下一篇：【华为OD机试真题E卷】541、TLV解析 | 机试真题+思路参考+代码解析（E卷复用）（C++、Java、Py）

首页 > 基础资料 博客日记

Python开发之一（前端开发之HTML、CSS、Bootstap、Javascript、JQuery）

文章目录

一、Flask网页开发

1.1创建一个名为web1.py的python文件

1.2 templates目录

创建文件index.html

二、html标签

2.1 编码

2.2title < head >

2.3 标题< h>

2.4 div和span

2.5超链接

1.在index.xml文件中补充。

2.修改web1.py文件

3.添加get_self.html

4.效果

2.6图片

1.格式

2.图片大小

3.本地图片的存放

效果

小结

标签嵌套：

创建商品列表

效果图

2.7列表

2.7.1无序列表

2.7.2有序列表

2.8表格

2.9 input系列

2.10 下拉框

2.11 多行文本

2.12 用户注册案例

2.13案例：简单的用户注册登录系统

1.用户注册的页面

2.用户登录页面

3.用户登录后的页面

4.flask框架搭建web

5.效果

三、CSS

3.1CSS方式

3.1.1在标签上

3.1.2在head标签的style上(*)

3.1.3 写到文件中(*)

3.2选择器

1.ID选择器 #c1

2.类选择器 .c2 **

3.标签选择器 **

4，属性选择器

5.后代选择器 **

6.样式覆盖问题

3.3样式

1.高度和宽度

2. 块级和行内标签

3.字体和对齐方式：

4. 浮动

5. 内边距

6. 外边距

7.全图页面和内容居中

8.hover：设置变色

9.after 尾部添加东西

10 fixed 返回顶部

10.对话框

11.border边框

3.4小米商城案例

1. 案例1：小米顶部

2.案例2：二级菜单

3.案例3：顶部和菜单整合

4.小结

5.案例4：推荐区域

四、Bootstrap

4.1引入bootstrap

1. 下载bootstrap

2. 项目结构：

3.引入bootstrap

4.2导航栏

1. 修改样式

2.修改body中的文本

4.3栅格

首页 > 基础资料博客日记