HTML+CSS简单的淘宝首页框架布局小练(二）

最新推荐文章于 2021-06-18 23:21:28 发布
最新推荐文章于 2021-06-18 23:21:28 发布
阅读量1k 收藏 5
点赞数 2
分类专栏： 布局 HTML   CSS 淘宝首页布局（二）HTML+CSS 文章标签： 淘宝首页布局 （二）HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tina_dl/article/details/88864552
版权

  • 按要求将淘宝的首页布局块具体化

  • 在写的过程中（小傻猫）出现了点问题，个人理解是可能将整体的
    框架布局完了，下面的具体化分块的时候，就出现了布局块的 叠加遮盖
    问题，最后没办法将打布局一些做了点改动（个人觉得应该不先把所有
    打布局以此写完，应该是将大布局里面的小布局先具体化点，再续写下
    面的大布局，这样就会防止出现布局的叠加问题，也可能是个人的问题，
    小傻猫，哈哈哈！）

  • 具体代码

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV框架首页</title>
    <link href="../CSS/text4.css" type="text/css" rel="stylesheet">
</head>
<body>

<div class="index">
    <div class="header">页眉</div>
    <div class="nav">
        <div class="nav_1">
            <div class="logo">logo</div>
            <div class="nav_1_1">一</div>
            <div class="nav_1_2">二</div>
            <div class="nav_1_3">三</div>
            <div class="nav_1_4">四</div>
            <div class="nav_1_5">五</div>
            <div class="nav_1_6">六</div>
        </div>
    </div>
    <div class="focus">
        <div class="focus_1">
            <div class="focus_1_1">主题市场</div>
            <div class="focus_1_2">广告</div>
            <div class="news">淘宝头条</div>
        </div>

        <div class="focus_2">账户</div>
    </div>
    <div class="content">
        <div class="column_1">
            <div class="column_1_1">
                <p>有好货</p>
                <div class="column_1_1_1"></div>
                <div class="column_1_1_2"></div>
                <div class="column_1_1_3"></div>
                <div class="column_1_1_4"></div>
                <div class="column_1_1_5"></div>
                <div class="column_1_1_6"></div>
            </div>
            <div class="column_1_2">
                <p>爱逛街</p>
                <div class="column_1_2_1"></div>
                <div class="column_1_2_2"></div>
                <div class="column_1_2_3"></div>
                <div class="column_1_2_4"></div>
                <div class="column_1_2_5"></div>
                <div class="column_1_2_6"></div>
            </div>
        </div>

        <div class="column_2">
            <div class="column_2_1">
                <P>淘抢购</P>
                <div class="column_2_1_1"></div>
                <div class="column_2_1_2"></div>
                <div class="column_2_1_3"></div>
            </div>
            <div class="column_2_2">广告</div>
        </div>


        <div class="column_3">
            <div class="column_3_1">
                <p>每日好店</p>
                <div class="column_3_1_1"></div>
                <div class="column_3_1_2"></div>
                <div class="column_3_1_3"></div>
                <div class="column_3_1_4"></div>
            </div>
            <div class="column_3_2">
                <p>淘宝直播</p>
                <div class="column_3_2_1"></div>
                <div class="column_3_2_2"></div>
                <div class="column_3_2_3"></div>
                <div class="column_3_2_4"></div>
            </div>
        </div>
    </div>
    <div class="content1">
        <div class="column_4">
            <div class="column_4_1">
                <p>时尚爆料王</p>
                <div class="column_4_1_1"></div>
                <div class="column_4_1_2"></div>
                <div class="column_4_1_3"></div>
            </div>
            <div class="column_4_2">今新品</div>
        </div>
        <div class="column_5">
            <div class="column_5_1">
                <p>品质生活</p>
                <div class="column_55_1">
                <div class="column_5_1_1">一</div>
                <div class="column_5_1_2">二</div>
                <div class="column_5_1_3">三</div>
                <div class="column_5_1_4">四</div>
                </div>
                <div class="column_55_2">
                 <div class="column_5_1_5">五</div>
                 <div class="column_5_1_6">六</div>
                 <div class="column_5_1_7">七</div>
                </div>

            </div>
            <div class="column_5_2">
                <p>特色玩味控</p>

                <div class="column_55_1">
                    <div class="column_5_1_1">一</div>
                    <div class="column_5_1_2">二</div>
                    <div class="column_5_1_3">三</div>
                    <div class="column_5_1_4">四</div>
                </div>
                <div class="column_55_2">
                    <div class="column_5_1_5">五</div>
                    <div class="column_5_1_6">六</div>
                    <div class="column_5_1_7">七</div>
                </div>

            </div>
        </div>
        <div class="column_6">
            <p>实惠专业户</p>
            <div class="column_6_1"></div>
            <div class="column_6_2"></div>
            <div class="column_6_3"></div>
            <div class="column_6_4"></div>
            <div class="column_6_5"></div>
        </div>
        <div class="column_7">
            <p>热卖单品</p>
            <div class="column_7_1"></div>
            <div class="column_7_2"></div>
            <div class="column_7_3"></div>
            <div class="column_7_4"></div>
            <div class="column_7_5"></div>
            <div class="column_7_6"></div>
            <div class="column_7_7"></div>
            <div class="column_7_8"></div>
            <div class="column_7_9"></div>
            <div class="column_7_10"></div>
            <div class="column_7_11"></div>
            <div class="column_7_12"></div>
            <div class="column_7_13"></div>
        </div>
    </div>

    <div class="content2">
           <div class=" column_22_1">
               <p>猜你喜欢</p>
               <div class="column_22_1_1"></div>
               <div class="column_22_1_2"></div>
               <div class="column_22_1_3"></div>
               <div class="column_22_1_4"></div>
               <div class="column_22_1_5"></div>
               <div class="column_22_1_6"></div>
               <div class="column_22_1_7"></div>
               <div class="column_22_1_8"></div>
               <div class="column_22_1_9"></div>
               <div class="column_22_1_10"></div>
               <div class="column_22_1_11"></div>
               <div class="column_22_1_12"></div>
               <div class="column_22_1_13"></div>
               <div class="column_22_1_14"></div>
               <div class="column_22_1_15"></div>
               <div class="column_22_1_16"></div>
               <div class="column_22_1_17"></div>
               <div class="column_22_1_18"></div>
               <div class="column_22_1_19"></div>
               <div class="column_22_1_20"></div>
               <div class="column_22_1_21"></div>
               <div class="column_22_1_22"></div>
               <div class="column_22_1_23"></div>
               <div class="column_22_1_24"></div>
               <div class="column_22_1_25"></div>
               <div class="column_22_1_26"></div>
           </div>
    </div>

    <div class="footer">页脚</div>
</div>

</body>
</html>


CSS


*{
    margin:0;
    padding: 0;
}
body{
    background-color: azure;
}
.header{
    margin: 0 auto;
    width: 100%;
    height: 40px;
    background-color: #f6dfff;
}
.nav{
    margin: 0 auto;
    width: 1150px;
    height: 100px;
    background-color: #333333;
}
.nav_1{
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
.logo{
    float: left;
    width: 250px;
    height: 100%;
    background-color: #f0ebff;
}
.nav_1_1{
    float: left;
    width: 150px;
    height: 100%;
    background-color: #f9deff;
}
.nav_1_2{
    float: left;
    width: 150px;
    height: 100%;
    background-color: #fee1ff;
}
.nav_1_3{
    float: left;
    width: 150px;
    height: 100%;
    background-color: #f2d1fb;
}
.nav_1_4{
    float: left;
    width: 150px;
    height: 100%;
    background-color: #edbeee;
}
.nav_1_5{
    float: left;
    width: 150px;
    height: 100%;
    background-color: #ecc7f9;
}
.nav_1_6{
     float: left;
     width: 150px;
     height: 100%;
     background-color: #f2caff;
 }
.focus {
    margin: 0 auto;
    width: 1150px;
    height: 770px;
    background-color: white;
}
.focus_1{
    float: left;
    margin: 0 auto;
    width: 850px;
    height: 100%;
    background-color: white;
}
.focus_1_1{
    margin :0 auto;
    float: left;
    width: 250px;
    height: 500px;
    background-color: #fae4f9;
}
.focus_1_2{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    width: 580px;
    height: 490px;
    background-color: #f1dcff;
}
.news {
    float: left;
    margin-top: 10px;
    width: 840px;
    height: 260px;
    background-color: #f4cbff;
}
.focus_2{
    float: left;
    margin-top: 10px;
    width: 300px;
    height: 760px;
    background-color: #e8bcfa;
 }
.content{
    margin: 0 auto;
    width: 1150px;
    height: 1260px;
    background-color: white;
}
.column_1{
    margin: 0 auto;
    width: 100%;
    height: 500px;
}
.column_1_1{
    float: left;
    margin-top: 10px;
    width: 570px;
    height: 490px;
    background-color: white;
}
.column_1_1_1{
    float: left;
    margin-left: 20px;
    margin-top: 20px;
    width: 170px;
    height: 170px;
    background-color: #f7efff;
}
.column_1_1_2{
    float: left;
    margin-left: 10px;
    margin-top: 20px;
    width: 170px;
    height: 170px;
    background-color: #f6e6ff;
}
.column_1_1_3{
    float: left;
    margin-left: 10px;
    margin-top: 20px;
    width: 170px;
    height: 170px;
    background-color: #fae5ff;
}
.column_1_1_4{
    float: left;
    margin-top: 55px;
    margin-left: 20px;
    width: 170px;
    height: 170px;
    background-color: #f1d8ff;
}
.column_1_1_5{
    float: left;
    margin-left: 10px;
    margin-top: 55px;
    width: 170px;
    height: 170px;
    background-color: #fed3ff;
}
.column_1_1_6{
    float: left;
    margin-left: 10px;
    margin-top: 55px;
    width: 170px;
    height: 170px;
    background-color: #fecfff;
}
.column_1_2{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    width: 570px;
    height: 490px;
    background-color: white;
}
.column_1_2_1{
    float: left;
    margin-left: 20px;
    margin-top: 20px;
    width: 170px;
    height: 170px;
    background-color: #f7efff;
}
.column_1_2_2{
    float: left;
    margin-left: 10px;
    margin-top: 20px;
    width: 170px;
    height: 170px;
    background-color: #f6e6ff;
}
.column_1_2_3{
    float: left;
    margin-left: 10px;
    margin-top: 20px;
    width: 170px;
    height: 170px;
    background-color: #fae5ff;
}
.column_1_2_4{
    float: left;
    margin-top: 55px;
    margin-left: 20px;
    width: 170px;
    height: 170px;
    background-color: #f1d8ff;
}
.column_1_2_5{
    float: left;
    margin-left: 10px;
    margin-top: 55px;
    width: 170px;
    height: 170px;
    background-color:#fed3ff;
}
.column_1_2_6{
    float: left;
    margin-left: 10px;
    margin-top: 55px;
    width: 170px;
    height: 170px;
    background-color:  #fecfff;
}
.column_2{
    margin: 0 auto;
    width: 100%;
    height: 250px;
}
.column_2_1{
    margin-top: 10px;
    width: 100%;
    height: 190px;
    background-color:white;
}
.column_2_1_1{
    float: left;
    width:383px;
    height: 169px;
    background-color: #f6e6ff;
}
.column_2_1_2{
    float: left;
    width:383px;
    height: 169px;
    background-color: #f4dbff;
}
.column_2_1_3{
    float: left;
    width:383px;
    height: 169px;
    background-color: #ead8ff;
}
.column_2_2{
    float: left;
    margin-top: 10px;
    width: 1150px;
    height: 40px;
    background-color: white;
}
.column_3{
    margin: 0 auto;
    width: 100%;
    height: 500px;
    background-color: white;
}
.column_3_1{
    float: left;
    margin-top: 10px;
    width: 570px;
    height: 490px;
    background-color: white;
}
.column_3_1_1{
    float: left;
    margin-top: 25px;
    margin-left: 20px;
    width: 260px;
    height: 200px;
    background-color: #f6edff;
}
.column_3_1_2{
    float: left;
    margin-top: 25px;
    margin-left: 10px;
    width: 260px;
    height: 200px;
    background-color: #fee7ff;
}
.column_3_1_3{
    float: left;
    margin-top: 30px;
    margin-left: 20px;
    width: 260px;
    height: 200px;
    background-color: #f4dfff;
}
.column_3_1_4{
    float: left;
    margin-top: 30px;
    margin-left: 10px;
    width: 260px;
    height: 200px;
    background-color: #ffd4ff;
}
.column_3_2{
    float: left;
    margin-top: 10px;
    width: 570px;
    height: 490px;
    background-color: white;
}
.column_3_2_1{
    float: left;
    margin-top: 25px;
    margin-left: 20px;
    width: 260px;
    height: 200px;
    background-color: #f6edff;
}
.column_3_2_2{
    float: left;
    margin-top: 25px;
    margin-left: 10px;
    width: 260px;
    height: 200px;
    background-color:  #fee7ff;
}
.column_3_2_3{
    float: left;
    margin-top: 30px;
    margin-left: 20px;
    width: 260px;
    height: 200px;
    background-color:#f4dfff;
}
.column_3_2_4{
    float: left;
    margin-top: 30px;
    margin-left: 10px;
    width: 260px;
    height: 200px;
    background-color:#ffd4ff;
}
.content1{
    margin :0 auto;
    width: 1150px;
    height: 1600px;
    background-color: white;
}
.column_4{
    margin: 0 auto;
    width: 1150px;
    height: 200px;
}
.column_4_1{
    float: left;
    margin-top: 10px;
    width: 740px;
    height: 190px;
    background-color:white;
}
.column_4_1_1{
    float: left;
    margin-top: 10px;
    width:246px;
    height: 160px;
    background-color: #f4e6ff;
}
.column_4_1_2{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width:246px;
    height: 160px;
    background-color: #fae1ff;
}
.column_4_1_3{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width:246px;
    height: 160px;
    background-color: #fce0ff;
}
.column_4_2 {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    width: 400px;
    height: 190px;
    background-color: #f2d8ff;
}
.column_5{
    margin:0 auto;
    width: 1150px;
    height: 560px;
}
.column_5_1{
    float: left;
    margin-top: 10px;
    width: 570px;
    height: 550px;
    background-color: white;
}
.column_55_1{
    float: left;
    width:306px;
    height: 530px;
}
.column_5_1_1{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width: 305px;
    height: 280px;
    background-color: #fbf0ff;
}
.column_5_1_2 {
    float: left;
    margin-left: 1px;
    margin-top: 1px;
    width: 305px;
    height: 78px;
    background-color: #feebff;
}
.column_5_1_3{
    float: left;
    margin-left: 1px;
    margin-top: 1px;
    width: 305px;
    height: 78px;
    background-color: #eadfff;
}
.column_5_1_4 {
    float: left;
    margin-left: 1px;
    margin-top: 1px;
    width: 305px;
    height: 78px;
    background-color: #ebe1fe;
}
.column_5_1_5{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width: 260px;
    height: 172px;
    background-color: #f1d8ff;
}
.column_5_1_6{
    float: left;
    margin-left: 1px;
    margin-top: 1px;
    float: left;
    width: 260px;
    height: 172px;
    background-color: #f2d8ff;
}
.column_5_1_7{
    float: left;
    margin-left: 1px;
    margin-top: 1px;
    float: left;
    width: 260px;
    height: 172px;
    background-color: #edcdff;
}
.column_5_2{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    width: 570px;
    height: 550px;
    background-color: white;
}
.column_6{
    margin-top: 10px;
    width: 1150px;
    height: 190px;
    background-color: white;
}
.column_6_1{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width:229px; ;
    height: 160px;
    background-color: #efe6ff;
}
.column_6_2{
    float: left;
    margin-left: 1px;
    margin-top: 10px;
    width:229px; ;
    height: 160px;
    background-color: #f3edff;
}
.column_6_3{
    float: left;
    margin-left: 1px;
    margin-top: 10px;
    width:229px; ;
    height: 160px;
    background-color: #eddfff;
}
.column_6_4{
    float: left;
    margin-left: 1px;
    margin-top: 10px;
    width:229px; ;
    height: 160px;
    background-color: #f4d5ff;
}
.column_6_5{
    float: left;
    margin-left: 1px;
    margin-top: 10px;
    width:229px; ;
    height: 160px;
    background-color: #efd1ff;
}
.column_7{
    margin-top: 10px;
    width: 1150px;
    height: 690px;
    background-color:white;
}
.column_7_1{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color: #f8f4ff;
}
.column_7_2{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color: #f7ecff;
}
.column_7_3{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color: #fbe9ff;
}
.column_7_4{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color: #fde2ff;
}
.column_7_5{
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color: #fde0ff;
}
.column_7_6{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color:  #f8f4ff;
}
.column_7_7{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color:#f7ecff;
}
.column_7_8{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color:#fbe9ff;
}
.column_7_9{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color: #fde2ff;
}
.column_7_10{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 260px;
    background-color: #fde0ff;
}
.column_7_11{
    float: left;
    margin-left: 10px;
    margin-top: 1px;
    width:370px; ;
    height: 135px;
    background-color: #fff7ff;
}
.column_7_12{
    float: left;
    margin-left: 10px;
    margin-top: 1px;
    width:370px; ;
    height: 135px;
    background-color: #fff6fc;
}
.column_7_13{
    float: left;
    margin-left: 10px;
    margin-top: 1px;
    width:370px; ;
    height: 135px;
    background-color: #ffeafd;
}

.content2 {

    margin: 0 auto;
    width: 1150px;
    height: 1125px;

}

.column_22_1{
    float: left;
    margin-top: 10px;
    width: 100%;
    height: 100%;
    background-color: white;
}
.column_22_1_1{
    float: left;
    margin-top: 20px;
  margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #fffafe;
}
.column_22_1_2{
    float: left;
    margin-top: 20px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #fff1fa;
}
.column_22_1_3{
    float: left;
    margin-top: 20px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #ffebf4;
}
.column_22_1_4{
    float: left;
    margin-top: 20px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #ffe6f4;
}
.column_22_1_5{
    float: left;
    margin-top: 20px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #ffecf7;
}
.column_22_1_6{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color:  #fffafe;
}
.column_22_1_7{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #fff1fa;
}
.column_22_1_8{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color:  #ffebf4;
}
.column_22_1_9{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color:#ffe6f4;
}
.column_22_1_10{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #ffecf7;
}
.column_22_1_11{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #fffafe;
}
.column_22_1_12{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #fff1fa;
}
.column_22_1_13{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color:  #ffebf4;
}
.column_22_1_14{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color:#ffe6f4;
}
.column_22_1_15{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #ffecf7;
}
.column_22_1_16{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color:#fffafe;
}
.column_22_1_17{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color:#fff1fa;
}
.column_22_1_18{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color:  #ffebf4;
}
.column_22_1_19{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #ffe6f4;
}
.column_22_1_20{
    float: left;
    margin-top: 1px;
    margin-left: 1px;
    width: 229px;
    height: 270px;
    background-color: #ffecf7;
}
.footer{
    margin: 0 auto;
    width: 1150px;
    height: 300px;
    background-color:lavenderblush;
}
Tina_dl
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
HTML+CSS简单的淘宝首页框架布局小练(一）
Tina_dl的博客
03-26 1万+
开的前端的课程，练习淘宝的前台页面的框架，就简单根据理解写了下，（小傻猫）记录学习的经历 简单首先分析下淘宝首页的布局框架（小傻猫），自己理解的 首先需要注意的是该部分的布局，是将该部分分成量大块布局的（错误： 主题市场 广告 淘宝头条 账户信息 但个分一块，可能会出现，最后的账户信息块一直是在淘宝头条的下方，并不是出现在右边, 可以自己试试哟） 正确布局： 1 .class...
HTML+CSS简单的淘宝首页框架布局小练（三）
Tina_dl的博客
04-07 3833
接着完善淘宝的首页框架（嘿嘿，小傻猫日常） 具体代码见下 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DIV框架首页</title> <link href="../CSS/text4.c...
淘宝网页简单的仿写，html+css
07-24
里面有几个页面的练习，都是使用的，动态的，还有购物网站html+css
淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
适合刚接触前端基础知识的同学，初步了解了HTML+CSS后，可以尝试练习类似项目；该项目主要为HTML+CSS实现，不涉及交互、逻辑功能，旨在提高样式布局能力
自己做的淘宝网页部分框架
08-18
昨晚花了两个小时做的网页，希望和大家多交流。
淘宝网简单版html+css实现
06-25
开发者通过编写HTML标签，如`<div>`、`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`、`<footer>`等，来构建出淘宝首页的布局框架。 CSS则负责网页的视觉表现，包括颜色、字体、布局和响应式设计。在`css`...
基于html + css + js完成淘宝网首页效果
05-06
在构建“基于html + css + js完成淘宝网首页效果”的项目中，我们将深入探讨HTML、CSS和JavaScript这三种核心技术在网页开发中的应用。这些技术是构建任何动态、交互式网页的基础，而淘宝网作为中国最大的电商平台，...
前端入门 HTML+css实现静态淘宝
12-23
在静态淘宝页面中，CSS起到了美化和布局的作用。你可以通过选择器（如类选择器 `.className`，ID选择器 `#idName` 或元素选择器 `elementName`）来指定HTML元素的样式，如颜色、字体、大小、背景等。使用`display`...
学生作业作品HTML网页前端制作，淘宝商城页面，HTML+css+js
01-18
CSS3引入了许多新特性，如媒体查询（Media Queries）用于响应式设计，过渡（Transitions）和动画（Animations）增加动态效果，以及Flexbox和Grid布局系统，使得复杂的网页布局变得更加简单易控。 再者，JavaScript...
小练习05HTML+CSS-淘宝小店铺页面
05-12
在这个名为“小练习05HTML+CSS-淘宝小店铺页面”的项目中，我们主要探讨了如何使用HTML和CSS这两种核心技术来构建一个模拟的淘宝小店铺网页。这个练习旨在提升初学者在网页设计方面的技能，同时也适合那些希望进一步...
div+css布局实例淘宝网分析
01-02
div+css的对淘宝网首页的分析，不错的，比较透彻
html+css的淘宝首页
09-11
html+css的淘宝首页，想只看代码的可以去我发表的文章里看，这里有图片素材和代码
仿淘宝等网站html代码
11-21
仿淘宝等网站html代码
3.仿淘宝网多级分类列表菜单代码.html
12-07
仿淘宝网多级分类列表菜单代码,可支持三级以上
纯html静态网站分布很详细适合初学者
11-14
html静态网站，每一步分布都很详细，适合初学者，适合学习网页制作！
【小练习05】HTML+CSS--淘宝商铺小页面
weixin_30411239的博客
05-12 198
要求实现如下效果图： 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ ...
模仿淘宝首页发现其自适应布局的部分
之度的博客
10-28 1347
淘宝首页轮播图部分在宽屏上是这样的 在小屏幕是这样的 一部分东西隐藏了，其用了适应性布局。隐藏部分的div在样式表中的变化是这样的。 变化前 变化后 其内部的原理参见下方：
HTML设置限时抢购倒计时步骤,限时抢购-倒计时的完整实例(分享)
weixin_39945178的博客
06-18 498
如下所示：团购——限时抢还剩 function FreshTime() {var endtime = new Date("2017/10/15,12:20:12");//结束时间var nowtime = new Date();//当前时间var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);d = pars...
html+css 淘宝首页静态页面案例
weixin_30363509的博客
03-06 2537
html+css 转载于:https://www.cnblogs.com/beiluo712/p/9919618.html
使用Dreamweaver设计淘宝网站点：框架布局与页面布局技术
"本资源主要介绍了页面布局中的框架布局技术，以及如何使用Dreamweaver进行网站设计和页面布局。内容涵盖了网站开发的流程，需求分析，以及如何使用HTML+CSS+DIV来构建页面结构。此外，还特别提到了创建站点的步骤，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值