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

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

CSS样式表: 提高网页效率的14条注意事项图文; 提高网页的效率 Use YSlow to know why your web Slow; 学习WEB标准总结的一些CSS/XHTML知识小结; CSS文件可维护、可读性提高指南; Firefox下样式设置宽度奇怪现象; Chrome的hack写法以及CSS的支持程度图示; IE6支持position:fixed完美解决方法; css为图片设置背景图片; ASP、PHP与javascript根据时段自动切换CSS皮肤的代码; css图片切换效果代码[不用js]; css import与link的区别; BS项目中的CSS架构_仅加载自己需要的CSS; div结合css布局bbs首页(div+css布局入门); css 兼容性问题this.style.cursor=''''hand''''; CSS渐变统计柱形图; 跨浏览器的实践:position:fixed 层的固定定位; 标准布局常见问题及解决办法; css美化input file按钮的代码方法; 重置默认样式 css reset; 支持IE6 IE7 Firefox 的纯CSS的下拉菜单

No. « ‹ 90 91 92 93 › »

技术文章搜索

关键字

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

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

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