目录
进度来源：最新Python的web开发全家桶（django+前端+数据库）
网址：最新Python的web开发全家桶（django+前端+数据库）_哔哩哔哩_bilibili
1. 快速了解，CSS应用方式
1.1 在标签上
<!--style即样式-->
<img src="..." style="height:100px"/>
<div style="color:red">...</div>1.2 在head上
<!--style写在head中，命名为c1，可以复用-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red;
}
</style>
</head>
<body>
<h1 class="c1">用户登录</h1>
</body>
</html>1.3 在文件里
# 文件common.css，文件类型为stylesheet，必须放在static目录下
.c1{
height:100px;
}
.c2{
color:red;
}<!--style写在common.css中，c1和c2，可以复用-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<h1 class="c1">用户登录</h1>
<span class="c2">用户注册</span>
</body>
</html>2. Flask框架的不方便
- 每次查看更新代码后的效果都需要重启
- 规定某些文件必须放到特定的文件夹下
- 新创建一个页面时，需要定义一个新函数和html文件
3. CSS选择器
- 类选择器：.c1和class搭配，可重复
- ID选择器：#c2和id搭配，不可重复
- 标签选择器：对于所有的特定标签施加的样式，可换成其他的标签类型
- 属性选择器：在标签中添加特定属性，在head中style中使用[属性=属性值]进行指定
- 后代选择器：某个类下的特定标签的才改变样式，仅空格表示所有后代，>表示仅儿子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
}
#c2{
color: gold;
}
li{
color: pink;
}
input[type="text"]{
border: 1px solid red;
}
.v1[xx="123"]{
color: gold;
}
.yy a{
color: green;
}
.yy > a{
color: gold;
}
</style>
</head>
<body>
<!--类选择器-->
<div class="c1">你的名字</div>
<!--ID选择器-->
<div id="c2">我的名字</div>
<!--标签选择器-->
<ul>
<li>北京</li>
<li>上海</li>
</ul>
<!--属性选择器-->
<input type="text">
<input type="password">
<div class="v1" xx="123">鸡你太美</div>
<div class="v1" xx="456">只因你太美</div>
<!--后代选择器-->
<!--仅空格表示对yy所有后代中的a施加样式-->
<!--加上>表示对yy儿子中的a施加样式-->
<div class="yy">
<a>泰安</a>
<div>
<a>泰安</a>
</div>
</div>
</body>
</html>
覆盖问题：如果使用多个样式，比如class=“c1 c2”，不重复的均施加，重复的按照最后定义的施加。如果想要之前定义的不被覆盖，加!important
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red !important;
border: 1px solid red;
}
.c2{
font-size: 20px
color: gold;
}
</style>
</head>
<body>
<div class="c1 c2">你的名字</div>
</body>
</html>
4. 样式
4.1 高度和宽度
# 宽度支持百分比，高宽设置对行内标签失效，对块级标签即使占不满也不给其他用
.c1{
height: 100px;
weight: 50px;
}
.c2{
height: 100px;
weight: 40%;
}4.2 块级行内标签
# 块级太霸道，行内太软弱，块级行内折中
.c1{
display: inline-block;
height: 100px;
weight: 50px;
border: 1px solid red;
}4.3 字体和颜色
.c1{
color: green;
color: #00FF7F;
font-size: 20px;
font-weight: 200;
font-family: Microsoft Yahei;
}4.4 文字对齐方式
.c1{
height: 50px;
weight: 20px;
border: 1px solid red;
text-align: center; # 水平居中
line-height: 50px; # 垂直居中，仅限一行字
}4.5 浮动
<!--如果div设置了浮动，则不会再占一整块，而是有多大占多大-->
<div style="float: right">右边</div>
注意，如果设置了浮动，则会脱离文档流（飘起来），会产生覆盖效果，即如果父标签设置了背景颜色，则这几个子标签没办法把父标签撑起来，导致父标签的长宽都是0，不显示背景颜色，此时可以使用style=“clear: both”再将其拽回来，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
float: left;
width: 200px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="background-color: dodgerblue">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>不加<div style="clear: both;"></div>时：
加<div style="clear: both;"></div>时 ：
4.6 边距（内边距和外边距）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold">听妈妈的话</div>
<div style="background-color: red; height:100px; margin-top: 20px">别让他受伤</div>
</div>
</body>
</html>
4.7 区域居中
# 一定要有宽度，margin: 0 auto指的是上margin为0，左右margin相等，即左右居中
.container{
width: 1000px;
margin: 0 auto;
}5. 案例：小米商城
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城山寨版，侵删</title>
<style>
body{
margin: 0;
}
.header{
background-color: #333;
height: 40px;
font-size: 12px;
}
.container{
margin: 0 auto;
width: 1226px;
}
.header .header_menu_list{
float: left;
height: 40px;
line-height: 40px;
}
.header .login{
display: flex;
float: right;
height: 40px;
}
.header .each_item:hover{
color: white;
}
.header .each_item{
color: #b0b0b0;
text-decoration: none;
}
.header .header_skip{
margin: 0 0.3em;
color: #424242;
}
.header .shopping_cart{
display: flex;
color: #b0b0b0;
width: 100px;
background-color: #424242;
text-align: center;
}
.logo_search{
height: 100px;
}
.logo_search .container{
margin: 0 auto;
width: 1226px;
display: flex;
}
.logo_search .logo{
height: auto;
width: 234px;
padding-top: 22px;
}
.logo_search .menu{
height: 100px;
width: 700px;
line-height: 100px;
}
.logo_search .menu a{
padding: 0 5px;
display: inline-block;
font-size: 18px;
color: # 333;
}
.logo_search .menu a:hover{
color: #ff6700;
}
.logo_search .search{
height: auto;
width: 292px;
}
.logo_search .logo_menu{
text-decoration: none;
color: #333;
}
.news .channel{
width: 228px;
height: 164px;
margin-right: 14px;
padding: 3px;
background-color: #5f5750;
}
.channel .channel_item{
width: 76px;
height: 82px;
float: left;
text-align: center;
}
.news .channel a{
display: block;
font-size: 12px;
padding-top: 18px;
text-decoration: none;
color: #fff;
opacity: .7;
}
.news .channel .channel_item img{
width: 24px;
height: 24px;
display: block;
margin: 0 auto 4px;
}
.news .channel a:hover {
opacity: 1;
}
.news .list_item{
width: 316px;
height: 170px;
}
.news img{
width: 100%;
height: 100%;
}
.app{
position: relative;
}
.download_app{
display: none;
position: absolute;
top: 27px;
left: -17px;
}
.app:hover .download_app{
display: block;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="header_menu_list">
<a href="https://www.mi.com/" class="each_item">小米官网</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">小米商城</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">MIUI</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">IoT</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">云服务</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">天星数科</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">有品</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">小爱开放平台</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">企业团购</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">资质证照</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">协议规则</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item app">
下载app
<div class="download_app">
<img style="height: 80px; width: 80px" src="//i1.mifile.cn/f/i/17/appdownload/download.png" alt="" >
</div>
</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">Select Location</a>
</div>
<div class="login">
<div style="display: flex; line-height: 40px;">
<a href="https://www.mi.com/" class="each_item">登录</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">注册</a>
<span class="header_skip">|</span>
<a href="https://www.mi.com/" class="each_item">消息通知</a>
<span class="header_skip"> </span>
<span class="header_skip"> </span>
</div>
<div class="shopping_cart">
<div style="margin: 0 auto; display: flex">
<div style="padding-top: 10px; padding-right: 7px">
<a href="https://www.mi.com/">
<img src="/images/logo-mi2.png" style="height: 20px; width: auto"/>
</a>
</div>
<a href="https://www.mi.com/" style="text-decoration: none;color: #b0b0b0; line-height: 40px;">购物车</a>
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="logo_search">
<div class="container">
<div class="logo">
<a href="https://www.mi.com/">
<img src="/images/logo-mi2.png" style="height: 56px; width: 56px" />
</a>
</div>
<div class="menu">
<a href="https://www.mi.com/" class="logo_menu">Xiaomi手机</a>
<a href="https://www.mi.com/" class="logo_menu">Redmi手机</a>
<a href="https://www.mi.com/" class="logo_menu">电视</a>
<a href="https://www.mi.com/" class="logo_menu">笔记本</a>
<a href="https://www.mi.com/" class="logo_menu">平板</a>
<a href="https://www.mi.com/" class="logo_menu">家电</a>
<a href="https://www.mi.com/" class="logo_menu">路由器</a>
<a href="https://www.mi.com/" class="logo_menu">服务中心</a>
<a href="https://www.mi.com/" class="logo_menu">社区</a>
</div>
<div class="search">
<div style="border: 1px solid #e0e0e0; height: 22px; width: 200px; margin: 39px auto"></div>
</div>
</div>
</div>
<div class="slider">
<div class="container">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34ee703098b12753b2130a3462ca33ac.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt="" style="width: 1226px; height: 460px"/>
</div>
</div>
<div class="news" style="margin-top: 14px">
<div class="container" style="display: flex">
<div class="channel">
<div class="channel_item">
<a href="https://www.mi.com/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png" alt=""/>
<span>保障服务</span>
</a>
</div>
<div class="channel_item">
<a href="https://www.mi.com/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png" alt=""/>
<span>企业团购</span>
</a>
</div>
<div class="channel_item">
<a href="https://www.mi.com/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png" alt=""/>
<span>F码通道</span>
</a>
</div>
<div class="channel_item">
<a href="https://www.mi.com/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png" alt=""/>
<span>米粉卡</span>
</a>
</div>
<div class="channel_item">
<a href="https://www.mi.com/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png" alt=""/>
<span>以旧换新</span>
</a>
</div>
<div class="channel_item">
<a href="https://www.mi.com/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png" alt=""/>
<span>话费充值</span>
</a>
</div>
<div class="clear: both"></div>
</div>
<div class="list_item" style="margin-right: 15px">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d0c515086acb3c3a3e976ad20901aac5.jpg?w=632&h=340" />
</div>
<div class="list_item" style="margin-right: 15px">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/254c711cc71facf156ac955b8719dffa.jpg?w=632&h=340" />
</div>
<div class="list_item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340" />
</div>
</div>
</div>
</body>
</html>效果对比图（上为原图）：
6. 总结
- a标签是行内标签，行内标签的高度、内外边距，默认无效，如果要设置高宽，需要先变为block或inline-block
- 垂直方向居中
- 文本：line-height
- 图片：只能用margin解决
- a标签默认有下划线，解决方法：text-decoration：none
- 鼠标放在某个文字上有颜色变化：hover（day3中对hover详细讲解）
- 如果不想使用float，可以尝试：display：flex，效果是设置flex的div下的子div按行排列，但仅一行
- 给文字加透明度：opacity，范围0~1
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
