详细页面的实现

最新推荐文章于 2024-08-29 14:32:34 发布

m0_67283927

最新推荐文章于 2024-08-29 14:32:34 发布

阅读量113

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/m0_67283927/article/details/125312046

版权

本文介绍了CSS在网页设计中的应用，包括详情页面的居中布局、小图片的圆角与边框效果以及块状标签的样式设置。通过margin、padding、border-radius等属性实现页面美化，并探讨了table标签的使用及其属性，如border-spacing、colspan和rowspan，强调了它们在网页布局中的作用。

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

一、详细页面的居中、距上距下的距离（css代码）：

#detail{
				margin: auto;
				width: 1000px;
				padding-top: 40px;
				padding-bottom: 150px;
			}

二、小图片鼠标滑过时的圆角、边框、加粗

ul li img{
				height: 80px;
				width: 80px;
				margin: 10px 15px;
				float: left;
				border-radius: 10px;
			}
#img1 img:hover{

				border: 2px solid red;
				border-radius: 10px;
			}

三、设置块状标签：（块状属性、边框线、宽高）

#height div{
				display: inline-block;
				border: 1px solid black;
				width: 40px;
				line-height: 30px;
				text-align: center;
				margin-top: 10px;
				margin-right: 20px;
			}

四、知识点：

1、详情页面用到的css属性

（1）border-radius：边框圆角半径；

（2）text-decoration：line-through;文本划线（a标签去下划线，也是这个属性none）;

2、table标签

（1）包含字标签：caption，tr，td，th

（2）常用属性：border-spacing，colspan，rowspan

（3）作用：布局