<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<div class="homepageCategoryProducts">
<div class="eachHomepageCategoryProducts">
<div class="left-mark"></div>
<span class="categoryTitle">太阳镜</span>
<br>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
好先生同款墨镜孙红雷偏光男士太阳镜韩明星
</span>
</a>
<span class="productPrice">
97.50
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
陌森太阳眼镜男女2016偏光定制驾驶近视
</span>
</a>
<span class="productPrice">
518.70
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
</span>
</a>
<span class="productPrice">
624.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
变色眼镜男女款半框太阳镜大框潮流防辐射防
</span>
</a>
<span class="productPrice">
170.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
新款男士偏光太阳镜日夜两用墨镜潮运动开车
</span>
</a>
<span class="productPrice">
551.00
</span>
</div>
<div style="clear:both"></div>
</div>
<div class="eachHomepageCategoryProducts">
<div class="left-mark"></div>
<span class="categoryTitle">安全座椅</span>
<br>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
新生儿婴儿提篮式安全座椅汽车用车载儿童安
</span>
</a>
<span class="productPrice">
882.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
REEBABY汽车儿童安全座椅ISOFI
</span>
</a>
<span class="productPrice">
1,344.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
REEBABY儿童安全座椅9个月-12岁
</span>
</a>
<span class="productPrice">
1,216.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
好孩子汽车儿童安全座椅goodbaby9
</span>
</a>
<span class="productPrice">
1,199.40
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
惠尔顿儿童安全座椅isofix硬接口汽车
</span>
</a>
<span class="productPrice">
1,993.60
</span>
</div>
<div style="clear:both"></div>
</div>
<img src="http://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
</div>
出来的效果是这样的
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
好先生同款墨镜孙红雷偏光男士太阳镜韩明星
</span>
</a>
<span class="productPrice">
97.50
</span>
</div>
一个div占一行，里面包含着的内容是超链接 图片 价格
之后加入样式css
div.homepageCategoryProducts{
background-color: #F5F5F5;
padding: 50px 10px 50px 10px;
margin: 10px auto;
max-width: 1013px;
}
div.homepageCategoryProducts这句话的意思是div标签下的homepageCategoryProducts类的样式。
padding: 50px 10px 50px 10px;设置内边距，属性定义元素边框与元素内容之间的空间
margin: 10px auto;是外边距，居中
display: inline-block;把其中的样式改为内联
块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等