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 淘宝网实战

1.网页的组成

2. 网页元素尺寸

3.html + css排版

头部导航

搜索及导航区

监听其他音频播放时暂停正在播放的音频

【现代前端框架中本地图片资源的处理方案】

BCSP-玄子Java开发之Java Web编程CH010_使用Ajax和jQuery实现异步请求

基于vue jsmind jquery的自定义扩展的思维导图

jquery实现树形列表加拖拽排序功能

jQuery的基本使用学习笔记

web数据可视化(Echarts版)4-9基本漏斗图(代码仅供参考)

echarts 饼图自动高亮展示数据

关于在vue2中echarts折线图双Y轴刻度线对齐的问题

原生小程序使用echarts图表 ec-canvas

前端哥

监听其他音频播放时暂停正在播放的音频

[Java基础]单元测试

矩阵碰一碰发视频之 API 接口接入技术开发全解析，支持OEM

pyrender 自动计算相机 pose

【音视频】编解码相关概念总结

cv2.solvePnP 报错求相机位姿

高清下载油管视频到本地

websocket

光谱相机的市场发展趋势

[ISP] AE 自动曝光

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000

3
在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000

4
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

5
CSS常用属性（文本属性）

2024-11-04 09:11:111000

6
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

7
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

8
vue使用datav echarts

2024-09-06 00:09:381000

9
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

10
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

	<!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 淘宝网实战

1.网页的组成

2. 网页元素尺寸

3.html + css排版

头部导航

搜索及导航区

微信扫一扫：分享