html + css 淘宝网实战
之前有小伙伴说，淘宝那么牛逼你会写代码，能帮我做一个一样的淘宝网站吗，好呀，看我接下来如何给你做一个淘宝首页。hahh,开个玩笑。。。学习而已。
在进行html + css编写之前 先了解下网页的组成和网页元素的尺寸吧
1.网页的组成
一个网页从主要由页头，正文，页尾、布局排版、交互元素组成的。
淘宝网页的页头，正文就是中间的部分，页尾是最底部关于导航、网页版权备案信息那部分，交互元素是用户在网页上的可以干什么事，比如链接跳转，搜索按钮，输入框等；布局排版是网页设计最重要的部分，就是指网页要长成个什么样子。
2. 网页元素尺寸
1.电脑端的网页尺寸：
宽度：通常在1024px到1920px之间，主流分辨率为1920px。简单的理解就是网页我们可以看到部分的宽度尺寸。电脑的屏幕有大有小，所以选择合适的尺寸来适应不同大小屏幕。
高度：没有固定标准，但一般每个屏幕的高度大约为900px（考虑到1080px的屏幕需要减去浏览器头部和底部的高度）
2.字体设计：
中文常用字体：宋体、微软雅黑或苹果系统黑体。
导航文字：14px、16px、18px、20px。
本文内容：12px、14px。
标题：22px、24px、26px、28px、30px。
3.html + css排版
头部导航
网页元素都是由一个一个区域组成的，我们把这个区域叫做 块元素，也就是一个<div>标签，在头部导航中有背景区域，可以把这个区域的宽度设为100% ，这样无论屏幕多大背景色都会保持不变。其实就是中间文字部分，由一个大的<div>作为容器将他们包裹起来，这个区域是可视区域，宽度也就是网页的尺寸，要保持居中显示。最后就是用2个<div>将左右2边的文字分别包裹起来进行显示了.
由于<div>是块，一个<div>独占一行,所以采用的浮动属性float来布局的。这里当然也可以用到flex容器布局的
搜索及导航区
上面画的红色框框就是一个个的<div>标签，他们的关系是包含和被包含的关系。排版这里主要也是用到css float浮动属性，需要注意的是在浮动元素后面的元素中需要使用 clear:both 清除浮动带来的影响 .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝网</title>
<link rel="stylesheet" href="style/taobao.css">
</head>
<body><div class="header"><div class="header-top"><div class="header-top-l"><ul><li class="active">中国大陆</li><li>用户名</li><li>网页无障碍</li><li>切换企业版</li><li>选择主题</li></ul></div><div class="header-top-r"><ul><li>已买到的宝贝</li><li>我的淘宝</li><li>购物车</li><li>收藏夹</li><li>商品分类</li><li>免费开店</li><li>千牛卖家中心</li><li>帮助中心</li></ul></div></div><div class="header-gg"><div class="header-gg-cc"><img src="images/header-gg.png" alt=""></div> </div><div class="header-sr"><div class="logo"></div><div class="search-cc"><div class="search-ii"><div class="search-select"><select name="" id=""><option value="">宝贝</option><option value="">天猫</option><option value="">店铺</option></select></div><div class="fg">|</div><div class="search-input"><input type="text" placeholder="九号mzmix后视镜"></div><div class="search-button">搜索</div></div><div class="search-tk"><div class="camera"></div><div class="search-tk-t">搜同款</div></div><div class="search-keyword"><ul><li><a class="hot">打牌钜惠倒计时</a></li><li><a class="hot">零食1元秒杀</a></li><li><a class="hot">爆款低至9.9元</a></li><li>mtplay小牛</li><li>儿童羽绒服</li><li>妈妈外套冬季羽绒服</li><li>赤兔7Pro跑步鞋</li><li>全顺四代纪念版</li></ul></div></div><div class="red-packet"></div></div> </div><div class="nav"><ul><li><div class="nav-title first-title"><a>天猫</a</li><li><div class="nav-icon"></div><div class="nav-title"><a>淘宝直播</a</div></li><li><div class="nav-icon nav-icon2"></div><div class="nav-title"><a>淘宝企业购</a</div></li><li><div class="nav-title"><a>司法拍卖</a</li><li><div class="nav-title green"><a>天猫超市</a</li><li><div class="nav-icon nav-icon3"></div><div class="nav-title"><a>闲鱼集市</a</div></li><li><div class="nav-title"><a>天猫国际</a</li></ul></div>
</body>
</html>*{margin:0;padding:0;
}
body,button,input,select,textarea {font: 12px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,BlinkMacSystemFont,Helvetica Neue,Arial,PingFang SC,PingFang TC,PingFang HK,Microsoft Yahei,Microsoft JhengHei
}.header{width:100%;height:35px;background-color: #f5f5f5;
}
.header-top{width: 1200px;height:35px;margin: 0 auto; /*居中*/color:#6d6b70;
}.header-top ul{padding-top:15px;
}.header-top-l{float: left; width:420px;height:35px;line-height: 6px;
}
.header-top-l .active{color:#000000;
}.header-top-r{float: left;padding-left: 80px;width:670px;height:35px;line-height: 6px;
}
.header-top-l ul li{list-style: none;float: left;font-size: 13px;margin-right: 20px;
}.header-top-r ul li{list-style: none;float: left;font-size: 13px;margin-right: 20px;
}.header-gg{width: 100%;height: 60px;background-color: #19814e;
}
.header-gg-cc{width: 1200px;height: 60px;margin: auto;position: relative;overflow: hidden;
}
.header-gg img{width:3840px;height:60px;position: absolute;left: -112%;
}
.header-sr{width:1530px;height: 100px;height: auto;margin: 0 auto;margin-top:14px;
}
.logo{width:120px;height: 75px;background: url(../images/logo.png) no-repeat 50% / cover;float: left;
}
.search-cc{width:1070px;height:83px;float: left;margin-left:85px;
}
.search-ii{width: 950px;height:45px;border:2px solid #df5a1f;border-radius: 12px;float: left;
}
.search-select select{border: none;font-size: 15px;margin:15px 0 15px 18px;color:#313138;float: left;
}
.fg{float: left;margin:8px;color:#d7d7da;
}
.search-input{float: left;
}
.search-input input{border:none;margin:5px;width:760px;height: 35px;
}
.search-input input:focus{outline: none;
}
.search-button{width:74px;height: 38px;background-color: #ff5000;float: left;color:white;border-radius: 10px;margin-top:3px;text-align: center;line-height: 35px;cursor: pointer;
}
.search-tk{width: 100px;height: 45px;background-color: #fff2ec;border-radius: 10px;float: left;margin-left:10px;
}
.camera{width:25px;height: 25px;background: url("../images/camera.png") no-repeat 50% / cover;margin:10px 0 0 10px;float: left;
}
.search-tk-t{width: 55px;height:20px;line-height: 43px;float: left;color: #ef550f;
}
.search-keyword{clear: both;margin-left:5px;
}
.search-keyword ul li{ list-style: none;float: left;margin-left: 10px;font-size: 12px;color:#96979c;padding-top:6px;
}
.hot{color:#f1334d;
}
.red-packet{width:240px;height:72px;background: url(../images/red-packet.gif) no-repeat 50% / cover;float: left;margin-left:15px;
}
.nav{clear: both;width:990px;height:35px;margin: 0 auto;padding-top:20px;
}
.nav ul li{list-style: none;float: left;margin-left:15px;font-size:16px;font-weight: 600;
}
.nav ul li:nth-child(-n+4){color:#f60c3d;
}.green{color:#50d44f;
}
.nav-icon, nav-title{float: left;
}
.nav-title{width: 120px;
}
.first-title{width: 80px;
}
.nav-icon{width: 20px;height:20px;background: url(../images/icon1.gif) no-repeat 50% /cover;margin: 1px 5px -2px 0
}
.nav-icon2{width: 20px;height:20px;background: url(../images/icon2.png) no-repeat 50% /cover;margin: 1px 5px -2px 0
}
.nav-icon2{width: 20px;height:20px;background: url(../images/icon3.gif) no-repeat 50% /cover;margin: 1px 5px -2px 0
}
浏览器效果：
后面的内容区域有兴趣可以下载下来接着完成啦，如果有问题的地方欢迎留言！
相关文章：
html + css 淘宝网实战
之前有小伙伴说，淘宝那么牛逼你会写代码，能帮我做一个一样的淘宝网站吗，好呀，看我接下来如何给你做一个淘宝首页。hahh,开个玩笑。。。学习而已。 在进行html css编写之前 先了解下网页的组成和网页元素的尺寸吧 1.网页的组成 …...
游戏引擎学习第62天
回顾 我们目前正在开发一把虚拟剑，目的是让角色可以用这把剑进行攻击。最初的工作中，我们使用了一个摇滚位图作为虚拟剑的模型，并且实现了一个基本的功能：角色可以丢下剑。但这个功能并没有达到预期的效果，因为我们想…...
LeetCode - Google 校招100题 第6天 回溯法(Backtracking) (8题)
欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/144743505 LeetCode 合计最常见的 112 题： 校招100题 第1天 链表(List) (19题)校招100题 第2天 树(Tree) (21题)校招100题 第3天 动态规划(DP) (20题)...
C项目 天天酷跑（下篇）
上篇再博客里面有，接下来我们实现我们剩下要实现的功能 文章目录 碰撞检测 血条的实现 积分计数器 前言 我们现在要继续优化我们的程序才可以使这个程序更加的全面 碰撞的检测 定义全局变量 实现全局变量 void checkHit() {for (int i 0; i < OBSTACLE_C…...
达梦数据守护搭建
主备库初始化 ./dminit path/dmdata/data db_nameDM01 instance_nameDMSVR01 port_num5236 page_size16 extent_size32 log_size500 case_sensitive1 SYSDBA_PWDDM01SYSDBA ./dminit path/dmdata/data db_nameDM02 instance_nameDMSVR02 port_num5236 page_size16 extent_size3…...
记录一次前端绘画海报的过程及遇到的几个问题
先看效果 使用工具 html2canvas import html2canvas from html2canvas// 绘画前的内容 我就不过多写了<div class"content" ref"contentRef" v-show"!imgShow"><img :src"getReplaceImg(friendObj.coverUrl)" alt"&qu…...
24.12.26 SpringMVCDay01
SpringMVC 也被称为SpringWeb Spring提供的Web框架,是在Servlet基础上,构建的框架 SpringMVC看成是一个特殊的Servlet,由Spring来编写的Servlet 搭建 引入依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc<…...
一分钟快速了解Ecovadis认证等级划分
Ecovadis认证等级划分，作为评估企业社会责任表现的重要标尺，其细致而严谨的体系为全球范围内的企业提供了一个可量化的衡量标准。这一认证等级不仅彰显了企业在环境保护、劳工权益、商业道德以及可持续发展等方面的努力与成就，更是企业向国际…...
科技云报到：人工智能时代“三大件”：生成式AI、数据、云服务
科技云报到原创。 就像自行车、手表和缝纫机是工业时代的“三大件”。生成式AI、数据、云服务正在成为智能时代的“新三大件”。加之全球人工智能新基建加速建设，成为了人类社会数字化迁徙的助推剂，让新三大件之间的耦合越来越紧密。从物理世界到数字世…...
【网络云计算】2024第52周-每日【2024/12/26】小测-理论实操-备份MySQL数据库并发送邮件-解析
文章目录 1. 编写备份脚本2. 设置定时任务3. 注意事项 【网络云计算】2024第52周-每日【2024/12/26】小测-理论&实操-备份MySQL数据库并发送邮件-解析 为了实现您提出的Discuz数据库备份任务，包括备份脚本、定时任务、备份成功邮件确认、脚本运行时长、备份后的…...
菜鸟带新鸟——基于EPlan2022的部件库制作（3D）
设备逻辑的概念： 可在布局空间 中和其它对象上放置对象。可将其它对象放置在 3D 对象上。已放置的对象分到组件的逻辑结构中。 将此属性的整体标识为设备逻辑。可使用不同的功能创建和编辑设备逻辑。 设备的逻辑定义 定义 / 旋转 / 移动 / 翻转：组…...
Level DB --- MemTable
MemTable是Level DB中重要的组件，它主要处理Level DB内存级别的增删查改。 基本数据结构 基础的存储数据结构如图1所示，这是一个存储单元的结构。其中1是internal key size，这里面包括两部分，一部分我们Level DB存储key-value中…...
【山西长治】《长治市市直部门政务信息化建设项目预算编制规范和预算编制标准》（长财行[2022]25号）－省市费用标准解读系列32
《长治市市直部门政务信息化建设项目预算编制规范和预算编制标准(试行)》（长财行[2022]25号）于2022年8月1日开始试行，此标准由长治市财政局、长治市行政审批管理局编制，是对信息化建设项目预算管理的基本要求，主要适用…...
海格通信嵌入式面试题及参考答案
计算电路的最高工作频率如何计算？ 计算电路的最高工作频率主要考虑电路中的关键路径延迟。关键路径是指在整个电路中，信号传播延迟最长的路径。电路的最高工作频率的倒数就是时钟周期，而时钟周期必须大于关键路径的延迟时间。 首先要确定电路中各个模块的延迟。比如对于组合…...
前端学习DAY27(盒子模型内边距）
内边距(padding)，指的是盒子的内容区与盒子边框之间的距离 一共有四个方向的内边距， 可以通过: padding-top padding-right padding-bottom padding-left <!DOCTYPE html> <html lang"en"> <head><meta charset"U…...
基于cobra开发的k8s命令行管理工具k8s-manager
基于cobra开发的k8s命令行管理工具k8s-manager 如果觉得好用，麻烦给个Star!通用配置1 node 分析所有node的资源情况2 analysis 分析Node节点上的资源使用构成3 image 获取指定namespace的所有镜像地址4 resource 获取指定namespace的所有limit 与 Requests大小5 top…...
-数组)
scala基础学习(数据类型)-数组
文章目录 数组 Array创建数组直接定义fillofDimtabulate range打印数组toSeqdeepforeach(println) length获取长度indexOf 获取元素索引获取元素/修改元素遍历数组数组内元素转换filter 过滤found 查找元素数组折叠 foldLeft切片拼接排序拷贝copyclone 数组 Array Array是一个…...
uniapp 微信小程序 页面部分截图实现
uniapp 微信小程序 页面部分截图实现 原理都是将页面元素画成canvas 然后将canvas转化为图片，问题是我页面里边本来就有一个canvas，ucharts图画的canvas我无法画出这块。 想了一晚上，既然canvas最后能转化为图片，那我直接…...
C语言从入门到放弃教程
C语言从入门到放弃 1. 介绍1.1 特点1.2 历史与发展1.3 应用领域 2. 安装2.1 编译器安装2.2 编辑器安装 3. 第一个程序1. 包含头文件2. 主函数定义3. 打印语句4. 返回值 4. 基础语法4.1 注释4.1.1 单行注释4.1.2 多行注释 4.2 关键字4.2.1 C语言标准4.2.2 C89/C90关键字…...
直流无刷电机驱动原理3-驱动板硬件设计
六步换向原理 检测转子角度，知道什么时候是60度，什么时候应该换向。 逆时针旋转 三相逆变器，mos管，半桥驱动电路。 PWM调制 不对称半桥调制例程使用第（2）种。对上桥臂PWM调制，下桥臂全部导通。这时候由上桥臂的PWM的占空比决定电机的旋转速度。驱动器电路硬件框图--实…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ，其中 inorder 是二叉树的中序遍历， postorder 是同一棵树的后序遍历，请你构造并返回这颗 二叉树 。 示例 1: 输入：inorder [9,3,15,20,7…...
人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型
在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重，适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解，并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...
SQL注入篇-sqlmap的配置和使用
在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap，但是由于很多朋友看不了解命令行格式，所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习，链接：https://wwhc.lanzoue.com/ifJY32ybh6vc…...
Java严格模式withResolverStyle解析日期错误及解决方案
在Java中使用DateTimeFormatter并启用严格模式（ResolverStyle.STRICT）时，解析日期字符串"2025-06-01"报错的根本原因是：模式字符串中的年份格式yyyy被解释为YearOfEra（纪元年份），而非…...