CSS总结笔记+案例(上):https://developer.aliyun.com/article/1427875
案例:小米商城二级菜单
1.骨架部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .sub-header{ height: 100px; background-color: #b0b0b0; } .container{ width: 1226px; margin-right: auto; margin-left: auto; } .sub-header .ht{ height: 88px; } .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">abc</div> <div class="ht menu-list">abc</div> <div class="ht search">asd</div> <div style="clear:both"></div> </div> </div> </body> </html>
2.logo部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .sub-header{ height: 100px; background-color: #b0b0b0; } .container{ width: 1226px; margin-right: auto; margin-left: auto; } .sub-header .ht{ height: 88px; } .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; } .sub-header .search{ float: right; } </style> </head> <body> <div class="sub-header"> <div class="container"> <div class="ht logo"> <!-- a,行内标签;默认设置为高度、边距无效。 -> 块级 --> <a href="https://www.mi.com/"> <img src="/images/logo-mi2.png"> </a> </div> <div class="ht menu-list">abc</div> <div class="ht search">asd</div> <div style="clear:both"></div> </div> </div> </body> </html>
3.菜单部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .sub-header{ height: 100px; } .container{ width: 1226px; margin-right: auto; margin-left: auto; } .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; border: 1px; } .sub-header .menu-list a{ padding: 0 10px; display: inline-block; color: #333; font-size: 16px; /*去掉链接下划线*/ text-decoration: none; } /*hover当鼠标悬停*/ .sub-header .menu-list a:hover{ color: darkorange; } .sub-header .search{ float: right; } </style> </head> <body> <div class="sub-header"> <div class="container"> <div class="ht logo"> <!-- a,行内标签;默认设置为高度、边距无效。 -> 块级 --> <a href="https://www.mi.com/"> <img src="/images/logo-mi2.png"> </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> </div> <div class="ht search"></div> <div style="clear:both"></div> </div> </div> </body> </html>
4.顶部菜单+二级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .header{ height: 38px; color: #b0b0b0; background: #333; } .container{ width: 1226px; margin: 0 auto; } .header .menu{ float: left; color: white; height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; text-decoration: none; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; text-decoration: none; } .header .account:hover{ color: white; } .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; border: 1px; } .sub-header .menu-list a{ padding: 0 10px; display: inline-block; color: #333; font-size: 16px; /*去掉链接下划线*/ text-decoration: none; } /*hover当鼠标悬停*/ .sub-header .menu-list a:hover{ color: darkorange; } .sub-header .search{ float: right; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com/">小米商城</a> <a href="https://www.mi.com/">MIUI</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="account"> <a href="https://www.mi.com/">登录</a> <a href="https://www.mi.com/">注册</a> <a href="https://www.mi.com/">消息通知</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"> </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> </div> <div class="ht search"></div> <div style="clear:both"></div> </div> </div> </body> </html>
小结
- a标签是行内标签,行内标签的高度、内外边距,默认无效。
- 垂直方向居中
- 文本:line-height
- 图片:边距
- a标签默认有下划线。(去除:
text-decoration: none;
)
- 鼠标放上去之后(hover)
a:hover{ color: white; }
案例:小米商城推荐区域
若想还原,图片部分自行加入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } img { width: 100%; height: 100%; } .left{ float: left; } .header{ height: 38px; color: #b0b0b0; background: #333; } .container{ width: 1226px; margin: 0 auto; } .header .menu{ float: left; color: white; height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; text-decoration: none; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; text-decoration: none; } .header .account:hover{ color: white; } .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; border: 1px; } .sub-header .menu-list a{ padding: 0 10px; display: inline-block; color: #333; font-size: 16px; /*去掉链接下划线*/ text-decoration: none; } /*hover当鼠标悬停*/ .sub-header .menu-list a:hover{ color: darkorange; } .sub-header .search{ float: right; } .slider img{ width: 1226px; height: 460px; } .news .channel{ width: 228px; height: 164px; background-color: #333333; padding: 3px; } .news .list-item{ width: 316px; height: 170px; } .news .channel .item{ height: 86px; width: 76px; float: left; text-align: center; opacity: 0.5; } .news .channel .item img{ height: 24px; width: 24px; display: block; margin: 0 auto 4px; } .news .channel .item a{ font-size: 12px; display: inline-block; padding-top: 18px; color: #fff; text-decoration: none; } .news .channel .item a:hover{ opacity: 1; } .news{ margin-top: 14px; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com/">小米商城</a> <a href="https://www.mi.com/">MIUI</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="account"> <a href="https://www.mi.com/">登录</a> <a href="https://www.mi.com/">注册</a> <a href="https://www.mi.com/">消息通知</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"> </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> </div> <div class="ht search"></div> <div style="clear:both"></div> </div> </div> <div class="slider"> <div class="container"> <div class="sd-img"> <img src="/images/b1.png"> </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/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div style="clear: both"></div> </div> <div class="list-item left" style="margin-left: 14px"> <img src="/images/list1.png" /> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/list2.png" /> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/list3.png" /> </div> <div style="clear: both"></div> </div> </div> </body> </html>
设置透明度:
.c1{ opacity: 1; }
CSS知识点
hover
鼠标悬停显示图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ font-size: 18px; color: gold; } .c1:hover{ font-size: 50px; color: darkorange; } .c2{ height: 300px; width: 500px; border: 1px solid red; } .c2:hover{ border: 2px solid green; } .download{ display: none; } .app:hover .download{ display: block; } </style> </head> <body> <div class="c1">移动</div> <div class="c2">联通</div> <div class="app"> <div>点击下载</div> <div class="download"> <img src="/images/app.png"> </div> </div> </body> </html>
after
c1样式后都加入content内容
<!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> <div class="c1">赵云</div> <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; } </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
- fixed
- relative
- absolute
1.fiex
固定在窗口的某个位置
案例:固定客服电话位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: #b0b0b0; height: 2000px; width: 1226px; margin: 0 auto; } .c2{ position: fixed; border: 2px solid red; height: 64px; width: 64px; right: 10px; bottom: 100px; } </style> </head> <body> <div class="c1"></div> <div class="c2">客服电话</div> </body> </html>
案例:对话框
z-index:定义position在哪一层,数值越大在越上层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: #b0b0b0; height: 2000px; width: 1226px; margin: 0 auto; } .c2{ position: fixed; left: 0; right: 0; margin: 0 auto; height: 500px; width: 400px; background-color: white; top: 200px; z-index: 10; } .mask{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: black; opacity: 0.7; z-index: 9; } </style> </head> <body> <!--背景--> <div class="c1"></div> <!--幕布--> <div class="mask"></div> <!--对话框--> <div class="c2"></div> </body> </html>
2.relative和absolute
相对进行显示:
父类加上position:relative
子类加上position:absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 500px; width: 700px; border: 1px solid red; position: relative; } .c1 .c2{ background-color: gold; position: absolute; height: 100px; width: 100px; right: 0; } </style> </head> <body> <div class="c1"> <div class="c2"></div> </div> </body> </html>
案例:在相对位置添加二维码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } img { width: 100%; height: 100%; } .left{ float: left; } .header{ height: 38px; color: #b0b0b0; background: #333; } .container{ width: 1226px; margin: 0 auto; } .header .menu{ float: left; color: white; height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; text-decoration: none; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; text-decoration: none; } .header .account:hover{ color: white; } .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; border: 1px; } .sub-header .menu-list a{ padding: 0 10px; display: inline-block; color: #333; font-size: 16px; /*去掉链接下划线*/ text-decoration: none; } /*hover当鼠标悬停*/ .sub-header .menu-list a:hover{ color: darkorange; } .sub-header .search{ float: right; } .slider img{ width: 1226px; height: 460px; } .news .channel{ width: 228px; height: 164px; background-color: #333333; padding: 3px; } .news .list-item{ width: 316px; height: 170px; } .news .channel .item{ height: 86px; width: 76px; float: left; text-align: center; opacity: 0.5; } .news .channel .item img{ height: 24px; width: 24px; display: block; margin: 0 auto 4px; } .news .channel .item a{ font-size: 12px; display: inline-block; padding-top: 18px; color: #fff; text-decoration: none; } .news .channel .item a:hover{ opacity: 1; } .news{ margin-top: 14px; } .app{ position: relative; } .app .download{ position: absolute; width: 100px; display: none; } .app:hover .download{ display: block; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com/">小米商城</a> <a href="https://www.mi.com/">MIUI</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/" class="app">App下载 <div class="download"> <img src="images/app.png"> </div> </a> </div> <div class="account"> <a href="https://www.mi.com/">登录</a> <a href="https://www.mi.com/">注册</a> <a href="https://www.mi.com/">消息通知</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"> </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> </div> <div class="ht search"></div> <div style="clear:both"></div> </div> </div> <div class="slider"> <div class="container"> <div class="sd-img"> <img src="/images/b1.png"> </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/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div class="item"> <a href="https://www.mi.com/"> <img src="/images/c1.png" > <span>保障服务</span> </a> </div> <div style="clear: both"></div> </div> <div class="list-item left" style="margin-left: 14px"> <img src="/images/list1.png" /> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/list2.png" /> </div> <div class="list-item left" style="margin-left: 15px"> <img src="/images/list3.png" /> </div> <div style="clear: both"></div> </div> </div> </body> </html>
边框
- border:1px 1像素边框
- solid red 实心红色
- dotted red 虚线红色
- border-left 指定边框
背景色
- background-color
总结
以上是CSS常用功能
在开发过程中会用到BootSrap模板
模板:
- 模板基本使用逻辑
- 模板+自己的CSS