小米页面作业

最新推荐文章于 2024-07-08 18:51:22 发布

久别无恙.

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量170

点赞数

分类专栏： web前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_51327841/article/details/131637740

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <link rel="stylesheet" href="./03-zy.css">
    <link rel="stylesheet" href="../icon7.9作业/iconfont.css"
<body>
    <div class="gf">
        <div class="f1">
            <a href class="brand"><img src="../images/小米.jpg"></a>
            <div class="interface">
                <ul class="one">
                    <li><a href="#">Xiaomi</a></span></li>
                    <li><a href="#">Redmi</a></span></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>    
            <div class="ip">
                <input type="text" name="">
            </div>       
        </div>    
        <div class="f2">
            <ul class="two">
                <li><a href="#">手机</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">出行 穿戴</a></li>
                <li><a href="#">耳机 音响</a></li>
                <li><a href="#">健康 儿童</a></li>
                <li><a href="#">生活 箱包</a></li>  
                <li><a href="#">智能路由器</a></li>
                <li><a href="#">电源配件</a></li>
            </ul>            
            <div class="f3">
                <div class="s1"><a href="#"><</a></div>
                <div class="s2"><a href="#">></a></div>
            </div>
        </div>
    </div>
</body>
</html>

css

ul li{
    list-style: none;
} 
a{
    text-decoration: none;
}
.gf{
    width: 900px;
    height: 560px;
    background-color: rgb(223, 230, 230);
}
/* brand图片没有显示 */
.f1{
    width: 900px;
    height: 100px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
}
img{
    width: 100px;
    height: 100px;
}
.one li{
    width: 600;
    height: auto;
    margin: 0px;
    padding: 26px 8px 38px;
    display: inline-block; /* 把无序列表横放 */
    
}
input[type="text"]{
    position: relative;
    top: 35px;
    right: -25px;
}

.f2{
    position: relative; 
    flex-direction: row;

    /* overflow: hidden; */
}
/* 左侧无序列表 */
.two{
    width: 220px;
    height: 420px;
    margin: 0;
    padding: 20px 0px 20px 30px;
    background-color: rgb(160, 158, 155);
}
.two li{
    width: 250px;
    height: 42px;
}
.f3{
    /* width: 650px;
    height: 420px; */
    background-color: blue;
}
.s1{
    position: absolute;
    left: 250px;
    top: 50%;
}
.s2{
    position: absolute;
    right: 0%;
    top: 50%;
}
.f3 a:hover{
    background-color: blue;
    
}