当前位置：首页 > news >正文

html + css 淘宝网实战

news 2026/2/10 2:24:02

之前有小伙伴说，淘宝那么牛逼你会写代码，能帮我做一个一样的淘宝网站吗，好呀，看我接下来如何给你做一个淘宝首页。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.网页的组成 …...

编程日记 2024/12/27 7:30:42

游戏引擎学习第62天

回顾我们目前正在开发一把虚拟剑，目的是让角色可以用这把剑进行攻击。最初的工作中，我们使用了一个摇滚位图作为虚拟剑的模型，并且实现了一个基本的功能：角色可以丢下剑。但这个功能并没有达到预期的效果，因为我们想…...

编程日记 2024/12/27 7:29:42

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题)...

编程日记 2024/12/27 7:28:41

C项目天天酷跑（下篇）

上篇再博客里面有，接下来我们实现我们剩下要实现的功能文章目录碰撞检测血条的实现积分计数器前言我们现在要继续优化我们的程序才可以使这个程序更加的全面碰撞的检测定义全局变量实现全局变量 void checkHit() {for (int i 0; i < OBSTACLE_C…...

编程日记 2024/12/27 7:27:40

达梦数据守护搭建

主备库初始化 ./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…...

编程日记 2024/12/27 7:25:38

记录一次前端绘画海报的过程及遇到的几个问题

先看效果使用工具 html2canvas import html2canvas from html2canvas// 绘画前的内容我就不过多写了<div class"content" ref"contentRef" v-show"!imgShow"><img :src"getReplaceImg(friendObj.coverUrl)" alt"&qu…...

编程日记 2024/12/27 7:24:33

24.12.26 SpringMVCDay01

SpringMVC 也被称为SpringWeb Spring提供的Web框架,是在Servlet基础上,构建的框架 SpringMVC看成是一个特殊的Servlet,由Spring来编写的Servlet 搭建引入依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc<…...

编程日记 2024/12/27 7:23:30

一分钟快速了解Ecovadis认证等级划分

Ecovadis认证等级划分，作为评估企业社会责任表现的重要标尺，其细致而严谨的体系为全球范围内的企业提供了一个可量化的衡量标准。这一认证等级不仅彰显了企业在环境保护、劳工权益、商业道德以及可持续发展等方面的努力与成就，更是企业向国际…...

编程日记 2024/12/27 7:21:28

科技云报到：人工智能时代“三大件”：生成式AI、数据、云服务

科技云报到原创。就像自行车、手表和缝纫机是工业时代的“三大件”。生成式AI、数据、云服务正在成为智能时代的“新三大件”。加之全球人工智能新基建加速建设，成为了人类社会数字化迁徙的助推剂，让新三大件之间的耦合越来越紧密。从物理世界到数字世…...

编程日记 2024/12/27 7:20:27

【网络云计算】2024第52周-每日【2024/12/26】小测-理论实操-备份MySQL数据库并发送邮件-解析

文章目录 1. 编写备份脚本2. 设置定时任务3. 注意事项【网络云计算】2024第52周-每日【2024/12/26】小测-理论&实操-备份MySQL数据库并发送邮件-解析为了实现您提出的Discuz数据库备份任务，包括备份脚本、定时任务、备份成功邮件确认、脚本运行时长、备份后的…...

编程日记 2024/12/27 7:16:23

菜鸟带新鸟——基于EPlan2022的部件库制作（3D）

设备逻辑的概念： 可在布局空间中和其它对象上放置对象。可将其它对象放置在 3D 对象上。已放置的对象分到组件的逻辑结构中。将此属性的整体标识为设备逻辑。可使用不同的功能创建和编辑设备逻辑。设备的逻辑定义定义 / 旋转 / 移动 / 翻转：组…...

编程日记 2024/12/27 7:14:22

Level DB --- MemTable

MemTable是Level DB中重要的组件，它主要处理Level DB内存级别的增删查改。基本数据结构基础的存储数据结构如图1所示，这是一个存储单元的结构。其中1是internal key size，这里面包括两部分，一部分我们Level DB存储key-value中…...

编程日记 2024/12/27 7:12:19

【山西长治】《长治市市直部门政务信息化建设项目预算编制规范和预算编制标准》（长财行[2022]25号）－省市费用标准解读系列32

《长治市市直部门政务信息化建设项目预算编制规范和预算编制标准(试行)》（长财行[2022]25号）于2022年8月1日开始试行，此标准由长治市财政局、长治市行政审批管理局编制，是对信息化建设项目预算管理的基本要求，主要适用…...

编程日记 2024/12/27 7:11:18

海格通信嵌入式面试题及参考答案

计算电路的最高工作频率如何计算？计算电路的最高工作频率主要考虑电路中的关键路径延迟。关键路径是指在整个电路中，信号传播延迟最长的路径。电路的最高工作频率的倒数就是时钟周期，而时钟周期必须大于关键路径的延迟时间。首先要确定电路中各个模块的延迟。比如对于组合…...

编程日记 2024/12/27 7:08:15

前端学习DAY27(盒子模型内边距）

内边距(padding)，指的是盒子的内容区与盒子边框之间的距离一共有四个方向的内边距， 可以通过: padding-top padding-right padding-bottom padding-left <!DOCTYPE html> <html lang"en"> <head><meta charset"U…...

编程日记 2024/12/27 7:04:11

基于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…...

编程日记 2024/12/27 7:00:07

scala基础学习(数据类型)-数组

文章目录数组 Array创建数组直接定义fillofDimtabulate range打印数组toSeqdeepforeach(println) length获取长度indexOf 获取元素索引获取元素/修改元素遍历数组数组内元素转换filter 过滤found 查找元素数组折叠 foldLeft切片拼接排序拷贝copyclone 数组 Array Array是一个…...

编程日记 2024/12/27 6:59:06

uniapp 微信小程序页面部分截图实现

uniapp 微信小程序页面部分截图实现原理都是将页面元素画成canvas 然后将canvas转化为图片，问题是我页面里边本来就有一个canvas，ucharts图画的canvas我无法画出这块。想了一晚上，既然canvas最后能转化为图片，那我直接…...

编程日记 2024/12/27 6:58:05

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关键字&#xf…...

编程日记 2024/12/27 6:57:04

直流无刷电机驱动原理3-驱动板硬件设计

六步换向原理检测转子角度，知道什么时候是60度，什么时候应该换向。逆时针旋转三相逆变器，mos管，半桥驱动电路。 PWM调制不对称半桥调制例程使用第（2）种。对上桥臂PWM调制，下桥臂全部导通。这时候由上桥臂的PWM的占空比决定电机的旋转速度。驱动器电路硬件框图--实…...

编程日记 2024/12/27 6:51:59

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南版本号: 1.0,0 作者: 老王要学习日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/9 18:19:34

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解一、项目概述本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...

编程新知 2026/2/9 20:01:01

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2026/2/4 23:47:47

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r，求圆的面积。圆的面积应精确到小数点后5位。例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。输…...

编程新知 2026/1/31 12:52:15

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2026/1/29 7:31:17