Python web开发之CSS中级语法外加Bootscrap

1. 前言

续上节我们说到“基于Flask框架的Python web开发的HTML+CSS”的内容点击即可传送，我们知道了一些基本语法和一些简单的网页开发设计，那么这篇文章将会学习一些高级内容及魔法工具

CSS高级语法知识点

hover伪类

after伪类

position

fix

relative

absolute

前端开发设计工具“BootScrap的使用”

2. CSS进阶语法

在这里提前说一下什么是伪类
- 用来定义元素的特殊状态，比如鼠标悬停（hover）
伪类语法

	{#selector可以为属性名（div），或者自定义style名称（a）#}
 	 selector:伪类名称 {    
 	style样式;
  }

2.1 hover（伪类）

鼠标悬停在方法上面的样式，比如鼠标悬停在字体上变红或边框变红，以及显示二维码等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            color: red;
            font-size: 18px;
        }
        {#当鼠标放在这个上面会执行下面命令，字体变成绿色，且大小变为50xiangsu#}
        .c1:hover {
            color: green;
            font-size: 50px;
        }

        .c2 {
            height: 300px;
            width: 500px;
            border: 3px solid red;
        }
{#当鼠标放在上面，边框变为3px且变为绿色#}
        .c2:hover {
            border: 3px solid green;
        }

        .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">感谢关注</div>
    <div class="download">
        <img src="images/qcode.png" alt="">
    </div>
</div>

</body>
</html>

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

很重要的应用：

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

2.3 position

position 属性规定元素的定位类型

fixed 固定
relative 相对的
absolute 绝对的

1. 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;	{#离右边10px#}
            bottom: 50px;
        }
    </style>
</head>
<body>
<div class="back"></div>
<div style="height: 1000px;background-color: #5f5750"></div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;		{#将画布默认边距，设置为零，紧贴画布#}
        }

        .dialog {
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;

            left: 0;
            right: 0;
            margin: 0 auto;		{#这三行代码将前面设置的边框左右居中#}

            top: 200px;

            z-index: 1000;
        }

        .mask {
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.7;
            z-index: 999;
        }
    </style>
</head>
<body>


<div style="height: 1000px">asdfasdfasd</div>


<div class="mask"></div>
<div class="dialog"></div>


</body>
</html>

2. relative和absolute

这个方法容易混淆，经常用于边框嵌套，先解释下面这个案例，c2是大边框，c1是小边框，c2相对与c1设置的属性，也就是c2包含c1，这就解释了c2的绝对属性相对于c1设置，所以方法引用如下，现在就应该理解了

<!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: 20px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="c1">

        <div class="c2"></div>

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

2.4 border（边框设置）

分为上右下左（这个在margin里面也是这样的顺序）边框，以及边框大小及粗细，还有边框颜色

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

        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            border-left: 3px solid #00FF7F;		{#上面这两行应用上篇学的，左边框不是红色而是RGB里面的这个颜色#}
            margin: 100px;  {#默认距离上右下左面板都是100px#}
        }

    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

透明色：

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

        .c1{
            height: 50px;
            width: 500px;
            margin: 100px;
            background-color: #5f5750;
            border-left: 2px solid transparent;		{#transparent用来设置透明色#}
        }

        .c1:hover{
            border-left: 2px solid red;
        }

    </style>
</head>
<body>
    <div class="c1">qing关注我</div>
</body>
</html>

2.5 背景色

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

        .c1{
            height: 50px;
            width: 500px;
            margin: 100px;
            background-color: #5f5750;  {#background背景色设置#}
        }


    </style>
</head>
<body>
    <div class="c1">菜单</div>
</body>
</html>

注意：以上不是所有的CSS样式。

2.6 总结

到这里，恭喜你已经将HTML+CSS常用的基础语法学完

这里给大家分享两个好用的网站，非常推荐，非常实用（我也在用）

语法知识查询

HTML平台

我还想分享一个我自己使用的可以跨平台的书签，想要的可以点击自己创建，免费的（针对书签不会管理的，后续有好的还会分享）

效率集

3.BootStrap

这个是别人已经写好的CSS样式，就相当于python的外置模块（已经封装好了），我们可以调用使用，我们如果想要使用这个BootStrap：

下载BootStrap

使用

在页面上引入BootStrap

编写HTML时，按照BootStrap的规定来编写 + 自定制。

3.1 BootSctrap的下载调用

下载链接

BootStrap5.3.0

放置位置

放在新建static/plugins下面，用哪个放哪个文件，比如要调用.css，那么就可以放进去

调用语法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- HTML注释：开发版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-5.3.0/css/bootstrap.css">

    <!-- 生产版本 -->
    <!-- <link rel="stylesheet" href="static/plugins/bootstrap-5.3.0/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 导航

都是调用BootStrap里面已经写好的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-5.3.0/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="#">请关注我</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="#">广西</a></li>
                <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">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">四川</a></li>
                        <li><a href="#">上海</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="#">登录</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">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>


</body>
</html>

3.3 栅格系统

把整体划分为了12格

分类

响应式，根据屏幕宽度不同进行变化

.col-lg-   1170px
.col-md-   970px	（这个跟下面一个常用）
.col-sm-   750px

非响应式，不会跟据屏幕不同而变化

<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-5.3.0/css/bootstrap.css">
</head>
<body>
    <div>
        <div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div>
    </div>
</body>
</html>

3.4 container

<div class="container-fluid">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

<div class="container">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

3.5 面板

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

3.6 设计登录界面

宽度 + 居中（区域居中）
内边距
表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-5.3.1/css/bootstrap.css">
    <style>
        .account {
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 20px #aaa;

            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            padding: 20px 40px;
        }

        .account h2 {
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="account">
    <h2>用户登录</h2>
    <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="密码">
        </div>

        <input type="submit" value="登 录" class="btn btn-primary">
    </form>
</div>
</body>
</html>

3.7 图标

bootstrap提供，不多。

fontawesome组件

https://fontawesome.dashgame.com/
https://icons.bootcss.com/

下载

引入

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

3.8 BootStrap依赖

BootStrap依赖JavaScript的类库，jQuery。

下载 jQuery，在页面上应用上jQuery。
在页面上应用BootStrap的JavaScript类库。