css写的一个摘要样式

什么都不说了,先看效果图:

以上效果主要是用css+div做的.支持IE8及IE8以上版本.

代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body,button,input,select,textarea{font:12px/1.5 tahoma,arial}
small,cite,code,em,th,i,b{font-size:1em;font-style:normal;font-weight:500}
.triangle {
position:absolute;
left:40%;
width:8px;
height:8px;
overflow:hidden;
font-size:0;
bottom:-11px;
background-color:#F3F3F3;
border-top:1px solid #D9D9D9;
border-left:1px solid #D9D9D9;
-o-transform: rotate(45deg);/* opera*/
-webkit-transform: rotate(45deg);/* chrome*/
-moz-transform: rotate(45deg);/* firefox*/
/*filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067812, M12=-0.7071067812, M21=0.7071067812, M22=0.7071067812)";/*IE*/
} 
.triangle_up {border:6px dashed transparent;border-bottom-color:#ABABAB;border-bottom-style:solid;position: absolute;display:inline-block;margin-top:4px;}
.triangle_down {border:6px dashed transparent;border-top-color:#ABABAB;border-top-style:solid;position: absolute;display:inline-block;margin-top:8px;}
.content_title {list-style: none;height:30px;padding-bottom:6px;border-bottom:1px solid #D9D9D9;}
.content_title li {font-size:20px;font-family:hiragino sans gb,microsoft yahei;display: inline;position: relative;float:left;margin-left:-30px;}
.content_main {background-color:#F3F3F3;border-bottom:1px solid #F2F2F2;margin-top: -12px;padding:10px 15px;}
.content_summary {display:inline;position:relative;padding:10px 15px 10px;font-size:14px;font-family:hiragino sans gb,microsoft yahei;}
.show_more{float:right;position:relative;cursor:pointer}
.summary {display:inline;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;word-wrap:break-word;line-height:1.8;}
.ico_text {display:inline-block;cursor:pointer}

</style>
</head>
<body>
	<div>
		<ul class="content_title">
			<li>
				<a>摘要</a>
				<i class="triangle"></i>
			</li>
		</ul>
		<div class="content_main">
			<div class="content_summary">
				<span class="summary">
					新华网北京8月23日电 国家主席习近平21日至22日对蒙古国进行国事访问,并在蒙古国国家大呼拉尔发表重要演讲。国际社会对习近平主席此访予以高度评价,认为习近平主席此访成果丰硕,意义重大,凸显了中国亲、诚、惠、容的周边外交理念,有力地推动了中蒙关系发展。
    蒙中经贸合作联委会蒙方主席、蒙古国副总理特尔比什达格瓦表示,他对习近平主席的演讲印象深刻,习近平主席关于中国历史、世界和平的叙述让他更加理解了中国和平发展的国策。习近平主席指出“独行快,众行远”,体现了中国帮助周边国家发展的诚意。蒙古国和中国是好邻居、好朋友,习近平主席对中蒙关系、国际关系的阐述非常重要。
    蒙古国国家大呼拉尔议员、环境与绿色发展部长桑加苏伦·奥云说,习近平主席的演讲“亲切友好、深入全面”。蒙古国与中国是邻国,两国各自的发展对彼此都很重要。她对习近平主席提出的中蒙和平友好、互利共赢的观点表示赞同,认为蒙中合作关系的提升能为亚洲地区其他国家提供借鉴。
    蒙古国国家大呼拉尔议员巴特其木格认为,习近平主席的演讲详细阐述了蒙中关系政策,并描绘了未来十年两国发展的方向。中国采取和平的周边外交政策,尊重邻国的主权和独立、历史和文化以及发展道路,并与邻国携手发展。习近平主席对中国周边外交政策的阐述会让蒙古国议员及更多蒙古国民众更加熟知、了解中国。
				</span>
				<a class="show_more">
					<span class="ico_text">更多</span>
					<i class="triangle_down"></i>
				</a>
			</div>
		</div>
	</div>
</body>
</html>


你可能感兴趣的:(jsp,filter,transform,三角形)