定位
允许定义的标签相对于其正常位置,或者相对于父标签,另一个标签甚至浏览器窗口本身而出现的位置.
相对定位
相对于它的起点进行移动,移动后的原来位置还被占用.
通过 position:relation;开启相对定位.left right top bottom四个属性来设置标签的偏移量.
特点:
1.相对定位是相对于标签在文档流中原来的位置进行定位
2.相对定位的标签不会脱离文档流
绝对定位
不占空间,运用了绝对定位的标签会脱离原来的文档流,浮动起来.
通过 posistion:absolute;开启绝对定位.left right top bottom四个属性来设置标签的偏移量.
特点:
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签
的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位.
固定定位
通过 posistion:fixed;开启绝对定位.left right top bottom四个属性来设置标签的偏移量.
尝试模仿小米官网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="./css/小米官网113/小米官网徐康杰113.css" rel="stylesheet"/>
</head>
<body>
<!-- 导航顶部开始 -->
<div class="top_pliot">
<div class="top_pliot_">
<div class="top_pliot_left">
<a href="https://www.mi.com/">小米官网</a>
<a href="https://www.mi.com/shop">小米商场</a>
<a href="https://hyperos.mi.com/">小米澎湃OS</a>
<a href="https://www.xiaomiev.com/">小米汽车</a>
<a href="https://i.mi.com/">云服务</a>
<a href="https://iot.mi.com/">loT</a>
<a href="https://youpin.mi.com/">有品</a>
<a href="https://xiaoai.mi.com/">小爱开放平台</a>
<a href="https://www.mi.com/aptitude/list/?id=88">资质证照</a>
<a href="https://www.mi.com/aptitude/list/">协议规则</a>
<a href="https://www.mi.com/appdownload/">下载app</a>
<a>Select Location</a>
</div>
<div class="top_pliot_right">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
<span><img src="img/gouwuchekong (2).png"/>购物车</span>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- 导航顶部结束 -->
<!-- 导航开始 -->
<div style="width: 1400px; margin: auto;">
<div class="_pliot_picture"><img src="img/logo-mi2.png" width="56px" height="56px"/></div>
<div class="_pliot"><span>Xiaomi手机</span></div>
<div class="_pliot"><span>Redmi手机</span></div>
<div class="_pliot"><span>电视</span></div>
<div class="_pliot"><span>笔记本</span></div>
<div class="_pliot"><span>平板</span></div>
<div class="_pliot"><span>家电</span></div>
<div class="_pliot"><span>路由器</span></div>
<div class="_pliot"><span>服务中心</span></div>
<div class="_pliot"><span>社区</span></div>
<div class="_pliot_">
<input type="text" placeholder="请输入" class="sousuo1">
<img src="img/搜索 (1).png"/ style="width:45px; height: 45px;" class="sousuo">
</div>
<div style="width: 250px;" class="list_1">
<form id="ax">
<div class="top1"></div>
<div class="a1">手机</div>
<div class="a1">电视</div>
<div class="a1">家电</div>
<div class="a1">笔记本 平板 显示器</div>
<div class="a1">出行 穿戴</div>
<div class="a1">耳机 音箱</div>
<div class="a1">健康 儿童</div>
<div class="a1">生活 箱包</div>
<div class="a1">智能 路由器</div>
<div class="a1">电源 配件</div>
<div class="bottom1"></div>
<div class="right1"><img src="img/右箭头.png"/></div>
<div class="right2"><img src="img/右箭头.png"/></div>
<div class="right3"><img src="img/右箭头.png"/></div>
<div class="right4"><img src="img/右箭头.png"/></div>
<div class="right5"><img src="img/右箭头.png"/></div>
<div class="right6"><img src="img/右箭头.png"/></div>
<div class="right7"><img src="img/右箭头.png"/></div>
<div class="right8"><img src="img/右箭头.png"/></div>
<div class="right9"><img src="img/右箭头.png"/></div>
<div class="right10"><img src="img/右箭头.png"/></div>
</form>
<div class="pliot_picture">
<img src="img/ab.png" style="width: 1150px;height: 440px;"/>
<div class="pliot_picture_right">></div>
<div class="pliot_picture_left"><</div>
<div class="pliot_picture_bottom">. . . .</div>
</div>
</div>
<div class="list_2">
<table align="center" class="table_" >
<tr>
<td >
<img src="img/x1.png" style="width: 25px;"/>
</td>
<td>
<img src="img/x2.png" style="width: 25px;"/>
</td>
<td>
<img src="img/x3.png" style="width: 25px;"/>
</td>
</tr>
<tr>
<td>
<a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search" class="a2">
保障服务
</a>
</td>
<td>
<a href="https://business.qiye.mi.com/" class="a2">
企业团购
</a>
</td>
<td>
<a href="https://www.mi.com/order/fcode" class="a2">
F码通道
</a>
</td>
</tr>
<tr>
<td>
<img src="img/x4.png" style="width: 25px;"/>
</td>
<td>
<img src="img/x5.png" style="width: 25px;"/>
</td>
<td>
<img src="img/x6.png" style="width: 25px;"/>
</td>
</tr>
<tr>
<td>
<a href="https://10046.mi.com/" class="a2">
米粉卡
</a>
</td>
<td>
<a href="https://www.mi.com/a/h/16769.html" class="a2">
以旧换新
</a>
</td>
<td>
<a href="https://recharge.10046.mi.com/" class="a2">
话费充值
</a>
</td>
</tr>
</table>
<div>
<img src="img/p3.png" style="height: 200px;" class="picture_1"/>
</div>
<div>
<img src="img/p2.jpg" style="height: 200px;" class="picture_2"/>
</div>
<div>
<img src="img/p1.png" style="height: 200px;" class="picture_3"/>
</div>
</div>
</div>
<div class="list_3">
<div class="picture_4">
<img src="img/30.webp" style="width: 1400px; height: 150px;"/>
<div class="k1"><img src="img/k1.png" style="width: 250px; height: 600px;"/>
<div class="k2"><img src="img/k2.webp" style="width: 160px;height: 160px;"/><br/>Xiaomi 15</div>
<div class="k3"><img src="img/k3.webp" style="width: 160px;height: 160px;"/><br/>Xiaomi 15 Pro</div>
<div class="k4"><img src="img/k4.webp" style="width: 160px;height: 160px;"/><br/>Xiaomi 15 定制版</div>
<div class="k5"><img src="img/k5.webp" style="width: 160px;height: 160px;"/><br/>Redmi Note 14 Pro+</div>
<div class="k6"><img src="img/k6.webp" style="width: 160px;height: 160px;"/><br/>Redmi NOte 14 Pro</div>
<div class="k7"><img src="img/k7.webp" style="width: 160px;height: 160px;"/><br/>Redmi K70 至尊版</div>
<div class="k8"><img src="img/k8.webp" style="width: 160px;height: 160px;"/><br/>Xiaomi MIX Flip</div>
<div class="k9"><img src="img/k9.webp" style="width: 160px;height: 160px;"/><br/>Xiaomi MIX Fold 4</div>
</div>
</div>
</div>
<div class="sjapp">
<img src="img/sjapp.png" style="width: 45px; height: 45px;"/><br />手机APP
</div>
<div class="grzx">
<img src="img/grzx.png" style="width: 45px; height: 45px;"/><br />个人中心
</div>
<div class="shfw">
<img src="img/shfw.png" style="width: 45px; height: 45px;"/><br />售后服务
</div>
<div class="rgkf">
<img src="img/rgkf.png" style="width: 45px; height: 45px;"/><br />人工客服
</div>
<div class="gwc">
<img src="img/gwc1.png" style="width: 45px; height: 45px;"/><br />购物车呢
</div>
</body>
</html>/* 公共代码 */
*{
padding: 0;
margin: 0;
}
/* 导航顶部开始 */
.top_pliot{
background-color: #333333;
min-width: 1400px;
font-size: 14px;
padding: 10px 0;
color: gainsboro;
}
.top_pliot_{
margin: 0 auto;
width:1400px;
}
.top_pliot_left{
float: left;
}
.top_pliot_right{
float: right;
}
.top_pliot_ a{
color: gainsboro;
text-decoration:none;
}
/* 导航顶部结束*/
/* 导航开始 */
._pliot{
float: left;
padding: 20px;
margin: 20px auto;
}
._pliot:hover{
color: #ED732D;
}
._pliot_picture{
margin-right: 140px;
margin-top: 20px;
float: left;
}
.sousuo1{
width: 200px;
height: 50px;
margin-left: 100px;
}
._pliot_{
margin: 0 auto;
padding-top: 10px;
}
.sousuo{
margin: 0 auto;
}
/* 导航结束 */
/* 左列表 */
#ax{
background-color: #A3A1A1;
line-height: 40px;
color: white;
}
.a1{
padding-left: 30px;
}
.a1:hover{
background-color: #ED732D;
}
.top1{
height: 20px;
}
.bottom1{
height: 20px;
}
.list_1{
margin-top: 20px;
position: relative;
}
.right1{
position: absolute;
right: 5px;
top: 25px;
}
.right2{
position: absolute;
right: 5px;
top: 65px;
}
.right3{
position: absolute;
right: 5px;
top: 105px;
}
.right4{
position: absolute;
right: 5px;
top: 145px;
}
.right5{
position: absolute;
right: 5px;
top: 185px;
}
.right6{
position: absolute;
right: 5px;
top: 225px;
}
.right7{
position: absolute;
right: 5px;
top: 265px;
}
.right8{
position: absolute;
right: 5px;
top: 305px;
}
.right9{
position: absolute;
right: 5px;
top: 345px;
}
.right10{
position: absolute;
right: 5px;
top: 385px;
}
.pliot_picture{
position: absolute;
top: 0px;
left: 250px;
}
.pliot_picture_right{
position: absolute;
right: 0px;
top: 174px;
font-size: 70px;
}
.pliot_picture_left{
position: absolute;
left: 0px;
top: 174px;
font-size: 70px;
}
.pliot_picture_left,.pliot_picture_right{
color: #DEDEDE;
font-weight: 2;
}
.pliot_picture_right:hover{
background-color: gray;
}
.pliot_picture_left:hover{
background-color: gray;
}
.pliot_picture_bottom{
position: absolute;
bottom: 10px;
right: 25px;
color: dimgray;
font-size: 70px;
}
.a2{
text-decoration:none;
color: #C5C2C0;
}
.list_2{
background-color: #5E5751;
width:250px ;
margin-top:20px;
margin-bottom: 20px;
position: relative;
height: 200px;
line-height: 50px;
}
.picture_1{
position: absolute;
width: 350px;
left: 285px;
top: 0;
}
.picture_2{
position: absolute;
width: 350px;
left: 670px;
top: 0;
}
.picture_3{
position: absolute;
width: 350px;
left: 1050px;
top: 0;
}
.list_3{
background-color: gainsboro;
min-width: 1400px;
margin: 0 auto;
height: 6000px;
}
.picture_4{
padding-top: 20px;
margin: 0 auto;
width: 1400px;
position: relative;
}
.k1{
position: relative;
padding-top: 80px;
}
.k2{
position: absolute;
top: 100px;
left: 400px;
text-align: center;
}
.k3{
position: absolute;
top:100px ;
left:650px ;
text-align: center;
}
.k4{
position: absolute;
top: 100px;
left: 900px;
text-align: center;
}
.k5{
position: absolute;
top: 100px;
left: 1150px;
text-align: center;
}
.k6{
position: absolute;
top: 400px;
left: 400px;
text-align: center;
}
.k7{
position: absolute;
top:400px ;
left:650px ;
text-align: center;
}
.k8{
position: absolute;
top: 400px;
left: 900px;
text-align: center;
}
.k9{
position: absolute;
top: 400px;
left: 1150px;
text-align: center;
}
.span{
align:center;
}
.sjapp{
background-color: white;
font-size: 15px;
position: fixed;
top: 450px;
right: 1px;
border:1px gainsboro solid;
}
.grzx{
background-color: white;
font-size: 15px;
position: fixed;
top: 520px;
right: 1px;
border:1px gainsboro solid;
}
.shfw{
background-color: white;
font-size: 15px;
position: fixed;
top: 590px;
right: 1px;
border:1px gainsboro solid;
}
.rgkf{
background-color: white;
font-size: 15px;
position: fixed;
top: 660px;
right: 1px;
border:1px gainsboro solid;
}
.gwc{
background-color: white;
font-size: 15px;
position: fixed;
top: 730px;
right: 1px;
border:1px gainsboro solid;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
