第3章 用CSS3装饰网站
第3章 用CSS3装饰网站
用户8928967
发布于 2021-08-20 17:02:36
发布于 2021-08-20 17:02:36
带着问题去看书学习啦~
HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版），微信读书中找到的学习Web前端书籍，第3章开始啦，耶(＾－＾)V
习题
3-1 什么是CSS，它的作用是什么？
CSS（Cascading Style Sheets，层叠样式表）是一种网页控制技术，采用CSS技术，可以有效地对页面布局、字体、颜色、背景和其他效果实现更加精准地控制。
3-2 ID选择器和类选择器的区别是什么？
- ID选择器可以为含有ID属性的标签指定CSS样式，以“#”来定义，例如：#red{color:red;}。 在一个HTML文档中，它只能使用一次，而且仅一次。
- 类选择器可以为含有class属性的标签指定CSS样式，类选择器以“.”来定义，例如：.red{color:red;}。 在一个HTML文档中，它可以使用多次。
3-3 HTML中列表的分类有哪些，CSS中的列表属性有哪些？
html 列表分类：
- 有序列表（<ol><\ol>和<li><\li>）
- 无序列表（<ul><\ul>和<li><\li>）
css 列表属性：
- list-style：把所有用于列表的属性设置在一个声明中
- list-style-image：将图像设置为列表项标志
- list-style-position：设置列表项标志的位置
- list-style-type：设置列表项标志的类型
3-4 链接标签相关的CSS属性有哪些？使用时应该注意什么？
- a:link —— 表示普通的、未被访问的链接
- a:visited —— 表示已被访问的链接
- a:hover —— 表示鼠标指针移动到链接上
- a:active —— 表示正在被单击的链接
为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！! 为了使定义生效，a:active 必须位于 a:hover 之后！!
3-5 使用CSS设置背景图片时，设置背景图片的平铺方式是什么属性，其属性值有哪些？
- background-color（背景色）
- color（英文单词、十六进制、RGB、HSL、HSLA和RGBA）
- transparent（背景颜色透明）
- background-image（背景图）
- url (相对地址 or 绝对地址)
- background-repeat（图像的平铺方式）
- inherit（从父标签继承 background-repeat 属性的设置）
- no-repeat（背景图片只显示一次，不重复）
- repeat（在水平和垂直方向上重复显示背景图片）
- repeat-x（只沿 x 轴方向重复显示背景图片）
- repeat-y（只沿 y 轴方向重复显示背景图片）
- background-attachment（背景图片是否随页面中的内容滚动）
- scroll（当页面滚动时，背景图片跟着页面一起滚动）
- fixed（将背景图片固定在页面的可见区域）
- background-position（背景图片在页面中的位置）
- length（设置背景图片与页面边距水平和垂直方向的距离，单位cm、mm、px等）
- percentage（根据页面标签框的宽度和高度的百分比放置背景图片）
- top（设置背景图片顶部居中显示）
- center（设置背景图片居中显示）
- bottom（设置背景图片底部居中显示）
- left（设置背景图片左部居中显示）
- right（设置背景图片右部居中显示）
当需要为背景图片设置多个属性时，可以将属性写为“background”，然后将个属性值写在一行，并且以空格间隔。
其他
其他当然就是照着示例练习啦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo3</title>
<style>
/*设置所有标签的共有样式*/
* {
padding: 0;
/*设置所有标签的内间距*/
margin: 0; /*设置所有标签的外间距*/
}
/*通过类选择器设置主题内容样式*/
.cont {
width: 1140px;
margin: 20px auto; /*设置宽度*/
/*通过外间距设置内容的位置*/
}
.color {
color: #51bcff; /*设置字体颜色*/
height: 45px; /*设置标签高度*/
}
.big { /*设置“新书速递”中第一个字的样式*/
font-size: 30px;
font-weight: bold;
}
.more { /*设置文字“更多”的样式*/
background: #343434; /*设置背景颜色*/
color: #fff;
}
.list img { /*设置图片样式*/
margin-top: 10px; /*设置向上的外间距*/
height: 203px; /*设置图片高度*/
}
.list { /*设置图书列表的样式*/
margin-top: 20px;
width: 215px; /*设置宽度*/
margin-left: 11px; /*设置向左的外间距*/
float: left; /*设置浮动*/
border: 1px silver solid; /*设置边框样式*/
text-align: center; /*设置文本对齐方式*/
}
p { /*设置所有p标签的样式*/
padding: 0 10px; /*设置内间距*/
height: 40px;
line-height: 40px; /*设置行高*/
}
.price {
color: #ff0c2a;
float: left;
}
.e_book { /*设置所有“电子书”文字样式*/
display: inline-block; /*在页面中显示方式*/
height: 26px;
line-height: 26px;
margin: 10px 0;
color: #fff; /*设置文字颜色*/
background: #ff0c2a;
font-size: 12px;
padding: 0 4px;
float: right;
}
a {
float: right;
line-height: 40px; /*设置行高*/
}
.olli{
margin-left: 50px;
text-align: left;
}
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被单击的链接 */
</style>
</head>
<body>
<p class="olli" ><b><a href="https://www.baidu.com" target="_blank" >这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！!</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！!</p>
<p>王者荣耀的最强射手排名</p>
<ol class="olli">
<li>伽罗</li>
<li>虞姬</li>
<li>黄忠</li>
<li>后羿</li>
<li>狄仁杰</li>
</ol>
<hr>
<p>蚂蚁森林好友收取能量提醒</p>
<ul class="olli">
<li>啊木木  ；收取能量54g</li>
<li>喵星人  ；收取能量32g</li>
<li>你家宝宝  ；收取能量8g</li>
<li>@-@  ； 收取能量1g</li>
</ul>
<div class="cont">
<p class="color">
<span class="big">新</span>书速递
</p>
<p class="more">
<a>更多></a>
</p>
<div>
<div class="list">
<img src="img/book1.png">
<p>零基础学C++</p>
<p><span class="price">￥79.8</span><span class="e_book">数字书</span></p>
</div>
<div class="list">
<img src="img/book2.png">
<p>Python从入门到实践</p>
<p><span class="price">￥99.8</span><span class="e_book">数字书</span></p>
</div>
<div class="list">
<img src="img/book3.png">
<p>案例学web前端开发</p>
<p><span class="price">￥49.8</span><span class="e_book">数字书</span></p>
</div>
<div class="list">
<img src="img/book4.png">
<p>玩转C语言程序设计</p>
<p><span class="price">￥49.8</span><span class="e_book">数字书</span></p>
</div>
<div class="list">
<img src="img/book5.jpg">
<p>Java学习黄金组合套装</p><p><span class="price">￥209.4</span></p>
</div>
</div>
</div>
</body>
</html>
部分示例
附 CSS 使用技巧：
https://www.ruanyifeng.com/blog/2010/03/css_cookbook.html
最终这方面还是需要多实践，就记住了！
?关注我吖~❤️
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-08-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录