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的占空比决定电机的旋转速度。驱动器电路硬件框图--实…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...
RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
【JVM】Java虚拟机（二）——垃圾回收
目录 一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法 二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四ÿ…...
Redis：现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发，其初衷是为了满足他自己的一个项目需求，即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源，Redis凭借其简单易用、…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...