WEB前端开始学习 6.30

最新推荐文章于 2023-09-01 16:34:23 发布

LiangKJZ

最新推荐文章于 2023-09-01 16:34:23 发布

阅读量56

点赞数 1

文章标签：学习大数据 css

本文链接：https://blog.csdn.net/LiangKJZ/article/details/125564934

版权

1.今天学习已经过去两周，我也从一点不懂的小白变成能写网页框架的入门人了，这两周收获很多，暂时没有遇到无法理解的知识点。知识很多，需要很长的时间来消化，后面还要多自觉一些，尽快融汇贯通所学的知识。

2.今天学习了背景样式，背景样式看起来简单，但知识点也不少，需要牢记消化的点很多。也需要很多的练习来巩固。

3.小米官网并不难，但需要很长的时间来制作，后面两天可以说有的忙了，但毕竟没什么难度，所以写的时候有种搭积木的快感。

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            width: 70px;
            height: 70px;
            list-style: none;
            float: left;
            margin: 10px;
            text-align: center;
        }

        li:hover {
            background-color: rgb(248, 248, 248);
        }
        li:hover p{
            color: red;
        }
        a {
            text-decoration: none;
        }

        h3 {
            margin: 10px;
            margin-bottom: none;
        }

        #p {
            width: 300px;
            height: 300px;
            margin: 20px;
        }

        .p {
            width: 70px;
            height: 50px;
            background-image: url(./ToolsIcon.png);
            background-repeat: no-repeat;
            background-position: top center;
            margin-top: 5px;
        }

        .p2 {
            width: 70px;
            height: 50px;
            background-image: url(./ToolsIcon.png);
            background-repeat: no-repeat;
            background-position: center -70px;
            margin-top: 5px;
        }

        .p3 {
            width: 70px;
            height: 50px;
            background-image: url(./ToolsIcon.png);
            background-repeat: no-repeat;
            background-position: center -140px;
            margin-top: 5px;
        }

        .p4 {
            width: 70px;
            height: 50px;
            background-image: url(./ToolsIcon.png);
            background-repeat: no-repeat;
            background-position: center -210px;
            margin-top: 5px;
        }

        .p5 {
            width: 70px;
            height: 50px;
            background-image: url(./ToolsIcon.png);
            background-repeat: no-repeat;
            background-position: center -280px;
            margin-top: 5px;
        }

        .p6 {
            width: 70px;
            height: 50px;
            background-image: url(./ToolsIcon.png);
            background-repeat: no-repeat;
            background-position: center -350px;
            margin-top: 5px;
        }

        p {
            margin-top: -10px;
            color: black;
        }
    </style>
</head>

<body>
    <h3>职场取经</h3>
    <ul id="p">

        <li>
            <a href="#">
                <div class="p"></div>
                <p>求职技巧</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="p2"></div>
                <p>行业薪资</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="p3"></div>
                <p>简历模板</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="p4"></div>
                <p>就业指导</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="p5"></div>
                <p>实习兼职</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="p6"></div>
                <p>沟通技巧</p>
            </a>
        </li>
    </ul>
</body>

</html>

明天加把劲完事

LiangKJZ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端开始学习 6.30

今天学习已经过去两周，我也从一点不懂的小白变成能写网页框架的入门人了，这两周收获很多，暂时没有遇到无法理解的知识点。知识很多，需要很长的时间来消化，后面还要多自觉一些，尽快融汇贯通所学的知识。...
复制链接

扫一扫