[学习技巧记录]服务模块样式细线技巧和服务模块溢出隐藏技巧

最新推荐文章于 2023-12-16 17:07:11 发布

原创最新推荐文章于 2023-12-16 17:07:11 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css细线技巧 #css3溢出隐藏技巧

css/html 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现服务模块中的细线样式，通过设置负margin值来解决边框合并问题，创建出细线效果。同时，通过设置`overflow: hidden`属性，实现了服务模块内容的溢出隐藏，保持了布局的整洁。

在这里插入图片描述
这是一个newflash 板块。从上往下做，上面的news部分做完了，现在要做黄色框内部分，这个盒子class命名为server。因为结构一样，用ul>li*12>a[]>span+p,其中的小图片用精灵图来做。

结构写法

		 		<div class="service">
		 			<ul>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>话费</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>机票</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>电影票</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>游戏</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>彩票</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>加油站</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>酒店</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>火车票</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>众筹</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>理财</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>礼品卡</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>白条</p>
		 					</a>
		 				</li>
		 			</ul>
		 		</div>

样式写法
1.先写.service,w248+h208 border 1px #e4e4e4
service {
width: 248px;
height: 208px;
border: 1px solid #e4e4e4;
border-top: none;
}
这里为了显示效果，我将边框改为了红色如下：

2.第二步写里边的li
li量的w62+h70,li左浮动边框1px
.service li {
float: left;
width: 62px;
height: 70px;
text-align: center;
border: 1px solid #e4e4e4；
}
为了效果，将li边框改为黑色，如下：
这时候你会发现li之间的边框变粗了，此时不是1px，而上2px，因为li与li之间边框发生了并列显示。如何解决呢？？
3.解决样式细线的技巧
我们让每个li往左和往上移动1px,就用margin负值，可以使右边的li压住左边的li,实现边框合并，做出细线表格，上边框也是同理。
.service li {
float: left;
width: 62px;
height: 70px;
text-align: center;
border: 1px solid #e4e4e4；
margin-top: -1px;
margin-left: -1px;
} 如下图，就得到了解决。
4.但是此时又有了新问题，下面的li并没有到红色盒子service里。原因很简单，因为li长度不够了，那么这时，我们给ul的宽度设长一些。
.service ul {
width: 270px;
}
结果如下

5.模块溢出隐藏技巧
这时候黑色盒子溢出了，但是我们只需要显示在红色盒子service里，说明li的父元素service溢出了，所以我们利用元素的显示和溢出属性，overflow：hidden 作用在service上，就可以了。
.service {
width: 248px;
height: 208px;
border: 1px solid #e4e4e4;
border-top: none;
overflow: hidden;
}如下图，所有问题就解决了