产品解决方案文档与社区免费试用定价云市场合作伙伴支持与服务了解阿里云
备案控制台登录/注册
开发者社区 开发与运维 文章 正文

淘宝主页+女装会场+详情页（html+css+js）

2023-06-07 65
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 淘宝主页+女装会场+详情页（html+css+js）
+关注继续查看

淘宝网是中国电商行业的领军企业，其前端网站技术一直处于国内领先水平。本博客旨在分享淘宝网前端在技术方面的积累与探索。内容涵盖前端开发、性能优化、移动端适配、架构设计等诸多方面，对于前端开发人员有着较高的技术参考价值。注：不含源码


先看图吧，是个（html+css+js）阶段性作业


1.index.html

image


2.goods.html

image


3.goodsDetails.html

image


部分详细代码

<!DOCTYPE html>
<html>
 <head>
  <title>淘宝网-淘！我喜欢</title>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="css/base.css" />
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" href="myfont/myfont.css" />
  <link rel="stylesheet" href="css/change_font.css" />
 </head>
 <body>
 <!--隐藏的导航栏nav-->
 <div id="nav">
    <div id="navcont">
        <div id="tbwang">
            <h1>
            <a href="https://www.taobao.com/" title="淘宝网">淘宝网</a>
            </h1>
        </div>
        <div id="serchnav">
            <div id="left_bb">
                <div id="lbb">
                </div>
                <div id="rbb">
                </div>
                <!-- ul -->
                <ul id="serchnav_ul">
                    <li>宝贝</li>
                    <li>天猫 <span id="redline"></span></li>
                    <li>店铺</li>
                </ul>
            </div>
            <div id="ser_ab">
                <input type="text" autofocus="autofocus" />
                <div class="gap">
                </div>
            </div>
            <button>搜索</button>
            <!-- 绝对定位的内容 -->
            
            <!-- 向下图标 -->
            <div id="down">
                <span id="down1" class="iconfont icon-xia"></span>
            </div>
            <!-- 搜索font -->
            <i class="iconfont icon-sousuo"></i>
            <!-- 相机font -->
            <a href="script:;">
                <em class="iconfont icon-zhaoxiangji"></em>
            </a>
        </div>
    </div>
 </div>
<!--头部：中国大陆版块-->
  <div id="chdalu">
   <div id="head_wrap1">
    <!--左边模块-->
    <div id="left_chdalu">
     <ul>
      <li id="cdl_li01">
        <a href=""><span id="area_change">中国大陆</span><span class="iconfont icon-xia change"></span>
        </a>
        <!--地区列表-->
         <div id="areasBox">
            <ul id="areas">
                <li>全球</li>
                <li>中国大陆</li>
                <li>中国香港</li>
                <li>中国澳门</li>
                <li>中国台湾</li>
                <li>韩国</li>
                <li>马来西亚</li>
                <li>澳大利亚</li>
                <li>新加坡</li>
                <li>新西兰</li>
                <li>加拿大</li>
                <li>美国</li>
                <li>日本</li>
                <li>法国</li>
                <li>德国</li>
                <li>瑞士</li>
            </ul>
         </div>
      </li>
      <li><a href="">亲，请登录</a></li>
      <li><a href="">免费注册</a></li>
      <li><a href="">手机逛淘宝</a></li>
     </ul>
     
    </div>
    <!--右边模块-->
    <div id="rig_chdalu">
     <li id="rig_chdalu_li01"><a href=""><span id="mytb">我的淘宝</span> <span class="iconfont icon-xia change1"></span></a>
        <div id="mytbBox">
            <ul id="mytbbox_ul01">
                <li>已买到的宝贝</li>
                <li>我的足迹</li>
            </ul>
        </div>
     </li>
     <li><a href=""><span class="iconfont icon-gouwuche1 change2"></span>购物车</a></li>
     <li>
        <a href="">
            <span class="iconfont icon-start change4"></span>收藏夹
            <span class="iconfont icon-xia change3"></span>
        </a>
     </li>
     <li><a href="">商品分类</a></li>
     <li id="shuxian">|</li>
     <li><a href="">千牛卖家中心</a></li>
     <li><a href="">联系客服</a></li>
     <li><a href=""><span class="iconfont icon-daohang change8"></span> 网站导航</a></li>
    </div>
   </div>
  </div>
<!--淘小铺版块-->
  <div id="xiaopu">
   <a href=""><img src="upload/taoxiaopu.png" width="1190px" alt="淘小铺" /></a>
  </div>
<!--淘宝搜索栏版块-->
  <div id="tbcom">
   <div id="tbcom_wrap">
    <!--淘宝logo-->
    <div id="tblogo">
     <h1>
      <a href="https://www.taobao.com/?spm=a21bo.2017.201857.1.5af911d9SiQ4jf"></a>
     </h1>
    </div>
    <!--宝贝 天猫 店铺 搜索栏-->
    <div id="search_box">
     <div id="words">
      <ul id="words_ul01">
       <li id="words_bb">宝贝</li>
       <li id="words_tm">天猫</li>
       <li id="words_dp">店铺</li>
      </ul>
     </div>
     <!--左边的搜索栏 右边的按钮-->
     <div id="searchbar">
        <div id="left_searchbar">
            <input id="inp" type="text" placeholder="p40手机壳" autofocus="autofocus" />
            <i class="iconfont icon-sousuo change6"></i>
            <div id="rleft_searchbar">
                <a class="a1" href="">
                    <span class="iconfont icon-zhaoxiangji change5"></span>
                </a>
            </div>
        </div>
      <button>搜索</button>
     </div>
     <!--新款连衣裙...沙发-->
     <div id="a">
         <a href="">新款连衣裙</a>
         <a href="">四件套</a>
         <a href="">潮流T恤</a>
         <a href="">时尚女鞋</a>
         <a href="">短裤</a>
         <a href="">半身裙</a>
         <a href="">男士外套</a>
         <a href="">墙纸</a>
         <a href="">行车记录仪</a>
         <a href="">新款男鞋</a>
         <a href="">耳机</a>
         <a href="">时尚女包</a>
         <a href="">沙发</a>
     </div>
    </div>
    <!--手机淘宝-->
    <div id="phonetb">
     <a href="">
      <span>手机淘宝</span>
      <img src="upload/phonetb.png" alt="手机淘宝下载" />
     </a>
     <!--小×号-->
     <div id="x">×
     </div>
    </div>
   </div>
  </div>
<!--引入版心版块-->
  <div class="typearea">
   <!--主题市场版块-->
   <div id="mkt">
    <!--市场模块的左边版块 商品列表-->
    <div id="left_mkt">
     <!--左边版块的上部-->
     <div id="top_left_mkt">主题市场</div>
     <!--左边版块的下部-->
     <div id="btm_left_mkt">
      <ul>
       <li><a href="./goods.html">女装</a>/<a href="">男装</a>/<a href="">内衣</a><span>&gt;</span></li>
       <li><a href="">鞋靴</a>/<a href="">箱包</a>/<a href="">配件</a><span>&gt;</span></li>
       <li><a href="">童装玩具</a>/<a href="">孕产</a>/<a href="">用品</a><span>&gt;</span></li>
       <li><a href="">家电</a>/<a href="">数码</a>/<a href="">手机</a><span>&gt;</span></li>
       <li><a href="">美妆</a>/<a href="">洗护</a>/<a href="">保健品</a><span>&gt;</span></li>
        
      </ul>
     </div>
    </div>
    <!--主题市场 右边模块-->
    <div id="rig_mkt">
     <!--右边模块的头部长条-->
     <div id="head_rig_mkt">
      <ul id ="left_head_rig_mkt">
       <li><a href="">天猫</a></li>
       <li><a href="">聚划算</a></li>
       <li><a href="">天猫超市</a></li>
      </ul>
      <ul id ="rig_head_rig_mkt">
       <li><span>|</span></li>
       <li><a href="">淘抢购</a></li>
       <li><a href="">电器城</a></li>
       <li><a href="">司法拍卖</a></li>
       <li><a href="">兴农脱贫</a></li>
       <li><span>|</span></li>
       <li><a href="">飞猪旅行</a></li>
       <li><a href="">智能生活</a></li>
       <li><a href="">苏宁易购</a></li>
      </ul>
     </div>
     <!--右边模块的body-->
     <div id="body_rig_mkt">
      <!--两个焦点图 focus -->
      <div id="focus_brm">
       <!--焦点图1 focus1 -->
       <div id="focus1_brm">
        <ul id="ul01">
            <li>
                <a href="">
                    <img src="upload/focus1_01.jpg" width="520px" />
                </a>
            </li>
            
        </ul>
        <div id="leftbtn">
        </div>
        <div id="rigbtn">
        </div>
        <div id="cir_dot">
            <ul id="ul02">
            </ul>
        </div>
       </div>
       <!--焦点图2 focus2-->
       <div id="focus2_brm">
        <div id="up_focus2_brm"><span>理想生活上天猫</span><i>1/6</i>
        </div>
        <div id="btm_focus2_brm">
         <a href=""><img src="upload/focus2_0101.jpg" /></a>
         <a href=""><img src="upload/focus2_0102.jpg" /></a>
        </div>
       </div>
      </div>
       <!--卖 mai-->
       <div id="mai_brm">
        <!--特卖 temai-->
        <div id="temai_brm">
         <a href=""><img src="upload/temai.webp.jpg" width="160px" alt="特卖" /></a>
        </div>
        <div class="daymai">今日热卖</div>
        <!--热卖 remai-->
        <div id="remai_brm">
         <a href=""><img src="upload/remai.jpg" height="202px" alt="热卖" /></a>
        </div>
       </div>
       <!--右边body rig_brm-->
        <div id="rig_brm">
            <div id="rig_brm1">
                <div id="toux_rig_brm1">
                    <div id="yuan_toux_rig_brm1">
                        <a href=""><img src="upload/toux.jpg" /></a>
                    </div>
                </div>
                <div id="nihao_rig_brm1">Hi! 你好
                </div>
                <div id="club_rig_brm1">
                    <a href="">领淘金币抵钱</a>
                    <a href="">会员俱乐部</a>
                </div>
                <div id="denglu_rig_brm1">
                    <button>登录</button>
                    <button>注册</button>
                    <button>开店</button>
                </div>
            </div>
            <a href id="rig_brm2">
                <span>网上有害信息举报专区</span>
                <div></div> 
            </a>
            <div id="rig_brm3">
                <!--头部head 公告 规则 论坛 ...-->
                <div id="rig_brm3_head">
                    <ul id="rig_brm3_head_ul01">
                        <li><a href="">公告</a></li>
                        <li><a href="">规则</a></li>
                        <li><a href="">论坛</a></li>
                        <li><a href="">安全</a></li>
                        <li><a href="">公益</a></li>
                    </ul>
                </div>
                <div id="rig_brm3_body">
                    <ul id="rbb3_ul01">
                        <li>
                            <a href="">95公益周阿里、腾讯等六家公司同台联合做公益</a>
                        </li>
                        <li>
                            <a href="">淘宝造物节之城市秘密</a>
                        </li>
                        <li>
                            <a href="">聚划算88红包省钱卡</a>
                        </li>
                    </ul>
    
                </div>
            </div>
            <!--充话费 旅行 车险 游戏...彩票 理财-->
            <div id="rig_brm4">
                <ul id="rig_brm4_ul">
                    <li>
                        <a href="">
                            <span class="iconfont icon-chonghuafei"><span>
                            <p>充话费</p>
                        </a>
                        <div id="rig_brm4_box1">
                            <div id="rig_brm4_box1cont">
                                <div id="rb4b1c_01">
                                    <a href="script:;">充话费</a>
                                    <a href="script:;">充流量</a>
                                    <a href="script:;">充固话</a>
                                    <a href="script:;">充宽带</a>
                                </div>
                                <div id="scrollBox11">
                                    <div id="rb4b1c_02">
                                        <input type="text" name="pnhonenum" placeholder="请输入手机号" autocomplete="on" />
                                        <div id="autoc">
                                        </div>
                                        <span class="iconfont icon-chonghuafei"><span>
                                    </div>
                                    <div id="rb4b1c_03">
                                        <input type="text" name="tablelist" value="50元" title="50元" readonly="readonly" />
                                        <!--readonly表示这个输入框是只读属性 即用户不能选中 不能更改value内容 不能输入-->
                                        <span class="iconfont icon-xia"></span>
                                    </div>
                                    <div id="rb4b1c_04">
                                        <i>售价</i>
                                        <i>¥</i>
                                        <i>49-49.8</i>
                                    </div>
                                    <button id="rb4b1c_btn">立即充值</button>
                                </div>
                            </div>
                            <em id="x2">×</em>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <span class="iconfont   icon-feizhu"><span>
                            <p>旅行</p>
                        </a>
                        <div id="rig_brm4_box2">
                            <div id="rig_brm4_box1cont">
                                <div id="rb4b1c_02">
                                    <a href="script:;">国内机票</a>
                                    <a href="script:;">国际机票</a>
                                    <a href="script:;">酒店客栈</a>
                                    <a href="script:;">度假门票</a>
                                    <a href="script:;">火车票</a>
                                </div>
                                <div id="scrollBox21">
                                    <form id="form1">
                                    <input type="radio" name="travel" checked="checked" id="单" />
                                    <label  for="单">单程</label>
                                    <input type="radio" name="travel" id="双" />
                                    <label  for="双">往返</label>
                                    <span>中国港澳台请选择国际机票</span>
                                    </form>
                                    <div id="fromTo1">
                                        <div id="left_fromTo1">
                                            <div id="left2_fromTo1" class="disp">
                                                <div id="left11_fromTo1">
                                                    <label for="go2">返程</label>
                                                </div>
                                                <input type="text" placeholder="日期" id="go2" name="f_city" />
                                                <span class="iconfont icon-rili-y" id="location"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <button id="chazhao_btn">查找</button>
                                </div>
                            </div>
                            <em id="x2">×</em>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <span class="iconfont icon--"><span>
                            <p>车险</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="iconfont icon-youxi"><span>
                            <p>游戏</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="iconfont icon-caipiao"><span>
                            <p>彩票</p>
                        </a>
                    </li>
                    
                </ul>
            </div>
            <!--阿里app 淘宝 天猫 支付宝 钉钉 淘小铺-->
            <div id="rig_brm5">
                <div id="rig_brm51">
                    <span>阿里APP</span>
                    <a href="">
                        <span>更多</span>
                        <span class="iconfont icon-dayu"></span>
                    </a>
                </div>
                <div id="rig_brm52">
                    <ul>
                            <a href="">
                                <img src="upload/app05.webp" />
                            </a>
                            <div id="saotb">
                                <img src="upload/saotb.jpg" />
                                <p>扫一扫淘小铺</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
     </div>
    </div>
    

   <!--底部结尾 footer-->
   <div id="footer">
    <img src="upload/footer.png" />
   </div>
  </div>
  <!-- 侧边固定栏 -->
  <div id="sidebar">
    <span id="sb_font1" class="iconfont icon-taobao"></span>
    <ul id="sb_ul">
        <li>
            <a href="" class="sb_ula1">
                爱逛好货
            </a>
            <i></i>
        </li>
    
    </ul>
  </div>
  <script src="js/taobao.js"></script>
</body>
</html>
文章标签：
前端开发
关键词：
JavaScript CSS
HTML CSS
CSS html
JavaScript HTML
CSS js
Lotay_天天
目录
相关文章
极客小俊
|
1天前
|
前端开发 开发者
520要通过这种方式告白 html+css+javascript canvas爱心代码
html+css+javascript canvas爱心代码
极客小俊
17 0
520要通过这种方式告白 html+css+javascript canvas爱心代码
无法自律的人
|
3天前
|
JavaScript 前端开发
JS和CSS的交互
主写的是js与css怎么样去交互，有什么样式和方法。 最后面也写了四大系列 接触编程语言第一次发布作品见谅
无法自律的人
21 1
极客小俊
|
4天前
|
前端开发 JavaScript 开发者
web前端开发 HTML+CSS+JAVASCRIPT 二级_三级导航菜单(参考案例)
JS 二级、三级导航菜单案例
极客小俊
20 0
赵广陆
|
23天前
|
前端开发 JavaScript
HTML+CSS+JS仿京东购物车页面动态效果
HTML+CSS+JS仿京东购物车页面动态效果
赵广陆
24 0
前端李十三
|
29天前
html+css+js图片加载失败设置默认图片
html+css+js图片加载失败设置默认图片
前端李十三
29 0
前方一片光明
|
2月前
|
前端开发 JavaScript Java
前端——JSP中引入项目中的js文件或css文件或图片
前端——JSP中引入项目中的js文件或css文件或图片
前方一片光明
23 1
泡芙-草莓
|
2月前
|
存储 前端开发 JavaScript
HTML+CSS+JS轮播图制作（前端）
HTML+CSS+JS轮播图制作（前端）
泡芙-草莓
31 0
年少轻与狂
|
2月前
|
前端开发 JavaScript 开发者
phpcms之 后台登录连接不到js和css问题的解决
phpcms之 后台登录连接不到js和css问题的解决
年少轻与狂
20 0
夜斗(dou)
|
2月前
|
存储 资源调度 前端开发
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新8
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新
夜斗(dou)
76 0
夜斗(dou)
|
2月前
|
存储 JSON 缓存
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新7
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新
夜斗(dou)
42 0
热门文章
最新文章
1
HTML常用表单写一个百度搜索和注册页面
2
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
3
HTML——标签，属性，语法总结
4
网络结构与HTML学习笔记
5
使用 WebGL 为 HTML5 游戏创建逼真的地形
6
html 页面中动态计算 div 元素的宽度
7
html使用vue模板、html引入vue.js-测试demo
8
七、使用BeautifulSoup4解析HTML实战（一）
9
爬虫系统的核心：如何创建高质量的HTML文件？
10
基于html5拖拽api实现列表的拖拽排序
1
520要通过这种方式告白 html+css+javascript canvas爱心代码
17
2
css网格化布局
14
3
CSS Flex 布局的 flex-direction 属性讲解
12
4
CSS Flex 布局的引入背景
13
5
如何处理 Hybris Accelerator css style 显示不正确的问题
14
6
CSS div隐藏滚动条
17
7
CSS 限制文字行数(超出显示省略号...)
8
8
CSS3 transform 文字切斜展开动画
8
9
CSS3 字体抗锯齿渲染
7
10
CSS3 选择器
7
相关产品
云迁移中心
文档详情 产品详情
相关课程
更多
前端开发CSS基础 HTML5 新特性教程 零基础学前端HTML+CSS HTML基础入门学习 JavaScript 自学手册文档教程 JavaScript入门与实战
相关电子书
更多
JavaScript函数 Delivering Javascript to World 编程语言如何演化-以JS的private为例
相关实验场景
更多
前端开发基础3：CSS3常见显示属性 Html5和Webpack1：Webpack5打包工具介绍 Html5和Webpack2：Webpack5打包JS和样式表 Html5和Webpack3：Webpack5的常见用法 收银台的场景化界面实践 CSS实现千纸鹤样式
推荐文章
更多
重磅来袭！参与评测赢Iphone14 pro！ 文件存储NAS评测征集令！ 招募！寻找技术人的伯乐！ 乘风者计划邀您入驻社区，精彩权益即刻享
下一篇
部署并使用Docker（CentOS 8）