1、<b> 标签修饰的内容将被加粗显示。
2、html b加粗标签显示样式与html strong加粗标签显示样式相同，用法相同。
3、对应在HTML网页中文本文字需要加粗显示，b和strong标签都可以使用。
list-style-type: none;
去掉列表前的点
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>图片列表</title>
<meta charset="utf-8">
<style type="text/css">
#content{
width: 1000px;
/*height: 800px;*/
margin: 50px auto;
padding: 0px;
border: 1px dotted gray;
}
.content{
width: 836px;
margin: 0 auto;
padding:0;
}
li{
list-style-type: none;
}
#content li{
border: 1px dotted gray;
width: 240px;
height: 360px;
display: inline-block;
margin: 10px;
}
#content li img{
width: 220px;
height: 220px;
}
#content li{
text-align:center;
padding: 5px;
}
.list{
font-family: sans-serif;
font-size: 20px;
}
.list a{
color: #000;
}
.list a:hover{
color: red;
}
.old{
text-decoration: line-through;
display: inline-block;
padding-right: 30px;
}
.now{
font-size: 20px;
/*color: red*/
}
.hide,.buy{
padding: 10px;
}
.hide a,.buy a{
text-decoration: none;
color: #000;
}
.hide a:hover,.buy a:hover{
color: red;
}
</style>
</head>
<body>
<div id="content">
<ul class="content">
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
<li class="imageList">
<a href="#"></a>
<p class="list"><a href="#">商品列表</a></p>
<p><span class="old"><i>562￥</i></span><span class="now"><b>9.9￥</b></span></p>
<p><span class="hide"><a href="#">收藏</a></span>|<span class="buy"><a href="#">购买</a></span></p>
</li>
</ul>
</div>
</body>
</html>
