web第二次作业

wsybqc

于 2024-04-21 14:55:04 发布

阅读量537

点赞数 11

文章标签： css

本文链接：https://blog.csdn.net/wsybqc/article/details/138033922

版权

小米布局练习：
<!DOCTYPE html>

<head>

<title>小米布局练习</title>

</head>

<body>

<a href="#">小米澎湃OS</a>

<a href="#">小爱开放平台</a>

<a href="#">下载app</a>

<a href="#">Select Location</a>

</div>

</div>

<ul>

<li><a href="">xiaomi手机</a></li>

<li><a href="">redmi手机</a></li>

</ul>

</div>

<span>

</svg>

</span>

</form>

</div>

<div class="left1"><a href="#">笔记本平板</a></div>

<div class="left1"><a href="#">智能路由器</a></div>

</ul>

</div>

</div>

</body>

</html>

CSS：
.header{
width: 1226px;
height: 140px;
background-color: #f13105;
}
.top{
width: 1226px;
height: 40px;
background-color: #cddb0b;
}
.nav{
width: 767px;
height: 40px;
background-color: #da822a;
float: left;
}
.info{
width: 142px;
height: 40px;
background-color: #1ed75c;
float: right;
}
.cart{
width: 120px;
height: 40px;
background-color: #1263e4;
float: right;
}

.header1{
width: 1226px;
height: 100px;
background-color: #794475;
}
.logo{
width: 56px;
height: 56px;
background-color: #ec5407;
float: left;
position: relative;
top: 25%;
left: 1%;

}
.headerNav{
width: 850px;
height: 100px;
background-color: #0ad195;
float: right;
}
.search{
width: 296px;
height: 50px;
background-color: #980b9d;
float: right;
position: relative;
top:25%
}

*{
padding: 0;
margin: 0 auto;
}

.home{
width: 1226px;
height: 644px;
background-color: #139b85;
}

.dig{
width: 1226px;
height: 460px;
background-color: #1da644;
position: relative;
}

.category{
width: 234px;
height: 460px;
background-color: #d6c7c79c;
float: left;
}

ul{
width: 234px;
height: 460px;
background-color: #d6c7c79c;
}

ul li{
width: 234px;
height: 42px;
background-color: #fff;
position: relative;
top: 15px;
list-style: none;
}

.left{
width: 41px;
height: 69px;
background-color: #4e07f1;
display: inline-block;
position: absolute;
top:40%;
}
.right{
width: 41px;
height: 69px;
background-color: #4e07f1;
display: inline-block;
position: absolute;
top:40%;
right: 240px;
}

.small{
width: 1226px;
height: 170px;
background-color: #100101;
float: left;
display: flex;
justify-content: space-between;
}
.a{
width: 300px;
height: 170px;
background-color: #976c97;
display: inline-block;
}

js倒计时：

wsybqc

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
web第二次作业

<a href="#">手机</a></div><div class="left1"><a href="#">笔记本平板</a></div><div class="left1"><a href="#">智能路由器</a></div><div class="left1"><a href="#">电视</a></div><div class="left1"><a href="#">家电</a><a href="">电视</a>
复制链接

扫一扫