使用div显示产品首页示例

bcbobo21cn

于 2023-11-30 01:11:46 发布

阅读量158

点赞数

分类专栏： web前端文章标签： div a标签 p标签

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/134702326

版权

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
    <title></title>
	<meta charset="utf-8" />

    <style>
    .product{width: 200px;background:greenyellow;margin-right:10px;float:left; }
    </style>

</head>
<body>

<div  style=" margin: 0 auto; width:640px; border: 2px solid #F00; overflow:auto;">
     <div class="product">
           <p><a href="#">产品A1</a></p>
           <p><a href="#">产品A2</a></p>
           <p><a href="#">产品A3</a></p>
     </div>
     <div class="product">
           <p><a href="#">产品B1 产品B2</a></p>
           <p><a href="#">产品B3 产品B4</a></p>
     </div>   
     <div class="product">
           <p><a href="#">产品C1</a></p>
           <p><a href="#">产品C2</a></p>
           <p><a href="#">产品C3</a></p>
           <p><a href="#">产品C4</a></p>
           <p><a href="#">产品C5</a></p>
     </div>
     <div class="product">
          <p><a href="#">产品D1 产品D2</a></p>
          <p><a href="#">产品D3</a></p>
          <p><a href="#">产品D4</a></p>
          <p><a href="#">产品D5</a></p>
          <p><a href="#">产品D6</a></p>
          <p><a href="#">产品D7</a></p>
          <p><a href="#">产品D8</a></p>
          <p><a href="#">产品D9</a></p>
          <p><a href="#">产品D10</a></p>
     </div>
     <div class="product">
          <p><a href="#">产品E1</a></p>
          <p><a href="#">产品E2</a></p>
          <p><a href="#">产品E3</a></p>
          <p><a href="#">产品E4</a></p>
          <p><a href="#">产品E5</a></p>
    </div>
</div>


</body>
</html>