Practical Training Demo1-顶部首页导航（10.29）

HTML内容部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/head.css" />
        <!-- html5和js 的存储 --->
        <script type="text/javascript">
            window.onload = function() {
                var as = document.querySelectorAll(".line3 a");
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        localStorage.setItem("name", this.name);
                    }
                    as[i].className = "";
                }
                var name = localStorage.getItem("name") || "a1";
                var a = document.getElementsByName(name)[0];
                a.className = "active";
            }
        </script>
    </head>
    <body>
        <div class="head">
            <!-- 标准的三行 -->
            <!-- flxt布局  标准的web的前端写用的代码布局 -->
            <div class="line1">
                <span class="log">
                    <img src="img/logo/yinLogo.png">
                </span>
                <!-- ul>(li>a[href=#]{购物须知})*3 -->
                <ul>
                    <li><a href="#">官方微博</a></li>
                    <li><a href="#">关注微信</a></li>
                    <li><a href="reading.html" target="_top">购物须知</a></li>
                </ul>
            </div>
            <div class="line2">
                <!-- span.log+span.search+ul>li*3 -->
                <span class="log">
                    <img src="img/logo/shop-logo-v1.png">
                </span>
                <div>
                    <input type="text" class="search" />
                    <span class="btn"></span>
                </div>
                <ul>
                    <!-- login 登录 -->
                    <li><img class="login" src="img/icon/avatar.png"><a href="login-1.html" target="_top">登录</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><img class="cart" src="img/icon/cart-logo-v1.png"><a href="#">购物车</a></li>
                </ul>
            </div>
            <hr>
            <div class="line3">
                <!-- span.title+ul>(li>a[href=#]{首页})*8 -->
                <span class="title"><a href="#">艺人分类</a></span>
                <ul>
                    <li><a href="index.html" class="active" target="_top" name="a1">首页</a></li>
                    <li><a href="list.html" target="_top" name="a2">专辑</a></li>
                    <li><a href="#" name="a3">明星周边</a></li>
                    <li><a href="#" name="a4">明星同款</a></li>
                    <li><a href="#" name="a5">个护美妆</a></li>
                    <li><a href="#" name="a6">影漫周边</a></li>
                    <li><a href="#" name="a7">食品</a></li>
                    <li><a href="#" name="a8">服装配饰</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS内容部分：

body {
    margin: 0;
}

.head {
    background-color: #222;
}

.head ul {
    padding-left: 0;
}

.head ul li {
    display: inline-block;
}

.head a {
    text-decoration: none;
    color: white;
    /* 把a变成块级标签 变成父容器 */
    /* display: inline-block; */
    display: block;
}

.head .line1 {
    background-color: #000;
    /* 以下三行代码为flex布局内容  --现在flex布局优势：简单 多用 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.head .line1 .log {
    margin-left: 160px;
}

.head .line1 ul {
    margin-right: 100px;
}

.head .line1 li {
    width: 120px;
    text-align: center;
    border-right: 1px solid #999999;

}

.head .line1 li a {
    color: #999999;
    /* display: inline-block; */
}

.head .line1 li:last-child {
    border-right: none;
}

/* 第二行 */
.head .line2 {
    width: 1000px;
    margin: 0 auto;
    /* flex布局 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.head .line2 div {
    position: relative;
}

.head .line2 .search {
    display: inline-block;
    width: 435px;
    height: 40px;
    border: none;
    background: url(../img/icon/search_icon.png);
    background-position: 0 -43px;
    /*  */
    /* text-align: right; */
    outline: none;
    color: #FFFFFF;
    font-size: 16px;
    padding-left: 16px;
}

.head .line2 .btn {
    display: inline-block;
    width: 32px;
    height: 40px;
    background-color: #FFFFFF;
    position: absolute;
    background: url(../img/icon/search_icon.png);
    background-position: -454px 0px;
    right: 10px;
}

/* hover --鼠标放在上面的 --一般按钮放hover */
/* focus  --- 光标 选中之后可以有变化 */
.head .line2 .search:focus {
    background-position: 0 1px;
    color: #333333;
}

.head .line2 .search:focus+.btn {
    background-position: -456px -43px;
    /* background-color: red; */
}

/* 
 +第一个兄弟节点
 ~后面所有的兄弟节点
 */

.head .line2 ul li {
    margin: 0 15px;
}

.head .line2 li a {
    display: inline-block;
}
/* 两个图片  两个登录和购物车的图片 */
.head .line2 li img{
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align: middle;
    margin-right: 10px;
}
/* 响应式布局  */
.head hr{
    /* hr--本身是带有两个边框的，若想更改需要先更改边框为0之后在自己写 */
    border: none;
    border-bottom: 1px solid #999;
    margin-bottom: 0;
}
.head .line3{
    width: 1000px;
    margin: 0 auto;
    /* flex布局 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.head .line3 .title a{
    display: block;
    background-color: #000000;
    line-height: 53px;
    width: 120px;
    text-align: center;
}
.head .line3 ul{
    margin: 0;
}
.head .line3 li{
    width: 90px;
    text-align: center;
    line-height: 53px;
}
.head .line3 li a:hover{
    color: #DE4767;
    border-bottom: 3px solid #DE4767;
    line-height: 47px;
}
.head .line3 .active{
    color: #DE4767;
    border-bottom: 3px solid #DE4767;
    line-height: 47px;
}

今日代码...

posted @ 2021-10-29 16:38 小张同学的派大星吖阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部

张凯月

Practical Training Demo1-顶部首页导航（10.29）

公告