上一篇 |

CSS布局实例

div+css布局实例:常用图文混排（三）--搜狐图文

日期:2009-10-14作者:woniu

字体大小: 小中大

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

图文html结构：

Example Source Code

<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>

HTML代码

<!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>

.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=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=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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

注：样式直接拷贝自搜狐，没有做修改
div+css布局实例:常用图文混排（一）--腾讯图文
div+css布局实例:常用图文混排（二）--淘宝网衣柜

[本日志由 woniu 于 2009-10-16 03:36 PM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: css布局实例 div+css图文混排 css图文搜狐css 常用图文混排

相关日志:

评论: 3 | 引用: 0 | 查看次数: -

江南[2010-03-09 09:31 AM |

]

写的太复杂了。

月亮爱臭美[2009-10-19 04:35 PM |

]

貌似这个有点难呀··\(╯-╰)/

woniu 于 2009-10-19 05:38 PM 回复

为了后期维护，把样式分开写了，抽出来看有些不方便

中国家居设备网[2009-10-14 06:50 PM |

]

不错支持~~

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.