网页设计基础:Div+CSS布局入门教程

日期：2008年4月1日作者：查看:[大字体中字体小字体]

#menu ul li a:hover{}

　　这个也不多说了，没什么好说的了，最后的效果如下：

更多内容请看ASP.NET教程 FreeBSD使用教程 Solaris基础知识入门专题，或
　　这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。

　　首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在<td></td>中加入这么一段就可以了，你可以试试：

　　<div style="border-bottom:1px dashed #ccc"></div>

　　大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。

　　<div id="banner"></div>

　　以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：

#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
width:730px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:240px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}

　　通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。

　　另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。

<div id="pagebody">
<div id="sidebar">
</div>
<div id="mainbody">
</div>
</div>

　　以上是页面主体部分，我们在css.css中添加以下样式：

#pagebody {
width:730px; /*设定宽度*/
margin:8px auto; /*居中*/
}
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
上一页 [1] [2] [3] [4] [5] [6] [7] [8] 下一页
网页设计基础:Div+CSS布局入门教程相关文章：
·多个技巧让局域网内互访无障碍
·学习CSS制作网页的多个经验技巧
·预防网络病毒的几个忠告
·个性圣诞节贺卡制作网站推荐
·解读防火墙日志记录防范网络攻击
·把网页保存为图片换种方式收集有用资料
·详解Alexa网站流量排名
·学习CSS制作网页总结的一些经验技巧
·纯CSS制作的新闻网站中的文章列表
·用十大安全策略加固无线局域网安全
网页设计基础:Div+CSS布局入门教程相关软件
·公司企业网站管理系统模板功能强大版
·服装专卖店网站模板免费版
·围棋网络版
·《宝贝坦克》休闲网游
·奇酷游戏时尚网络休闲平台
·网络游戏《R－MAN》宣传片
·《大力网球2005》运动试玩
·《网络三缺一》客户端
·GBA游戏《马里奥网球》模拟器
·网络名家合集之《赤军作品集》

上一篇:Web表现层技术竞争替代关系一览

下一篇:CSS资源

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

网页设计基础:Div+CSS布局入门教程

精品推荐

热点TOP10

特别推荐