css网页制作总结

CSS

网页制作总结

一、网站主题：我的个人网站

二、制作思路：综合运用css标准网页布局基本知识，并结合其他相关知识，比如各种Javascript脚本代码、DW新增功能等知识，对网页中的各个元素进行合适的布局及其规划，从而制作一个关于我自己的一些相关情况的网页。该网页由横向导航栏(在rightmain中)、头部top、主体部分（由左侧leftmain和内容leftmain组成）以及脚步footer三大模块组成。

首先是对网站的主题进行构思，由于本人第一学期对于做网站的爱好，用Dreamwaver CS3软件做了一个不敬人意的网站首页，并还尝试把它发布到“美国5944”免费虚拟主机上，经历了千辛万苦，最后还是老天不负有心人，发布成功了！让我感觉兴奋极了，突然感觉到我也能做网站了！到了第二学期在没事做的时候我又对自己的网站进构思、布局，本把自己的想法做能了网页，那是由于所学知识的局限，用的是绘制表格布局。想不到到了第三学期,让我明白了CSS功能的强大，以及与CSS完美结合的布局，对于我这个对做网站有兴趣的人，一边学也一边用DIV+CSS布局的方法重新做了一下自己的个人网站。所以等老师要求自己设计一个网页作品时，我当然也就把自己这个网站拿上去交作业了，按照要求修改即可，再多想想、看看有哪些不足，修改，提高。

其次是对网站内容结构的规划。网站的头部是一张自己用Ps设

计的gif格式的图片和加于收藏、设为首页、与我QQ联系的链接。网站主体部分包括导航横幅，动态相册是用Java脚本语言制作的切换效果图，虽然他们貌似不属于css，但是每一部分的布局都完全是用css一步一步进行控制的；网站的脚部由友情链接及版权信息等组成。

最后是对网站的各个部分综合运用css布局基本知识进行精确地定位和布局，力求做到美观、自然、大方！

三.网页配色。

由于网页时关于我自己的，因此它就应该体现出我的个性，我喜爱蓝色，喜欢它的纯净及无限宽广，喜欢这个色调给与人的无限的遐想，像自由、宽广等等的词汇，从侧面反映了我的性格取向。并且蓝色与我的网页整个搭配起来我感觉比较协调，基调比较好，所以我就选用了一个渐变的蓝色背景！

四、制作过程（包含部分关键的css代码）。

（1）根据初步的构思，书写网页的结构代码，构建一个网页的基本结构框架

（2）对网页结构中的各个元素用css知识进行布局。 1.为了使整个网页与浏览器的上边缘贴紧而不留空隙，并使网站有一个大的合适的背景，我就首先定义了#home{ margin:0;

padding:0;

background:#F5F5F5 url(images/bodybg2.jpg);

}，其中背景是由一个渐变的小线条横向重复构成的。

3.定义横向导航菜单，在这里我用了一个特色代码display:block;使得列表的每一部分在鼠标移上去时呈现为块元素！以及CSS Sprites工作原理，控制背景图的位置，显示不同部分。

#home #main #rightmain ul#rmainlisttop{

float:right; width:807px; margin:0 20px; padding:0; list-style:none; } #home #main #rightmain ul#rmainlisttop li{ float:left; width:100px; height:45px; border-right:1px solid #333333; background:url(images/Btn.gif) no-repeat 0 0; overflow:hidden; }

#home #main #rightmain ul#rmainlisttop li#list_8{

border-right:0;

} #home #main #rightmain ul#rmainlisttop li a{ display:block; line-height:45px; text-decoration:none; text-align:center; text-indent:120px; white-space:nowrap; overflow:hidden; }

#home #main #rightmain ul#rmainlisttop li#list_2{

background-position:-101px 0; }

#home #main #rightmain ul#rmainlisttop li#list_3{

background-position:-202px 0;

}

#home #main #rightmain ul#rmainlisttop li#list_4{

background-position:-303px 0; }

#home #main #rightmain ul#rmainlisttop li#list_5{

background-position:-404px 0; }

#home #main #rightmain ul#rmainlisttop li#list_6{

background-position:-505px 0; }

#home #main #rightmain ul#rmainlisttop li#list_7{

background-position:-606px 0; } #home #main #rightmain ul#rmainlisttop li#list_8{

background-position:-707px 0; }

#home #main #rightmain ul#rmainlisttop li a:hover{ display:block; line-height:45px; text-decoration:none; text-align:center; text-indent:5px; color:#FF0066; font-size:18px; background:url(ico/icofu1.jpg) no-repeat left top; }

4 校园风光欣赏中的图片渐变效果Java代码如下：

style=\"FILTER: revealTrans(duration=2,transition=20)\" height=220 src=\"images/01.gif\" width=300 border=0 name=bannerADrotator>

5.定义内容部分的左侧栏目leftmain。 (1)用户登录区域

#home #main #leftmain{

width:173px; #home #main #leftmain #user #username{

width:70px; height:18px; } #home #main #leftmain #user #passwd{

width:70px; height:18px; } height:853px; float:left; margin:0; padding:0; background:#DDC08A; overflow:hidden; } #home #main #leftmain #user{

width:173px; float:left; margin:0; padding:0; background:#3399FF; border-bottom:5px solid #95B919; }

#home #main #leftmain #user #myform{

margin:auto; width:163px; padding-left:10px; float:left; } #home #main #leftmain #user h3{

width:173px; height:32px; margin:0; padding:0; background:#FF0066; background:url(images/userlogin.jpg) no-repeat left top;

} （2）家园公告栏

其中设置了Div的高度宽度溢出的时候有滚动条出现，代码如下： #home #main #leftmain #tips{ padding-left:25px; width:148px; height:250px; float:left;

overflow:auto; 溢出的时候有滚动条出现 padding-bottom:5px; background:#D8C48D; }

6.定义脚部。代码如下： #home #footer{

float:left;

width:100%; height:30px;

background:#999999 url(images/footer_bg.jpg) repeat-x 0 0; margin:0; padding:0;

}

#home #footer p{

font-size:13px;

line-height:30px; color:#0033FF; padding:0; margin:0; text-align:center; }

五.实验心得。

通过这一学期对div+css网页布局基本知识的学习，使我对网页的制作有了一个新的认识。