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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<style>
.clearfix:after{
content: "";
display: block;
clear: both;
}
.item{
float: left;
}
style>
head>
<body>
<div class="clearfix"> {#清除浮动#}
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
div>
body>
html>
2.3 position
position 属性规定元素的定位类型
- fixed 固定
- relative 相对的
- absolute 绝对的
1. fixed
固定在窗口（注意是窗口，不是页面）的某个位置。就是跟滑动页面它不会改变位置，或者跟着一起动
我们在很多网站上见到的返回顶部的操作就是下面这样的
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>Titletitle>
<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">asdfasdfasddiv>
<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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<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，那么就可以放进去
- 调用语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="static/plugins/bootstrap-5.3.0/css/bootstrap.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>Titletitle>
<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">
<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 navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">请关注我a>
div>
<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 herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
<li role="separator" class="divider">li>
<li><a href="#">One more separated linka>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">Submitbutton>
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="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
ul>
li>
ul>
div>
div>
div>
body>
html>
3.3 栅格系统
-
把整体划分为了12格
-
分类
-
响应式，根据屏幕宽度不同进行变化
.col-lg- 1170px .col-md- 970px （这个跟下面一个常用） .col-sm- 750px -
非响应式，不会跟据屏幕不同而变化
12 -
列偏移
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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">2div> 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 titlediv>
<div class="panel-body">
Panel content
div>
div>
3.6 设计登录界面
- 宽度 + 居中（区域居中）
- 内边距
- 表单
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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/-
下载
-
引入
-
3.8 BootStrap依赖
BootStrap依赖JavaScript的类库，jQuery。
- 下载 jQuery，在页面上应用上jQuery。
- 在页面上应用BootStrap的JavaScript类库。