CSS 网页布局中的图文列表实现代码- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 网页布局中的图文列表实现代码

CSS样式表: 脚本控制三行三列自适应高度DIV布局; 通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐; HTML/XHTML模板; 用DIV+CSS写小三角; SPAN元素和DIV元素有的区别; 关于Firefox中的Flash不可以显示透明效果的问题; 当ie7不认!important之后 [布局的解决办法]; 绝对定位的DIV宽度自动适应的一个方法; 被人遗忘的html tags; 一个css 的小问题; IE 5.x/Win 和模型bug; [转]目前找到的最好的Iframe自适应高度代码; Web Safe Color Pallette; 网站制作之网页技巧; http状态码一览表; 从Table向Css过渡的优缺点比较; 不用float实现div模块居中布局; 解决列高度自适应(相同)的五种方法; 用CSS floats创建三栏页布局; 如何正确使用标题元素、段落和强制换行

No. « ‹ 34 35 36 37 › »

技术文章搜索

关键字

CSS样式表中的 CSS 网页布局中的图文列表实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 135 ::

收藏到网摘: n/a

CSS 网页背景渐变实现代码 css IE8 兼容问题的汇总

搜狐新闻中心，左边栏图文列表：

图文html结构：

程序代码

<div class="picTextGroup">
     <p>
           <a href="" alt""><img src="图片"/></a>
           <span class="title"><a href="" alt"">大标题</a></span></br>
           文字介绍内容....
           <span class=moreT>[<a href="" target=_blank>详细</a>]</span>
     </p>
</div>

看具体演示效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>新闻中心-搜狐</title>
<style type="text/css">
/* 全局CSS定义 */
body { text-align: center; margin:0 auto; padding:0; background: #FFF; font-size:12px; color:#000;font-family:宋体;}
body > div {text-align:center; margin-right:auto; margin-left:auto;}
div,form,ul,ol,li,span,p {margin: 0; padding: 0; border: 0;}
img,a img{border:0; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-size:12px;font-weight:normal;}
ul,ol,li {list-style:none}
table,td,input {font-size:12px}
table {margin:0 auto;}
.column380 {width:380px;float:left;display:inline;border:1px solid #B8CBE4;margin:50px;}
.blank10 {margin:0 auto;height:10px; font-size:1px;clear:both;}
h2 {height:20px;background: #D8E3F1 url(http://news.sohu.com/upload/2008_sohunews/images/bg08.gif) no-repeat left top;color:#039;text-align:right;padding:0 4px 0 14px;line-height:20px;border-bottom:1px solid #B8CBE4;}
h2 span {font-weight: bold;float:left;}
h2 a {color:#039;}
.picTextGroup {width:352px;margin:0 auto;color:#666;line-height:20px;}
.picTextGroup img {margin:0 10px 0 0;border:1px #A5C0E1 solid;background:#fff;padding:1px;}
.picTextGroup .title {color:#039;font-size:18px;font-weight: bold;line-height:26px;}
.picTextGroup .title a {color:#039;}
.picTextGroup a {color:#666;}
.picTextGroup .moreT a {color:#A4621C;}
.picTextGroup a:hover {color:#CC0000;}
.f12list ul {width:360px;margin:0 auto;clear:both;}
/* 链接颜色 */
a {color: #000;text-decoration:none}
a:hover {text-decoration:underline;}
.picTextGroup {text-align:left;margin:0 auto;line-height:20px;color:#333;width:92%}
.picTextGroup img {margin:0 4px 0 0;float:left;} /*图文混排*/
.picTextGroup a {color:#333;}
.picTextGroup p {clear:none}
/* 列表属性 */
.f12list .more {text-align:right}
.f12list li,.f12list p {color:#333;line-height:22px;font-size:12px;text-align:left}
.f12list li a,.f12list p a {color:#333}
.f12blue td a,.f12list tr a {color:#003399}
</style>
</head>
<body>
<div class="column380">
<h2><span><a href="" target=_blank>深度关注</a></span><a href="" target=_blank>更多>></a></h2>
<div class=blank10></div>
<div class=picTextGroup>
<p><a href="" target=_blank>
<img height=70 alt=当代中国大学生信仰调查 src="http://i0.itc.cn/20091014/777_10b40fce_706f_42e9_bf7e_1cb0a994ca80_0.jpg" width=70 border=0>
</a>
<span class=title><a href="" target=_blank>当代中国大学生信仰调查</a></span><br>如今，年轻一代在荧幕中高喊：因为信仰，向死而生。战争年代不再，信仰是否依旧…<span class=moreT>[<a href="" target=_blank>详细</a>]</span>
</p>
</div>
<div class=blank6></div>
<div class=f12list>
<ul>
<li>·<a href="" target=_blank>公民刘春梅之死</a>·<a class="" href="" target=_blank>高校腐败几时休，民众几时休，之恨何时已</a></li>
<li>·<a class="" href="" target=_blank>伊朗核谈判再现新较量</a>·<a class="" href="" target=_blank>气候变暖下，小国的苦苦抗争</a></li>
<li>·<a href="" target=_blank>课堂教学在PPT中渐失灵魂</a>·<a class="" href="" target=_blank>假如我中了3.6亿巨奖</a></li>
</li>
</ul>
</div>
<div class="blank10"></div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

CSS 网页背景渐变实现代码 css IE8 兼容问题的汇总

CSS样式表 中的 CSS 网页布局中的图文列表实现代码

评论 (0) All

CSS样式表中的 CSS 网页布局中的图文列表实现代码