HTML / CSS 实践练习

最新推荐文章于 2023-02-05 20:38:03 发布

MartinYP

最新推荐文章于 2023-02-05 20:38:03 发布

阅读量654

点赞数

文章标签： css html 学习

本文链接：https://blog.csdn.net/MartinYP/article/details/125773585

版权

本文记录了作者周三的学习情况，重点学习了CSS精灵图的使用和静态网页的实践练习，包括如何通过精灵图提高页面加载速度，以及完成了网页页眉和页脚的HTML/CSS编写。

摘要由CSDN通过智能技术生成

2022.7.13 周三学习记录博客

今日学习时长：3h

学习进度：1、静态网页实践练习（今日完成了页眉、页脚部分）；2、css中精灵图的使用

css精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS 精灵技术。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

精灵图的使用：

精灵图主要针对于小的背景图片使用
主要借助于背景位置来实现—— background-position
一般情况下精灵图都是负值。（网页中的X Y 坐标与数学不同）

网页效果图示例：

精灵图原图素材：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>精灵图</title>
    <style>
        span {
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        .p {
            width: 100px;
            height: 112px;
           background-position:  -493px -276px;
        }
        .i {
            width: 60px;
            height: 108px;
            background-position: -327px -142px;
        }
        .n {
            width: 108px;
            height: 109px;
            background-position: -215px -141px;
        }
        .k {
            width: 105px;
            height: 114px;
           background-position: -495px -142px;
        }
    </style>
</head>
<body>
    <span class="p"></span>
    <span class="i"></span>
    <span class="n"></span>
    <span class="k"></span>
</body>
</html>

静态网页书写练习

网页效果示例：

今日只书写了网页的页眉和页脚部分

练习素材来源于b站教学视频：第300P。图片素材同样来源于视频中黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

HTML代码展示：

<!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">
    <!-- 网站TDK SEO优化 -->
    <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务&#x

最低0.47元/天解锁文章