H5 溢出隐藏和缩略图和清除浮动

最新推荐文章于 2024-03-12 09:55:56 发布

最新推荐文章于 2024-03-12 09:55:56 发布 · 693 阅读

文章标签：

#H5 #溢出隐藏 #缩略图 #清除浮动 #小技巧

境-H5 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一个简单的H5页面模板，展示了如何使用CSS实现文本溢出省略效果、响应式图片展示以及清除浮动的方法。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>新建H5模板</title>
<style>
/*共用样式*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}  
body{ font-family:\5FAE\8F6F\96C5\9ED1,'Arial'; color:#999; font-size:12px; background:#fff;}  
a{ color:#3f3f3f; text-decoration:none;}  
a:hover{ color:#cc0000; text-decoration:underline;}  
a img{ border:none;}  
.fl{ float:left;}  
.fr{ float:right;} 

/*溢出文本显示省略号*/
.line-nowrap{
	overflow: hidden;  
	white-space: nowrap;  
	text-overflow: ellipsis;  
}

/*适合PC端和手机端的图片*/
.thumbnail{
	display: inline-block;
	height: auto;
	max-width: 100%;
}

/*清除浮动*/
.clearfix:before,.clearfix:after {content:"";display:table}
.clearfix:after {clear:both}
.clearfix { *zoom:1}/*IE/7/6*/
</style>
</head>
<body>
<!--溢出文本显示省略号-->
<p style="width: 100px; border: 1px solid #666; margin: 20px auto;" class="line-nowrap"><a href="###">阅谁问君诵，水落清香浮。</a></p>
<!--适合PC端和手机端的图片-->
<p style="max-width: 600px; margin: 20px auto;"><img src="demo.png" class="thumbnail"></p>
<!--清除浮动-->
<div style="background: #000; height: 580px; width: 680px; margin: 20px auto;">
	<div class="fl" style="background: #f60; height: 400px; width: 330px;"></div>
	<div class="fr" style="background: #60f; height: 400px; width: 330px;"></div>
	<div class="clearfix"></div>
	<div style="background: #f06; height: 140px; width: 100%; margin-top: 20px;"></div>
</div>
</body>
</html>

效果图：