日期:2014-05-17 浏览次数:20769 次
<style type="text/css"> blockquote.style1 { font: 14px/20px italic Times, serif; padding: 8px; background-color: #faebbc; border-top: 1px solid #e1cc89; border-bottom: 1px solid #e1cc89; margin: 5px; background-image: url(images/openquote1.gif); background-position: top left; background-repeat: no-repeat; text-indent: 23px; } blockquote.style1 span { display: block; background-image: url(images/closequote1.gif); background-repeat: no-repeat; background-position: bottom right; } blockquote.style2 { font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc; } blockquote.style3 { font: 18px/30px normal Tahoma, sans-serif; padding-top: 22px; margin: 5px; background-image: url(images/openquote3.gif); background-position: top left; background-repeat: no-repeat; text-indent: 65px; } blockquote.style3 span { display: block; background-image: url(images/closequote3.gif); background-repeat: no-repeat; background-position: bottom right; } blockquote.style4 { font: 14px/20px italic Times, serif; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url(images/openquote4.gif); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; } blockquote.style5 { font: 12px/18px normal "Courier New", sans-serif; padding-left: 70px; padding-top: 2px; padding-bottom: 2px; background-color: #000; color: white; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url(images/openquote5.gif); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; } blockquote.style5 span { padding-right: 50px; display: block; background-image: url(images/closequote5.gif); background-repeat: no-repeat; background-position: bottom right; } </style> <blockquote class="style1"> <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span> </blockquote> <blockquote class="style2"> <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span> </blockquote> <blockquote class="style3"> <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span> </blockquote> <blockquote class="style4"> <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span> </blockquote> <blockquote class="style5"> <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span> </blockquote>
?
?效果图如下:
?