<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: rgb(218, 217, 215);
}
b .baidu {
position: relative;
top: 120px;
left: 10px;
height: 30px;
width: 100px;
}
.search_form {
width: 800px;
height: 42px;
position: relative;
left: 120px;
}
/*左边输入框设置样式*/
.input_text {
width: 600px;
height: 40px;
border: 1px solid rgb(196, 199, 206);
/*清除掉默认的padding*/
padding: 0px;
/*提示字首行缩进*/
text-indent: 10px;
/*去掉蓝色高亮框*/
outline: none;
/*用浮动解决内联元素错位及小间距的问题*/
float: left;
}
.input_sub {
width: 100px;
height: 42px;
background: rgb(70, 98, 217);
/*去掉submit按钮默认边框*/
border: 0px;
/*改成右浮动也是可以的*/
float: left;
color: white;
/*搜索的字体颜色为白色*/
cursor: pointer;
/*鼠标变为小手*/
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.nav {
color: black;
position: relative;
left: 125px;
line-height: 50px;
font-size: 14px;
}
.nav a {
text-decoration: none;
line-height: 28px;
padding: 8px;
}
.nav a {
color: black;
margin: 0;
}
.nav .aa {
width: 20px;
height: 20px;
position: relative;
top: 5px;
}
.dd {
position: relative;
top: 45px;
left: 110px;
}
.bb {
width: 45px;
height: 45px;
background-color: rgb(255, 105, 0);
border-radius: 15px 15px 15px 15px;
}
.cc {
width: 32px;
height: 25px;
margin: 0 auto;
position: relative;
top: 12px;
left: 8px;
}
.ee {
position: relative;
bottom: 35px;
left: 64px;
font-size: 20px;
}
.ff {
width: 30px;
height: 20px;
background-color: rgb(78, 110, 242);
position: relative;
bottom: 56px;
left: 155px;
border-radius: 5px 5px 5px 5px;
color: rgb(255, 255, 255);
font-size: 18px;
}
.gg {
font-weight: 900;
font-size: 40px;
}
.hh {
text-indent: -10px;
line-height: 35px;
position: relative;
top: 15px;
}
.kk {
width: 250px;
height: 50px;
background-color: rgb(78, 110, 242);
position: relative;
top: 30px;
border-radius: 15px 15px 15px 15px;
}
.mm {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: rgb(255, 255, 255);
}
.ii {
position: relative;
bottom: 280px;
left: 600px;
width: 280px;
height: 280px;
background-color: rgb(255, 105, 0);
border-radius: 85px 85px 85px 85px;
position: relative;
}
.jj {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.nn {
width: 200px;
height: 330px;
background-color: rgb(255, 255, 255);
position: relative;
bottom: 560px;
left: 980px;
border-radius: 15px 15px 15px 15px;
display: block;
}
.pp {
width: 40px;
height: 40px;
position: relative;
top: 20px;
left: 20px;
display: block;
}
.oo {
position: relative;
left: 70px;
bottom: 12px;
}
.a {
position: relative;
left: 80px;
bottom: 15px;
}
.c {
width: 1000px;
height: 50px;
background-color: white;
align-self: center;
position: relative;
bottom: 480px;
left: 80px;
border-radius: 10px 10px 10px 10px;
}
.d {
position: relative;
bottom: 10px;
margin: 45px;
color: black;
}
.d:hover {
color: red;
}
.e {
margin: 15px;
position: relative;
left: 900px;
bottom: 30px;
}
</style>
</head>
<body>
<div>
<img class="baidu" src="1.png">
<form class="search_form">
<input type="text" name="usename" class="input_text" placeholder="小米官网" image="">
<!-- -->
<input type="submit" value="百度" class="input_sub">
</form>
<a class="e" href="#" style="text-decoration:none;color:black;">百度首页</a><a class="e" href="#" style="text-decoration:none;color:black;">设置</a>
</div>
<head>
<div class="nav">
<a href="#"><img class="aa" src="2.png">网页</a>
<a href="#"><img class="aa" src="3.png">资讯</a>
<a href="#"><img class="aa" src="10.png">视频</a>
<a href="#"><img class="aa" src="4.png">图片</a>
<a href="#"><img class="aa" src="5.png">知道</a>
<a href="#"><img class="aa" src="6.png">文库</a>
<a href="#">贴贴吧</a>
<a href="#"><img class="aa" src="8.png">地图</a>
<a href="#"><img class="aa" src="9.png">采购</a>
<a href="#"><img>更多</a>
</div>
</head>
<main>
<nav>
<div class="dd">
<div class="bb"><img class="cc" src="11.png"></div>
<div><a class="ee">小米官网</a></div>
<div><a class="ff">官方</a></div>
<div class="gg"><a>新十年  新气象</a>
<br>
<a>小米新LOGO</a>
</div>
<div class="hh"><a>“超椭圆”数字之美|“Alive”生命感设计|原研哉x小米|</a>
<br>
<a>Motion LOGO|字母LOGO</a>
</div>
<div class="kk"><a class="mm">了解更多</a></div>
</div>
</nav>
<article class="ii">
<img class="jj" src="11.png">
</article>
<aside>
<div class="nn"><img class="pp" src="12.png"><a class="oo">小米11 Ultra</a><img class="a" src="18.png">
<hr width="160" />
<img class="pp" src="13.jpg"><a class="oo">Redmik40</a><img class="a" src="17.png">
<hr width="160" />
<img class="pp" src="14.jpg"><a class="oo">智能生活</a><img class="a" src="17.png">
<hr width="160" />
<img class="pp" src="15.jpg"><a class="oo">智能新品</a><img class="a" src="17.png"></div>
</aside>
</main>
<footer>
<div class="c"> <a class="d" href="javascript:;" style="text-decoration:none;">进入官网</a>
<img src="21.png">
<a class="d" href="javascript:;" style="text-decoration:none;">MIUI12</a>
<img src="21.png">
<a class="d" href="javascript:;" style="text-decoration:none;">官网微博</a>
<img src="21.png">
<a class="d" href="javascript:;" style="text-decoration:none;">线下门店</a>
<img src="21.png">
<a class="d" href="javascript:;" style="text-decoration:none;">服务支持</a>
</div>
</footer>
<middle>
<div>
</div>
</middle>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
