项目的商品页面

木江..

已于 2022-06-17 11:01:11 修改

阅读量81

点赞数

文章标签： css css3 html

于 2022-06-15 09:12:41 首次发布

本文链接：https://blog.csdn.net/weixin_71809786/article/details/125290176

版权

这篇博客详细介绍了CSS中的盒模型，包括margin、border、padding和content，以及它们在实际布局中的应用。作者通过实例展示了如何设置图片大小和页面居中，以及如何使用display属性实现元素的水平和垂直排列。此外，还讲解了如何利用内联块元素和背景图片来创建和定位图标，以及如何调整元素的垂直对齐方式。整个过程结合了具体的CSS代码，帮助读者理解并掌握这些关键概念。

摘要由CSDN通过智能技术生成

一.知识点

Margin(外边距) -清除边框外的区域，外边距是透明的。

Border（边框）：内边距和内容外的边框

Padding(内边距) -清除内容周围的区域，内边距是透明的。

Content(内容) -盒子的内容，显示文本和图像。

margin重合问题

盒子水平排列：margin无重合

盒子垂直排列：margin重合

1.搭建框架（a,div,span,imgp等）

2.用css样式美化（文字居中，字体颜色，大小，宽高，浮动等）

3.完成项目的内容（照片设置，定点图标设置，全部，字体样式）

（1）设置图片大小和页面居中

img{
               width: 350px;
               height: 350px;

           }
           #big{
               width: 1400px;
               height: 800px;

               margin: auto;
           }

（2)用display: inline-block;把浮动后的流体变块状和流体之间并把块状中的字体居中

#big div .sc{
               display: inline-block;
               border:1px solid black;
               width: 100px;

               text-align: center;
               padding: 4px 0;

           }
           #big div .gwc{
               display: inline-block;
               border:1px solid black;
               width: 100px;

               text-align: center;
               padding: 4px 0;

           }

（4）添加背景图标，把多样的背景图片固定到我们需要的图标和设计他的大小

#big div .sc span{
               display:inline-block;
           width: 16px;
           height: 14px;
           margin-right: 10px;
           margin-bottom: 2px;
           background-image: url("../img/ico_heart_d.png");
           vertical-align: middle;（将当前元素放在父元素的中间）
           }
           #big div .gwc span{
               display:inline-block;
           width: 16px;
           height: 14px;

           margin-right: 10px;
           margin-bottom: 2px;
           background-image: url("../img/ico_cart_d.png");
           vertical-align: middle;
           }

4.项目展示

.top{width: 100%;border: 0;}

.bottom{width: 100%;border: 0;
}
#big div{
				float: left;
				
				
			}
			img{
				width: 350px;
				height: 350px;
				
			}
			#big{
				width: 1400px;
				height: 800px;
						
				margin: auto;
			}
			#big div a{
				text-decoration: none;
			}
			#big div p{color: black;}
			#big div p a{color: black;}
			#big div {font-size: 12px;}
			img{
				width: 270px;
			height: 270px;
			}
			#big div{margin: 30px 30px;}
			#big div .sc{
				display: inline-block;
				border:1px solid black;
				width: 100px;
				
				text-align: center;
				padding: 4px 0;
				
			}
			#big div .gwc{
				display: inline-block;
				border:1px solid black;
				width: 100px;
				
				text-align: center;
				padding: 4px 0;
				
			}
			#big div .sc span{
				display:inline-block;
			width: 16px;
			height: 14px;
			margin-right: 10px;
			margin-bottom: 2px;
			background-image: url("../img/ico_heart_d.png");
			vertical-align: middle;
			}
			#big div .gwc span{
				display:inline-block;
			width: 16px;
			height: 14px;
			
			margin-right: 10px;
			margin-bottom: 2px;
			background-image: url("../img/ico_cart_d.png");
			vertical-align: middle;
			}