欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

H5 溢出隐藏和缩略图和清除浮动 博客分类: 境-H5 H5溢出隐藏缩略图清除浮动小技巧 

程序员文章站 2024-03-11 23:33:19
...
<!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>

效果图:
H5 溢出隐藏和缩略图和清除浮动
            
    
    博客分类: 境-H5 H5溢出隐藏缩略图清除浮动小技巧 
 
H5 溢出隐藏和缩略图和清除浮动
            
    
    博客分类: 境-H5 H5溢出隐藏缩略图清除浮动小技巧 
 

  • H5 溢出隐藏和缩略图和清除浮动
            
    
    博客分类: 境-H5 H5溢出隐藏缩略图清除浮动小技巧 
  • 大小: 17.7 KB
  • H5 溢出隐藏和缩略图和清除浮动
            
    
    博客分类: 境-H5 H5溢出隐藏缩略图清除浮动小技巧 
  • 大小: 6.8 KB