CSS样式4
文章目录
复盘回顾
- 提交数据
#GET方式提交数据
@app.route('/register',methods=["GET"])
#POST方式提交数据
@app.route('/do/reg',methods=["POST"])
#优化整合
@app.route('/register',methods=["GET","POST"])
if request.method=="GET":
return render_template('register.html')
else:
pwd=request.form.get("pwd")
...
return "注册成功"
<--GET方式--></--GET方式-->
<form method="get" action="/do/reg">
<input type="text" name="user"/>
......
</form>
<--POST方式--></--POST方式-->
<form method="post" action="/do/reg"
- css样式
<link rel='stylesheet' href="common.css" />
<--把common.css文件中的css样式引出，适用于大规模页面-->
<--高度宽度-->
height:300px;
width:500px;
<--块级&行内-->
<div style='display: inline;'>hello</div>
<span style='display: block;'>byebye~</span>
display:inline-block(又有块级特性，又有行内特性)
<--字体设置-->
color: #9400D3; (字的颜色)
font-size: 58px; (字的大小)
fond-weight: 600; (加粗)
fond-family: Microsoft Yahei; (字体)
<--文字对齐方式-->
text-align: center; (水平方向居中)
line-height:59px; (垂直方向居中)
<--浮动-->
float: left;
float:right;
/*如果你让它们浮动起来，会脱离文档流，就无法撑住上一级div*/
在所有加完浮动的div后，加上：
<div style="clear: both;"><div>
<--内外边距-->
/*内边距*/
padding-top: 20px;
padding-left: 20px;
padding-right:20px;
padding-bottom:20px;
(上右下左都设置`padding: 20px 10px 5px 20px`)
/*外边距*/
margin-top: 20px(类似)
<--去除body标签的默认边距-->
body{
margin:0;
}
<--居中-->【图片居中需要加边距】
/*文本居中*/
text-align: center;
line-height:59px;
/*区域居中,自己要有宽度+`margin-left: auto;margin-right:auto`*/
width: 980px;
margin: 0 auto;
<--去除a标签默认下划线-->
text-decoration: none;
<--鼠标效果-->
hover(名称上加)如：
.c1:hover
a:hover
注意：行内标签的高度，内外边距默认无效，需要进行类型转换：
display:inline-block
1.4 案例：推荐部分
原图：
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米顶部</title>
<style>
body{
margin: 0;
}
.header{
background: #333;
}
.left{
float:left;
}
img{
height: 100%;
weight: 100%;
}
.container{
width:1226px;
margin: 0 auto; /*上下=0，左右为auto*/
}
.header .menu{
float: left;
height: 38px;
line-height: 38px;
}
.header .account{
float: right;
color: white;
height:38px;
line-height: 38px;
}
.header a{
color: #b0b0b0;
font-size: 12px;
display: inline-block;
line-height: 40px;
margin-right: 10px;
}
.header a:hover{
color:white;
}
.sub-header{
height:100px;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width:234px;
float: left;
}
.sub-header .logo a{
margin-top:22px;
display:inline-block;
}
.sub-header .logo a img{
height:56px;
width:56px;
}
.sub-header .menu-list{
float: left;
line-height:100px;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6788;
}
.sub-header .search{
float: right;
}
.slider .sd-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 a{
display: inline-block;
font-size:12px;
padding-top:18px;
text-decoration:none;
color:#fff;
opacity:0.7;
}
.news .channel .item a:hover{
opacity:1;
}
.news .channel .item img{
height:24px;
width:24px;
display: block;
margin: 0 auto 4px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a>小米官网</a>
<a>小米商城</a>
<a>MIUI</a>
<a>loT</a>
<a>云服务</a>
<a>天星数科</a>
<a>有品</a>
<a>小爱开放平台</a>
<a>企业团购</a>
<a>资质证照</a>
<a>协议规则</a>
<a>下载app</a>
<a>Select Location</a>
</div>
<div class="account">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a,行内标签，默认设置高度，边距无效。-》块级&行内+块级-->
<a href="https://www.mi.com/" >
<img src="images/logo-mi2.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div class="style:both"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="images/img.png" alt="">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_4.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_5.png" alt="">
<span>企业团购</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_6.png" alt="">
<span>F码通道</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_7.png" alt="">
<span>米粉卡</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_8.png" alt="">
<span>以旧换新</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_9.png" alt="">
<span>话费充值</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left" style="margin-right:15px">
<img src="images/img_1.png">
</div>
<div class="list-item left" style="margin-right:15px">
<img src="images/img_2.png">
</div>
<div class="list-item left" style="margin-right:14px">
<img src="images/img_3.png">
</div>
<div class="clear:both"></div>
</div>
</div>
</body>
</html>
小结
- 设置透明度
opacity:0.5; /*0-1*/
CSS知识点
2.1 hover(伪类)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover</title>
<style>
.c1{
color:black;
font-size:10px;
}
.c1:hover{
color:purple;
font-size:50px;
}
.c2{
height:300px;
width:500px;
border:3px solid red;
}
.c2:hover{
border: 3px solid green;
}
</style>
</head>
<body>
<div class="c1">xyx</div>
<div class="c2">最近好忙呀</div>
</body>
</html>
- 功能二：
.download{
display:none; /*隐藏图片*/
}
.app:hover .download{
display:block;
}
<div class="app">
<div>下载</div>
<div class="download">
<img src="images/img_10.png">
</div>
</div>
2.2 after(伪类)
在标签内部元素尾部加一些东西，一般用于解决float问题（非常重要）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
content:"开心";
}
.item{
float:left;
}
.clearfix:after{
content:"";
display:block;
clear: both;
}
</style>
</head>
<body>
<div class="c1">昨天</div>
<div class="c1">今天</div>
<div class="c1">明天</div>
<div class="c1">后天</div>
<div class="clearfix">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</body>
</html>
2.3 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;
background: blue;
right:10px;
bottom:50px;
</style>
</head>
<body>
<div style="height: 1000px;background-color:#fff"></div>
<div class="back"></div>
</body>
</html>
案例：对话框
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.dialog{
position:fixed;
width:500px;
height:300px;
background: grey;
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;background-color:#fff">adsfgrevbsrvstr</div>
<div class="dialog"></div>
<div class="mask"></div>
</body>
</html>
</body>
</html>
2.relative和absolute
合作使用，表示相对于某区域放置在某处
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height:300px;
width:500px;
border:1px solid red;
margin:100px;
position:relative;
}
.c1 .c2{
height:59px;
width:59px;
background-color:#00FF7F;
position:absolute;
right:20px;
bottom:10px;
}
</style>
</head>
<body>
<div class="c1" style>
<div class="c2"></div>
</div>
</body>
</html>
案例：小米商城下载app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米</title>
<style>
body{
margin: 0;
}
.header{
background: #333;
}
.left{
float:left;
}
img{
height: 100%;
weight: 100%;
}
.container{
width:1226px;
margin: 0 auto; /*上下=0，左右为auto*/
}
.header .menu{
float: left;
height: 38px;
line-height: 38px;
}
.header .account{
float: right;
color: white;
height:38px;
line-height: 38px;
}
.header a{
color: #b0b0b0;
font-size: 12px;
display: inline-block;
line-height: 40px;
margin-right: 10px;
}
.header a:hover{
color:white;
}
.sub-header{
height:100px;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width:234px;
float: left;
}
.sub-header .logo a{
margin-top:22px;
display:inline-block;
}
.sub-header .logo a img{
height:56px;
width:56px;
}
.sub-header .menu-list{
float: left;
line-height:100px;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6788;
}
.sub-header .search{
float: right;
}
.slider .sd-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 a{
display: inline-block;
font-size:12px;
padding-top:18px;
text-decoration:none;
color:#fff;
opacity:0.7;
}
.news .channel .item a:hover{
opacity:1;
}
.news .channel .item img{
height:24px;
width:24px;
display: block;
margin: 0 auto 4px;
}
.back{
position:fixed;
width:60px;
height:60px;
background: blue;
right:10px;
bottom:50px;
}
.app{
position:relative;
}
.menu a{
text-decoration:none;
}
.app .download{
position:absolute;
height:100px;
width:100px;
display:none;
}
.app:hover .download{
display:block;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a>小米官网</a>
<a>小米商城</a>
<a>MIUI</a>
<a>loT</a>
<a>云服务</a>
<a>天星数科</a>
<a>有品</a>
<a>小爱开放平台</a>
<a>企业团购</a>
<a>资质证照</a>
<a>协议规则</a>
<a href="https://www.mi.com/" class="app">下载app
<div class="download" style="position:absolute;height:100px;width:100px;">
<img src="images/img_11.png" alt="">
</div>
</a>
<a>Select Location</a>
</div>
<div class="account">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a,行内标签，默认设置高度，边距无效。-》块级&行内+块级-->
<a href="https://www.mi.com/" >
<img src="images/logo-mi2.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div class="style:both"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="images/img.png" alt="">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_4.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_5.png" alt="">
<span>企业团购</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_6.png" alt="">
<span>F码通道</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_7.png" alt="">
<span>米粉卡</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_8.png" alt="">
<span>以旧换新</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/img_9.png" alt="">
<span>话费充值</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left" style="margin-right:15px">
<img src="images/img_1.png">
</div>
<div class="list-item left" style="margin-right:15px">
<img src="images/img_2.png">
</div>
<div class="list-item left" style="margin-right:14px">
<img src="images/img_3.png">
</div>
<div class="clear:both"></div>
</div>
</div>
<div style="height: 1000px;background-color:#fff"></div>
<div class="back"></div>
</body>
</html>
2.4 border（边框）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JwggnDgi-1685447655512)(image-20230530194320034.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height:300px;
width:500px;
border:3px solid red; /*实线*/
margin:100px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
border:3px dotted red; /*虚线*/
border-left:3px dotted red; /*只有左边*/
border-left:3px dotted transparent;/*透明色，一般用于hover*/
2.5 背景色
background-color: #5f5750
注意：以上不是所有的CSS样式
总结
至此，CSS部分的知识结束
- 大致了解了页面的样式和标签
- 模板
- 模板的基本使用逻辑
- 模板+CSS知识点
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
