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

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

CSS样式表: 网页页面原结构和CSS写法导致浏览器兼容问题; CSS经验:ul列表不正确使用的趋势; Styleneat帮助你容易阅读和更新CSS文件; CSS的内容注释和作者及文件版本注释; 网页设计制作教程:CSS书写格式; 将CSS按照层叠式结构化重新组织与构建; CSS教程之CSS盒模型; CSS 框架BlueTrip特性; IE7和FF浏览器中右下角图片广告; CSS实例:通过定义渐变边框给图片加阴影; 网页选项卡TAB设计原则和应用案例教程; 8个设计规范的表格Table CSS样式应用; CSS制作的背景动态变化的网页导航; 网页选项卡TAB设计原则和应用案例教程; 使用CSS给图片添加阴影的方法; WEBJX收集20个高质量的免费CSS模板; 13个网页页面浏览器兼容性验证工具; 11个用CSS样式表制作网页按钮的教材; CSS3属性使网站设计增强同时不消弱可用性; 清理无用的CSS样式的几个有用工具

No. « ‹ 71 72 73 74 › »

技术文章搜索

关键字

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

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

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