HTML+CSS实现淘宝首页

最新推荐文章于 2024-07-24 14:58:19 发布
最新推荐文章于 2024-07-24 14:58:19 发布
阅读量7.8k 收藏 40
点赞数 15
分类专栏： 前端 html 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67402013/article/details/123346460
版权

一、HTML+CSS实现淘宝首页

仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论

二、效果图如下：

在这里插入图片描述

三、部分源代码如下：（如需要全部代码 关注我或者私信我评论区留言我发你们邮箱,原创不易，记得点赞和收藏哦）。
HTML部分源代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>淘宝网-淘！我喜欢</title>
	<meta charset="utf-8">
	<link rel="shortcut icon" href="logo.png" type="logo.png" />	

	<link rel="stylesheet" type="text/css" href="index.css">
	<link rel="stylesheet" type="text/css" href="第二页商品.css">
	<link rel="stylesheet" type="text/css" href="第三页商品.css">
	<link rel="stylesheet" type="text/css" href="轮播图.css">
	<style>
	#junjie{
	width:300px;
	height:200px;
	border-color: #000000;
	
}
    </style>
</head>
<body>
	<div class="wrapper">
		<!-- 导航条+ad -->
		<div class="top-nav-wrap">
		<div class="top-nav">
			<ul class="top-nav-l">
				<li class="top-nav-menu china">
					<span class="c-span">中国大陆</span>
					<span class="bg-pic xsj-pic"></span>
				</li>
				<li class="top-nav-menu login-sign">
					<a href="登录.html" class="login">亲，请登录</a>
					<a href="注册.html" class="sign">免费注册</a>
					</li>
				<li class="top-nav-menu">
					<a href="#">手机逛淘宝</a>
			    </li>
			</ul>
			<ul class="top-nav-r">
				<li class="top-nav-menu my-taobao">
					<a href="#">我的淘宝</a>
					<span class="bg-pic xsj-pic"></span>
			</li>
				<li class="top-nav-menu shop-car">
					<a href="购物车/demo.html
						">
					<span class="bg-pic shopCar-pic"></span>
					<span>购物车</span>
						</a>
						<span class="bg-pic xsj-pic"></span>
					</li>
					<li class="top-nav-menu like">
						<a href="#">
						<span class="bg-pic like-pic"></span>
						<span>收藏夹</span>
						</a>
						<span class="bg-pic xsj-pic"></span>
			</li>
				<li class="top-nav-menu goods">
						<a href="#">商品分类</a>
				</li>
				<li class="top-nav-menu cut-off">
						<span>|</span>
				</li>
				<li class="top-nav-menu seller">
						<a href="#">卖家中心</a>
						<span class="bg-pic xsj-pic"></span>
				</li>
				<li class="top-nav-menu customer">
						<a href="#">联系客服</a>
						<span class="bg-pic xsj-pic"></span>
				</li>
				<li class="top-nav-menu web-nav">
						<a href="#">
						<span class="bg-pic web-nav-pic"></span>
						<span>网站导航</span>
						</a>
						<!--第二段-->
				<span class="bg-pic xsj-pic"></span>
					</li>
				</ul>
			</div>
			
			
			<!--五个小广告广告-->
			<div class="ad-wrap">
				<div class="ad">
					<a href=""><img src="图片/四个广告图.png"></a>
					
				</div>	
			</div>
		</div>
		<!-- 搜索区域 -->
		<div class="search-wrap">
			<div class="search-con">
				<div class="logo-box"></div>
				<div class="search-box">
					<div class="search-t">
						<div class="search-tab">
							<ul>
								<li class="select">宝贝</li>
								<li>天猫</li>
								<li>店铺</li>
							</ul>
						</div>
						<div class="search-panel">
							<a href="#" class="sousuo"></a>
							<form action="">
								<div class="btn">
				<button class="submit"><a href="商品详细/index.html"> <font color="#fff">搜索</font> </a></button>
								</div>
								<div class="search-inp-box">
									<div class="search-inp">
										<!-- placeholder为灰色字体 -->
										<input type="text" name="" placeholder="小杰资源网">
									</div>
								</div>
							</form>
							<a href="#" class="camera"></a>
						</div>
					</div>
					<div class="search-bl">
						<a href="#" class="active">新款连衣裙</a>
						<a href="#">四件套</a>
						<a href="#">潮流T恤</a>
						<a href="#">时尚女鞋</a>
						<a href="#" class="active">短裤</a>
						<a href="#">半身裙</a>
						<a href="#">男士外套</a>
						<a href="#">墙纸</a>
					</div>
				</div>
				<div class="code-box">
					<a href="#" class="phone">手机淘宝</a>
					<a href="#" class="code"></a>
					<a href="#" class="close">X</a>
				</div>
			</div>
		</div>
		<!-- 导航条 -->
		<div class="screen-nav">
			<div class="screen-nav-con">
				<h2>主题市场</h2>
				<ul>
					<li><a href="#">天猫</a></li>
					<li><a href="#">聚划算</a></li>
					<li><a href="#">天猫超市</a></li>
				</ul>	
				<ul>
					<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>
				<ul>
					<li><a href="#">|</a></li>
					<li><a href="#">飞猪旅行</a></li>
					<li><a href="#">智能生活</a></li>
					<li><a href="#">苏宁易购</a></li>
					<li><a href="#"><img src="img/小导航图.gif"/></a></li>
				</ul>
			</div>
		</div>
		
		
		<!-- 图片主体展示部分 -->
		<div class="screen-box">
			<div class="main">
				<div class="main-inner">
					<div class="inner-left">
						<ul>
						<div id="box11">
							<li class="">
								<a href="商品详细/index.html">女装</a> /
								<a href="商品详细/index.html">男装</a> /
								<a href="#">内衣</a>
								<div id="box22">
				                  <a href="商品详细/index.html"> <img src="图片/分类1.png"/></a>
				                </div>
							 	
								 
							</li>
						</div>		
						<div id="box111"> 
							<li>
								<a href="#">鞋靴</a> /
								<a href="#">箱包</a> /
								<a href="#">配件</a>
						        <div id="box222">
				                   <img src="图片/分类2.png"/>
				                </div>
						 	</li>
						</div>	
						
						
						<div id="box4"> 
							<li>
								<a href="#">童装玩具</a> /
								<a href="#">孕产</a> /
								<a href="#">用品</a>
								<div id="box44">
				                   <img src="图片/分类3.png"/>
				                </div>
						</div>
							</li>
							<li>
								<a href="#">家电</a> /
								<a href="#">手机</a> /
								<a href="#">数码</a>
								<span></span>
							</li>
							<li>
								<a href="#">美妆</a> /
								<a href="#">洗肤</a> /
								<a href="#">保养品</a>
								<span></span>
							</li>
							<li>
								<a href="#">珠宝</a> /
								<a href="#">眼睛</a> /
								<a href="#">手表</a>
最低0.47元/天 解锁文章
m0_67402013
关注
  • 15
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 23
    评论
专栏目录
html淘宝商品小窗口
weixin_54986763的博客
11-08 563
【代码】html淘宝商品小窗口。
学生个人网页设计作品 HTML+CSS+JavaScript仿小米商城(8页) 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计
STU网页设计
06-18 349
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
html + css 实现淘宝首页（静态页面）
热门推荐
王大傻的博客
05-16 1万+
html + css 实现淘宝首页（静态页面） 待续。。。 效果图： html代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>淘宝网 - 淘！我喜欢</title> <link rel="s
HTML+CSS 仿淘宝静态首页
小柒的前端之旅
03-19 1万+
学完HTML和CSS需要有一个好的练习，仿淘宝等首页都是一个不错的练习方法，目前处于学习原生js阶段，学html+css时没有做一个像样的项目，现在边学js边将前面的基础部分打牢。 里面很多地方可以用js写，轮播图这一块以及有些ul里面的li需要动态创建 之后都会进行修改。 html部分 <!DOCTYPE html> <html lang="en"> <head&g...
如何用HTML+CSS实现淘宝页面效果
qq_43710151的博客
02-21 3217
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 新手小白如何用HTML+CSS实现淘宝页面效果 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Taobao</title> <style type="text/css"> * { margin: 0; padding: 0; }
html+css实现淘宝右侧固定定位导航
王大傻的博客
05-20 2425
html+css实现淘宝右侧固定定位导航 效果图： html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/index.css">
HTML+Css 简易淘宝界面
qq_52998673的博客
04-12 3768
记录下在学校写的比较全面的网页（都是静态的呦） 界面一：首页 界面二：小米商城 界面三：商品详情 界面四：登录界面 界面五：注册界面 界面六：服务中心 好啦~暂时就写了这几个网页，有需要代码的可以评论呦~~~ ...
基于html + css + js完成淘宝网首页效果
acek350的博客
05-06 2321
基于html + css + js完成淘宝网首页效果
利用HTML+CSS实现轮播图效果
m0_65192155的博客
08-21 3760
利用html+css实现简易轮播图效果。
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
HTML + CSS 实现淘宝页面首屏静态网页项目练习.zip
12-14
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
淘宝网简单版html+css实现
06-25
开发者通过编写HTML标签，如`<div>`、`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`、`<footer>`等，来构建出淘宝首页的布局框架。 CSS则负责网页的视觉表现，包括颜色、字体、布局和响应式设计。在`css`...
前端入门 HTML+css实现静态淘宝
12-23
在实现淘宝页面的样式时，你可能需要掌握以下CSS技术： 1. **响应式设计**：使用媒体查询（`@media`）来确保页面在不同设备和屏幕尺寸下都能正常显示。 2. **盒模型**：理解`margin`、`padding`、`border`和`content...
淘宝首页html+css+js源码
06-03
在这个淘宝首页的实现中，开发者可能使用了CSS预处理器（如Sass或Less）来编写更易于维护的CSS代码，并运用了Flexbox或Grid布局来实现响应式设计，确保页面在不同设备上都能良好显示。此外，CSS3的新特性，如动画、...
html+css实现的仿淘宝静态网页.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 493
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 381
Python Formulas库，JSON格式导出导入。
vue3——利用自定义指令实现下拉框分页懒加载
最新发布
zmy967131的博客
07-24 337
vue3——利用自定义指令实现下拉框分页懒加载
淘宝网页设计html+css
12-23
淘宝网页设计HTML+CSS是指使用HTML和CSS技术来设计淘宝网站的页面。HTML是一种标记语言，用于创建网页结构和内容，而CSS则是一种样式表语言，用于控制网页的外观和布局。淘宝网页设计需要考虑到用户体验和页面美观度，同时还需要考虑到网站的性能和可访问性。通过使用HTML和CSS技术，可以实现淘宝网站的页面静态展示，使用户可以更好地浏览和购买商品。 引用中提到的网页设计HTML+CSS实现淘宝页面首屏静态网页.zip是一个包含了淘宝商城页面的HTML、CSS和JS文件的压缩包。这个压缩包中包含了7个页面，可以完美展示一个淘宝商城的页面，同时还提供了时间修改器，方便用户修改文件的创建时间。
评论 23
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值