新手学习前端之js模仿淘宝主页网站

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了新手学习前端之js模仿淘宝主页网站，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

先给大家展示下效果图：

图片资源链接： 密码：5uo1

html 代码如下：

Title
Box_input"> Box_button" value="搜索">
商品服务分类
  • 服装内衣
  • 鞋包配饰
  • 运动户外
  • 珠宝手表
  • 手机数码
  • 家电办公
  • 护肤彩妆
  • 母婴用品
  • 家纺居家
  • 家具建材
  • 美食特产
  • 日用百货
  • 汽车摩托
  • 文化娱乐
  • 本地生活
  • 虚拟服务
    • |
    -->
  • 规则
  • 论坛
  • 安全
  • 公益
    • Box"> Box_right">

    Hi天之狼2011

    便民服务
    话费
    游戏
    旅行
    保险
    彩票
    电影
    点外卖
    理财
    电子书
    音乐
    水电煤
    请期待
    主题市场
    万能的淘宝 下面有30个特色市场等你来逛哦！
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    Box">
    优雅的温柔
    春夏皮鞋

     春季亮色搭
    更新 3
    ￥118.00

     ￥118.00

     ￥118.00

    更新 3
    Box"> ￥118.00

     ￥118.00

     ￥118.00

    更新 3
    Box"> ￥118.00

     ￥118.00

     ￥118.00

    天猫美妆 04-19 10:00

    【美妆课堂】"羽"你相约步步惊情 若曦四爷再续

    评论(26)

    天猫美妆 04-19 10:00

    【美妆课堂】"羽"你相约步步惊情 若曦四爷再续

    评论(26)

    逛逛-精选
    .
    Box"> [配饰] Box"> [家装]

    超美公主装搭配 小户型这样装 闪耀水晶凉鞋
    Box"> [雪纺] Box"> [包包]

    超美公主装搭配 小户型这样装 闪耀水晶凉鞋
    热卖单品
    | | | | | | | | | | | | | | | |
    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    皱纹立领雪纺衫

    ￥ 399.00 | 月销29件

    消费者保障
    新手上路
    付款方式
    淘宝特色
    | | | | | | | | | | | | |
    | | | | | | | | | | © 2014 Taobao.com 版权所有

    网络文化经营许可证：文网文[2010]040号| 增值电信业务经营许可证：浙B2-20080224-1| 信息网络传播视听节目许可证：1109364号

    css    代码如下 [html] view plain copy @charset "UTF-8"; *{ margin: 0; padding: 0; } .kong{ width: 100%; height: 2000px; } a{color:#6C6C6C;; text-decoration:none; } ul,ol { list-style:none; } input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";} select,input { vertical-align:middle; }/*里面的字居中*/ select,input,textarea { font-size:12px; margin:0; } textarea { resize:none; } /*防止拖动*/ a:hover{color:red;} img {border:0; vertical-align:middle; } /* 去掉图片低测默认的3像素空白缝隙*/ /*头部导航开始*/ .header{ position: fixed; z-index: 1000; left: 0; top: 0; /*position: relative;*/ width: 100%; height: 35px; background-color: #F5F5F5; font-size: 12px; color:#6C6C6C; line-height: 35px; } /*版心*/ .w{ width: 1200px; margin: 0 auto; } /*头部左边开始*/ .top_left { width: 30%; height: 35px; float: left; } .top_left_1,.top_left_2,.top_left_3{ width: 48px; height: 35px; float: left; margin-right: 5px; } .top_left_3{ width: 205px; } .top_left_1:hover,.top_left_2:hover{ background: #FFFFFF; } .top_left_1_a,.top_left_2_a,.top_left_3_a{ margin-left: 5px; color:#6C6C6C; text-decoration: none; float: left; } .top_left_1_a:hover,.top_left_2_a:hover,.top_left_3_a:hover{ color: red; } .top_left_1_span,.top_left_2_span{ display: block; width: 15px; height: 35px; background: url("../img/arrow.png")no-repeat center center; float: left; } /*头部左边结束*/ /*头部右边开始*/ .top_right{ position: relative; width: 44%; height: 35px; float: right; } .top_right_1,.top_right_2,.top_right_3,.top_right_4,.top_right_5,.top_right_6{ width: 75px; height: 35px; float: left; margin-right: 5px; } .top_right_2,.top_right_3{ width: 60px; } .top_right_4{ width: 85px; margin-right: 0; } .top_right_1:hover,.top_right_2:hover,.top_right_3:hover,.top_right_5:hover,.top_right_6:hover{ background: #FFFFFF; } .top_right_1_a,.top_right_2_a,.top_right_3_a,.top_right_4_a,.top_right_5_a,.top_right_6_a,.top_right_7_a{ margin-left: 5px; color:#6C6C6C; text-decoration: none; float: left; } .top_right_1_a:hover,.top_right_2_a:hover,.top_right_3_a:hover,.top_right_4_a:hover,.top_right_5_a:hover,.top_right_6_a:hover,.top_right_7_a:hover{ color: red; } .top_right_1_span,.top_right_2_span,.top_right_3_span,.top_right_4_span,.top_right_5_span,.top_right_6_span,.top_right_7_span{ display: block; width: 15px; height: 35px; background: url("../img/arrow.png")no-repeat center center; float: left; } .top_right_4_span{ background: none; margin-left: 17px; } /*头部右边结束*/ /*头部导航结束*/ /*头部main开始*/ .head_main{ width: 100%; height: 115px; margin-top: 45px; /*background:red;*/ } /*头部mainleft开始*/ .head_main_img{ float: left; width: 250px; height: 100px; } /*头部mainleft结束*/ /*头部main search开始*/ .head_main_search{ margin-top: 20px; float: left; width: 730px; height: 86px; /*background: peru;*/ } /*头部main search 上面开始*/ .head_main_search_Box{ position: relative; float: left; margin-top: 10px; width: 664px; height: 40px; margin-right: 10px; border: 3px solid #f50; } .head_main_search_Box_left{ width: 72px; height: 40px; line-height: 40px; background: #f6f6f6; cursor: pointer; border-left: 1px solid #ffffff; border-right:1px solid #e5e5e5 ; font-size: 12px; float: left; } .head_main_search_Box_left a{ margin-left: 20px; color: black; } .head_main_search_Box_input{ float: left; width: 495px; height: 38px; padding-left: 10px; border: none; outline: none; background: url(../img/search.png) no-repeat 98% center,url(../img/s.png) no-repeat 2% center; } /*头部main search 上面结束*/ /*头部main search 下面开始*/ .head_main_search_Box_button{ float: left; width: 95px; height: 40px; border: none; outline: none; font-size: 20px; letter-spacing: 5px;/*让字符之间有5px的间距*/ background: #f50; cursor: pointer; color: #fff; } .head_main_search_a{ width: 27px; height: 40px; font-size: 13px; color:#6C6C6C; text-decoration: none; float: left; } .head_main_search_a a{ margin-top: 14px; } .head_main_search_down{ clear: both; width: 100%; height: 30px; line-height: 30px; } .head_main_search_down a{ font-size: 13px; color:#6C6C6C; text-decoration: none; margin-right: 2px; } .head_main_search_down a:hover{ color: white; background-color: red; } .head_main_search_down_a{ margin-left: 3px; border: 1px solid #ccc; padding: 2px 5px; } .head_main_search_down_a:hover{ color: red; /*background:red;*/ } /*头部main search 下面结束*/ /*头部main search 右边开始*/ .head_main_right{ width: 94px; height: 112px; float: right; position: relative; text-align: center; border: 1px solid #eee; } .head_main_right a{ font-size: 13px; color:red; text-decoration: none; margin-right: 6px; } .head_main_right img{ margin-top: 6px; } /*头部main search 右边结束*/ /*头部main 结束*/ /*center_top开始*/ /*center_top_left开始*/ .center_top{ width: 100%; height: 582px; clear: both; } .center_top_left{ width: 150px; height: 582px; float: left; /*background-color: yellowgreen;*/ } .center_top_left h5{ width: 100%; height: 41px; line-height: 41px; text-align: center; font-size: 14px; background-color: #f40; color: #fff; } .center_top_left_ul{ position: relative; width: 148px; height: 540px; border:1px solid #bbb; border-top: none; } .center_top_left_ul ul{ position: relative; list-style: none; } .center_top_left_ul li{ width: 146px; height: 31px; line-height: 32px; text-align: center; border:1px solid #fff; cursor: pointer; } .center_top_left_ul li h3{ margin: 0 auto; width: 93%; height: 100%; border-bottom: 1px solid #DEDEDE; color: #707070; font-size: 14px; } .center_top_left_li_1{ background: url("../img/001.png") no-repeat 10px center; } .center_top_left_li_2{ background: url("../img/002.png") no-repeat 10px center; }.center_top_left_li_3{ background: url("../img/003.png") no-repeat 10px center; }.center_top_left_li_4{ background: url("../img/004.png") no-repeat 10px center; }.center_top_left_li_5{ background: url("../img/005.png") no-repeat 10px center; }.center_top_left_li_6{ background: url("../img/006.png") no-repeat 10px center; }.center_top_left_li_7{ background: url("../img/007.png") no-repeat 10px center; }.center_top_left_li_8{ background: url("../img/008.png") no-repeat 10px center; }.center_top_left_li_9{ background: url("../img/009.png") no-repeat 10px center; }.center_top_left_li_10{ background: url("../img/010.png") no-repeat 10px center; }.center_top_left_li_11{ background: url("../img/011.png") no-repeat 10px center; }.center_top_left_li_12{ background: url("../img/012.png") no-repeat 10px center; }.center_top_left_li_13{ background: url("../img/013.png") no-repeat 10px center; }.center_top_left_li_14{ background: url("../img/014.png") no-repeat 10px center; }.center_top_left_li_15{ background: url("../img/015.png") no-repeat 10px center; }.center_top_left_li_16{ background: url("../img/016.png") no-repeat 10px center; } .center_top_left_ul li:hover{ border: 1px solid red; } /*center_top_left结束*/ /*center_top_right开始*/ /*center_top_right_head开始*/ .center_top_right{ width: 1031px; height: 582px; float: right; } .center_top_right_head{ width: 100%; height: 41px; line-height: 38px; font-weight: 900; font-size: 14px; border-bottom: 2px solid #f40; } .center_top_right_head a{ color: black; font-size: 15px; margin-left: 16px; padding: 4px; } .center_top_right_head a:hover { background-color: #EBEBEB; color: red; } .center_top_right .center_top_right_head_a{ font-size: 16px; color: red; } .center_top_right_head span{ margin-left: 29px; color: #bbbbbb; } .center_top_right_head img{ cursor: pointer; margin-left: 40px; } .center_top_right_head .center_top_right_head_s{ margin-left: 5px; } .center_top_right_head_s a{ color: black; font-weight: 600; font-size: 12px; margin: 0; } /*center_top_right_head结束*/ /*center_top_right_left开始*/ .center_top_right_left{ position: relative; float: left; margin-top: 10px; width: 720px; height: 500px; /*background-color: red;*/ } .center_top_right_left_lunbo1{ position: relative; float: left; width: 520px; height: 280px; overflow: hidden; } .center_top_right_left_lunbo1_btn1{ position: absolute; left:50%; top:250px; margin-left: -35px; width: 70px; height: 11px; /*background-color: #bbbbbb;*/ } .center_top_right_left_lunbo1_btn1 span{ display: inline-block; float: left; width: 9px; height: 9px; margin-right: 4px; border-radius: 9px; cursor: pointer; background-color: #cccccc; } .center_top_right_left_lunbo1_btn1 span:hover{ background-color: #6C6C6C; } .center_top_right_left_lunbo2{ position: relative; float:left; width: 520px; height: 220px; overflow: hidden; } .center_top_right_left_lunbo2 img{ margin-left: -3px; } .center_top_right_left_lunbo2_btn2{ position: absolute; left:50%; top:192px; margin-left: -35px; width: 70px; height: 11px; } .center_top_right_left_lunbo2_btn2 span{ display: inline-block; float: left; width: 9px; height: 9px; margin-right: 4px; border-radius: 9px; cursor: pointer; background-color: #cccccc; } .center_top_right_left_lunbo2_btn2 span:hover{ background-color: #6C6C6C; } /*center_top_right_left结束*/ /*center_top_right_right开始*/ .center_top_right_right{ position: relative; margin-top: 10px; float: right; width: 300px; height: 531px; overflow: hidden; /*background-color: red;*/ } .center_top_right_right_top{ width: 298px; height: 98px; border-bottom: 1px solid #eee; } .center_top_right_right_top ul{ margin-left: -1px; width: 100%; height: 27px; /*list-style-type: none;*/ text-align: center; border-bottom: 1px solid #eee; background-color: #f7f7f7; } .center_top_right_right_top li{ width: 57px; height: 26px; float: left; line-height: 26px; font-size: 11px; color: #3c3c3c; border:1px solid #f7f7f7; border-bottom: none; cursor: pointer; } .center_top_right_right_top .li_1{ background-color: #FFFFFF; font-weight: 900; color: red; } .center_top_right_right_top li:hover{ background-color: #FFFFFF; font-weight: 900; color: red; } .center_top_right_right_top_a{ width: 264px; height: 34px; padding: 8px 18px; } .center_top_right_right_top_a a{ line-height: 28px; margin-right: 5px; font-size: 12px; } .center_top_right_right_center{ margin-top: 10px; width: 298px; height: 138px; border: 1px solid #ddd; background: url("../img/user-bg.png")no-repeat right top; } .center_top_right_right_center_Box{ width: 280px; height: 62px; margin: 10px auto 0 auto; } .center_top_right_right_center_Box img{ border-radius: 50%; overflow: hidden; float: left; } .center_top_right_right_center_Box_right{ margin-left: 15px; float: left; } .center_top_right_right_center_Box_right h3{ font-size: 13px; margin-top: 10px; letter-spacing: 1px; } .center_top_right_right_center_Box_right .a_1{ font-size: 13px; display: inline-block; float: left; margin-top: 10px; height: 28px; width: 107px; border: 1px solid #fdb08e; background: #fff0e8; color: #f55732; letter-spacing: -1px; } .center_top_right_right_center_Box_right .s1{ display: inline-block; /*margin-top: 5px;*/ width: 23px; height: 23px; background: url("../img/tao.png")no-repeat 5px 5px ; } .center_top_right_right_center_Box_right .s2{ width: 75px; height: 23px; display: inline-block; margin-top: 7px; vertical-align:top; /*margin-top: -5px;*/ } .center_top_right_right_center_Box_right .a_2{ display: inline-block; width: 78px; height: 28px; font-size: 12px; margin-top: 10px; margin-left: 5px; text-align: center; line-height: 28px; border: 1px solid #fdb08e; background: #fff0e8; color: #f55732; letter-spacing: -1px; } .center_top_right_right_center_down{ margin: 16px auto 0 auto; width: 90%; height: 40px; /*background-color: yellowgreen;*/ } .center_top_right_right_center_down a{ display: inline-block; width: 76px; height: 36px; font-size: 12px; color: white; background-color: red; text-align: center; line-height: 36px; } .center_top_right_right_center_down .a1{ width: 100px; } .center_top_right_right_center_down a:hover{ background-color: darkred; } .center_top_right_right_down{ width: 300px; height: 281px; background-color: #f4f4f4; border: 1px solid #eeeeee; } .center_top_right_right_down h3{ display: block; font-size: 7px; width: 100%; height: 12px; margin: 20px 0 10px 20px; } /*center_top_right_right结束*/ /*center_top_right_down开始*/ .center_top_right_right_down div{ position: relative; margin: 0px 10px 14px 7px; float: left; width: 56px; height: 63px; border: 1px solid #ddd; background-color: #FFFFFF; } .center_top_right_right_down a{ display: block; width: 56px; height: 63px; } .center_top_right_right_down h5{ margin-top: 10px; text-align: center; } .center_top_right_right_down h6{ text-align: center; margin-top: 5px; color: #9c9c9c; font-weight: 400; } .center_top_right_right_down h6:hover{ color: red; } /*center_top_right_down结束*/ /*center_top_right_right结束*/ /*center_top结束*/ /*center_top2开始*/ .center_top2{ position: relative; width: 100%; height: 88px; overflow: hidden; margin: 25px 0px 25px 0px; /*background-color: yellowgreen;*/ } /*center_top2_left开始*/ .center_top2_left{ float: left; width: 280px; height: 88px; border-right: 1px solid #eee; padding-left: 15px; } .center_top2_left4{ position: relative; } .center_top2_left ul{ width: 280px; height: 88px; } .center_top2_left h3{ font-size: 15px; color: red; font-weight: 600; } .center_top2_left .h3_2{ color: #a0b959; } .center_top2_left .h3_3{ color: #df61ab; } .center_top2_left .h3_4{ color: #55a1e5; } .center_top2_left li{ float: left; height: 25px; width: 58px; text-align: center; line-height: 25px; margin: 2px; font-size: 10px; border-radius: 5px; /*color: #6C6C6C;*/ } .center_top2_left li a{ display: block; height: 25px; width: 58px; } .center_top2_left1 li:hover{ background-color: red; } .center_top2_left2 li:hover{ background-color: #a0b959; } .center_top2_left3 li:hover{ background-color: #df61ab; } .center_top2_left4 li:hover{ background-color: #55a1e5; } .center_top2_left a:hover{ color: #FFFFFF; } .center_top2_btn{ position: absolute; right: 30px; bottom: 15px; width: 60px; height: 25px; border: none; border-radius: 3px; color: #FFFFFF; outline: none; cursor: pointer; background: #f40 url(../img/down.png) no-repeat 90% center; } /*/*center_top2结束*/ /*main开始*/ .main{ width: 100%; height: auto; } .main_left{ width: 790px; height:auto; float: left; } .main_left_top{ width: 789px; height: 50px; line-height: 50px; border: 1px solid #eee; border-top: 2px solid #eee; border-bottom: none; } .main_left_top h1{ float: left; font-size: 16px; margin-left: 20px; text-shadow: 2px 2px 2px #c4c4c4; } .main_left_top span{ float: right; font-size: 12px; margin-right: 20px; font-weight: lighter; text-shadow: 2px 2px 2px #c4c4c4; } .main_left_Box{ position: relative; float: left; width: 393px; height: 268px; border: 1px solid #eee; } .main_left_Box:hover{ border: 1px solid red; } .main_left_center{ width: 349px; height: 220px; margin: 25px auto; } .main_left_center .s1{ margin-right: 10px; font-size: 15px; font-weight: 900; color: #f40; } .main_left_center .s2{ font-size: 13px; font-weight: bold; } .main_left_center_left{ float: left; margin-top: 13px; width: 168px; height: 190px; text-align: center; background-color: #f6f6f6; } .main_left_center_left h1{ margin-top: -2px; margin-bottom: -2px; } .main_left_center_left a{ color: black; font-size: 13px; } .main_left_center_left span{ font-size: 12px; color: #ccc; } .main_left_center_right{ float: right; margin-top: 13px; width: 168px; height: 190px; text-align: center; /*background-color: red;*/ } .main_left_center_right_top a{ display: inline-block; } .main_left_center_right_top p{ margin-top: 10px; font-size: 12px; } .main_left_center_right_top table{ margin-top: 20px; text-align: center; width: 164px; height: 76px; border-top: 1px dashed #eee; border-left: 1px dashed #eee; } .main_left_center_right_top table a{ font-size: 13px; } .main_left_center_right_top td{ border-bottom: 1px dashed #eee; border-right: 1px dashed #eee; width: 82px; height: 38px; margin-left: 1px; } .main_right{ float: right; width: 378px; height: auto; overflow: hidden; /*background-color: red;*/ } .main_right_top{ position: relative; width: 100%; height: 1164px; border-top: 2px solid #ddd; border-left: 2px solid #ddd; border-bottom: 1px solid#bbbbbb; background-color: #f4f4f4; } .main_right_top_up{ width: 336px; height: 206px; margin: 16px auto; /*background-color: red;*/ /*border: 1px solid #eee;*/ } .main_right_top_up h1{ margin-top: 5px; } .main_right_top_up a{ text-shadow: 1px 1px 2px #b2b2b2; color: black; font-weight: bolder; font-size: 16px; } .main_right_top_up span{ /*float: right;*/ float: right; font-size: 10px; font-weight: 600; line-height: 48px; margin-right: 10px; } .main_right_top_up span span{ color: red; margin-left: 10px; } .main_right_top_up_Box{ margin-top: 12px; width: 100%; height: 167px; border: 1px solid #eee; background: #fff; } .main_right_top_up_Box a{ display: inline-block; margin-left: 6px; margin-top: 10px; } .main_right_top_up_Box p{ font-size: 10px; margin-top: 10px; color: #a3a3a3; text-shadow: none; } .main_right_top_up_Box h3{ text-align: center; } .main_right_top_up_Box h3 a{ font-size: 10px; text-shadow: none; font-weight: 400; } .main_right_top .weitao{ display: block; height: 40px; padding: 20px 20px 0px; font-size: 16px; margin-top: 30px; margin-bottom: -20px; border-top:1px solid #ddd; text-shadow: 1px 1px 2px #b2b2b2; } .main_right_top .weitao a{ float: right; font-size: 12px; } .main_right_top_center{ width: 324px; height: 188px; background-color: #fff; margin:18px auto; } .main_right_top_center h3{ padding-top: 15px; padding-left: 15px; font-size: 13px; text-shadow: 2px 2px 2px #ccc; } .main_right_top_center h3 span{ /*float: right;*/ color: #bbbbbb; margin-left: 10px; } .main_right_top_center p{ margin: 10px 0 10px 10px; font-size: 12px; } .main_right_top_center .a1{ margin-left: 15px; } .main_right_top_center h6{ font-size: 13px; color: #9c9c9c; font-weight: 400; margin:10px 0 0 15px; } .main_right_top_center h4{ font-size: 12px; text-align: center; color: #9c9c9c; } .main_center{ width: 377px; height: 1200px; /*background-color: #55a1e5;*/ } .main_center_up { width: 88%; height: 884px; padding: 5% 6%; border: 1px solid #eee; } .main_center_up h1{ font-size: 14px; text-shadow: 2px 2px 2px #ccc; } .main_center_up_up{ width: 100%; height: 221px; margin-top: 20px; background-color: #9c9c9c; } .main_center_up_up_lunbo1img{ float: left; height: 222px; width: 220px; } .main_center_up_up_lunbo1btn{ position: relative; width: 40px; height: 10px; left: 30%; top: -50px; } .main_center_up_up_lunbo1btn span{ display: inline-block; width: 9px; height: 8px; border-radius: 50%; background-color: #b7b7b7; margin-left: -4px; } .main_center_up_up_lunbo1btn span:hover{ background-color: #707070; } .main_center_up_up_right { width: 110px; height: 221px; float: right; background-color: fuchsia; margin-top: -28px; } .main_center_up_p p{ clear: both; font-size: 12px; margin-top: 20px; } .main_center_up_p .red{ color: red; } .main_center_up_p .Box{ display: inline-block; width: 150px; margin: 0 10px 14px 0; } .main_center_up_center{ margin-top: 10px; width: 100%; height: 150px; border-top: 1px dashed #eee; padding-top: 20px } .main_center_up_center .ma{ display: inline-block; height: 150px; float: left; text-align: center; } .main_center_up_center .ma h5{ margin-top: 20px; color: black; font-weight: 400; } .main_center_up_ul{ width: 100%; height: 120px; /*background-color: #55a1e5;*/ } .main_center_up_ul li{ height: 28px; line-height: 28px; font-size: 12px; } .main_center_up_ul li em{ font-size: 14px; color: red; margin-right: 10px; } .main_center_up_ul li .e1{ color: black; } .main_center_up_ul span{ margin-left: 10px; color: #9c9c9c; } .main_center_down{ width: 100%; height: 250px; margin-top: 20px; /*background-color: #707070;*/ } .main_down{ clear: both; width: 100%; height: 460px; margin-top: 30px; /*background-color: #55a1e5;*/ } .main_down_top{ overflow: hidden; width: 100%; height: 50px; /*background-color: #a0b959;*/ line-height: 50px; padding-left: 5px; } .main_down_top h1{ float: left; font-size: 16px; } .main_down_top_right{ float: right; font-size: 12px; line-height: 50px; color: #bbbbbb; } .main_down_top_right a{ margin-left: 2px; margin-right: 1px; } .main_down_goods{ float: left; margin: 0 18px 30px 22px; width: 130px; height: 180px; } .main_down_goods a h3{ font-size: 13px; margin-top: 10px; font-weight: 400; } .main_down_goods p{ font-size: 13px; color: #bbbbbb; } .main_down_goods .red{ color: red; } .main_down_goods .green{ display: inline-block; padding: 2px; background-color: #8BC144; color: white; } .main_ad{ width: 100%; margin: 10px auto; border-bottom: 1px solid #eee; height: 105px; } .main_help{ width: 100%; height: 175px; border-bottom: 2px solid #f40; } .main_help_info{ float: left; width: 286px; padding-left: 10px; margin-top: 30px; height: 100px; border-right: 1px solid #eee; } .main_help_info span{ font-size: 16px; text-shadow: 2px 2px 2px #ccc; margin-left: -5px; } .main_help_info a{ display: inline-block; margin: 10px 70px 0 5px; font-size: 12px; } .main_help_info .a2{ margin: 10px 60px 0 5px; } .main_help_info .a3{ margin: 10px 20px 0 5px; } /*footer开始了*/ .footer{ width: 100%; height: 150px; color: #9c9c9c; /*background-color: #8BC144;*/ } .footer_left{ float: left; width: 94%; height: 150px; /*background-color: #8BC144;*/ } .footer_left_1{ width: 100%; height: 42px; line-height: 42px; border-bottom: 1px solid #ddd; } .footer_left_1 a,.footer_left_2 a{ font-size:12px; } .footer_left_2{ width: 100%; height:42px; line-height: 42px; } .footer_left_2 span{ color: #9c9c9c; font-size: 12px; } .footer_left_3{ color: #bbbbbb; padding-left: 10px; } .footer_left_3 span{ color: #6C6C6C; font-size: 12px; } .footer_left_4{ padding-left: 10px; margin-top: 10px; }

    以上所述是小编给大家介绍的新手学习前端之js模仿淘宝主页网站。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

    js淘宝主页

    猜你在找的JavaScript相关文章

    Javascript中的事件冒泡与捕获
    事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
    搞懂js中小数运算精度问题原因及解决办法
    js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
    搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
    什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
    前端对base64编码的理解，原生js实现字符base64编码
    @ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
    搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
    搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
    js判断浏览器是否支持webGL
    起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
    js判断undefined和null
    js判断undefined js判断null js判断null和undefined
    将文字自动转为banner打印形式的工具
    http://patorjk.com/software/taag/
    聊一聊 bootstrap 的轮播图插件
    今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
    js实现图片无缝循环跑马灯
    html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作