前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第3章 用CSS3装饰网站

第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”,然后将个属性值写在一行,并且以空格间隔。

其他

其他当然就是照着示例练习啦!

代码语言:javascript
复制
<!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 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 习题
  • 其他
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档