第3章 用CSS3装饰网站

2021-08-12  本文已影响0人  夜远曦白

带着问题去看书学习啦~

HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版），微信读书中找到的学习Web前端书籍，第3章开始啦，耶(＾－＾)V

习题

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

CSS（Cascading Style Sheets，层叠样式表）是一种网页控制技术，采用CSS技术，可以有效地对页面布局、字体、颜色、背景和其他效果实现更加精准地控制。

3-2 ID选择器和类选择器的区别是什么？
3-3 HTML中列表的分类有哪些，CSS中的列表属性有哪些？

html 列表分类：

css 列表属性：

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

为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！!
为了使定义生效，a:active 必须位于 a:hover 之后！!

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

当需要为背景图片设置多个属性时，可以将属性写为“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

最终这方面还是需要多实践，就记住了！

上一篇 下一篇

猜你喜欢

热点阅读