HTML+CSS实现淘宝首页
一、HTML+CSS实现淘宝首页
仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，同时也欢迎小可爱们加入我的前端摸鱼群，一起划水摸鱼
点我进群 一起学习交流！
QQ群:722384575二、效果图如下：
三、部分源代码如下：（如需要全部代码 关注我或者私信我评论区留言我发你们邮箱,原创不易，记得点赞和收藏哦）。
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">
<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">
<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">Xa>
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>
<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>
<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>
<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>
<span>span>
li>
<li>
<a href="#">汽车a> /
<a href="#">二手车a> /
<a href="#">用品a>
<span>span>
li>
<li>
<a href="#">办公a> /
<a href="#">GIYa> /
<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>
<span>span>
li>
ul>
div>
<div class="inner-content">
<div id="box1">
div>
<div class="inner-mall">
<div class="head">
<img src="./img/tm.png" alt="">
<span class="tm">理想生活上天猫
span>
<a href="#">
<img src="./img/pic3.png" alt="">
a>
div>
div>
div>
<div class="inner-right">
<a href="#">
<img src="./img/pic1.png" alt="">
a>
<div class="hot">
<span>今日热卖span>
<a href="#">
<img src="./img/pic4.png" alt="">
a>
div>
div>
div>
<div class="main-bottom">
<div class="content">
<div class="logo-box">div>
<a href="#">
<img src="./img/pic5.png">
<h4>扦插花卉不生根？教你3分钟学“高压”h4>
<p>喜欢养花的人越来越多，想必很多花友经常会去花店或者花卉市场买一些绿植盆栽养在家里，当然随着养花的经验越来越足。p>
a>
div>
div>
div>
<div class="col-right">
<div class="member">
<div class="member-head">
<div class="head">
<a href="#">a>
div>
<span class="info">hi!您好span>
<p>
<a href="#" class="icon">
<span>span>
领淘金币抵钱
a>
<a href="#" class="club">
<span>span>
会员俱乐部
a>
p>
div>
<div class="member-foot">
<a href="登录.html" class="login">登录a>
<a href="注册.html">注册a>
<a href="#">开店a>
div>
div>
<div class="message">
<a href="#">网上有害信息举报
<span>span>
a>
div>
<div class="notice">
<div class="title">
<ul>
<li><a href="#">公告a>li>
<li><a href="#">规则a>li>
<li><a href="#" class="active">论坛a>