web作业04

最新推荐文章于 2024-08-29 19:36:49 发布

sjsyg

最新推荐文章于 2024-08-29 19:36:49 发布

阅读量39

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/sjsyg/article/details/131637146

版权

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./yangshi.css">
</head>
<body>
    <div class="first">
        <div class="second">
            <div class="third third1"><img src="images/微信图片_20230710101833.png"></div>
            <div class="third third2">
                <ul>
                    <li></li>
                    <li><a href="#">Xiaomi手机</a></li>
                    <li><a href="#">Redmi手机</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>
            <div class="third third3">
                <form url="#">
                    <input type="text" name="" id="">
                    <button>搜索</button>
                </form>
            </div>
        </div>
        <div class="liu">
            <div class="ni1">
                <ul>
                    <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>
            <div class="ni2"><img src="images/0942f8338bc19a2cde9394479fc123c8.webp">
                <button></button>
            </div>
        </div>
    </div>
</body>
</html>

CSS

*{
    margin:0;
    padding:0;
}
a{
    text-decoration: none;
}
.second{
    width: 1226px;
    height: 100px;
    display: flex;
    align-content: center;
    justify-content:space-between;
}
.third1{
    width: 56px;
    height: 100px;
}
.third1 img{
    width: 100px;
    height: 100px;
}
.third2{
    width: 850px;
    height: 100px;
    display: flex;
    justify-content: space-around;
}
.third2 ul li {
    height: 100px;
    width: 90px;
    line-height: 100px;
    list-style: none;
}
.third2 ul{
    display: flex;
    flex-wrap: wrap;
    width: 1130px;
    height:100px;
}
.third2 ul li {
    height: 100px;
    line-height: 100px;
    list-style: none;
}
.third2 ul li:nth-child(1) {
    width: 142px;
}
.third2 ul li:nth-child(2) {
    width: 100px;
}
.third2 ul li:nth-child(3) {
    width: 98px;
}
.third2 ul li:nth-child(4) {
    width: 52px;
}
.third2 ul li:nth-child(5) {
    width: 68px;
}
.third2 ul li:nth-child(6) {
    width: 52px;
}
.third2 ul li:nth-child(7) {
    width: 52px;
}
.third2 ul li:nth-child(8) {
    width: 68px;
}
.third2 ul li:nth-child(9) {
    width: 84px;
}
.third2 ul li:nth-child(10) {
    width: 52px;
}
.third3{
    width: 400px;
    height: 100px;

}
input{
    width: 250px;
    height: 30px;
}
.third3 button{
    width: 30px;
    height: 30px;
}
.liu{
    display: flex;
    width: 1226px;
    height: 460px;
}
.ni1 ul{
    width: 234px;
    height: 460px;
    display: flex;
    flex-wrap:wrap;
    background-color:beige;
    align-content: space-between;
}
.ni1 ul li{
    text-align: center;
    line-height: 42px;
    width: 234px;
    height: 42px;
    display: flex;
}
.ni2 img{
    height: 460px;
}