网站制作CSS+DIV

CSS+DIV主要札记：一、背景1.网站背景图片的用法，如：background:#(颜色值) url(图片路径和名称) no-repeat right bottom; 另一种方法：background:#(颜色值) url(图片路径和名称) no-repeat 90% 35%;即：可用百分比调节图片位置。

（注：这里的百分比可以自定义。

）2.网站背景渐变色的用法，如：background:#^ url(路径) repeat-x;3.使用display属性提供区块的转换：inline, block, none不是区块的标记有：span strong em等内联标记。

内联标记：无法设置高度和宽度，不独占一行，自身决定长度。

是区块的标记有：p div 等区块：可以设置长度，高度，而且独占一行。

注意：1.如果你是内联标记，则display就默认是:inline;2.如果你是区块，则display就默认是:block;3.区块与内联可以相互转换。

display:inline; 转换为内联display:block; 转换为区块，display:none; 不占位的隐藏。

（此时隐藏的区域在页面上不再占位。

）letter-spacing:1px; 字体间距二、给标题前加上一个小图标如：h1{padding-left:20px;badkground:url( .gif) no-repeat left center;}或者h1{padding-left:20px;badkground:url( .gif) no-repeat 0 50%; 中间}三、圆顶角如：(注意：圆顶角是要利用FW把顶，右底右制作出来，注意颜色搭配。

) <div id="box"><h1>育英中学校园网</h1><p>这是育英中学校园网，它主要是介绍育英和给出了一些试题等。

这是育英中学校园网，它主要是介绍育英和给出了一些试题等。

这是育英中学校园网，它主要是介绍育英和给出了一些试题等。

</p></div>css的写法：div#box{width:400px;height:200px;background:red url(bottom.gif) no-repeat left bottom;}h1{width:auto;background:url(top.gif) no-repeat left top;padding-left:20px;}p{width:auto;padding-left:20px; 整体向右缩进20text-indent:20px; 首行缩进20}区块用margin:0 auto来居中,display:inline-block是内联块,不能用auto来居中,但可以用text-algin:centent来居中.a,img,span,strong属于内联四、简单利用CSS制作阴影效果如：（注意，一般阴影利用图片制作效果会增强些）<div><img src="img.gif" /></div>CSS写法：div{float:left;margin:2px 0 0 2px;background:url(shadow.gif) no-repeat right bottom;}div img{position:relative;top:-2px;left:-2px;}五、CSS构造列表与导航如：(注意：ul 与li都属于区块。

)<ul><li>首页</li><li>学校管理</li><li>同步试题</li><li>在线留言</li></ul>以背景图片作为列表的图标这种方法最好，其CSS写法：ul{margin:0;padding:0;list-style-type:none; 去掉小圆点等列表图标line-height:XXX; 行高自定}以背景图片作为列表图标，并不是在ul上写入代码，而是在ul下的li里定稿代码，如下：li{background:url(arrow.gif) no-repeat left center; (把content改为百分数也可以调节图标的位置。

)padding-left:20px;}背景图片与内联列表：ul{margin:0;padding:0;list-style-type:none;}li{background:url(arrow.gif) no-repeat left center; 背景图标padding-left:20px;display:inline; 将li转换为区块，于是列表和图标都横着排列}stron和span属于内联（内联在浮动时会自动转换成区块，王放还有待研究）注意：dl叫定义列表。

六、垂直导航栏如：<div><ul><li><a href=”#”>首页</a></li><li><a href=”#”>新闻</a></li><li><a href=”#”>购物</a></li><li><a href=”#”>试题</a></li><li><a href=”#”>图片</a></li><li><a href=”#”>软件</a></li><li><a href=”#”>注册</a></li></ul></div>CSS写法：ul{list-style-type:none;padding:2px;margin:5px;font-size:14px;width:160px;}ul li{badkground:#ddd; （这个颜色后面还可以加入背景图标代码url(arrow.gif) no-repeat left center）margin:0px;padding:2px 10px;border-left:1px solid #fff;border-top:1px solid #fff;border-right:1px solid #666;border-bottom:1px solid #aaa;}垂直翻转列表滑动门导航样制作方法<ul><li><a href=”#”>首页</a></li><li><a href=”#”>新闻</a></li><li><a href=”#”>购物</a></li><li><a href=”#”>试题</a></li><li><a href=”#”>图片</a></li><li><a href=”#”>软件</a></li><li><a href=”#”>注册</a></li></ul>CSS写法：ul{list-style-type:none;padding:0;margin:0;font-size:14px;width:160px;}说明：ul li a超链接属于内联，要转换为区块，这样可以设置长度和宽度。

插入列表背景图片后可以将left center;可自定义，如改为left bottom;等ul li a{display:block;width:200px;height:40px;line-height:40px;color:#000;text-decoration:none; 无下划线background:#94b8e9 url(xxx.gif) no-repeat left center;text-align:center;}ul li a:hover{background-position:right center;}水平导航条的制作方法示范如上，CSS写法如下：ul{list-style-type:none;padding:0;width:400px;margin:0;background:#faa819 url(XXX.gif) repeat-x;float:left;line-height:26px;font-size:14px;}ul li{ 这里不要转换为内联，内联效果不理想，用浮动。

float:left;width:60px;background:url(XXX.gif) no-repeat right center;text-align:center;}ul li a{color:#000;text-decoration:none; 无下划线ul li说明：它们都是区块，起始时，他们是竖排的，可以使用浮动将其横排，其实这里还可以将它转换成内联，也可以实现横排。

如：ul li{display:inline;}七、超链接网页中的超链接属于内联，有时要转换为区块，才能设置高度和长度。

如：a{color:red;text-decoration:none;border-bottom:1px solid #333; 下边框display:block; 将内联转换为区块。

width:100px;line-height:150%; 这个值可以让文字与下划线离开一定的距离}在文章段落中选择某个词加入超链接时，CSS代码不能将内联转换为区块，因为若转换为区块后，这个加入了超链接的词后面的字全部都要掉下来。

因为区块要独占一行。

如：我叫XXX，网名王放，请多关照！假如我们给“王放”这个词加入超链接，代码：a{border-bottom:1px solid #333;background:#ccc;text-decoration:none;color:#f00;line-height:150%;}用背景图象给超链接加入记号如：我叫XXX，网名王放，请多关照！假如我们给“王放”这个词加入超链接，代码：a{background:url(XXX.gif) no-repeat left center;text-decoration:none;color:#f00;padding-left:15px;line-height:150%;}用背景图象改变图标主要是在hover和active上改变背景图象就行了。