CSS实现图文混排结果,图左文右下面列表

发布时间：2018-08-20 04:08:57 所属栏目：访谈来源：站长网

导读：猛火网(LieHuo.Net)CSS网页殊效教程，其拭魅这也算不得什么殊效，在早年的文章中，猛火提到过所谓的网页殊效一样平常是针对javascript而言的，近几年优越js框架 jQuery 的呈现，更让网页殊效有了新一轮刷新，好了，不多说费话，来看本日的教程。本文中，首要是

　　猛火网(LieHuo.Net)CSS网页殊效教程，其拭魅这也算不得什么殊效，在早年的文章中，猛火提到过所谓的网页殊效一样平常是针对javascript而言的，近几年优越js框架——jQuery的呈现，更让网页殊效有了新一轮刷新，好了，不多说费话，来看本日的教程。

　　本文中，首要是用CSS实现一个网页中常常行使的图文混排结果，在下面的实例中，我们可以看到这是一个小列表，上半部媒崆左图右文，在下半部门是列表分列，但愿对新手站长有所辅佐。

　　请看实例：

<!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=GBK" /> <title>CSS 图文简排</title> <style type="text/css"> .news{width:250px;line-height:21px;} .imgText .img{float:left;width:100px;} .imgText .img img{width:90px;height:90px;border:#ddd 1px solid;} .imgText .text{float:left;width:145px;} .imgText .text h3{font-size:12px;height:24px;overflow:hidden;} .imgText .text h3 a{color:#000;} .imgText .text h3 a:hover{color:#BA2636;} .imgText .text p{text-indent:24px;} .imgText .text p a{color:#BA2636;} .textList{clear:both;font-size:14px;} .textList li{height:25px;line-height:25px;overflow:hidden;} .textList li a{margin-right:5px;} @charset "gbk";/* liehuo.net*/ body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;} li{list-style:none;}img{border:none;}em{font-style:normal;} a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();} a:hover{color:#000;text-decoration:underline;} body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;} .clear{height:0;overflow:hidden;clear:both;} </style> </head> <body> <div class="news"> <ul class="imgText"> <li class="img"><a href="/a/view/16453.html"><img src="/uploads/allimg/1005/1-10050Z915290-L.jpg" /></a></li> <li class="text"> <h3><a href="/a/view/16453.html">2010母亲节LOGO计划浏览</a></h3> <p>本日是母亲节，在这个出格的日子里，我们要对巨大的母亲说一些祝福的话，要做一些...<a href="/a/view/16453.html">[具体]</a></p> </li> </ul> <ul class="textList"> <li><a href="/news/">[消息]</a><a href="/a/view/17867.html">说明称：Facebook可致伉俪仳离</a></li> <li><a href="/website/">[站长]</a><a href="/a/view/17782.html">新站必然要有原创的文章吗?</a></li> <li><a href="/mobile/">[手机]</a><a href="/a/view//0317799.html">HTC 手机购置时需留意什么？</a></li> </ul> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!