~~~
<style>
*{margin:0;padding:0}
.nav{
background: #eee;
height: 50px;
}
.nav-wrap{
position: relative;
height:50px;
width:1000px;
line-height: 50px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.left,.right{
position: absolute;
height:50px;
width:100px;
top:0px;
display: inline-flex;
align-items:center;
font-size: 12px;
}
.left{
left:0px;
}
img{
width: 19px;
height:19px;
}
.right{
right:0px;
}
a{
text-decoration: none;
color:black;
}
.center>a{
font-size: 16px;
}
.left>span,.right>span{
margin-left:5px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-wrap">
<div class="left">
<img src="images/location.png" alt="">
<span>深圳</span>
<span><切換></span>
</div>
<div class="center">
<a href="#">首頁</a>
<a href="#">首頁</a>
<a href="#">首頁</a>
</div>
<div class="right">
<img src="images/adm.png" alt="">
<span>個人中心</span>
</div>
</div>
</div>
</body>
~~~
- html-css
- 第一節 外部樣式表
- 第二節 元素選擇器
- 第三章 盒子模型
- 第四章 html標簽的分類
- 第五章 css選擇器
- 第六章 權重
- 第七章 css基本樣式
- 第一節 背景
- 第二節 文本
- 第三節 字體
- 第四節 鏈接
- 第五節 列表（針對ul）
- 第六節 邊框
- 第七節 簡單表格
- 第八節 nvvm
- 第九節 跨越列的表格
- 第十節 跨越行的表格
- 第十一節 有間隔的表格
- 第十二節 opacity透明度
- 第八章 css樣式的繼承
- 進階教程
- 1.flex教程
- flex補充1
- flex補充2
- 2.grid布局
- css
- 第一節 box-sizing
- 第二節 float
- 第三節 position
- 第四節 導航欄
- iconfont的使用
- 第五節 搜索功能的實現