WEB前端开始学习 6.30

最新推荐文章于 2024-06-27 18:10:43 发布

LiangKJZ

最新推荐文章于 2024-06-27 18:10:43 发布

阅读量144

点赞数 1

文章标签：大数据 css

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

版权

1.今天学习了css的点位，定位事更高级的布局方式，有类似外边距margin的作用，也能做到margin做不到的事情，非常好用。

2.定位有相对定位，绝对定位，固定定位，粘滞定位，不同的定位作用于不同的布局，从今天开始html的主体部分就学习的差不多了。。。吧

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>
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
        color: rgb(185, 185, 186);
    }

    header {
        width: 100%;
        height: 40px;
        background-color: rgb(227, 228, 229);
        margin-top: 10px;
    }

    #p {
        width: 1200px;
        height: 40px;
        margin: 0 auto;
    }

    .p {
        width: 100px;
        height: 38px;
        float: left;
        line-height: 38px;
        text-align: center;
        margin: 1px 0;

    }

    ul {
        width: 1000px;
        float: right;
    }

    ul>li {
        float: left;
        text-align: center;
        line-height: 38px;
        width: 10%;
        margin: 1px 0;
    }

    i {
        color: rgb(185, 185, 186);
    }

    .p2 {
        width: 150px;
        height: 150px;
        display: none;
        background-color: antiquewhite;
        border: 3px solid rgb(227, 228, 229);
        border-top: none;
        margin-left: -3px;

    }

    .p4 {
        width: 150px;
        height: 150px;
        display: none;
        background-color: antiquewhite;
        border: 3px solid rgb(227, 228, 229);
        border-top: none;
        position: relative;
        right: 50px;
    }

    .p5 {
        width: 1000px;
        height: 150px;
        display: none;
        background-color: antiquewhite;
        border: 3px solid rgb(227, 228, 229);
        border-top: none;
        position: relative;
        right: 900px;
    }

    .p:hover {
        width: 100px;
        height: 40px;
        background-color: rgb(255, 255, 255);
    }

    .p:hover .p2 {
        display: block;
    }

    ul>li:hover .p2 {
        display: block;
    }

    ul>li:hover .p4 {
        display: block;
    }

    ul>li:hover .p5 {
        display: block;
    }
</style>

<body>
    <header>
        <div id="p">
            <div class="p">
                <a href="#">
                    <i class="icon ion-location" style="color: red;"></i>安徽
                </a>
                <div class="p2"></div>
            </div>
            <ul>
                <li>
                    <a href="#">你好，请登录</a>
                </li>
                <li>
                    <a href="#" style="color: red;">免费注册</a>
                </li>
                <li>
                    <a href="#">我的订单</a>
                </li>
                <li class="p3">
                    <a href="#">我的京东</a>
                    <i class="icon ion-chevron-down"></i>
                    <div class="p2"></div>
                </li>
                <li>
                    <a href="#">京东会员</a>
                </li>
                <li class="p">
                    <a href="#" style="color: red;">企业采购</a>
                    <i class="icon ion-chevron-down"></i>
                    <div class="p2"></div>
                </li>
                <li class="p">
                    <a href="#">客户服务</a>
                    <i class="icon ion-chevron-down"></i>
                    <div class="p4"></div>
                </li>
                <li class="p">
                    <a href="#">网站导航</a>
                    <i class="icon ion-chevron-down"></i>
                    <div class="p5"></div>
                </li>
                <li>
                    <a href="#">手机京东</a>
                </li>
                <li>
                    <a href="#">网站无障碍</a>
                </li>
            </ul>
        </div>

    </header>
</body>

</html>

有些进入状态了，后面加油吧