名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪）
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）目录
- 二、CSS
- 1、CSS-初始入门
- ①快速了解
- ②CSS应用方式
- ③选择器
- ④样式
- 2、CSS-常见样式和案例
- ①浮动
- ②内边距
- ③外边距
- 3、CSS-样式和小米商城
- ①CSS案例
- ②小结
- 4、CSS-案例：小米商城新品部分
- ①案例：推荐区域
- ②案例实现
- 5、CSS-边框和背景色
- ①:hover（伪类）
- ②:after（伪元素）
- ③position属性
- ④relative和absolute定位
- ⑤border属性
- ⑥background-color属性
二、CSS
1、CSS-初始入门
HTML vs CSS
1️⃣ 超文本标记语言HTML，使用多种“标签”来描述网页的结构和内容。(网页扩展名为.html)
2️⃣ 层叠样式表CSS，从审美角度来描述网页的样式。(文件扩展名为.css)
CSS，专门用来”美化“标签，HTML如果是"身体"，CSS就是在身体外的各种装饰，可以美化HTML写出来的"身体"。
- 基础CSS，写简单页面 & 看懂 & 修改；
- 模块，调整和修改。
①快速了解
CSS是一种用于描述HTML或XML（包括各种XML语言，如SVG或XHTML）文档的样式的语言。CSS描述了这些文档在屏幕、纸张、语音阅读器等媒介上的呈现方式。
1.基础概念
- 选择器（Selectors）：用于选择你想要样式化的HTML元素。
- 属性（Properties）：定义了如何样式化元素。
- 值（Values）：属性的具体设置。
- 声明（Declarations）：由属性和值组成，如
color: red;。 - 声明块（Declaration Blocks）：用大括号
{}包围的一系列声明。 - 规则集（Rule Sets）：由选择器和声明块组成。
2.基本语法
selector { property: value; }
示例
p { color: red; font-size: 14px; }
这个示例会将所有 <p>（段落）元素的文字颜色设置为红色，并且字体大小为14像素。
3.常用属性
color: 文本颜色background-color: 背景色font-size: 字体大小border: 边框margin: 外边距padding: 内边距width和height: 宽度和高度
<img src="..." style="height:100px"/> <div style="color:red;">中国联通</div>
4.响应式设计
- 媒体查询（Media Queries）：允许你根据不同的屏幕尺寸或设备特性应用不同的样式。
示例
@media screen and (max-width: 600px) { body { background-color: lightblue; } }
②CSS应用方式
1.在标签上应用
直接在标签里进行添加。
<img src="..." style="height:100px"/> <div style="color:red;">中国联通</div>
2.在head标签中写style标签( * )
在头部head标签中添加style标签，在style标签中来进行添加CSS样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color:red; } </style> </head> <body> <h1 class='c1'>用户登录</h1> <h1 class='c1'>用户登录</h1> <h1 class='c1'>用户登录</h1> <h1 class='c1'>用户登录</h1> <form method="post" action="/login"> 用户名：<input type="text" name="username"> 密码：<input type="text" name="password"> <input type="submit" value="提交"> </form> </body> </html>
3.写到文件中( * )
写到文件里，直接使用文件里的样式。
.c1{ height:100px; } .c2{ color:red; }
<!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> <h1 class='c1'>用户登录</h1> <h1 class='c1'>用户登录</h1> <h1 class='c1'>用户登录</h1> </body> </html>
案例：flask中的应用（登录 注册）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/commons.css"> </head> <body> <h1 class="xx">用户注册</h1> <form action="/register" method="post"> <div> 用户名: <input type="text" name="user"> </div> <div> 密码: <input type="password" name="pwd"> </div> <div> <input type="submit" value="注册"> </div> </form> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/commons.css"> </head> <body> <h1 class="xx">用户注册</h1> <form action="/register" method="post"> <div> 用户名: <input type="text" name="user"> </div> <div> 密码: <input type="password" name="pwd"> </div> <div> <input type="submit" value="注册"> </div> </form> </body> </html>
.xx{ color: green; }
问题：用Flask框架开发有些不便之处：
- 每次都需要重启
- 规定有些文件必须要放在特定的文件夹
- 新创建一个页面
- 函数
- HTML文件
有没有一种方式，可以快速编写前端代码及查看响应效果，最后将页面集成到Flask中？
Pycharm为我们提供了一种非常便捷开发前端页面的工具，鼠标滑到界面右侧即可显示，打开此处页面可以实时地看到代码更新所带来的页面变化。
③选择器
在CSS中，选择器用于定位一个或多个元素，以便应用样式。
1.ID选择器
通过HTML元素的id属性选择特定元素。ID是唯一的，在一个HTML页面中，每个ID只能出现一次。ID选择器在CSS中以#字符开始，后跟ID的名称。例如，#navbar选择具有id="navbar"的元素。
#c1{ } <div id='c1'> </div>
2.类选择器（使用较多）
通过HTML元素的class属性选择一个或多个元素。同一类可以应用于页面上的多个元素，一个元素也可以有多个类。类选择器在CSS中以.字符开始，后跟类的名称。例如，.button选择所有具有class="button"的元素。
.c1{ } <div class='c1'> </div>
3.标签选择器（使用较多）
又称为元素选择器，通过元素名称选择所有特定类型的元素。例如，div选择页面上的所有div元素。
div{ } <div> xxx </div>
4.属性选择器
根据元素的属性及属性值来选择元素。它们用方括号[]表示，内部可以指定属性名，也可以指定属性名和值。例如，[type=“text”]选择所有type属性值为text的元素。
input[type='text']{ border:1px solid red; } .v1[xx="456"]{ color: gold; }
<input type="text"> <input type="password"> <div class="v1" xx="123"> s </div> <div class="v1" xx="456"> f </div> <div class="v1" xx="999"> a </div>
5.后代选择器（使用较多）
用于选择一个元素的后代元素，即位于指定元素内部的元素，不论是直接还是间接后代。后代选择器通过空格分隔父元素和子元素的选择器来表示。例如，div p选择所有位于div元素内部的p元素。
.yy li{ color: pink; } .yy > a{ color: dodgerblue; }
<div class="yy"> <a>百度</a> <div> <a>谷歌</a> </div> <ul> <li>美国</li> <li>日本</li> <li>韩国</li> </ul> </div>
关于选择器：
日常使用多少： 多：类选择器、标签选择器、后代选择器 少：属性选择器、ID选择器
关于多个样式和覆盖的问题：
<!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: 28px; color: green; } </style> </head> <body> <div class="c1 c2">中国联通</div> </body> </html>
④样式
1.高度和宽度
.c1{ /*height高度 width宽度*/ height:300px; width:500px; }
注意：
- 宽度，支持百分比。
- 行内标签：默认无效
- 块级标签：默认有效（霸道，右侧区域空白，也不给你占用）
2.块级和行内标签
- 块级
- 行内
- CSS样式：标签->
display:inline-block
示例1：行内+块级特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ display: inline-block; height: 100px; width: 300px; border: 1px solid red; } </style> </head> <body> <span class="c1">中国</span> <span class="c1">联通</span> <span class="c1">联通</span> <span class="c1">联通</span> </body> </html>
示例2：块级和行内标签的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div style="display: inline;">中国</div> <span style="display: block;">联通</span> </body> </html>
注意：块级+跨级和行内
3.字体设置
- 颜色 color
- 大小 font-size
- 加粗 font-weight
- 字体格式 font-family
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: #66CDAA; font-size: 50px; font-weight: 500; font-family:"Microsoft Yahei"; } </style> </head> <body> <div class="c1">中国联通</div> <div>中国移动</div> </body> </html>
4.文字对齐方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 59px; width: 300px; border: 1px solid red; text-align: center; /*水平方向居中*/ line-height: 59px; /*垂直方向居中*/ } </style> </head> <body> <div class="c1">张三</div> </body> </html>
2、CSS-常见样式和案例
①浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <span>左边</span> <span style="float: right">右边</span> </div> </body> </html>
div默认块级标签（比较霸道），如果浮动起来，就不一样了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ float: left; width: 280px; height: 170px; border: 1px solid red; } </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> </body> </html>
可是如果你让标签浮动起来之后，就会脱离文档流，那该怎么解决呢？
可以通过添加这个语句<div style="clear: both"></div>解决。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ float: left; width: 280px; 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> <div>你好</div> </body> </html>
为什么添加<div style="clear: both"></div>能够解决呢？
在HTML中，<div style="clear: both"></div> 用于控制布局，特别是在使用浮动（float）元素时。浮动元素会脱离文档流的正常排列，可能导致布局混乱。clear 属性用来清除元素的左侧、右侧或两侧的浮动，确保不会有浮动元素影响到它的布局。
具体来说，clear: both; 表示清除前面元素的左右浮动，使得接下来的内容显示在浮动元素的下方，而不是旁边或者覆盖浮动元素。这个技术常用于确保父容器能够包含其内部浮动的子元素，防止布局错乱。
例如，如果你有几个浮动的 <div> 元素用于创建并排的布局，之后你希望接下来的内容不受这些浮动元素的影响，显示在它们下面，那么可以在浮动元素之后使用 <div style="clear: both"></div> 来实现这个布局需求。这样，它会创建一个不可见的分界线，确保浮动不会影响到后续的内容布局。
②内边距
内部距离，自己内部的距离
<!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; padding-bottom: 20px; } </style> </head> <body> <div class="outer"> <div style="background-color: gold">听妈妈的话</div> <div> 小朋友你是否有很多问号？ </div> </div> </body> </html>
③外边距
外部距离，自己与别人之间的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;background-color: dodgerblue"></div> <div style="background-color: red;height: 100px; margin-top: 20px"></div> </body> </html>
综合案例：小米商城
案例1 小米商城顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .header{ background: #333; } .container{ width: 1226px; margin: 0 auto; } .header .menu{ float: left; color: white; height: 38px; line-height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a>小米官网</a> <a>小米商城</a> <a>小米澎湃OS</a> <a>云服务</a> <a>小爱开放平台</a> <a>下载app</a> </div> <div class="account"> <a>登录</a> <a>注册</a> <a>消息通知</a> </div> <div style="clear:both"></div> </div> </div> </body> </html>
小结
- body标签，默认有一个边距，会造成页面四周有白色间隙，如何去除？
body{ margin:0; }
-
内容居中
-
文本居中
<div style="width: 200px; background-color:pink; text-align: center">张三</div> -
区域居中，自己要有宽度 +
margin-left:auto; margin-right:auto;
.container{ width: 980px; margin: 0 auto; } <div class="container"> asddqsadas </div> -
-
父亲没有高度或没有宽度，被孩子支撑起来。
-
如果存在浮动，要加上
<div style="clear:both"></div> -
如果想用别人实现的样式
-
关于布局，不知道如何下手的话，学会分析页面的布局
3、CSS-样式和小米商城
- 案例应用（利用之前所学知识）
- CSS知识点
- 模版 + CSS + 构建页面
①CSS案例
1.内容回顾
-
HTML标签
固定格式，记住标签长什么样，例如： h / div / span / a / img / ul / li / table / input / form -
CSS样式
引用CSS：标签、头部、文件
.xx{ ... } <div class='xx xx'></div> 高度height / 宽度width /块级 or 行内 or 块级行内 / 浮动float / 字体font / 文字对齐方式text-align / 内边距 / 外边距 关于边距： - body - 区域居中 -
页面布局
根据你看到的页面把他们划分成很多小的区域，再去填充样式。
2.案例：二级菜单
a.分析布局
b.搭建骨架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style> .sub-header{ height: 100px; background-color: #b0b0b0; } .container{ width: 1128px; margin: 0 auto; } .sub-header .ht{ height: 100px; } .sub-header .logo{ width: 234px; float: left; } .sub-header .menu-list{ float: left; } .sub-header .search{ float: right; } </style> </head> <body> <div class="sub-header"> <div class="container"> <div class="ht logo">1</div> <div class="ht menu-list">2</div> <div class="ht search">3</div> <div style="clear: both"></div> </div> </div> <div> <div class="logo"></div> </div> </body> </html>
c.完善logo区域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style> .sub-header{ height: 100px; background-color: #b0b0b0; } .container{ width: 1128px; margin: 0 auto; } .sub-header .ht{ height: 100px; } .sub-header .logo{ width: 234px; float: left; border: 1px solid red; line-height: 100px; } .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; } .sub-header .search{ float: right; } </style> </head> <body> <div class="sub-header"> <div class="container"> <div class="ht logo"> <!--a,行内标签，默认设置高度、边距无效 解决：转换成块级 OR 行内&块级--> <a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"> <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""> </a> </div> <div class="ht menu-list">2</div> <div class="ht search">3</div> <div style="clear: both"></div> </div> </div> <div> <div class="logo"></div> </div> </body> </html>
d.布置菜单区域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style> .sub-header{ height: 100px; } .container{ width: 1128px; margin: 0 auto; } .sub-header .ht{ height: 100px; } .sub-header .logo{ width: 234px; float: left; line-height: 100px; } .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: #ff6700; } .sub-header .search{ float: right; } </style> </head> <body> <div class="sub-header"> <div class="container"> <div class="ht logo"> <!--a,行内标签，默认设置高度、边距无效 解决：转换成块级 OR 行内&块级--> <a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"> <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""> </a> </div> <div class="ht menu-list"> <a href="https://www.mi.com/shop">Xiaomi手机</a> <a href="https://www.mi.com/shop">Redmi手机</a> <a href="https://www.mi.com/shop">电视</a> <a href="https://www.mi.com/shop">电笔记本</a> <a href="https://www.mi.com/shop">平板</a> <a href="https://www.mi.com/shop">家电</a> <a href="https://www.mi.com/shop">路由器</a> </div> <div class="ht search">3</div> <div style="clear: both"></div> </div> </div> <div> <div class="logo"></div> </div> </body> </html>
3.综合案例：顶部菜单+二级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米顶部</title> <style> body{ margin: 0; } .header{ background: #333; } .container{ width: 1226px; margin: 0 auto; } .header .menu{ float: left; color: white; height: 38px; line-height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; text-decoration: none; } .header a:hover{ color: white; } .sub-header{ height: 100px; } .sub-header .ht{ height: 100px; } .sub-header .logo{ width: 234px; float: left; line-height: 100px; } .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: #ff6700; } .sub-header .search{ float: right; padding-top: 35px; /* Adjust padding to align search box as needed */ } .search input[type="text"]{ right: 51px; z-index: 1; width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; vertical-align: middle; } .search input[type="submit"]{ right: 0; z-index: 2; width: 52px; height: 50px; font-size: 24px; line-height: 24px; background: #fff; color: #616161; } .search-btn { background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */ border: 1px solid; cursor: pointer; /* 鼠标悬停时显示手形图标 */ width: 52px; height: 50px; background-size: contain; /* 使背景图像适应按钮大小 */ vertical-align: middle; } /*可能需要的额外样式调整*/ .search-btn:focus { outline: none; /* 移除聚焦时的轮廓线 */ } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com/shop">小米官网</a> <a href="https://www.mi.com/shop">小米商城</a> <a href="https://www.mi.com/shop">小米澎湃OS</a> <a href="https://www.mi.com/shop">云服务</a> <a href="https://www.mi.com/shop">小爱开放平台</a> <a href="https://www.mi.com/shop">下载app</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 href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"> <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""> </a> </div> <div class="ht menu-list"> <a href="https://www.mi.com/shop">Xiaomi手机</a> <a href="https://www.mi.com/shop">Redmi手机</a> <a href="https://www.mi.com/shop">电视</a> <a href="https://www.mi.com/shop">电笔记本</a> <a href="https://www.mi.com/shop">平板</a> <a href="https://www.mi.com/shop">家电</a> <a href="https://www.mi.com/shop">路由器</a> </div> <div class="ht search"> <form action="/search" method="get"> <input type="text" name="q" placeholder="搜索产品" required> <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"> </form> </div> <div style="clear: both"></div> </div> </div> </body> </html>
②小结
-
a标签是行内标签，行内标签的高度、内外边距，默认无效。
-
垂直方向居中
- 文本
line-height - 图片 边距
- 文本
-
a标签默认有下划线
-
鼠标放上去之后hover
.c1:hover{ ... } a:hover{ }
4、CSS-案例：小米商城新品部分
①案例：推荐区域
1.划分区域
2.搭建骨架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米顶部</title> <style> body{ margin: 0; } .header{ background: #333; } .container{ width: 1226px; margin: 0 auto; } .header .menu{ float: left; color: white; height: 38px; line-height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; text-decoration: none; } .header a:hover{ color: white; } .sub-header{ height: 100px; } .sub-header .ht{ height: 100px; } .sub-header .logo{ width: 234px; float: left; line-height: 100px; } .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: #ff6700; } .sub-header .search{ float: right; padding-top: 35px; /* Adjust padding to align search box as needed */ } .search input[type="text"]{ right: 51px; z-index: 1; width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; vertical-align: middle; } .search input[type="submit"]{ right: 0; z-index: 2; width: 52px; height: 50px; font-size: 24px; line-height: 24px; background: #fff; color: #616161; } .search-btn { background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */ border: 1px solid; cursor: pointer; /* 鼠标悬停时显示手形图标 */ width: 52px; height: 50px; background-size: contain; /* 使背景图像适应按钮大小 */ vertical-align: middle; } /*可能需要的额外样式调整*/ .search-btn:focus { outline: none; /* 移除聚焦时的轮廓线 */ } .slider img{ width: 1226px; height: 460px; text-align: right; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com/shop">小米官网</a> <a href="https://www.mi.com/shop">小米商城</a> <a href="https://www.mi.com/shop">小米澎湃OS</a> <a href="https://www.mi.com/shop">云服务</a> <a href="https://www.mi.com/shop">小爱开放平台</a> <a href="https://www.mi.com/shop">下载app</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 href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"> <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""> </a> </div> <div class="ht menu-list"> <a href="https://www.mi.com/shop">Xiaomi手机</a> <a href="https://www.mi.com/shop">Redmi手机</a> <a href="https://www.mi.com/shop">电视</a> <a href="https://www.mi.com/shop">电笔记本</a> <a href="https://www.mi.com/shop">平板</a> <a href="https://www.mi.com/shop">家电</a> <a href="https://www.mi.com/shop">路由器</a> </div> <div class="ht search"> <form action="/search" method="get"> <input type="text" name="q" placeholder="搜索产品" required> <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"> </form> </div> <div style="clear: both"></div> </div> </div> <div class="slider"> <div class="container"> <div class="sd-img"> <img src="images/b1.jpg" alt=""> </div> </div> </div> <div class="news"> <div class="container"> <div class="channel"></div> <div class="list-item"></div> <div class="list-item"></div> <div class="list-item"></div> </div> </div> </body> </html>
②案例实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米顶部</title> <style> body{ margin: 0; } .header{ background: #333; } .container{ width: 1226px; margin: 0 auto; } .left{ float: left; } .header .menu{ float: left; color: white; height: 38px; line-height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; text-decoration: none; } .header a:hover{ color: white; } .sub-header{ height: 100px; } .sub-header .ht{ height: 100px; } .sub-header .logo{ width: 234px; float: left; line-height: 100px; } .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: #ff6700; } .sub-header .search{ float: right; padding-top: 35px; /* Adjust padding to align search box as needed */ } .search input[type="text"]{ right: 51px; z-index: 1; width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; vertical-align: middle; } .search input[type="submit"]{ right: 0; z-index: 2; width: 52px; height: 50px; font-size: 24px; line-height: 24px; background: #fff; color: #616161; } .search-btn { background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */ border: 1px solid; cursor: pointer; /* 鼠标悬停时显示手形图标 */ width: 52px; height: 50px; background-size: contain; /* 使背景图像适应按钮大小 */ vertical-align: middle; } /*可能需要的额外样式调整*/ .search-btn:focus { outline: none; /* 移除聚焦时的轮廓线 */ } .slider img{ width: 1226px; height: 460px; text-align: right; } .news{ margin-top: 14px; } .news .channel{ width: 228px; height: 164px; background-color:#5f5750; padding: 3px; } .news .channel .item img{ display: block; width: 24px; height: 24px; margin: 0 auto 4px; } .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; color: #ffffff; text-decoration: none; opacity: 0.7; } .news .channel .item a:hover{ opacity: 1; } .news .list-item img{ width: 316px; height: 170px; display: block; margin: 0 auto 4px; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com/shop">小米官网</a> <a href="https://www.mi.com/shop">小米商城</a> <a href="https://www.mi.com/shop">小米澎湃OS</a> <a href="https://www.mi.com/shop">云服务</a> <a href="https://www.mi.com/shop">小爱开放平台</a> <a href="https://www.mi.com/shop">下载app</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 href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"> <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""> </a> </div> <div class="ht menu-list"> <a href="https://www.mi.com/shop">Xiaomi手机</a> <a href="https://www.mi.com/shop">Redmi手机</a> <a href="https://www.mi.com/shop">电视</a> <a href="https://www.mi.com/shop">电笔记本</a> <a href="https://www.mi.com/shop">平板</a> <a href="https://www.mi.com/shop">家电</a> <a href="https://www.mi.com/shop">路由器</a> </div> <div class="ht search"> <form action="/search" method="get"> <input type="text" name="q" placeholder="搜索产品" required> <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"> </form> </div> <div style="clear: both"></div> </div> </div> <div class="slider"> <div class="container"> <div class="sd-img"> <img src="images/b1.jpg" alt=""> </div> </div> </div> <div class="news"> <div class="container"> <div class="channel left"> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c1.png" alt=""> <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c2.png" alt=""> <span>企业团购</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c3.png" alt=""> <span>F码通道</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c4.png" alt=""> <span>米粉卡</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c5.png" alt=""> <span>以旧换新</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c6.png" alt=""> <span>话费充值</span> </a> </div> <div class="clear:both"></div> </div> <div class="list-item left" style="margin-left: 14px"> <img src="/images/w1.png" alt=""> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/w2.jpg" alt=""> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/w3.png" alt=""> </div> </div> </div> </body> </html>
-
设置透明度
通过opacity来设置opacity:0.5 /* 透明度为0.5 透明度范围：0~1 */
5、CSS-边框和背景色
①:hover（伪类）
用于定义鼠标悬停在元素上时的样式。例如，a:hover { color: red; }会使链接在鼠标悬停时变为红色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: red; font-size: 18px; } .c1:hover{ color: green; font-size: 50px; } .c2{ height: 300px; width: 500px; border: 3px solid red; } .c2:hover{ border: 3px solid green; } .download{ display: none; } .app:hover .download{ display: block; } .app:hover .title{ color: yellowgreen; } </style> </head> <body> <div class="c1">联通</div> <div class="c2">广西</div> <div class="app"> <div class="title">下载App</div> <div class="download"> <img src="images/QRcode.png" alt=""> </div> </div> </body> </html>
②:after（伪元素）
用于在元素的内容之后插入额外的内容。它通常与content属性一起使用。例如，p:after { content: “Read more”; }会在所有p元素的内容后添加"Read more"文本。
<!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>
③position属性
用于设置元素的定位方式。它的值可以是static、relative、absolute、fixed或sticky，分别对应不同的定位行为。常用的三个方式如下：
- fixed
- relative
- absolute
a.fixed
固定在窗口的某个位置
案例1：返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米顶部</title> <style> body{ margin: 0; } .header{ background: #333; } .container{ width: 1226px; margin: 0 auto; } .left{ float: left; } .header .menu{ float: left; color: white; height: 38px; line-height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; text-decoration: none; } .header a:hover{ color: white; } .sub-header{ height: 100px; } .sub-header .ht{ height: 100px; } .sub-header .logo{ width: 234px; float: left; line-height: 100px; } .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: #ff6700; } .sub-header .search{ float: right; padding-top: 35px; /* Adjust padding to align search box as needed */ } .search input[type="text"]{ right: 51px; z-index: 1; width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; vertical-align: middle; } .search input[type="submit"]{ right: 0; z-index: 2; width: 52px; height: 50px; font-size: 24px; line-height: 24px; background: #fff; color: #616161; } .search-btn { background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */ border: 1px solid; cursor: pointer; /* 鼠标悬停时显示手形图标 */ width: 52px; height: 50px; background-size: contain; /* 使背景图像适应按钮大小 */ vertical-align: middle; } /*可能需要的额外样式调整*/ .search-btn:focus { outline: none; /* 移除聚焦时的轮廓线 */ } .slider img{ width: 1226px; height: 460px; text-align: right; } .news{ margin-top: 14px; } .news .channel{ width: 228px; height: 164px; background-color:#5f5750; padding: 3px; } .news .channel .item img{ display: block; width: 24px; height: 24px; margin: 0 auto 4px; } .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; color: #ffffff; text-decoration: none; opacity: 0.7; } .news .channel .item a:hover{ opacity: 1; } .news .list-item img{ width: 316px; height: 170px; display: block; margin: 0 auto 4px; } .back{ position: fixed; width: 60px; height: 60px; border: 1px solid red; right: 10px; bottom: 50px; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com/shop">小米官网</a> <a href="https://www.mi.com/shop">小米商城</a> <a href="https://www.mi.com/shop">小米澎湃OS</a> <a href="https://www.mi.com/shop">云服务</a> <a href="https://www.mi.com/shop">小爱开放平台</a> <a href="https://www.mi.com/shop">下载app</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 href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"> <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""> </a> </div> <div class="ht menu-list"> <a href="https://www.mi.com/shop">Xiaomi手机</a> <a href="https://www.mi.com/shop">Redmi手机</a> <a href="https://www.mi.com/shop">电视</a> <a href="https://www.mi.com/shop">电笔记本</a> <a href="https://www.mi.com/shop">平板</a> <a href="https://www.mi.com/shop">家电</a> <a href="https://www.mi.com/shop">路由器</a> </div> <div class="ht search"> <form action="/search" method="get"> <input type="text" name="q" placeholder="搜索产品" required> <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"> </form> </div> <div style="clear: both"></div> </div> </div> <div class="slider"> <div class="container"> <div class="sd-img"> <img src="images/b1.jpg" alt=""> </div> </div> </div> <div class="news"> <div class="container"> <div class="channel left"> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c1.png" alt=""> <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c2.png" alt=""> <span>企业团购</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c3.png" alt=""> <span>F码通道</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c4.png" alt=""> <span>米粉卡</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c5.png" alt=""> <span>以旧换新</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c6.png" alt=""> <span>话费充值</span> </a> </div> <div class="clear:both"></div> </div> <div class="list-item left" style="margin-left: 14px"> <img src="/images/w1.png" alt=""> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/w2.jpg" alt=""> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/w3.png" alt=""> </div> </div> </div> <div style="height: 1000px;"></div> <div class="back"></div> </body> </html>
案例2：对话框
<!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: 50%;*/ /*margin-left: -250px;*/ left: 0; right: 0; margin: 0 auto; top: 200px; z-index: 1000; } .mask{ background-color: black; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; opacity: 0.7; z-index: 999; } </style> </head> <body> <div class="mask"></div> <div style="height: 1000px;">qwewqeqw</div> <div class="dialog"></div> </body> </html>
④relative和absolute定位
-
relative定位：是position属性的一个值，表示元素将相对于其正常位置进行定位。也就是说，即使你对元素应用了定位，它仍然占据原来的空间，但可以通过top、right、bottom、left属性移动位置。
-
absolute定位：也是position属性的一个值，表示元素相对于最近的已定位的祖先元素（不是static定位的元素）进行定位。如果没有这样的元素，则相对于文档体()元素定位。绝对定位的元素不占据文档流中的空间。
<!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>
案例1：小米商城下载app
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米顶部</title> <style> body{ margin: 0; } .header{ background: #333; } .container{ width: 1226px; margin: 0 auto; } .left{ float: left; } .header .menu{ float: left; color: white; height: 38px; line-height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; text-decoration: none; } .header a:hover{ color: white; } .sub-header{ height: 100px; } .sub-header .ht{ height: 100px; } .sub-header .logo{ width: 234px; float: left; line-height: 100px; } .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: #ff6700; } .sub-header .search{ float: right; padding-top: 35px; /* Adjust padding to align search box as needed */ } .search input[type="text"]{ right: 51px; z-index: 1; width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; vertical-align: middle; } .search input[type="submit"]{ right: 0; z-index: 2; width: 52px; height: 50px; font-size: 24px; line-height: 24px; background: #fff; color: #616161; } .search-btn { background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */ border: 1px solid; cursor: pointer; /* 鼠标悬停时显示手形图标 */ width: 52px; height: 50px; background-size: contain; /* 使背景图像适应按钮大小 */ vertical-align: middle; } /*可能需要的额外样式调整*/ .search-btn:focus { outline: none; /* 移除聚焦时的轮廓线 */ } .slider img{ width: 1226px; height: 460px; text-align: right; } .news{ margin-top: 14px; } .news .channel{ width: 228px; height: 164px; background-color:#5f5750; padding: 3px; } .news .channel .item img{ display: block; width: 24px; height: 24px; margin: 0 auto 4px; } .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; color: #ffffff; text-decoration: none; opacity: 0.7; } .news .channel .item a:hover{ opacity: 1; } .news .list-item img{ width: 316px; height: 170px; display: block; margin: 0 auto 4px; } .app .download{ position: absolute; height: 100px; width: 100px; display: none; } .app .download img{ height: 100px; width: 100px; } .app:hover .download{ display: block; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com/shop">小米官网</a> <a href="https://www.mi.com/shop">小米商城</a> <a href="https://www.mi.com/shop">小米澎湃OS</a> <a href="https://www.mi.com/shop">云服务</a> <a href="https://www.mi.com/shop">小爱开放平台</a> <a href="https://www.mi.com/shop" class="app">下载app <div class="download"> <img src="images/QRcode.png" alt=""> </div> </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 href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"> <img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""> </a> </div> <div class="ht menu-list"> <a href="https://www.mi.com/shop">Xiaomi手机</a> <a href="https://www.mi.com/shop">Redmi手机</a> <a href="https://www.mi.com/shop">电视</a> <a href="https://www.mi.com/shop">电笔记本</a> <a href="https://www.mi.com/shop">平板</a> <a href="https://www.mi.com/shop">家电</a> <a href="https://www.mi.com/shop">路由器</a> </div> <div class="ht search"> <form action="/search" method="get"> <input type="text" name="q" placeholder="搜索产品" required> <input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"> </form> </div> <div style="clear: both"></div> </div> </div> <div class="slider"> <div class="container"> <div class="sd-img"> <img src="images/b1.jpg" alt=""> </div> </div> </div> <div class="news"> <div class="container"> <div class="channel left"> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c1.png" alt=""> <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c2.png" alt=""> <span>企业团购</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c3.png" alt=""> <span>F码通道</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c4.png" alt=""> <span>米粉卡</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c5.png" alt=""> <span>以旧换新</span> </a> </div> <div class="item"> <a href="https://www.mi.com/shop"> <img src="images/c6.png" alt=""> <span>话费充值</span> </a> </div> <div class="clear:both"></div> </div> <div class="list-item left" style="margin-left: 14px"> <img src="/images/w1.png" alt=""> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/w2.jpg" alt=""> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/w3.png" alt=""> </div> </div> </div> </body> </html>
⑤border属性
用于设置元素边框的样式、宽度和颜色。例如，border: 1px solid black;会给元素添加一条1像素宽、实线、黑色的边框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 50px; width: 500px; /*1、边框粗细3px 2、实线 solid/虚线 dotted 3、边框颜色red*/ /*border: 3px solid red;*/ /*border-left: 3px solid transparent;*/ margin: 100px; background-color: #5f5750; border-left: 2px solid transparent; /*position: relative;*/ } .c1:hover{ border-left: 2px solid red; } </style> </head> <body> <div class="c1">菜单</div> </body> </html>
⑥background-color属性
用于设置元素的背景颜色。例如，background-color: blue;会将元素的背景颜色设置为蓝色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 50px; width: 500px; margin: 100px; background-color: #66CDAA; } </style> </head> <body> <div class="c1">菜单</div> </body> </html>
注意：以上不是所有的CSS样式，上述仅为开发中常用的核心知识点，通过此篇内容可以帮助你大致了解页面的样式和标签：
后续会了解一些模版，内容包括：
- 模版的基本使用逻辑
- 模版 + 自己CSS知识点（开发页面）
很感谢你能看到这里，如有相关疑问，还请下方评论留言。
笔记记录来源：B站 python的web开发全家桶（django+前端+数据库）
Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）
如果对大家有帮助的话，希望大家能多多点赞+关注！这样我的动力会更足！
