第9讲 内容细化-构建图文并排样式
作为网页中最为常用的两种东西,图和文的排版在所难免.
那么,怎么达到图文并排的样式呢…下面我们来用UL和LI两个XHTML中常用的标记做图文并排效果.
首先我们得回顾下几个文字的基本CSS:
最基本的大小(font-size),颜色(color),重量也就是粗细(font-weight)
段落控制属性,首行缩进(text-indent),文字对齐(text-align)
另外需要用到的就是第8讲的超链接特效以及第5讲的FLOAT属性.
我们先来做个基本的框架
下面我们扩充内容
按照从左到右的顺序制作内容,这里要注意,网页制作中尽量的使用统一的制作顺序,形成自己的条理性,这样不至于在一次制作不完的情况下,下次制作的时候产生混乱.
然后是文字部分,这里运用<h3>标记,<h1>-<h6>标记是标题标记,1-6,数字越小,显示的标题文字就越大
由于FIREFOX和IE下的标题标记字体大小定义不一样,所以要重新定义下字体大小.
然后用<p>段落标记做文本段落书写,这里使用到首行缩进
下面我们来看下整个的代码
HTML部分
复制内容到剪贴板
代码:
<div id="tw">
<!--图片部分-->
<ul class="float" style="padding-top:10px;"><a href="" title="1部分图片" class="img"><img src="1.jpg" alt="1部分图片" /></a></ul>
<!--文字部分-->
<ul class="float"><h3>文字部分</h3>
<p>具体内容...我随便找的</p>
<p>3月9日上午10时十一届全国人大一次会议将在人民大会堂一楼新闻发布厅举行记者招待会。劳动和社会保障部部长田成平、副部长孙宝树,民政部部长李学举、民政部常务副部长李立国就就业和社会保障问题答记者问。</p></ul>
<div class="clear"></div><!--清除浮动-->
</div>CSS部分
复制内容到剪贴板
代码:
/* CSS Document */
/*首声明*/
img{border:none;}
body{padding-top:10px;}
/*ID部分*/
/*--3个tw的ID下的标记重定义--*/
#tw ul{list-style:none; font-size:12px; color:#000000; text-align:left;}
#tw h3{font-size:13px;}
#tw p{text-indent:10px;}
/*class部分*/
/*--先前的两个class--*/
.float{float:left;}
.clear{clear:both;}
/*--先前的两个class--*/
/*--超链接特效--*/
a.img:link,a.img:visited{border-style:solid; border:#333333 1px; padding:3px;}
a.img:hover,a.img:active{border-style:solid; border:#0099FF 1px;padding:3px;}至此…
基本教程就全部完了….之后的教程将针对DISCUZ6.0的模板进行详细解说.里面会含有大量的资料,敬请期待…
我的助手
