天猫前端系列教材（十七）- 分类页面

工具版本兼容问题

6分8秒

1.0 原速 1.25 倍速 1.5 倍速 1.75 倍速

本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器。如果装有迅雷，播放视频呈现直接下载状态，请调整迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)。 chrome 的视频下载插件会影响播放，如 IDM 等，请关闭或者切换其他浏览器

步骤 1 : 效果
步骤 2 : 布局
步骤 3 : 纯html
步骤 4 : 加上样式
步骤 5 : 样式讲解
步骤 6 : 再整合在一起

步骤 1 :

效果

edit 顶折

纠问

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <style> div.categoryPageDiv{ max-width: 1013px; margin: 10px auto; } div.categorySortBar{ background-color: #FAF9F9; margin: 40px 20px 20px 20px; padding: 4px; } table.categorySortBarTable{ border-collapse: collapse; display:inline-block; } table.categorySortBarTable span.glyphicon{ font-size: 10px; } table.categorySortBarTable td{ height:17px; font-size:12px; border:1px solid #CCCCCC; padding:3px; } table.categorySortBarTable td.grayColumn{ background-color: #F1EDEC; } table.categorySortBarTable td a{ color: #806F66; } table.categorySortBarTable td a:hover{ color: #C40000; } table.categorySortBarTable input{ border-width: 0px; height: 15px; width: 50px; } table.categorySortBarTable td.priceMiddleColumn{ width: 5px; vertical-align: middle; color: #CCCCCC; } table.categorySortTable td:hover{ background-color: #F1EDEC; } body{ font-size: 12px ; font-family: Arial; } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <div class="categoryPageDiv"> <img src="https://how2j.cn/tmall/img/category/72.jpg"> <div class="categorySortBar"> <table class="categorySortBarTable categorySortTable"> <tbody><tr> <td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td> </tr> </tbody></table> <table class="categorySortBarTable"> <tbody><tr> <td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td> <td class="grayColumn priceMiddleColumn">-</td> <td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td> </tr> </tbody></table> </div> </div>

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.categoryPageDiv{
	max-width: 1013px;
	margin: 10px auto;
}
div.categorySortBar{
	background-color: #FAF9F9;
	margin: 40px 20px 20px 20px;
	padding: 4px;
}
table.categorySortBarTable{
	border-collapse: collapse;
	display:inline-block;
}
table.categorySortBarTable span.glyphicon{
	font-size: 10px;
}
table.categorySortBarTable td{
	height:17px;
	font-size:12px;
	border:1px solid #CCCCCC;
	padding:3px;
}
table.categorySortBarTable td.grayColumn{
	background-color: #F1EDEC;
}
table.categorySortBarTable td a{
	color: #806F66;
}
table.categorySortBarTable td a:hover{
	color: #C40000;
}
table.categorySortBarTable input{
	border-width: 0px;
	height: 15px;
	width: 50px;
}
table.categorySortBarTable td.priceMiddleColumn{
	width: 5px;
	vertical-align: middle;
	color: #CCCCCC;
}
table.categorySortTable td:hover{
	background-color: #F1EDEC;
}
body{
	font-size: 12px ;
	font-family: Arial;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="categoryPageDiv">
		<img src="https://how2j.cn/tmall/img/category/72.jpg">	
<div class="categorySortBar">
	<table class="categorySortBarTable categorySortTable">
		<tbody><tr>
			<td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
		</tr>
	</tbody></table>
	<table class="categorySortBarTable">
		<tbody><tr>
			<td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
			<td class="grayColumn priceMiddleColumn">-</td>
			<td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
		</tr>
	</tbody></table>
</div>
	</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.categoryPageDiv{
	max-width: 1013px;
	margin: 10px auto;
}
div.categorySortBar{
	background-color: #FAF9F9;
	margin: 40px 20px 20px 20px;
	padding: 4px;
}
table.categorySortBarTable{
	border-collapse: collapse;
	display:inline-block;
}
table.categorySortBarTable span.glyphicon{
	font-size: 10px;
}
table.categorySortBarTable td{
	height:17px;
	font-size:12px;
	border:1px solid #CCCCCC;
	padding:3px;
}
table.categorySortBarTable td.grayColumn{
	background-color: #F1EDEC;
}
table.categorySortBarTable td a{
	color: #806F66;
}
table.categorySortBarTable td a:hover{
	color: #C40000;
}
table.categorySortBarTable input{
	border-width: 0px;
	height: 15px;
	width: 50px;
}
table.categorySortBarTable td.priceMiddleColumn{
	width: 5px;
	vertical-align: middle;
	color: #CCCCCC;
}
table.categorySortTable td:hover{
	background-color: #F1EDEC;
}
body{
	font-size: 12px ;
	font-family: Arial;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="categoryPageDiv">
		<img src="https://how2j.cn/tmall/img/category/72.jpg">	
<div class="categorySortBar">
	<table class="categorySortBarTable categorySortTable">
		<tbody><tr>
			<td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
		</tr>
	</tbody></table>
	<table class="categorySortBarTable">
		<tbody><tr>
			<td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
			<td class="grayColumn priceMiddleColumn">-</td>
			<td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
		</tr>
	</tbody></table>
</div>
	</div>

渲染中渲染完成

效果

步骤 2 :

布局

edit 顶折

纠问

增值内容，请先登录

模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释），涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 3 :

纯html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="categoryPageDiv">
		<img src="https://how2j.cn/tmall/img/category/72.jpg">	
<div class="categorySortBar">
	<table class="categorySortBarTable categorySortTable">
		<tbody><tr>
			<td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
		</tr>
	</tbody></table>
	<table class="categorySortBarTable">
		<tbody><tr>
			<td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
			<td class="grayColumn priceMiddleColumn">-</td>
			<td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
		</tr>
	</tbody></table>
</div>
	</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 4 :

加上样式

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.categoryPageDiv{
	max-width: 1013px;
	margin: 10px auto;
}
div.categorySortBar{
	background-color: #FAF9F9;
	margin: 40px 20px 20px 20px;
	padding: 4px;
}
table.categorySortBarTable{
	border-collapse: collapse;
	display:inline-block;
}
table.categorySortBarTable span.glyphicon{
	font-size: 10px;
}
table.categorySortBarTable td{
	height:17px;
	font-size:12px;
	border:1px solid #CCCCCC;
	padding:3px;
}
table.categorySortBarTable td.grayColumn{
	background-color: #F1EDEC;
}
table.categorySortBarTable td a{
	color: #806F66;
}
table.categorySortBarTable td a:hover{
	color: #C40000;
}
table.categorySortBarTable input{
	border-width: 0px;
	height: 15px;
	width: 50px;
}
table.categorySortBarTable td.priceMiddleColumn{
	width: 5px;
	vertical-align: middle;
	color: #CCCCCC;
}
table.categorySortTable td:hover{
	background-color: #F1EDEC;
}
body{
	font-size: 12px ;
	font-family: Arial;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="categoryPageDiv">
		<img src="https://how2j.cn/tmall/img/category/72.jpg">	
<div class="categorySortBar">
	<table class="categorySortBarTable categorySortTable">
		<tbody><tr>
			<td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
		</tr>
	</tbody></table>
	<table class="categorySortBarTable">
		<tbody><tr>
			<td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
			<td class="grayColumn priceMiddleColumn">-</td>
			<td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
		</tr>
	</tbody></table>
</div>
	</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.categoryPageDiv{
	max-width: 1013px;
	margin: 10px auto;
}
div.categorySortBar{
	background-color: #FAF9F9;
	margin: 40px 20px 20px 20px;
	padding: 4px;
}
table.categorySortBarTable{
	border-collapse: collapse;
	display:inline-block;
}
table.categorySortBarTable span.glyphicon{
	font-size: 10px;
}
table.categorySortBarTable td{
	height:17px;
	font-size:12px;
	border:1px solid #CCCCCC;
	padding:3px;
}
table.categorySortBarTable td.grayColumn{
	background-color: #F1EDEC;
}
table.categorySortBarTable td a{
	color: #806F66;
}
table.categorySortBarTable td a:hover{
	color: #C40000;
}
table.categorySortBarTable input{
	border-width: 0px;
	height: 15px;
	width: 50px;
}
table.categorySortBarTable td.priceMiddleColumn{
	width: 5px;
	vertical-align: middle;
	color: #CCCCCC;
}
table.categorySortTable td:hover{
	background-color: #F1EDEC;
}
body{
	font-size: 12px ;
	font-family: Arial;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="categoryPageDiv">
		<img src="https://how2j.cn/tmall/img/category/72.jpg">	
<div class="categorySortBar">
	<table class="categorySortBarTable categorySortTable">
		<tbody><tr>
			<td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
		</tr>
	</tbody></table>
	<table class="categorySortBarTable">
		<tbody><tr>
			<td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
			<td class="grayColumn priceMiddleColumn">-</td>
			<td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
		</tr>
	</tbody></table>
</div>
	</div>

渲染中渲染完成

效果

步骤 5 :

样式讲解

edit 顶折

纠问

增值内容，请先登录

点击进入样式详解

步骤 6 :

再整合在一起

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.categoryPageDiv{
	max-width: 1013px;
	margin: 10px auto;
}
div.categorySortBar{
	background-color: #FAF9F9;
	margin: 40px 20px 20px 20px;
	padding: 4px;
}
table.categorySortBarTable{
	border-collapse: collapse;
	display:inline-block;
}
table.categorySortBarTable span.glyphicon{
	font-size: 10px;
}
table.categorySortBarTable td{
	height:17px;
	font-size:12px;
	border:1px solid #CCCCCC;
	padding:3px;
}
table.categorySortBarTable td.grayColumn{
	background-color: #F1EDEC;
}
table.categorySortBarTable td a{
	color: #806F66;
}
table.categorySortBarTable td a:hover{
	color: #C40000;
}
table.categorySortBarTable input{
	border-width: 0px;
	height: 15px;
	width: 50px;
}
table.categorySortBarTable td.priceMiddleColumn{
	width: 5px;
	vertical-align: middle;
	color: #CCCCCC;
}
table.categorySortTable td:hover{
	background-color: #F1EDEC;
}
body{
	font-size: 12px ;
	font-family: Arial;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="categoryPageDiv">
		<img src="https://how2j.cn/tmall/img/category/72.jpg">	
<div class="categorySortBar">
	<table class="categorySortBarTable categorySortTable">
		<tbody><tr>
			<td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
		</tr>
	</tbody></table>
	<table class="categorySortBarTable">
		<tbody><tr>
			<td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
			<td class="grayColumn priceMiddleColumn">-</td>
			<td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
		</tr>
	</tbody></table>
</div>
	</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.categoryPageDiv{
	max-width: 1013px;
	margin: 10px auto;
}
div.categorySortBar{
	background-color: #FAF9F9;
	margin: 40px 20px 20px 20px;
	padding: 4px;
}
table.categorySortBarTable{
	border-collapse: collapse;
	display:inline-block;
}
table.categorySortBarTable span.glyphicon{
	font-size: 10px;
}
table.categorySortBarTable td{
	height:17px;
	font-size:12px;
	border:1px solid #CCCCCC;
	padding:3px;
}
table.categorySortBarTable td.grayColumn{
	background-color: #F1EDEC;
}
table.categorySortBarTable td a{
	color: #806F66;
}
table.categorySortBarTable td a:hover{
	color: #C40000;
}
table.categorySortBarTable input{
	border-width: 0px;
	height: 15px;
	width: 50px;
}
table.categorySortBarTable td.priceMiddleColumn{
	width: 5px;
	vertical-align: middle;
	color: #CCCCCC;
}
table.categorySortTable td:hover{
	background-color: #F1EDEC;
}
body{
	font-size: 12px ;
	font-family: Arial;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="categoryPageDiv">
		<img src="https://how2j.cn/tmall/img/category/72.jpg">	
<div class="categorySortBar">
	<table class="categorySortBarTable categorySortTable">
		<tbody><tr>
			<td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
			<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
		</tr>
	</tbody></table>
	<table class="categorySortBarTable">
		<tbody><tr>
			<td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
			<td class="grayColumn priceMiddleColumn">-</td>
			<td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
		</tr>
	</tbody></table>
</div>
	</div>

渲染中渲染完成

效果

天猫前端系列教材（十六）- 分类页面 - 概述

天猫前端系列教材（十八）- 分类页面 - 产品列表

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2019-08-11 关于父元素高度自适应的问题

会飞的猪_

关于实践项目-天猫前端-排序和价格的提问

站长你好，我看天猫上的代码它的div和ul li的嵌套，div是没有设置高度的，但是却可以被子元素撑起来... 我试了很久发现怎么也撑不起来这是为什么呢？

            html 代码：
<div class="brand-bar">
                <div class="attr-key">品牌</div>
                <div class="attr-logo">
                    <div class="placeholder"></div>
                    <ul>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1RskcNVXXXXaFaXXXSutbFXXX.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1UnWCnvDH8KJjy1XcXXcpdXXa" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1iYwSOXXXXXX6aXXXwu0bFXXX.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1XAZ.SXXXXXaNXpXXXXXXXXXX" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1l1ofsRjTBKNjSZFDXXbVgVXa" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1cO4qSXXXXXcrXXXXXXXXXXXX" alt="">
                            </a>
                        </li>
                    </ul>
                </div>

css 代码：
        div.brand-bar {
            position: relative;
            border: 2px solid #D1CCC7;
        }

        div.brand-bar div.attr-key {
            position: absolute;
            top: 5px;
            left: 5px;
        }
        
        div.brand-bar div.attr-logo ul{
            list-style: none;
            max-height: 53px;
        }

        div.brand-bar div.attr-logo ul li{
            padding: 0 10px;
            text-align: center;
        }

        div.brand-bar div.attr-logo ul li a {
            height: 50px;
            width: 102px;
            line-height: 52px;
            border: 1px solid transparent;
        }

        div.brand-bar div.attr-logo ul {
            list-style: none;
        }

        div.brand-bar div.attr-logo li {
            float: left;
            list-style: none;
        }


        div.brand-bar div.attr-logo img {
            width: 80px;
            height: 40px;
            margin: 6px 12px;
        }

1 个答案

how2j
答案时间：2019-08-13

会不会是它的 ul li 是有样式的，你没有注意到呢？

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-10-23 请问站长在设计过程当中，CSS中的margin padding font-size 的值是怎么确定的？

Cottonlion

关于实践项目-天猫前端-排序和价格的提问

请问站长在设计过程当中，CSS中的margin padding font-size 的值是怎么确定的？是根据天猫的网站，慢慢对比调试出来的吗？

5 个答案

sparksun007
答案时间：2019-11-21

那在真正做项目时是怎么算的像素距离啊？

Cottonlion
答案时间：2018-11-01

谢谢站长 :)

how2j
答案时间：2018-10-30

我用的一个截图工具，叫fscapter里面可以测量，也不是完全精确，还是有几个像素的误差吧，就看手抖不抖了~

Cottonlion
答案时间：2018-10-30

请问站长是什么工具啊？我现在自学了2个月，所以还有很多的知识很欠缺

how2j
答案时间：2018-10-25

我是用工具对每个元素量出其像素值来一点点调试出来的。。。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-09-17 表格栏里的箭头是怎么添加的

2018-03-13 我的两个table为啥没有在一排

soldthworld

关于实践项目-天猫前端-排序和价格的提问

代码比较好像也没问题

<div class="categorySortBar">
			<table class="categorySortBarTable categorySortTable">
				<tbody>//标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容
					<tr>
						<td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
					</tr>
				</tbody>
			</table>
			<table class="categorySortBarTable">
				<tbody>
					<tr>
						<td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
						<td class="grayColumn priceMiddleColumn">-</td>
						<td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
					</tr>
				</tbody>
			</table>
		</div>

2 个答案

soldthworld
答案时间：2018-03-14

发现问题了，在inline-block的上一行加了注释，所以出了问题，忘记了不能用双斜杠注释

how2j
答案时间：2018-03-14

按照布局步骤：http://how2j.cn/k/tmall-front/tmall-front-826/826.html#step3215 这两个table应该使用inline-block进行水平拜访，你检查一下你的样式，有没有做到这一点呢

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-09-05 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">出现了两次？

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 8 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于实践项目-天猫前端-排序和价格的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图