天猫国际网页（部分）

最新推荐文章于 2022-08-01 20:48:56 发布

我拿青春赌未来~

最新推荐文章于 2022-08-01 20:48:56 发布

阅读量389

点赞数 2

文章标签： elementui webview css

本文链接：https://blog.csdn.net/helongzhi/article/details/124635198

版权

HTML部分

<!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>
    <link rel="stylesheet" href="./tianmao.css">
</head>

<body>
    <!-- 顶部 -->
    <div id="top">
        <!-- 顶部导航栏 -->
        <ul id="top-nav">
            <!-- 顶部导航栏分类 -->

            <li class="nav1"><a href=""> 天猫首页</a></li>
            <li class="nav1">喵，欢迎来天猫国际</li>
            <li class="nav1 "><a href="">请登录</a></li>


            <li class="nav2  nav4"><a href="">我的淘宝</a>
                <!-- 下拉栏 -->
                <div class="xiala">
                    <p>已购买宝贝</p>
                    <p>已卖出宝贝</p>


                </div>


            </li>



            <li class="nav3"><a href="">购物车</a></li>
            <li class="nav3 nav4"><a href="">收藏夹</a>
                <!-- 下拉栏 -->
                <div class="xiala">
                    <p>收藏的宝贝</p>
                    <p>收藏的店铺</p>


                </div>


            </li>
            <li class="nav3 tupian"><a href="">手机版</a>

                <!-- 下拉栏 -->
                <div class="xialatu">
                    <img src="./img/屏幕截图 2022-05-07 114220.png" alt="">


                </div>



            </li>
            <li class="nav3"><a href="">淘宝网</a></li>
            <li class="nav3"><a href="">网页无障碍</a></li>
            <li class="nav3 nav4"><a href="">商家支持</a>
                <!-- 下拉栏 -->
                <div class="xiala">
                    <p>商家</p>
                    <p>帮助</p>


                </div>





            </li>




        </ul>



    </div>

    <!-- 顶部结束 -->


    <!-- 头部 -->
    <div id="header">
        <!-- 头部上半部分 -->
        <div id="header-top">
            <!-- logo部分 -->
            <div class="logo">
                <img src="./img/tmgj.png" alt="">

            </div>
            <!-- 搜索栏部分 -->
            <div class="sousuolan">

                <input type="text">
                <button>搜索</button>


            </div>


        </div>
        <!-- 头部下半部分 -->
        <div id="header-bottom">

            <p class="shanpin">全部商品分类</p>
            <p><a href="" class="shouye">首页</a></p>
            <p><a href="">全球精选</a></p>
            <p><a href="">进口超市</a></p>
            <p><a href="">海外直购</a></p>
        </div>



    </div>

    <!-- 头部结束 -->





    <!-- 主体内容 -->
    <div id="main">

        <div id="main-top">
            <!-- right -->
            <div class="left">
                <!-- 每一个小盒子 -->
                <div class="left-one red">

                    <p>美妆个护</p>
                    <p><a href="">面膜</a>/
                        <a href="">防晒</a>/
                        <a href=""> 面部护理套装</a>
                    </p>


                </div>


                <div class="left-one blue">

                    <p>食品保健</p>
                    <p><a href="">代餐奶昔</a>/
                        <a href=""> 酵素</a>/
                        <a href="">葡萄酒</a>
                    </p>


                </div>

                <div class="left-one yellow">

                    <p>母婴用品</p>
                    <p><a href="">奶粉</a>/
                        <a href="">纸尿裤</a>/
                        <a href="">钙铁锌</a>
                    </p>

                </div>

                <div class="left-one green">

                    <p>服饰鞋包</p>
                    <p><a href="">腕表</a>/
                        <a href="">箱包</a>/
                        <a href="">潮流穿搭</a>
                    </p>


                </div>

                <div class="left-one black">

                    <p>生活/数码</p>
                    <p><a href="">滤水壶</a>/
                        <a href="">滤芯</a>/
                        <a href="">扫地机器人</a>/
                        <a href="">保</a>
                    </p>


                </div>


            </div>

            <!-- 轮播图 -->
            <div class="content">
                <!-- 图片 -->
                <a href="">
                    <ul class="lunbotu">

                        <li>
                            <img src="./img/轮播图1.png" alt="">
                        </li>
                        <li>
                            <img src="./img/轮播图2.jpg" alt="">
                        </li>
                        <li>
                            <img src="./img/轮播图3.jpg" alt="">
                        </li>


                    </ul>

                </a>

                <!-- 圆点导航 -->

                <div>
                    <a href="" class="active"></a>
                    <a href=""></a>
                    <a href=""></a>

                </div>




            </div>

            <!-- 轮播图结束 -->


            <!-- 右侧二维码 -->
            <a href="">
                <div class="right">
    
                <img src="./img/二维码.png" alt="">
    
                </div>
            </a>

            <!-- 右侧二维码结束 -->


        </div>





    </div>
    <!-- 主体内容结束 -->





</body>

</html>

CSS部分

/*清除浏览器默认样式  */
* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* 顶部整体设置 */
#top {
    /* 宽度设置为窗口宽度 */
    width: 100%;
    height: 30px;
    /* border:1px solid blue; */
    background-color: #F2F2F2;
}

/* 顶部导航栏设置 */
#top-nav {
    width: 1200px;
    height: 30px;
    /* background-color: red; */
    /* 水平居中 */
    margin: 0 auto;
}

/* 导航栏分类 */

/* 全部水平排列 */
#top-nav>li {
    float: left;
    /* 字体大小 */
    font-size: 12px;
    /* 字垂直居中 */
    line-height: 30px;
    /* 字体颜色 */
    color: grey;
}

/* 前三个的右外边距相等，统一设置 */
#top-nav>.nav1 {
    margin-right: 22px;
}



/* 设置左外边距 */
#top-nav>.nav2 {
    margin-left: 430px;
    ;

}

/* 后四个左外边距相同 */
#top-nav>.nav3 {
    margin-left: 25px;
}

/* top导航栏所有a标签字体颜色 */
#top-nav a {
    color: grey;
}


/*鼠标触到效果  */
#top-nav a:hover {
    color: red;
    text-decoration: underline;
}

/* 鼠标触到，背景改变 */
#top-nav>.nav4:hover {

    background-color: white;


}

#top-nav>.nav4 {
    position: relative;
}

/* 设置下拉栏 */
#top-nav>.nav4>.xiala {
    width: 80px;
    height: 80px;
    background-color: white;
    /* 隐藏 */
    display: none;
    position: absolute;
}

#top-nav>.nav4:hover .xiala {
    /* 显示 */
    display: block;
}

/* 天猫二维码 */
#top-nav>.tupian {
    position: relative;
}

#top-nav>.tupian>.xialatu {
    position: absolute;
    width: 80px;
    height: 80px;
    right: 20px;
    top: 30px;
    /* 隐藏 */
    display: none;
    z-index: 10;
}

#top-nav>.tupian:hover .xialatu {
    /* 显示 */
    display: block;
}


/* 设置头部样式 */
#header {
    width: 100%;
    height: 160px;
    /* border:1px solid blue; */
}

/* 设置头部上半部分样式 */
#header-top {
    height: 120px;
    width: 1200px;
    margin: 0 auto;
    /* background-color: aqua; */
}

/* 设置logo浮动 */
#header-top>.logo {
    float: left;
}

#header-top>.logo>img {
    height: 110px;

}

/* 设置搜索部分浮动 */
#header-top>.sousuolan {
    height: 120px;
    width: 450px;
    float: right;
    padding-top: 45px;
}

/* 设置搜索栏样式 */
.sousuolan>input {
    height: 38px;
    width: 350px;
    border-color: blue
}

button {
    background-color: #AF3CEE;
    height: 42px;
    width: 80px;
    font-size: 12px;
    color: white;

    margin-left: -5px;
}




/* 设置头部下半部分 */

#header-bottom {
    height: 40px;
    width: 1200px;
    margin: 0 auto;
    /* background-color: red; */
    /* 弹性盒 */
    /* display: flex;  */

}

/* 设置商品分类样式 */
#header-bottom>.shanpin {

    width: 200px;
    height: 40px;
    background-color: #B23CEF;
    /* 使字体垂直居中 */
    line-height: 40px;
    padding-left: 20px;
    /* 设置盒子大小包含内边距和边框 */
    box-sizing: border-box;
    color: white;
}

#header-bottom>p {
    /* 设置外边距 */
    margin-right: 45px;
    /* 使字体垂直居中 */
    height: 40px;
    line-height: 40px;
    float: left;


}

#header-bottom>p>a {
    color: black
}

/* 设置首页字体样式 */
#header-bottom>p>.shouye {
    color: #7A45E5;
    font-weight: bolder;
}

/* 设置main样式 */
#main {
    background-color: #F5F5F5;
    height: 100%;
    width: 100%;
}

/* 设置mian顶部样式 */
#main-top {
    height: 420px;
    width: 1200px;
    background-color: aqua;
    margin: 0 auto;
}

/* 设置左侧栏样式 */
#main-top>.left {
    height: 420px;
    width: 200px;
    background-color: #333333;
    /* padding: 0 20px ; */
    /* box-sizing: border-box;  */
    position: relative;
    float: left;
}

/* 设置左侧栏每一个方块边框样式 */
#main-top .left-one {
    height: 82px;
    width: 200px;
    border-top: 1px dashed gray;
    text-align: center;
    /* margin: 0 auto; */

}

#main-top .left-one:hover {
    background-color: #7A45E5;
    /* width: 200px; */


}

/* 设置竖线的样式 */
/* 使用before伪类 */

#main-top .red:hover::before {
    /* 设置鼠标触到是层级变高，显示 */
    z-index: 10;
}

#main-top .red::before {
    /* 设置一个空内容 */
    content: "";
    /* 设置竖线颜色 */
    border: 3px solid red;
    /* 绝对定位 */
    position: absolute;
    /* 设置竖线高度 */
    height: 80px;
    top: 0;
    left: 0;
/* 设置层级较低，不显示 */
    z-index: -10;
}

#main-top .blue:hover::before {
    z-index: 10;
}

#main-top .blue::before {
    content: "";

    border: 3px solid blue;
    position: absolute;
    height: 86px;
    top: 80px;
    left: 0;
    z-index: -10;
}


#main-top .yellow:hover::before {
    z-index: 10;
}

#main-top .yellow::before {
    content: "";

    border: 3px solid yellow;
    position: absolute;
    height: 80px;
    top: 166px;
    left: 0;
    z-index: -10;
}


#main-top .green:hover::before {
    z-index: 10;
}

#main-top .green::before {
    content: "";

    border: 3px solid green;
    position: absolute;
    height: 80px;
    top: 250px;
    left: 0;
    z-index: -10;
}

#main-top .black:hover::before {
    z-index: 10;
}

#main-top .black::before {
    
    content: "";

    border: 3px solid black;
    
    position: absolute;
    
    height: 80px;
    top: 332px;
    left: 0;
    z-index: -10;
}


/* 设置p样式 */
#main-top .left-one>p {
    margin: 8px 0;
}

/* 设置第一个p的样式 */
#main-top .left-one>p:nth-of-type(1) {
    font-size: 24px;
    color: white;
}

/* 设置第二个p的样式 */
#main-top .left-one>p:nth-of-type(2) {
    font-size: 12px;
    color: white;
}

/* 设置a标签样式 */
#main-top .left-one>p>a {
    color: white;
}

/* 设置触到a标签样式 */
#main-top .left-one>p>a:hover {
    text-decoration: underline;
}





/* 轮播图 */
#main-top>.content {
    width: 750px;
    height: 420px;
    background-color: #B23CEF;
    float: left;
    margin-top: -5px;
    /* 多余的剪切 */
    overflow: hidden;
    /* 相对定位 */
    position: relative;
}
/* 设置所有图片横向排列的整体宽高 */
.lunbotu {
    width: 2250px;
    height: 420px;

}
/* 设置图片样式 */
.lunbotu>li>img {
    width: 750px;
    height: 420px;
}

.lunbotu>li {
    float: left
}
/* 设置圆点样式 */
#main-top>.content>div>a {
/* 设为块元素 */
    display: block;
    width: 10px;
    height: 10px;
    float: left;
    /* 设置圆角，为圆 */
    border-radius: 50%;
    background-color: #475668;
    margin: 0 4px;

}

#main-top>.content>div {
/* 绝对定位 */
    position: absolute;
    bottom: 40px;
    right: 40px;
    /* z-index: 10; */
}
/* 设置鼠标触到圆点效果 */
.active, div>a:hover {
    background-color: #CFD1D6;
    border: 2px solid #ACB0CD;
}




/* 右侧 */
#main-top>a>.right {
    width: 250px;
    height: 420px;
    float: left;
    margin-top: -5px;
}

#main-top>a>.right>img {
    width: 250px;
    height: 420px;
}

素材

效果图

我拿青春赌未来~

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
天猫国际网页（部分）

HTML部分<!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"> <ti
复制链接

扫一扫