商标设计网站猪八戒,网站建设与设计教程,上海一网通办,wordpress 菜单 间距名人说#xff1a;莫道桑榆晚#xff0c;为霞尚满天。——刘禹锡#xff08;刘梦得#xff0c;诗豪#xff09; 创作者#xff1a;Code_流苏(CSDN)#xff08;一个喜欢古诗词和编程的Coder#x1f60a;#xff09; 目录 二、CSS1、CSS-初始入门①快速了解②CSS应用方式… 名人说莫道桑榆晚为霞尚满天。——刘禹锡刘梦得诗豪 创作者Code_流苏(CSDN)一个喜欢古诗词和编程的Coder 目录 二、CSS1、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... styleheight:100px/div stylecolor:red;中国联通/div4.响应式设计
媒体查询Media Queries允许你根据不同的屏幕尺寸或设备特性应用不同的样式。
示例
media screen and (max-width: 600px) {body {background-color: lightblue;}
}②CSS应用方式
1.在标签上应用
直接在标签里进行添加。
img src... styleheight:100px/div stylecolor:red;中国联通/div2.在head标签中写style标签( * )
在头部head标签中添加style标签在style标签中来进行添加CSS样式。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{color:red;}/style
/head
bodyh1 classc1用户登录/h1h1 classc1用户登录/h1h1 classc1用户登录/h1h1 classc1用户登录/h1form methodpost action/login用户名input typetext nameusername密码input typetext namepasswordinput typesubmit value提交/form
/body
/html3.写到文件中( * )
写到文件里直接使用文件里的样式。
.c1{height:100px;
}.c2{color:red;
}!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefcommon.css /
/head
bodyh1 classc1用户登录/h1h1 classc1用户登录/h1h1 classc1用户登录/h1h1 classc1用户登录/h1
/body
/html案例flask中的应用登录 注册
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href/static/commons.css
/head
bodyh1 classxx用户注册/h1form action/register methodpostdiv用户名: input typetext nameuser/divdiv密码: input typepassword namepwd/divdivinput typesubmit value注册/div/form
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href/static/commons.css
/head
bodyh1 classxx用户注册/h1form action/register methodpostdiv用户名: input typetext nameuser/divdiv密码: input typepassword namepwd/divdivinput typesubmit value注册/div/form
/body
/html.xx{color: green;
}问题用Flask框架开发有些不便之处
每次都需要重启规定有些文件必须要放在特定的文件夹新创建一个页面 函数HTML文件
有没有一种方式可以快速编写前端代码及查看响应效果最后将页面集成到Flask中
Pycharm为我们提供了一种非常便捷开发前端页面的工具鼠标滑到界面右侧即可显示打开此处页面可以实时地看到代码更新所带来的页面变化。 ③选择器
在CSS中选择器用于定位一个或多个元素以便应用样式。
1.ID选择器
通过HTML元素的id属性选择特定元素。ID是唯一的在一个HTML页面中每个ID只能出现一次。ID选择器在CSS中以#字符开始后跟ID的名称。例如#navbar选择具有idnavbar的元素。
#c1{}div idc1/div2.类选择器使用较多
通过HTML元素的class属性选择一个或多个元素。同一类可以应用于页面上的多个元素一个元素也可以有多个类。类选择器在CSS中以.字符开始后跟类的名称。例如.button选择所有具有classbutton的元素。
.c1{}div classc1/div3.标签选择器使用较多
又称为元素选择器通过元素名称选择所有特定类型的元素。例如div选择页面上的所有div元素。
div{}divxxx
/div 4.属性选择器
根据元素的属性及属性值来选择元素。它们用方括号[]表示内部可以指定属性名也可以指定属性名和值。例如[type“text”]选择所有type属性值为text的元素。
input[typetext]{border:1px solid red;
}.v1[xx456]{color: gold;
}input typetext
input typepassworddiv classv1 xx123s
/divdiv classv1 xx456f
/divdiv classv1 xx999a
/div5.后代选择器使用较多
用于选择一个元素的后代元素即位于指定元素内部的元素不论是直接还是间接后代。后代选择器通过空格分隔父元素和子元素的选择器来表示。例如div p选择所有位于div元素内部的p元素。 .yy li{color: pink;}.yy a{color: dodgerblue;}div classyya百度/adiva谷歌/a/divulli美国/lili日本/lili韩国/li/ul/div关于选择器
日常使用多少
多类选择器、标签选择器、后代选择器
少属性选择器、ID选择器关于多个样式和覆盖的问题
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{color: red !important;border: 1px solid red;}.c2{font-size: 28px;color: green;}/style
/head
bodydiv classc1 c2中国联通/div
/body
/html④样式
1.高度和宽度
.c1{/*height高度 width宽度*/height:300px;width:500px;
}注意
宽度支持百分比。行内标签默认无效块级标签默认有效霸道右侧区域空白也不给你占用
2.块级和行内标签
块级行内CSS样式标签- display:inline-block
示例1行内块级特性
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{display: inline-block;height: 100px;width: 300px;border: 1px solid red;}/style
/head
bodyspan classc1中国/spanspan classc1联通/spanspan classc1联通/spanspan classc1联通/span
/body
/html示例2块级和行内标签的设置
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/style
/head
bodydiv styledisplay: inline;中国/divspan styledisplay: block;联通/span
/body
/html注意块级跨级和行内
3.字体设置
颜色 color大小 font-size加粗 font-weight字体格式 font-family
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{color: #66CDAA;font-size: 50px;font-weight: 500;font-family:Microsoft Yahei;}/style
/head
bodydiv classc1中国联通/divdiv中国移动/div
/body
/html4.文字对齐方式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{height: 59px;width: 300px;border: 1px solid red;text-align: center; /*水平方向居中*/line-height: 59px; /*垂直方向居中*/}/style
/head
bodydiv classc1张三/div
/body
/html2、CSS-常见样式和案例
①浮动
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydivspan左边/spanspan stylefloat: right右边/span/div
/body
/htmldiv默认块级标签比较霸道如果浮动起来就不一样了。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.item{float: left;width: 280px;height: 170px;border: 1px solid red;}/style
/head
bodydivdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/div/div
/body
/html可是如果你让标签浮动起来之后就会脱离文档流那该怎么解决呢
可以通过添加这个语句div styleclear: both/div解决。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.item{float: left;width: 280px;height: 170px;border: 1px solid red;}/style
/head
bodydiv stylebackground-color: dodgerbluediv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv styleclear: both/div/divdiv你好/div/body
/html为什么添加div styleclear: both/div能够解决呢
在HTML中div styleclear: both/div 用于控制布局特别是在使用浮动float元素时。浮动元素会脱离文档流的正常排列可能导致布局混乱。clear 属性用来清除元素的左侧、右侧或两侧的浮动确保不会有浮动元素影响到它的布局。
具体来说clear: both; 表示清除前面元素的左右浮动使得接下来的内容显示在浮动元素的下方而不是旁边或者覆盖浮动元素。这个技术常用于确保父容器能够包含其内部浮动的子元素防止布局错乱。
例如如果你有几个浮动的 div 元素用于创建并排的布局之后你希望接下来的内容不受这些浮动元素的影响显示在它们下面那么可以在浮动元素之后使用 div styleclear: both/div 来实现这个布局需求。这样它会创建一个不可见的分界线确保浮动不会影响到后续的内容布局。
②内边距
内部距离自己内部的距离
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.outer{border: 1px solid red;height: 200px;width: 200px;padding-top: 20px;padding-left: 20px;padding-right: 20px;padding-bottom: 20px;}/style
/head
bodydiv classouterdiv stylebackground-color: gold听妈妈的话/divdiv小朋友你是否有很多问号/div/div
/body
/html③外边距
外部距离自己与别人之间的距离
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv styleheight: 200px;background-color: dodgerblue/divdiv stylebackground-color: red;height: 100px; margin-top: 20px/div
/body
/html综合案例小米商城
案例1 小米商城顶部
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody{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
bodydiv classheaderdiv classcontainerdiv classmenua小米官网/aa小米商城/aa小米澎湃OS/aa云服务/aa小爱开放平台/aa下载app/a/divdiv classaccounta登录/aa注册/aa消息通知/a/divdiv styleclear:both/div/div/div
/body
/html小结
body标签默认有一个边距会造成页面四周有白色间隙如何去除
body{margin:0;
}内容居中 文本居中 div stylewidth: 200px; background-color:pink; text-align: center张三/div区域居中自己要有宽度 margin-left:auto; margin-right:auto; .container{width: 980px;margin: 0 auto;
}div classcontainerasddqsadas
/div父亲没有高度或没有宽度被孩子支撑起来。 如果存在浮动要加上div styleclear:both/div 如果想用别人实现的样式 关于布局不知道如何下手的话学会分析页面的布局 3、CSS-样式和小米商城
案例应用利用之前所学知识CSS知识点模版 CSS 构建页面
①CSS案例
1.内容回顾 HTML标签 固定格式记住标签长什么样例如
h / div / span / a / img / ul / li / table / input / formCSS样式 引用CSS标签、头部、文件 .xx{...
}div classxx xx/div高度height / 宽度width /块级 or 行内 or 块级行内 / 浮动float / 字体font / 文字对齐方式text-align / 内边距 / 外边距关于边距- body- 区域居中页面布局 根据你看到的页面把他们划分成很多小的区域再去填充样式。2.案例二级菜单
a.分析布局 b.搭建骨架
!DOCTYPE html
html langen
headmeta charsetUTF-8title二级菜单/titlestyle.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
bodydiv classsub-headerdiv classcontainerdiv classht logo1/divdiv classht menu-list2/divdiv classht search3/divdiv styleclear: both/div/div/divdivdiv classlogo/div/div
/body
/htmlc.完善logo区域
!DOCTYPE html
html langen
headmeta charsetUTF-8title二级菜单/titlestyle.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
bodydiv classsub-headerdiv classcontainerdiv classht logo!--a,行内标签默认设置高度、边距无效 解决转换成块级 OR 行内块级--a hrefhttps://www.mi.com/shop stylemargin-top: 22px;display: inline-blockimg srcimages/logo-mi2.png styleheight: 56px; width:56px;alt/a/divdiv classht menu-list2/divdiv classht search3/divdiv styleclear: both/div/div/divdivdiv classlogo/div/div
/body
/htmld.布置菜单区域
!DOCTYPE html
html langen
headmeta charsetUTF-8title二级菜单/titlestyle.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
bodydiv classsub-headerdiv classcontainerdiv classht logo!--a,行内标签默认设置高度、边距无效 解决转换成块级 OR 行内块级--a hrefhttps://www.mi.com/shop stylemargin-top: 22px;display: inline-blockimg srcimages/logo-mi2.png styleheight: 56px; width:56px;alt/a/divdiv classht menu-lista hrefhttps://www.mi.com/shopXiaomi手机/aa hrefhttps://www.mi.com/shopRedmi手机/aa hrefhttps://www.mi.com/shop电视/aa hrefhttps://www.mi.com/shop电笔记本/aa hrefhttps://www.mi.com/shop平板/aa hrefhttps://www.mi.com/shop家电/aa hrefhttps://www.mi.com/shop路由器/a/divdiv classht search3/divdiv styleclear: both/div/div/divdivdiv classlogo/div/div
/body
/html3.综合案例顶部菜单二级菜单
!DOCTYPE html
html langen
headmeta charsetUTF-8title小米顶部/titlestylebody{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[typetext]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[typesubmit]{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
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com/shop小米官网/aa hrefhttps://www.mi.com/shop小米商城/aa hrefhttps://www.mi.com/shop小米澎湃OS/aa hrefhttps://www.mi.com/shop云服务/aa hrefhttps://www.mi.com/shop小爱开放平台/aa hrefhttps://www.mi.com/shop下载app/a/divdiv classaccounta登录/aa注册/aa消息通知/a/divdiv styleclear:both/div/div/divdiv classsub-headerdiv classcontainerdiv classht logoa hrefhttps://www.mi.com/shop stylemargin-top: 22px;display: inline-blockimg srcimages/logo-mi2.png styleheight: 56px; width:56px;alt/a/divdiv classht menu-lista hrefhttps://www.mi.com/shopXiaomi手机/aa hrefhttps://www.mi.com/shopRedmi手机/aa hrefhttps://www.mi.com/shop电视/aa hrefhttps://www.mi.com/shop电笔记本/aa hrefhttps://www.mi.com/shop平板/aa hrefhttps://www.mi.com/shop家电/aa hrefhttps://www.mi.com/shop路由器/a/divdiv classht searchform action/search methodgetinput typetext nameq placeholder搜索产品 requiredinput typeimage src/images/search.png alt搜索 classsearch-btn iconfont/form/divdiv styleclear: both/div/div/div
/body
/html ②小结 a标签是行内标签行内标签的高度、内外边距默认无效。 垂直方向居中 文本 line-height图片 边距 a标签默认有下划线 鼠标放上去之后hover .c1:hover{...
}
a:hover{}4、CSS-案例小米商城新品部分
①案例推荐区域
1.划分区域 2.搭建骨架
!DOCTYPE html
html langen
headmeta charsetUTF-8title小米顶部/titlestylebody{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[typetext]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[typesubmit]{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
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com/shop小米官网/aa hrefhttps://www.mi.com/shop小米商城/aa hrefhttps://www.mi.com/shop小米澎湃OS/aa hrefhttps://www.mi.com/shop云服务/aa hrefhttps://www.mi.com/shop小爱开放平台/aa hrefhttps://www.mi.com/shop下载app/a/divdiv classaccounta登录/aa注册/aa消息通知/a/divdiv styleclear:both/div/div/divdiv classsub-headerdiv classcontainerdiv classht logoa hrefhttps://www.mi.com/shop stylemargin-top: 22px;display: inline-blockimg srcimages/logo-mi2.png styleheight: 56px; width:56px;alt/a/divdiv classht menu-lista hrefhttps://www.mi.com/shopXiaomi手机/aa hrefhttps://www.mi.com/shopRedmi手机/aa hrefhttps://www.mi.com/shop电视/aa hrefhttps://www.mi.com/shop电笔记本/aa hrefhttps://www.mi.com/shop平板/aa hrefhttps://www.mi.com/shop家电/aa hrefhttps://www.mi.com/shop路由器/a/divdiv classht searchform action/search methodgetinput typetext nameq placeholder搜索产品 requiredinput typeimage src/images/search.png alt搜索 classsearch-btn iconfont/form/divdiv styleclear: both/div/div/divdiv classsliderdiv classcontainerdiv classsd-imgimg srcimages/b1.jpg alt/div/div/divdiv classnewsdiv classcontainerdiv classchannel/divdiv classlist-item/divdiv classlist-item/divdiv classlist-item/div/div/div/body
/html②案例实现
!DOCTYPE html
html langen
headmeta charsetUTF-8title小米顶部/titlestylebody{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[typetext]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[typesubmit]{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
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com/shop小米官网/aa hrefhttps://www.mi.com/shop小米商城/aa hrefhttps://www.mi.com/shop小米澎湃OS/aa hrefhttps://www.mi.com/shop云服务/aa hrefhttps://www.mi.com/shop小爱开放平台/aa hrefhttps://www.mi.com/shop下载app/a/divdiv classaccounta登录/aa注册/aa消息通知/a/divdiv styleclear:both/div/div/divdiv classsub-headerdiv classcontainerdiv classht logoa hrefhttps://www.mi.com/shop stylemargin-top: 22px;display: inline-blockimg srcimages/logo-mi2.png styleheight: 56px; width:56px;alt/a/divdiv classht menu-lista hrefhttps://www.mi.com/shopXiaomi手机/aa hrefhttps://www.mi.com/shopRedmi手机/aa hrefhttps://www.mi.com/shop电视/aa hrefhttps://www.mi.com/shop电笔记本/aa hrefhttps://www.mi.com/shop平板/aa hrefhttps://www.mi.com/shop家电/aa hrefhttps://www.mi.com/shop路由器/a/divdiv classht searchform action/search methodgetinput typetext nameq placeholder搜索产品 requiredinput typeimage src/images/search.png alt搜索 classsearch-btn iconfont/form/divdiv styleclear: both/div/div/divdiv classsliderdiv classcontainerdiv classsd-imgimg srcimages/b1.jpg alt/div/div/divdiv classnewsdiv classcontainerdiv classchannel leftdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c1.png altspan保障服务/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c2.png altspan企业团购/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c3.png altspanF码通道/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c4.png altspan米粉卡/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c5.png altspan以旧换新/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c6.png altspan话费充值/span/a/divdiv classclear:both/div/divdiv classlist-item left stylemargin-left: 14pximg src/images/w1.png alt/divdiv classlist-item left stylemargin-left: 15pximg src/images/w2.jpg alt/divdiv classlist-item left stylemargin-left: 15pximg 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 langen
headmeta charsetUTF-8titleTitle/titlestyle.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
bodydiv classc1联通/divdiv classc2广西/divdiv classappdiv classtitle下载App/divdiv classdownloadimg srcimages/QRcode.png alt/div/div
/body
/html②:after伪元素
用于在元素的内容之后插入额外的内容。它通常与content属性一起使用。例如p:after { content: “Read more”; }会在所有p元素的内容后添加Read more文本。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1:after{content:大帅哥;}/style
/head
bodydiv classc1张三/divdiv classc1李四/div
/body
/html很重要的应用可以清除浮动以免脱离文档流。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.clearfix:after{content: ;display: block;clear: both;}.item{float: left;}/style
/head
bodydiv classclearfixdiv classitem1/divdiv classitem2/divdiv classitem3/div/div
/body
/html③position属性
用于设置元素的定位方式。它的值可以是static、relative、absolute、fixed或sticky分别对应不同的定位行为。常用的三个方式如下
fixedrelativeabsolute
a.fixed
固定在窗口的某个位置
案例1返回顶部
!DOCTYPE html
html langen
headmeta charsetUTF-8title小米顶部/titlestylebody{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[typetext]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[typesubmit]{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
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com/shop小米官网/aa hrefhttps://www.mi.com/shop小米商城/aa hrefhttps://www.mi.com/shop小米澎湃OS/aa hrefhttps://www.mi.com/shop云服务/aa hrefhttps://www.mi.com/shop小爱开放平台/aa hrefhttps://www.mi.com/shop下载app/a/divdiv classaccounta登录/aa注册/aa消息通知/a/divdiv styleclear:both/div/div/divdiv classsub-headerdiv classcontainerdiv classht logoa hrefhttps://www.mi.com/shop stylemargin-top: 22px;display: inline-blockimg srcimages/logo-mi2.png styleheight: 56px; width:56px;alt/a/divdiv classht menu-lista hrefhttps://www.mi.com/shopXiaomi手机/aa hrefhttps://www.mi.com/shopRedmi手机/aa hrefhttps://www.mi.com/shop电视/aa hrefhttps://www.mi.com/shop电笔记本/aa hrefhttps://www.mi.com/shop平板/aa hrefhttps://www.mi.com/shop家电/aa hrefhttps://www.mi.com/shop路由器/a/divdiv classht searchform action/search methodgetinput typetext nameq placeholder搜索产品 requiredinput typeimage src/images/search.png alt搜索 classsearch-btn iconfont/form/divdiv styleclear: both/div/div/divdiv classsliderdiv classcontainerdiv classsd-imgimg srcimages/b1.jpg alt/div/div/divdiv classnewsdiv classcontainerdiv classchannel leftdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c1.png altspan保障服务/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c2.png altspan企业团购/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c3.png altspanF码通道/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c4.png altspan米粉卡/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c5.png altspan以旧换新/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c6.png altspan话费充值/span/a/divdiv classclear:both/div/divdiv classlist-item left stylemargin-left: 14pximg src/images/w1.png alt/divdiv classlist-item left stylemargin-left: 15pximg src/images/w2.jpg alt/divdiv classlist-item left stylemargin-left: 15pximg src/images/w3.png alt/div/div/divdiv styleheight: 1000px;/divdiv classback/div
/body
/html 案例2对话框
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody{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
bodydiv classmask/divdiv styleheight: 1000px;qwewqeqw/divdiv classdialog/div
/body
/html④relative和absolute定位 relative定位是position属性的一个值表示元素将相对于其正常位置进行定位。也就是说即使你对元素应用了定位它仍然占据原来的空间但可以通过top、right、bottom、left属性移动位置。 absolute定位也是position属性的一个值表示元素相对于最近的已定位的祖先元素不是static定位的元素进行定位。如果没有这样的元素则相对于文档体()元素定位。绝对定位的元素不占据文档流中的空间。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.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
bodydiv classc1div classc2/div/div
/body
/html案例1小米商城下载app
!DOCTYPE html
html langen
headmeta charsetUTF-8title小米顶部/titlestylebody{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[typetext]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[typesubmit]{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
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com/shop小米官网/aa hrefhttps://www.mi.com/shop小米商城/aa hrefhttps://www.mi.com/shop小米澎湃OS/aa hrefhttps://www.mi.com/shop云服务/aa hrefhttps://www.mi.com/shop小爱开放平台/aa hrefhttps://www.mi.com/shop classapp下载appdiv classdownloadimg srcimages/QRcode.png alt/div/a/divdiv classaccounta登录/aa注册/aa消息通知/a/divdiv styleclear:both/div/div/divdiv classsub-headerdiv classcontainerdiv classht logoa hrefhttps://www.mi.com/shop stylemargin-top: 22px;display: inline-blockimg srcimages/logo-mi2.png styleheight: 56px; width:56px;alt/a/divdiv classht menu-lista hrefhttps://www.mi.com/shopXiaomi手机/aa hrefhttps://www.mi.com/shopRedmi手机/aa hrefhttps://www.mi.com/shop电视/aa hrefhttps://www.mi.com/shop电笔记本/aa hrefhttps://www.mi.com/shop平板/aa hrefhttps://www.mi.com/shop家电/aa hrefhttps://www.mi.com/shop路由器/a/divdiv classht searchform action/search methodgetinput typetext nameq placeholder搜索产品 requiredinput typeimage src/images/search.png alt搜索 classsearch-btn iconfont/form/divdiv styleclear: both/div/div/divdiv classsliderdiv classcontainerdiv classsd-imgimg srcimages/b1.jpg alt/div/div/divdiv classnewsdiv classcontainerdiv classchannel leftdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c1.png altspan保障服务/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c2.png altspan企业团购/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c3.png altspanF码通道/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c4.png altspan米粉卡/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c5.png altspan以旧换新/span/a/divdiv classitema hrefhttps://www.mi.com/shopimg srcimages/c6.png altspan话费充值/span/a/divdiv classclear:both/div/divdiv classlist-item left stylemargin-left: 14pximg src/images/w1.png alt/divdiv classlist-item left stylemargin-left: 15pximg src/images/w2.jpg alt/divdiv classlist-item left stylemargin-left: 15pximg src/images/w3.png alt/div/div/div/body
/html⑤border属性
用于设置元素边框的样式、宽度和颜色。例如border: 1px solid black;会给元素添加一条1像素宽、实线、黑色的边框。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.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
bodydiv classc1菜单/div
/body
/html⑥background-color属性
用于设置元素的背景颜色。例如background-color: blue;会将元素的背景颜色设置为蓝色。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{height: 50px;width: 500px;margin: 100px;background-color: #66CDAA;}/style
/head
bodydiv classc1菜单/div
/body
/html注意以上不是所有的CSS样式上述仅为开发中常用的核心知识点通过此篇内容可以帮助你大致了解页面的样式和标签
后续会了解一些模版内容包括
模版的基本使用逻辑模版 自己CSS知识点开发页面 很感谢你能看到这里如有相关疑问还请下方评论留言。 笔记记录来源B站 python的web开发全家桶django前端数据库 Code_流苏(CSDN)一个喜欢古诗词和编程的Coder 如果对大家有帮助的话希望大家能多多点赞关注这样我的动力会更足
