【学习笔记】HTML+CSS模仿静态淘宝首页

最新推荐文章于 2024-04-19 15:58:50 发布
VIP文章 最新推荐文章于 2024-04-19 15:58:50 发布
阅读量1.9w 收藏 11
点赞数 2
文章标签： css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ImDaret/article/details/108967980
版权

一、先上一张成果图

二、已上传Github

https://github.com/ImDaret/Front-end-learning

三、直接上代码（头大预警）

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>淘宝网 - 淘！我喜欢</title>
  <link rel="stylesheet" href="taobao.css">
  <link rel="icon" href="favicon.ico" />
</head>
<body>
  <div class="container">
    <header>
      <div class="left">
        <ul>
          <li>
            <a href="#">中国大陆</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li >
            <a href="#" style="color: #ff5000;">亲，请登录</a>
          </li>
          <li>
            <a href="#">免费注册</a>
          </li>
          <li>
            <a href="#">手机逛淘宝</a>
          </li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="#">我的淘宝</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <span class="iconfont mr5">&#xe6b8;</span>
            <a href="#">购物车</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <a href="#"><span class="iconfont mr5 store">&#xe608;</span>收藏夹</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <a href="#">商品分类</a>
          </li>
          <li><span class="colorD">|</span></li>
          <li>
            <a href="#">千牛卖家中心</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <a href="#">联系客服</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <span class="iconfont mr5">&#xe606;</span>
            <a href="#">网站导航</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
        </ul>
      </div>
    </header>
    <div class="advertisement">
        <a href="https://market.m.taobao.com/app/miniapp-biz/taoxiaopuPc/index.html?spm=a21bo.2017.201855.1.5af911d9I1YCFx&acm=lb-zebra-634493-8608804.1003.4.8190183&scm=1003.4.lb-zebra-634493-8608804.OTHER_15917254192631_8190183">
          <img src="https://img.alicdn.com/tfs/TB1OaEjIhD1gK0jSZFsXXbldVXa-1190-70.png" alt="淘宝小铺">
        </a>
    </div>
    <nav>
      <div class="navbar">
        <!-- 左 -->
        <div class="navleft">
          <img src="./images/logo.png" alt="" style="margin-left: 30px;">
        </div>
        <!-- 中 -->
        <div class="navmiddle">
          <!-- 上 -->
          <ul class="top">
            <li style="color: #fff;
            font-weight: bold;
            border-radius: 6px 6px 0 0;
            background-image: linear-gradient(to right, #ff9000, #ff5000);">宝贝</li>
            <li>天猫</li>
            <li>店铺</li>
          </ul>
          <br/>
          <input type="text" />
          <div class="placehorder">
            <i class="iconfont">&#xe602;</i>
            <span>显瘦牛仔背带裤</span>
          </div>
          <span class="iconfont imgSearch">&#xe698;</span>
          <button>搜索</button>
          <ul class="bottom">
            <li>
              <a href="#">新款连衣裙</a>
            </li>
            <li>
              <a href="#">四件套</a>
            </li>
            <li>
              <a href="#" style="color: #f40;">潮流T恤</a>
            </li>
            <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>
            <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 class="navright">
          <a
            href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html? spm=a21bo.2017.201858.1.5af911d9DWAa2W&acm=lb-zebra-634493-8609660.1003.4.8190782&scm=1003.4.lb-zebra-634493-8609660.OTHER_15917281779251_8190782">
            <span class="c5">手机淘宝</span>
            <img src="data:image/png;base64,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
最低0.47元/天 解锁文章
平常心t
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端的学习笔记HTML+css.zip
01-05
前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css...
C# 本地图片转Base64码和Base64码显示
纸上得来终觉浅，绝知此事要躬行
07-13 2万+
在跨系统的图片操作中如果后台程序不能操作前端上传的路径，这时候需要将图片转成Base64码供网页端或其他地方存储和使用。最简单的Base64转法 /// &lt;summary&gt; /// 视频截图完成事件回调 /// &lt;/summary&gt; /// &lt;param name="id"&gt;&lt;/param&gt...
利用Apache的POI包sax解析大数据量的Excel2007版本以上数据（Java实现，完全解析excel思路）
qq413379222的博客
09-29 11万+
首先说明，本文章引用了apache官网上的代码，本文章只细讲解利用POI包SAX解析版本为excel2007以上版本的数据。 我们知道excel2007以上版本采用xml存储格式，我们可以直接修改一个后缀.xlsx为.zip，然后解压文件，我们可以看到很多文件夹，文件夹下都是xml格式的文件。至此，我们只要稍稍细心的观察一下里面的结构，就可以有了解析的思路了。
前端学习爬坑之路(收藏的博客)
sugang666的博客
12-07 13万+
&lt;!DOCTYPE NETSCAPE-Bookmark-file-1&gt; &lt;!-- This is an automatically generated file. It will be read and overwritten. DO NOT EDIT! --&gt; &lt;META HTTP-EQUIV="Content-Type" CONTENT="t...
hutol json null值没了_Online JSON and url parameters are converted-online tool-postjson
weixin_39780260的博客
12-21 13万+
The base64 information of the image to be convertediVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAgAElEQVR4Xuy9B5gd13Um+NfLOfXr1xEdgO5GJgGQAJgpUqIkiwq2ZcnWWLI19tpj787O7ux4/O3sN2OPk8Ze29rxeG3LeR1liZJIU...
联华精选APP--请求body体和返回体加解密
一起学习哈
04-12 13万+
抓包 请求 POST /jingxuan/app/v3/lhprd/product/sku/query?page=0&pageSize=15 HTTP/1.1 shopCode: 1571 Authorization: trace_id: app-3.42.1-1571-unregistered-20220412154811200-f3ed shop: 111305 appId: NewJingXuanAPp platformId: jingxuan Content-MD5: MEY3MzM5Qz
vue嵌入app中——首次加载慢的动画
热门推荐
未来以来 futureToday
02-25 44万+
背景：项目首次加载过慢，需要下载的资源比较大；白屏时间过长，导致用户体验不好； 解决办法：index.html 下载完，（首页下载完）就像执行动画 伸手党代码： 加粗样式 <script> //在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = ` <div id="loadingDiv" style="position:absolute;left:50%;top:50%;margin-left:-35px;margi
前端点击按钮下载图片
一颗程序猿
04-27 4万+
前言：最近接到一个需求需要点击按钮直接可以保存图片，而不是右键另存为。找了几个方法总结一下方便参考。 一、使用a标签的download属性 注意：a标签的href链接需要填写图片转为base64后的地址， download属性填写为xxx.png。 例子： <!DOCTYPE html> <html> <head> <meta charset="UT...
2022跨年烟花代码（五）HTML5全屏烟花特效
u013343616的博客
12-30 11万+
HTML5全屏烟花特效 html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
HTML淘宝网的制作实训关键点,《网页设计与制作》实训指导书.doc
weixin_39791446的博客
06-09 898
《网页设计与制作》实训指导书《网页设计与制作》实训指导书《网页设计与制作》实训指导书主编：王春艳《网页设计与制作》实训指导书目 录一、总体说明1二、实训1 ——制作“班级网站”首页3三、实训2 ——制作“班级新闻”及其下级页面4四、实训3 ——制作“班级相册”页面4五、实训4 ——制作“关于我们”页面、“个人主页”页面5六、实训5 ——制作“网页设计”页面6七、实训6 ——制作“留言本”页面...
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html+css+js学习笔记.zip
01-01
html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
HTML+CSS+JavaScript教程学习笔记.zip
01-01
HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...
【日常记录】【CSS】利用动画延迟实现复杂动画
呆呆狗
04-13 1114
【日常记录】【CSS】利用动画延迟实现复杂动画。animation-delay属性的妙用
css设置文字撑满盒子
半兽先生的博客
04-12 302
【代码】css设置文字撑满盒子。
css 如何设置背景图片定位
ivan5277的博客
04-19 455
在CSS中设置背景图片的位置，可以使用属性。这个属性用于指定背景图像在元素背景区域中的起始位置。它可以接受多种类型的值，包括关键字、长度单位（像素、百分比等）以及组合值。
CSS系列:伪类选择器小记
最新发布
浪潮行舟_chenjin2136
04-19 587
组合选择器的使用有助于保持HTML代码的语义化，因为它们允许开发者基于元素之间的自然关系来应用样式，而不是强迫添加额外的类或ID。这种做法增加了样式的可复用性，因为相同的组合选择器样式可以在不同的HTML结构中被复用，只要这些结构符合选择器定义的元素关系。组合选择器在CSS中扮演着至关重要的角色，它们提供了一种强大的机制来选择具有特定关系的元素，从而允许开发者以更精细、更具体的方式应用样式。使用伪元素可以在不增加额外HTML元素的情况下实现复杂的设计，这有助于减少DOM的大小，从而提高网页的性能。
3小时前端入门教程（HTML,CSS,JS）笔记
m0_74676415的博客
04-12 755
该篇是基于b站 3小时前端入门教程（HTML,CSS,JS）所做出来的笔记，方便读者在观看视频之后，查阅这份笔记来进行复习，具体了解，请前往原作品3小时前端入门教程（HTML,CSS,JS）1、CSS 全名是`cascading style sheets`，中文名 层叠样式表`。2、用于定义网页样式和布局的样式表语言。3、通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。
html+css+javascript笔记
12-29
以下是一个简单的HTML+CSS+JavaScript笔记的示例： ```html <!DOCTYPE html> <html> <title>HTML+CSS+JavaScript笔记 <link rel="stylesheet" href="demo.css"> /* 在demo.css中定义的样式 */ div { color:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值