前端开发css.web.html

CSS入门

2019-06-20  本文已影响70人  测试老杨

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
上一篇 下一篇

猜你喜欢

热点阅读