前端开发学习笔记（持续更新中）

你携秋水揽星河丶

已于 2024-07-28 21:59:39 修改

阅读量779

点赞数 21

文章标签： python 开发语言

于 2024-07-20 13:07:26 首次发布

本文链接：https://blog.csdn.net/m0_57002446/article/details/140565122

版权

1.协程

概念：协程本质上就是让一个线程不要停，切换者做多个任务（微线程）

应用场景：开发中又IO等待，就适合用协程

使用第三方模块实现：

from greenlet import greenlet

def func1():
    print(1)  # 第2步：输出1
    gr2.switch()  # 第3步：切换到func2函数
    print(2)  # 第6步：输出2
    gr2.switch()  # 第7步：切换到func2函数，从上次执行的位置继续向后执行

def func2():
    print(3)  # 第4步：输出3
    gr1.switch()  # 第5步：切换到func1函数，从上次执行的位置继续向后执行
    print(4)  # 第6步：输出4

gr1 = greenlet(func1)
gr2 = greenlet(func2)
gr1.switch()  # 第1步：去执行func1函数

python3.8以后的协程实现：

import asyncio

async def func1():
    print(1)
    await asyncio.sleep(2)  # IO自动切换到其他任务
    print(2)

async def func2():
    print(3)
    await asyncio.sleep(2)
    print(4)

task = [
    asyncio.ensure_future(func1()),
    asyncio.ensure_future(func2())
]
loop = asyncio.get_event_loop()
loop.run_until_complete(asyncio.wait(task))

2.快速开发网站

2.1使用Flask框架搭建网站

from flask import Flask

app = Flask(__name__)

@app.route('/unicom/xxx')
def index():
    return "中国联通"

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

2.2HTML概念

网站是做出来了，但是太丑了，需要用一些标签将文本包裹起来使其好看一点，这就是HTML

@app.route('/unicom/xxx')
def index():
    return "<h1>中国联通</h1> <a href='#'>青海分公司</a>"

2.3CSS概念

对于上面的标签再经行修饰，使其更加好看一些，就是CSS，即层叠样式表

@app.route('/unicom/xxx')
def index():
    return "<h1 style='color:red;'>中国联通</h1> <a href='#'>青海分公司</a>"

2.4JavaScript概念

上面的标签里面都是不能点的，比如说你想让某个标签点击之后做一些什么，实现动态的交互式的效果，就是JS，比如让下面的中国联通点击之后出现一个弹窗

@app.route('/unicom/xxx')
def index():
    return "<h1 style='color:red;' onclick='alert(123)'>中国联通</h1> <a href='#'>青海分公司</a>"

2.5结构优化

对于上面的代码，标签是直接写道函数里面的，看起来不太直观，使用起来不方便，一般在开发时会将HTML写入到一个文件中，再在函数中打开，读取的对应用户的浏览器返回回去

导入render_template模块，在项目的根目录下创建一个templates目录，在里面创建一个HTML文件作为模板，将写好的内容copy过来放在body里面

@app.route('/unicom/xxx')
def index():
    return render_template("index.html")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style='color:red;' onclick='alert(123)'>中国联通</h1>
    <a href='#'>青海分公司</a>
</body>
</html>

2.6HTML中的占位符

如果想让页面动态显示内容，可以在HTML中写一个占位符，然后通过Flask框架传入数据

@app.route('/unicom/xxx')
def index():
    return render_template("index.html", n1='开发团队', n2='2024/7/20')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style='color:red;' onclick='alert(123)'>中国联通</h1>
    <a href='#'>青海分公司</a>
    年度优秀团队{{n1}}
    当前时间{{n2}}
</body>
</html>

3.前端开发概述

前端常用组件：HTML，CSS，JavaScript，JQuery，BootStrap

HTML->实现网站的骨架，CSS->使网站点缀更好，JavaScript->让网页动起来，JQuery->第三方模块，能够用少量的代码简单实现动态效果，相当于帮你封装了很多JavaScript的功能，BootStrap->为我们提供了很多CSS+JavaScript效果，帮你实现了80%的功能

4.HTML

HTML即超文本标记语言，浏览器能识别的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    网站上能看到的都写在这里
</body>
</html>

4.1heda里的标签

4.1.1编码

<meta charset="UTF-8">

4.1.2title

<title>江西联通</title>

4.2body里的标签

4.2.1标题标签

从h1到h6由粗变细，块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <h1>中国1</h1>
    <h2>中国2</h2>
    <h3>中国3</h3>
    <h4>中国4</h4>
    <h5>中国5</h5>
    <h6>中国6</h6>
</body>
</html>

4.2.2div和span标签

比较素的标签，本身不涵盖其他特点，包裹起来没啥变化，可塑性比较强

4.2.2.1div

一个人占据一整行，块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <div>山东蓝翔</div>
    <div>新东方技校</div>
</body>
</html>

4.2.2.2span

自己有多少就占多少，行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <span>山东蓝翔</span>
    <span>新东方技校</span>
</body>
</html>

4.2.3案例

学习以上标签主要是为了给页面做布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
<div>
    <h1>一号新闻</h1>
    <div>
        <span style="color:#ef0000;">作者：xxx</span>
        <span>时间：2024/7/20</span>
    </div>
    <div>
        出台了多项政策，开展了多项活动
    </div>
</div>
<div>
    <h1>二号新闻</h1>
    <div>
        <span style="color:#ef0000;">作者：xxx</span>
        <span>时间：2024/7/20</span>
    </div>
    <div>
        出台了多项政策，开展了多项活动
    </div>
</div>

</body>
</html>

4.2.4a标签

4.2.4.1用a标签做跳转用

点击后从当前页面直接跳转到新的页面

<a href="网址">点击查看详细</a>

点击后在新标签中打开页面

<a target="_blank" href="https://www.bilibili.com/">点击查看详细</a>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
<div>
    <h1>一号新闻</h1>
    <div>
        <span style="color:#ef0000;">作者：xxx</span>
        <span>时间：2024/7/20</span>
    </div>
    <div>
        出台了多项政策，开展了多项活动
        <a target="_blank" href="https://www.bilibili.com/">点击查看详细</a>
    </div>
</div>
<div>
    <h1>二号新闻</h1>
    <div>
        <span style="color:#ef0000;">作者：xxx</span>
        <span>时间：2024/7/20</span>
    </div>
    <div>
        出台了多项政策，开展了多项活动
        <a target="_blank" href="https://www.bilibili.com/">点击查看详细</a>
    </div>
</div>

</body>
</html>

4.2.4.2用a标签做锚点用

锚点的意思是如果一个网址带#号，点击后直接跳到#号所对应的那个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <a href="#i1">点击跳转到对应颜色区域</a>
    <a href="#i2">点击跳转到对应颜色区域</a>
    <a href="#i3">点击跳转到对应颜色区域</a>
    <div id="i1" style="height: 1000px;background-color: red"></div>
    <div id="i2" style="height: 1000px;background-color: green"></div>
    <div id="i3" style="height: 1000px;background-color: pink"></div>
</body>
</html>

4.2.5图片标签

<img src="图片地址" />

引入别人的网站的图片，直接附上图片的链接，但别人可能会加防盗链

<img src="https://pics7.baidu.com/feed/d439b6003af33a874257be3316df47365343b577.jpeg" />

引入自己的图片，需要在项目根目录下创建static文件夹，再将图片拷贝进去，最后在HTML引入，除此之外还可以在里面设置图片的高度和宽度

<img style="height: 100px;width: 100px;" src="/static/test.png" />

也可以在div标签里面设置高度和宽度，style里面填写比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <div style="height: 100px;width: 200px;">
        <img style="width: 50%" src="/static/test.png" />
    </div>
</body>
</html>

4.2.6小结

目前所学的标签有h1，div，span，a，img

其中h1，a，img都有自带的功能，h1标签可做标题，a标签可坐跳转，img标签可以显示图片。而div，span标签比较素，一般用来做页面的布局，标签和标签之间的嵌套

4.2.7练习

利用当前所学的知识实现博客园首页的这种标题页面的显示

思路：把这里分作三份，就是三个块级标签，一个就占了一整行，再在里面进行嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园 - 开发者的网上家园</title>
</head>
<body>
    <div>
        <a href="https://www.cnblogs.com/sunstrikes/p/18313798">
            <h4>LLM并行训练6-激活优化</h4>
        </a>
    </div>
    <div>
        <img src="/static/test.PNG" style="height: 80px">
        <span>激活指的是一些在fp时计算得到的临时tensor, 会用于bp时的计算......</span>
    </div>
    <div>
        <a href="https://www.cnblogs.com/sunstrikes">SunStriKE</a>
        <span>2024-07-20</span>
    </div>
</body>
</html>

4.2.8 列表标签

有<ul>和<ol>两种，其中ul是显示成点的图标，ol是以序号排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园 - 开发者的网上家园</title>
</head>
<body>
    <h2>三大运营商</h2>
    <ul>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ul>
    <h2>一线城市</h2>
    <ol>
        <li>上海</li>
        <li>北京</li>
        <li>深圳</li>
    </ol>
</body>
</html>

4.2.9表格标签

<table>标签里面包裹了<thead>和<tbody>两个标签，<thead>里面写表头，如果表格里面有一行数据就用<tr>来表示，一个<tr>表示一行。如果一行里面有很多列，在<tr>里面嵌套<th>来表示，一个<th>表示一列；<tbody>里面写内容，也是用<tr>表示一行，在里面嵌套<td>表示一列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园 - 开发者的网上家园</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>xxx</td>
                <td>11</td>
            </tr>
            <tr>
                <td>2</td>
                <td>xxx</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

4.2.10input系列

实现用户交互，让用户输入或者选择数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
</head>
<body>
    文本框<input type="text" placeholder="请输入文本">
    密码<input type="password" placeholder="请输入密码">
    上传文件<input type="file">
    单选框：
    男<input type="radio" name="n1">
    女<input type="radio" name="n1">
    复选框：
    篮球<input type="checkbox">
    足球<input type="checkbox">
    乒乓球<input type="checkbox">
    <input type="button" value="普通的按钮">
    <input type="submit" value="可以提交表单的按钮">
</body>
</html>

4.2.11下拉框标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
</head>
<body>
    <div>
        单选
        <select>
            <option>上海</option>
            <option>北京</option>
            <option>深圳</option>
        </select>
        多选
        <select multiple>
            <option>上海</option>
            <option>北京</option>
            <option>深圳</option>
        </select>
    </div>
</body>
</html>

4.2.12多行文本标签

<textarea style="width: 500px;height: 100px;"></textarea>

4.2.13form标签

from标签在提交数据时只会提交input系列，下拉框，多行文本框这些和用户交互的标签里的值

<form action="提交的网址" method="post或者get">

5.综合练习

用户在网页上提交注册数据，Flask框架中接收用户提交的数据

思路：在html中使用form表单，用户输入的内容嵌套在form表单里面，其中表单的action指向需要对接收数据做处理的函数。其中对于select和input标签，需要给其赋一个值来表示当前用户所选的内容

5.1使用get方式提交数据

method使用get方法，该方法会将传递的数据放到url中，如127.0.0.1/do/reg?user=123&pwd=456

网页通过form表单实现用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
</head>
<body>
    <form action="/do/reg" method="get">
        <div>
            用户名：<input type="text" placeholder="请输入用户名" name="user">
        </div>
        <div>
            密码：<input type="password" placeholder="请输入用密码" name="pwd">
        </div>
        <div>
            角色：
            <select name="role">
                <option value="1">管理员</option>
                <option value="2">学生</option>
                <option value="3">老师</option>
            </select>
        </div>
        <div>
            性别：
            <input type="radio" name="gender" value="f">男
            <input type="radio" name="gender" value="w">女
        </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>
            其他：<textarea name="others"></textarea>
        </div>
        <input type="submit" value="注册">
    </form>
</body>
</html>

Flask接收请求

from flask import Flask, render_template, request

app = Flask(__name__)


# 访问地址http://127.0.0.1:5000/register
@app.route('/register')
def register():
    return render_template("register.html")


@app.route('/do/reg', methods=['GET'])
def do_reg():
    # 1.接收用户提交的数据，接收到的数据格式为：http://127.0.0.1:5000/do/reg?user=xxxx&pwd=xxxx
    username = request.args.get('user')
    password = request.args.get('pwd')
    role = request.args.get('role')
    gender = request.args.get('gender')
    hobby_list = request.args.getlist('hobby')
    others = request.args.get('others')
    print(username, password, role, gender, hobby_list, others)
    # 2.将收到的用户名和密码写入数据库
    # 3.返回信息
    return "注册成功"


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

5.2使用post方式提交数据

method使用post方法，该方法会将传递的数据放到请求体中，user=123&pwd=456

如果要上传文件只能用post，例如我们再新增一个上传文件的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
</head>
<body>
    <form action="/do/reg" method="post" enctype="multipart/form-data">
        <div>
            <input type="file" name="up_files">
        </div>
    </form>
</body>
</html>

from flask import Flask, render_template, request

app = Flask(__name__)


# 访问地址http://127.0.0.1:5000/register
@app.route('/register')
def register():
    return render_template("register.html")


@app.route('/do/reg', methods=['POST'])
def do_reg():
    # 1.接收用户提交的数据，接收到的数据放在form表单中
    file_obj = request.files.get('up_files')  # 获取到一个文件对象
    print(file_obj.name)  # 获取文件名
    file_obj.save("up_picture.png")  # 如果上传的是一个图片，将上传的文件另存为up_picture.png
    username = request.form.get('user')  # post请求使用form来获取数据
    password = request.form.get('pwd')
    role = request.form.get('role')
    gender = request.form.get('gender')
    hobby_list = request.form.getlist('hobby')
    others = request.form.get('others')
    print(username, password, role, gender, hobby_list, others)
    # 2.将收到的用户名和密码写入数据库
    # 3.返回信息
    return "注册成功"


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

5.3代码优化

在实际使用场景中，用户注册成功之后不会只是单纯的打印一段文字，而是需要跳转到登录界面，下面以post方式来实现登录界面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>用户登录</h2>
    <form action="/do/login" method="post">
        用户名：<input type="text" name="user">
        密码：<input type="password" name="pwd">
        <input type="submit" value="提交">

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

from flask import Flask, render_template, request, redirect

app = Flask(__name__)


# 访问地址http://127.0.0.1:5000/register
@app.route('/register')
def register():
    return render_template("register.html")


@app.route('/do/reg', methods=['POST'])
def do_reg():
    # 1.接收用户提交的数据，接收到的数据放在form表单中
    file_obj = request.files.get('up_files')  # 获取到一个文件对象
    print(file_obj.name)  # 获取文件名
    file_obj.save("up_picture.png")  # 如果上传的是一个图片，将上传的文件另存为up_picture.png
    username = request.form.get('user')
    password = request.form.get('pwd')
    role = request.form.get('role')
    gender = request.form.get('gender')
    hobby_list = request.form.getlist('hobby')
    others = request.form.get('others')
    print(username, password, role, gender, hobby_list, others)
    # 2.将收到的用户名和密码写入数据库
    # 3.返回信息，跳转到登录界面
    return redirect("http://127.0.0.1:5000/login")


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


@app.route('/do/login', methods=['POST'])
def do_login():
    username = request.form.get('user')
    password = request.form.get('pwd')
    if username == "root" and password == "123":
        return "登录成功"
    return "登录失败"


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

6.CSS

6.1CSS的应用位置

6.1.1应用在标签上

<h1 style='color: red; height: 300px'>中国联通</h1>

6.1.2应用在head中

优点在于可以在当前页面中复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color{
            background-color: red;
            color: green;
        }
    </style>
</head>
<body>
    <div class="color">测试文本</div>
    <div class="color">测试文本</div>
    <div class="color">测试文本</div>
</body>
</html>

6.1.3应用在CSS文件中

在pycharm中创建一个Stylesheet文件

把上面写在style中的代码写到该CSS文件中

哪个模板要用就在head中导入即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="utils.css">
</head>
<body>
    <div class="color">测试文本</div>
    <div class="color">测试文本</div>
    <div class="color">测试文本</div>
</body>
</html>

6.2选择器

概念：比如上面的CSS里面写的是.color，然后在html中我们用的是class="color"；如果用的是#color，那我们在html中要写成id="color"

6.2.1id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #high{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="high">测试文本</div>
</body>
</html>

ID在html中一般都是唯一的，只针对这一个标签

6.2.2class选择器

参见6.1.2，一般class选择器是用的最多的

6.2.3标签选择器

在style中写标签名称，比如下面代码在style中写了a标签并设置字体颜色为红色，那么会将html中的所有a标签找到并设置字体颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            color: red;
        }
    </style>
</head>
<body>
    <div>测试文本</div>
    <div>
        <a>a标签</a>
    </div>
    <span>span标签</span>
    <a>a标签</a>
</body>
</html>

6.2.4后代选择器

适用于不想让所有标签都应用，只想让某些个特定的标签才应用的场景

以下的代码表示从.yy的子子孙孙中找到所有的li标签并设置字体颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yy li{
            color: red;
        }
    </style>
</head>
<body>
    <div class="yy">
        <a>百度</a>
        <div>
            <a>谷歌</a>
        </div>
        <ul>
            <li>美国</li>
            <li>日本</li>
            <li>韩国</li>
        </ul>
    </div>
</body>
</html>

如果写成.yy > a{}表示去找yy所有儿子中的a标签，孙子不行

如果写成.yy > div a{}表示先找所有儿子中的div标签，再去儿子子子孙孙中找所有a标签

综上所述，尖括号表示去儿子里面找，空格表示去所有子子孙孙里面找

6.2.5属性选择器

以下代码表示去所有input下面找type='password'的标签并设置，去所有v1下面找xx='456'的标签并设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type='password']{
            color: red;
        }
        .v1[xx='456']{
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
    <div class="v1" xx="123">s</div>
    <div class="v1" xx="456">f</div>
    <div class="v1" xx="789">a</div>
</body>
</html>

6.2.6一个标签应用多个样式

以下代码表示一个标签中同时应用了c1和c2的样式，如果c1和c2有相同的设置，下面的会覆盖上面的，如果不想被覆盖，可以在属性后面加上"!important"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            color: green !important;
        }
        .c2{
            height: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="c1 c2">文本样例</div>
</body>
</html>

6.3常见样式

6.3.1高度和宽度

对于块级标签可以生效，但是标签右边的空白区域也会占据，对于行内标签无效。对于高度和宽度也可使用百分比，百分比的宽度一定是根据它父亲有多大，占它父亲的百分之多少；百分比的高度一定要有一个固定的父亲高度才可以设置

<div style="height: 100px;width: 200px;background-color: pink"></div>
<div style="height: 100px;width: 50%;background-color: green"></div>
<span style="height: 100px;width: 200px;background-color: pink">中国</span>

6.3.2块级标签or行内标签

块级标签可以变成行内标签，需要加上'display:inline'，行内标签也可以变成块级标签，需要加上'display:block'，如果两种标签的特点都要用上可以加上'display:inline-block'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: pink;display: inline">中国联通</div>
    <span style="background-color: green;display: block">江西联通</span>
    <a style="background-color: rebeccapurple;display: block">百度</a>
    <div style="background-color: red;width: 100px;display: inline-block">中国</div>
    <div style="background-color: green;width: 100px;display: inline-block">江西</div>
    <div style="background-color: pink;width: 100px;display: inline-block">九江</div>
    <div style="background-color: gold;width: 100px;display: inline-block">学院</div>
</body>
</html>

6.3.3字体设置

设置字体颜色，大小，加粗，字体格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .xx{
            color: red;
            font-size: 60px;
            font-weight: 400;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="xx">中国联通</div>
</body>
</html>

6.3.4文字对齐方式

6.3.4.1水平方向对齐

在整个页面中对齐

<h2 style="text-align: center">用户注册</h2>

也可以包裹在div里面，再给div设置高度宽度，使其在div中对齐

<div style="width: 500px;border: 1px solid red">
    <h2 style="text-align: center">用户注册</h2>
</div>

6.3.4.2垂直方向对齐

通过.header里面的line-height实现，使小米手机，小米电视，小米手环在红框区域中保持上下居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .header{
            background-color: red;
            height: 48px;
            line-height: 48px;
        }
    </style>
</head>
<body>
    <div class="header">
        <a>小米手机</a>
        <a>小米电视</a>
        <a>小米手环</a>
    </div>
</body>
</html>

6.3.5浮动

实现两个span标签一个在页面左边一个在页面右边

<div style="width: 500px">
    <span style="float: left">中国</span>
    <span style="float: right">联通</span>
</div>

div标签会占据一整行，现在使div标签浮动起来，两个都往左边放，这样一行就能放两个div了

<div>
    <div style="float: left">中国</div>
    <div style="float: left">联通</div>
</div>

应用：基于float做页面布局，可以实现多个页面的图片挨着放的效果，下面用.item代表图片，body里面放了七张图片，这些图片会紧贴着往左边放，如果太多了会自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .item{
            float: left;
            width: 170px;
            height: 240px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

注意：如果让标签浮动起来，会脱离文档流（父亲管不住）

默认不浮动时，孩子会把父亲撑起来，如下面的代码，设置了一个粉色的背景色，里面放了青海和江西两个div标签，此时会占据两行，给江西标签设置一个高度，此时整个粉色区域也会跟着变高

<div style="background-color: pink">
    <div>青海</div>
    <div style="height: 200px">江西</div>
</div>

如果设置了浮动，一个在左边一个在右边，那么父亲的粉色区域撑不起来，页面只会显示白色

<div style="background-color: pink">
    <div style="float: left">青海</div>
    <div style="height: 200px;float: right">江西</div>
</div>

如何解决呢，只需在下面加上一行style="clear: both"即可，意思是清除浮动

<div style="background-color: pink">
    <div style="float: left">青海</div>
    <div style="height: 200px;float: right">江西</div>
    <div style="clear: both"></div>
</div>

6.3.6内边距

可以理解成脂肪厚了，比如下面代码，有一个文本框，文本框里面的文字是紧贴着文本框边线的，如果想让他离文本框边线有一些距离，就用padding来设置。padding:20px表示上下左右都设置20的内边距；padding:10 20px表示上下设置为10，左右设置为20；padding:10 20 30 40px表示按照上右下左的顺时针顺序来设置，padding-left表示设置左边，padding-top表示设置上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .c1{
            width: 500px;
            height: 100px;
            border: 1px solid red;
            padding: 20px;
            padding: 10 20px;
            padding: 10 20 30 40px;
            padding-left: 10px;
            padding-top: 50px;
        }
    </style>
</head>
<body>
    <div class="c1">
        中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通
    </div>
</body>
</html>

6.3.7外边距

指两个标签之间的间隔，我和你距离远了，使用方法和内边距类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .c1{
            height: 100px;
            background-color: pink;
        }
        .c2{
            height: 100px;
            background-color: green;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>

6.3.7.1外边距必须知道的三个场景

6.3.7.1.1整体区域居中显示

给内容设置了固定的高度和宽度后使其显示在页面中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .content{
            height: 500px;
            width: 980px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

6.3.7.1.2居中窗体

比如让登录注册的那种窗口居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .box{
            height: 400px;
            width: 450px;
            background-color: pink;
            border: 1px solid #dddddd;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

6.3.7.1.3取消默认边距

比如下面的代码，设置了一个背景为粉色的div标签，理论上会把页面占满，但实际上在页面的上下左右还是有一点空白区域，这就是默认边距，以后开发过程中每个页面都需要将其去掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
</head>
<body style="margin: 0">
    <div style="height: 500px;background-color: pink"></div>
</body>
</html>

6.4练习-实现小米商城顶部菜单

思路：1. 将body的外边距去掉。2. 用贯穿的div+背景色+高度+line-height。3. 中间的文字区域居中。4.区域内部左右浮动

你携秋水揽星河丶

关注

21
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
前端开发学习笔记（持续更新中）

前端常用组件：HTML，CSS，JavaScript，JQuery，BootStrapHTML->实现网站的骨架，CSS->使网站点缀更好，JavaScript->让网页动起来，JQuery->第三方模块，能够用少量的代码简单实现动态效果，相当于帮你封装了很多JavaScript的功能，BootStrap->为我们提供了很多CSS+JavaScript效果，帮你实现了80%的功能。
复制链接

扫一扫