仿作小米官网-乞丐版

最新推荐文章于 2023-08-18 01:51:43 发布

EX_small_white

最新推荐文章于 2023-08-18 01:51:43 发布

阅读量191

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/EX_small_white/article/details/125839207

版权

这几天学习进度落了很多，导致做的时候很不流畅，很多都不会，都要用到后面的浮什么的，所以我用仅存的知识做了个丐版的

完整代码为

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body{

margin: 0;

padding: 0;

}

.box1{

width: 2538px;

height: 107px;

background: black url(20220717183052.png) no-repeat 360px 20px;

}

.box1 a{

line-height: 90px;

width: 140px;

text-decoration: none;

color: white;

display: inline-block;

/* background-color: purple;*/

font-size:18px;

font-weight:bold;

}

.container{

width: 1900px;

height: 90px;

/* background-color: red; */

display: block;

margin:0 auto;

}

.picture1{

background:url(20220717181807.png) no-repeat center top;

width: 2538px;

height: 1370px;

display: block;

}

.picture2{

background:url(20220717181837.png) no-repeat center top;

width: 2538px;

height: 1370px;

display: block;

}

.picture3{

background:url(20220717181903.png) no-repeat center top;

width: 2538px;

height: 1370px;

display: block;

}

.picture4{

background:url(20220717181940.png) no-repeat center top;

width: 2538px;

height: 1370px;

display: block;

}

.box6{

margin:0 auto;

width: 1750px;

height: 490px;

/*background-color: aqua;*/

}

.quyu1{

width:260px;

height:490px;

float:left;

/*background-color: brown;*/

margin-right:20px;

}

.quyu2{

width:260px;

height:490px;

margin-right:0px;

/*background-color:blueviolet;*/

}

.diyikuai{

display:block;

height: 36px;

color:black;

text-decoration: none;

/* background-color: yellow;*/

}

.xuan{

display:block;

height: 84px;

/*background-color: blue;*/

font-size:25px;

}

.rengong{

display: block;

width: 250px;

height: 490px;

background: url(20220717221226.png) no-repeat 2px 85px;

}

.box7{

/* background-color: aquamarine;*/

width: 1930px;

height: 162px;

margin:0 auto;

background: url(20220717223004.png) no-repeat 44px 65px;

}

.at1{

width: 1530px;

height: 190px;

/*background-color: blue;*/

margin:0 auto;

}

.at1 a{

color:black;

text-decoration: none;

}

.at1 .jin{

color:rgb(132, 132, 127);

}

.box8

{

margin:0 auto;

width:500px;

height: 100px;

/*background-color:black;*/

}

.last{

display: block;

width:500px;

height: 52px;

background: url(20220717231416.png) left 1px;

}

.container a:hover{

color:orange;

text-decoration: none;

}

.box6 a:hover{

color:orange;

text-decoration: none;

}

.box7 a:hover{

color:orange;

text-decoration: none;

}

</style>

</head>

<body>

<span><a href="#" class="m">小艾开放平台</a></span>

</div>

</div>

</div>

</div>

</div>

</div>

<div ><a href="#" class="diyikuai">维修服务价格</a></div>

</div>

<div ><a href="#" class="diyikuai">维修服务价格</a></div>

</div>

<div ><a href="#" class="diyikuai">维修服务价格</a></div>

</div>

<div ><a href="#" class="diyikuai">维修服务价格</a></div>

</div>

</div>

<p><a href="#" class="jin">京ICP证110507号</a>  <a href="#" class="jin">京ICP证110507号</a>  <a href="#" class="jin">京ICP证110507号</a>  <a href="#" class="jin">京ICP证110507号</a>  <a href="#" class="jin">京ICP证110507号</a>&nbsp</p>

<p class="jin">违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>

</div>

</body>

</html>

效果图还行，正版该有的功能的盗版的都有，点击文字链接变色也有，当时这个差点忘记做了