1、CSS介绍
1）CSS 指层叠样式表 (Cascading Style Sheets)
2）样式定义如何显示 HTML 元素
3）样式通常存储在样式表中
4）把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5）外部样式表可以极大提高工作效率
6）外部样式表通常存储在 CSS 文件中
7）多个样式定义可层叠为一个
2、商品分类页面的设计
image.png
知识点
1）标签选择器根据标签名查找元素（标签选择器的写法：标签名）
2）类选择器根据class属性查找元素（类选择器的写法：点号开头+class属性值）
3）id选择器根据id属性查找元素（id选择器的写法：#号开头+id属性值）
4）使用伪类hover设置鼠标移动到元素上方时的样式
5）使用display设置元素的显示方式
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first{
background-color:#0f7cbf;
font-size: 36px;
line-height: 50px;
font-weight: bold;
text-indent: 1em;
color: white;
}
.third{
font-size: 24px;
line-height: 36px;
color: #666;
display: inline-block;
margin: 10px;
font-weight: normal;
}
.second{
font-size: 28px;
line-height: 50px;
background-color: #e4f1fa;
color: #0F7CBF;
font-weight: bold;
text-indent: 2em;/*缩进两个字符*/
}
ul{
list-style: none;
padding-left: 0px;/*内容跟左边框的间距*/
}
a{
text-decoration: none;
color: #666;
}
a:hover{
color: #f60;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li class="first">家用电器</li>
<ul>
<li class="second">大家电</li>
<ul>
<li class="third"><a href="javascript:void(0);">平板电视</a></li>
<li class="third"><a href="javascript:void(0);">平板电视</a></li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
</ul>
<li class="second">大家电</li>
<ul>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
</ul>
<li class="second">大家电</li>
<ul>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
</ul>
<li class="second">大家电</li>
<ul>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
</ul>
</ul>
</ul>
</body>
</html>
3、clear属性和overflow属性的使用
知识点
1）浮动的元素不会占用空间（从标准文档流里面脱离）
2）如果要让非浮动元素显示在左浮动元素的下方，可以给该元素设置清除左浮动
3）如果要让非浮动元素显示在右浮动元素的下方，可以给该元素设置清除右浮动
4）如果要让非浮动元素显示在左浮动元素和右浮动元素的下方，可以给该元素设置清除两侧浮动或者设置溢出处理方式为隐藏
设置浮动
.red{
float: left;
background-color: red;
width: 150px;
height: 150px;
margin: 10px;
}
.yellow{
float: right;
background-color: yellow;
width: 200px;
height: 200px;
margin: 10px;
}
红色盒子向左浮动，黄色盒子向右浮动，绿色盒子出现在第一行，浮动的两个盒子位于绿色盒子的上方
image.png
清除左浮动
.green{
background-color: green;
height: 100px;
width: 100%;
clear: left;
}
清除左浮动后，绿色盒子出现在红色盒子的下方
image.png
清除右浮动
.green{
background-color: green;
height: 100px;
width: 100%;
clear: right;
}
清除右浮动后，绿色盒子出现在黄色盒子的下方
image.png
清除两侧浮动
.green{
background-color: green;
height: 100px;
width: 100%;
clear: both;
}
清除两侧浮动后，绿色盒子出现在黄色盒子的下方
image.png
设置溢出处理
.green{
background-color: green;
height: 100px;
width: 100%;
overflow: hidden;
}
设置溢出处理后，绿色盒子出现在黄色盒子的下方
image.png
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red{
float: left;
background-color: red;
width: 150px;
height: 150px;
margin: 10px;
}
.yellow{
float: right;
background-color: yellow;
width: 200px;
height: 200px;
margin: 10px;
}
.green{
background-color: green;
height: 100px;
width: 100%;
clear: both;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</body>
</html>
4、参考资料
[01] 元素选择器（标签选择器）
http://www.w3school.com.cn/css/css_selector_type.asp
[02] CSS 类选择器
http://www.w3school.com.cn/css/css_syntax_class_selector.asp
[03] CSS id 选择器
http://www.w3school.com.cn/css/css_syntax_id_selector.asp
[04] CSS 后代选择器（派生选择器）
http://www.w3school.com.cn/css/css_selector_descendant.asp
[05] CSS 子元素选择器（儿子选择器）
http://www.w3school.com.cn/css/css_selector_child.asp
[06] CSS 并集选择器
http://www.w3school.com.cn/css/css_selector_grouping.asp
[07] CSS交集选择器
https://blog.csdn.net/liangde123/article/details/79195189
[08] CSS 伪类
http://www.w3school.com.cn/css/css_pseudo_classes.asp
[09] CSS display 属性
http://www.w3school.com.cn/cssref/pr_class_display.asp
[10] CSS 浮动
http://www.w3school.com.cn/css/css_positioning_floating.asp
[11] CSS overflow 属性
http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
[12] CSS 参考手册
http://www.w3school.com.cn/cssref/index.asp
微信扫一扫关注该公众号【测试开发者部落】
image.png
点击链接加入群聊【软件测试学习交流群】
https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105
网友评论