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

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

CSS样式表: CSS样式表规划与管理的经验总结; 3个效果超酷的FORM表单美化效果打包下载; 创建IE各版本专属CSS IE中的if语句; 不错的10个你未必知道的CSS技巧; 一点小小的创意css鼠标放上去则显示电话号码; 淘宝段正淳的css笔记大全; CSS实现的一个图片放大展示的一种思路; 又一实用的常用CSS缩写语法收集; 对于IE7、FF、OP清除浮动的最优方法; 多浏览器下IE6 IE7 firefox li 间距问题; input文本框样式代码实例; div+css实现自适应宽度按钮; h1标签的使用技巧; 用margin和overflow属性实现div间距的方法; 非常漂亮的css星级效果总结; 使用CSS解决文字环绕图片问题的代码; css利用A标签的背景可能作出很有意思的效果; 写CSS_关于Border你可能需要注意的地方; 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码; 页面布局黄金比例[图片]

No. « ‹ 87 88 89 90 › »

技术文章搜索

关键字

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

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

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