第3章用CSS3装饰网站

用户8928967

发布于 2021-08-20 17:02:36

1.2K0

发布于 2021-08-20 17:02:36

文章被收录于专栏：用户8928967的专栏

带着问题去看书学习啦~

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>啊木木 &nbsp;&nbsp；收取能量54g</li>
        <li>喵星人 &nbsp;&nbsp；收取能量32g</li>
        <li>你家宝宝 &nbsp；收取能量8g</li>
        <li>@-@ &nbsp;&nbsp;&nbsp； 收取能量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 删除

css

html

本文分享自妮K妮K妮微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

html

登录后参与评论

0 条评论

热度

第3章用CSS3装饰网站

第3章用CSS3装饰网站

习题

3-1 什么是CSS，它的作用是什么？

3-2 ID选择器和类选择器的区别是什么？

3-3 HTML中列表的分类有哪些，CSS中的列表属性有哪些？

3-4 链接标签相关的CSS属性有哪些？使用时应该注意什么？

3-5 使用CSS设置背景图片时，设置背景图片的平铺方式是什么属性，其属性值有哪些？

其他

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第3章 用CSS3装饰网站

第3章 用CSS3装饰网站

习题

3-1 什么是CSS，它的作用是什么？

3-2 ID选择器和类选择器的区别是什么？

3-3 HTML中列表的分类有哪些，CSS中的列表属性有哪些？

3-4 链接标签相关的CSS属性有哪些？使用时应该注意什么？

3-5 使用CSS设置背景图片时，设置背景图片的平铺方式是什么属性，其属性值有哪些？

其他

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第3章用CSS3装饰网站

第3章用CSS3装饰网站