<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米官方</title>
<style>
*{
margin:0;
padding:0;
}
.banner img{
width: 100%;
display: block;
}
.nav{
background-color: #333;
height:35px;
}
.nav a{
color: #b0b0b0;
text-decoration: none;
line-height: 35px;
font-size: 13px;
}
.nav .you{
float:right;
margin: 0 20px;
color: rgba(66,60,55);
}
.nav .you a{
margin:0 10px;
}
.nav .zuo{
float: left;
margin:0 20px;
color: rgba(66,60,55);
}
.nav .zuo a{
margin:5px;
}
.nav .you .guowuche{
background-color: rgba(66,66,66);
}
.gwcxs:hover .guowuche{
background-color: #fff;
}
.guowuche:hover a{
color:rgba(255,103,0);
}
.gwcxs{
float:right;
}
.header{
height:100px;
background-color: rgba(255, 255, 255);
border: 1px solid gray;
font-size:20px;
position: relative;
}
.header img{
display:block;
height:px;
}
.logo img{
background-color: rgba(255, 103, 0);
width:50px;
margin: 28px 10px;
}
.logo{
display:inline-block;
}
.logo3 {
display:inline-block;
margin: 25px 10px;
}
.zhonglei{
display:inline-block;
margin-top: 37px;
position: absolute;
}
.zhonglei a{
text-decoration: none;
color: rgba(51, 51, 51);
font-size:16px;
margin-left: 15px;
}
.sousuo{
border: 2px solid rgb(224, 224, 224);
width:50px;
height: 50px;
float: right;
}
</style>
</head>
<body>
<div class="banner"><img src="https://img.uj5u.com/2020/11/07/153836070731451.jpg"></div>
<div class="nav">
<div class="zuo">
<a href="">小米商城</a>|
<a href=""> MIUI</a>|
<a href="">IoT</a>|
<a href="">云服務</a>|
<a href="">天星數科</a>|
<a href="">有品</a>|
<a href="">小愛開放平臺</a>|
<a href="">企業團購</a>|
<a href="">資質證照</a>|
<a href="">協議規則</a>|
<a href="">下載app</a>|
<a href="">智能生活</a>|
<a href="">Select Location</a>
</div>
<div class="you">
<a href="">登入</a>|
<a href="">注冊</a>|
<a href="">訊息通知</a>
<div class="gwcxs">
<div class="guowuche you">
<a href="">購物車(0)</a>
</div>
</div>
</div>
</div>
<div class=header>
<div class="logo">
<a href=""><img src="https://img.uj5u.com/2020/11/07/153836070731452.png"></a>
</div>
<div class="logo3">
<a href=""><img src="https://img.uj5u.com/2020/11/07/153836070731453.gif"></a>
</div>
<div class="zhonglei">
<a href="">小米手機</a>
<a href="">Redmi 紅米</a>
<a href="">電視</a>
<a href="">筆記本</a>
<a href="">家電</a>
<a href="">路由器</a>
<a href="">智能硬體</a>
<a href="">社區</a>
<a href=""></a>
<a href=""></a>
<input type="text" style="width:200px; height:50px;" class="wenben">
<input type="submit" class="sousuo" value="https://bbs.csdn.net/topics/搜索">
</div>
</div>
</body>
</html>
這里右浮動向左偏移了一點，為什么呀？
.sousuo{
border: 2px solid rgb(224, 224, 224);
width:50px;
height: 50px;
float: right;
}
uj5u.com熱心網友回復：
你提出來的是這段代碼就畫了一個 長50寬50個像素的框啊 邊框線2個像素顏色224，224，224轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/205264.html
標籤：HTML(CSS)
上一篇：（vue頁面中）資料可視化把一天的24小時根據狀態展示為24個小方塊，紅色代表有問題 滑鼠放上去會浮動出一個小時的詳細圖表