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

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

CSS样式表: 推荐一篇利用th,colgroup,col定义表格样式; 都是IE惹的祸多浏览器兼容问题; dl,dt,dd制作的CSS垂直菜单; 推荐css打造经典鼠标触发显示选项; div+css中Class与ID的区别; CSS Div 最小高度在IE 6 和IE 7中的兼容性问题; 让iframe自适应高度（支持xhtml）IE firefox兼容; 实用的利用 CSS + <em>标签来完成一个三角形的制作; CSS控制文本自动换行的问题; 把 CDATA 中的内容（有可能是不规范的Html代码）以Html方式展现出来。; 仿客齐集首页导航条DIV+CSS+JS [代码实例]; 关于margin-left的示例代码; CSS优化2-(常用CSS缩写语法总结); font和line-height之CSS代码书写顺序不同，导致显示效果不一样; 推荐三种简洁的Tab导航（网页选项卡）简析; 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！; 解决IE5/IE5.5/IE6/FF的兼容性问题——CSS; CSS2实现的隔行换色; CSS中几种常见的注释; dhtml shtml xhtml的区别解析

No. « ‹ 38 39 40 41 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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 网页布局中的图文列表实现代码