前端浏览器，屏幕自适应技巧以及导航技巧

1、图片：只需要设置宽度（因为图片本身已有尺寸，只需设置合适宽度，高度图片会自适应）

2、图示效果实现

html

<div class="nav_mid">
<ul>
<li><a style="color: white;" class="show_1" href="index.html">首页</a></li>
<li><a href="html/Products_services.html">产品与服务</a></li>
<!--<li><a href="html/blog.html">官方博客</a></li>-->
<li><a href="html/About_us.html">关于我们</a></li>
<li><a href="html/Contact_us.html">联系我们</a></li>
</ul>
</div>

css

.nav_mid li{
    float: left;
    list-style-type: none;
    width: 100px;
    text-align: center;
    line-height: 30px;
}

.nav_mid li a{
    color: #000000;
}

.nav_mid a:link{
    font-size: 1em;
    text-decoration: none;
    font-family: "微软雅黑";
}

.nav_mid a:visited{
    background-color: #196BA9;
}

.nav_mid a:hover, .nav_mid a:active{
    font-size: 1em;
    background-color: #196BA9;
    text-decoration: none;
    font-family: "微软雅黑";
    color: white;
    border-radius:15px;
    display: block;
}


.show_1{
    font-size: 1em;
    background-color: #196BA9;
    text-decoration: none;
    font-family: "微软雅黑";
    color: white;
    border-radius:15px;
    display: block;
}

3、导航居中

.nav_mid{
    width: 50%;
    float: left;
    height: 80px;
    padding-top: 20px;
    text-align: center;
}

.nav_mid {
    text-align:center;
}
.nav_mid ul {
    display:inline-block;
}
.nav_mid li {
    float:left;
}
.nav_mid li + li {
    margin-left:20px;
}