返回一个小导航练习......登陆

一个小导航练习,请老板指导,谢谢。

你想什么呢2019-06-23 21:37:39126

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>导航练习</title>

<!-- <link rel="stylesheet" type="text/css" href="./shortcut.css">

<link rel="stylesheet" href="./iconfont.css"> -->

    <style type="text/css">


* {

    margin: 0;

    padding: 0;

    color: #424242;

    list-style: none;

}


a {

    text-decoration: none;

}


/*--2019-06-23-头部-start--*/


.header {

    min-width: 1200px;

    height: 38px;

    line-height: 38px;

    background-color: #f8f8f8;

    font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

    position: relative;

    z-index: 411;

}


.container {

    width: 1200px;

    margin: 0 auto;

}


.header-navleft {

    float: left;

    

}


.header-navleft ul li {

    float: left;

    line-height: 38px;

    text-align: center; /*字体居中*/

    position: relative;

}


.header  a:hover {

    color: #1c86ee;

}


.header a {

    color: #7D7D7D;

    font-size: 13px;

    padding: 0px 10px 0px 10px;

    /*background-color: #dddddd;*/

}


.header li:before {

    content: "";

    width: 1px;

    height: 10px;

    display: block;

    position: absolute;

    top: 14px;

    left: 0;

    background: #d3d3d3;

}


.header li:first-child:before {

    display: none; /*首元素隐藏*/

}


.header-navright {

    float: right;


}


.header-navright ul li {

    float: left;

    line-height: 38px;

    text-align: center center;

    position: relative;

}


.nav1 a {

    padding: 13px 10px 10px 10px;

}


.header  a:hover i {

    color: #1c86ee;

}


.header-navright-gouwuche a:hover {

    background-color: #ffffff;

}


.header-navright-gouwuche a:hover span {

    color: #1c86ee;

}


.header-navright li:last-child:before {

    display: none; /*后子元素隐藏*/

}


/*--2019-06-23-隐藏迷你购物车-start--*/


.header-b {

    display: none;

    width: 300px;

    height: 150px;

    position: absolute;

    top: 38px;

    right: 0;

    background: #fff;

    box-shadow: 0 2px 38px 0 rgba(0,0,0,0.08);

    border-radius: 8px 0 8px 8px;

    text-align: center;

}


.nav1 {

    height: 38px;

    position: relative;

    background-color: #DFDFDF;

}


.nav1:hover {

    background-color: #ffffff;

}


.nav1:hover .header-b {

    display: block;

}


.header-b span {

    line-height: 150px;

}


/*--2019-06-23-隐藏迷你购物车-end--*/



/*--2019-06-23-头部-end--*/

</style>


</head>

<body>

<!-- 2019-06-23-头部-start-->

    <div class="header">

    <div class="container">

    <div class="header-navleft">

    <ul>

    <li >

    <a href="#">html</a>

    </li>

    <li>

    <a href="#">css</a>

    </li>

    <li>

    <a href="#">js</a>

    </li>

    <li>

    <a href="#">php</a>

    </li>

    <li>

    <a href="#">go</a>

    </li>

    <li>

    <a href="#">vue.js</a>

    </li>

    </ul>

    </div>

    <div class="header-navright">

    <ul>

    <li>

    <a href="#">请登录</a>

    </li>

    <li>

    <a href="#">注册</a>

    </li>

    <li>

    <a href="#">

        <i class="iconfont icon-xiaoxizhongxin">

        </i>消息通知</a>

    </li>

    <li class="header-navright-gouwuche">

                        <div class="nav1">

                            <div>

                              <a href="#">

                               <i class="iconfont icon-gouwuche">

                               </i>&nbsp;购物车

                               <span>(0)</span>

                              </a>

                            </div>

                            <div class="header-b">

                                <span>您的购物车是空的,赶紧选购吧~</span>

                            </div>

                        </div>

    </li>

    </ul>

    </div>

    </div>

    </div>

    <!-- 2019-06-23-头部-end -->

</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网