<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #222;
}
div {
box-sizing: border-box;
}
/* 搜索栏 */
.serch_inex{
max-width: 540px;
min-width: 320px;
position: fixed;
top: 0;
left: 50%;
width: 100%;
height: 44px;
transform:translateX(-50%);
display: flex;
}
.serch{
flex: 1;
height: 26px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 6px 10px;
padding-left: 25px;
color: #ccc;
cursor: pointer;
}
.user{
width: 44px;
color: #14a7eb;
font-size: 12px;
text-align: center;
}
.user::before{
content: "";
display: block;
width: 23px;
height: 23px;
background: #000;
margin:4px auto 0;
border-radius: 50%;
}
/* 焦点图 */
.focus{
margin-top: 45px;
}
.focus img{
width: 100%;
height: 100px;
}
/* 局部导航栏 */
.local-nav{
height: 64px;
display: flex;
background:#fff;
margin: 3px 4px;
border-radius: 8px;
}
.local-nav li {
flex: 1;
background: #ccc;
}
.local-nav a{
display: flex;
flex-direction: column;
align-items: center;
}
.local-nav li [class^="local-nav-icon"]{
width: 32px;
height: 32px;
border-radius: 50%;
margin-top: 8px;
}
.local-nav-icon1{
background: #000;
}
.local-nav-icon2{
background: rgb(231, 129, 11);
}
.local-nav-icon3{
background: rgb(70, 224, 9);
}
.local-nav-icon4{
background: rgb(223, 12, 135);
}
.local-nav-icon5{
background: rgb(73, 4, 44);
}
</style>
<body>
<!-- 搜索栏 -->
<div class="serch_inex">
<div class="serch">搜索：-------</div>
<a href="https://www.cnblogs.com/zxh-bug" class="user">我 的</a>
</div>
<!-- 焦点图 -->
<div class="focus">
<img src="https://cdn.cnblogs.com/jsDelivr/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.8/dist/images/e58d9f9d0eee6d9b9add.webp" alt="">
</div>
<!--局部导航栏 -->
<ul class="local-nav">
<li>
<a href="#">
<span class="local-nav-icon1"></span>
<span>1</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon2"></span>
<span>2</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon3"></span>
<span>3</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon4"></span>
<span>4</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon5"></span>
<span>5</span>
</a>
</li>
</ul>
</body>
</html>
