搜索
《CSS+DIV网页设计》目录1．前言...............................................................................................................12．设计要求......................................................................................................13．开发工具的选用及介绍...................................................................................14．个人博客设计………………………………………………………………………..24.1css+div布局...............................................................................................24.2首页布局...................................................................................…………94.3日志布局………………………………………….…………………………...124.4博友布局…………………………………………………….….……………..134.5相册布局……………………….…………….……………………….……….154.6留言布局…….………………………….……………………………………..164.7收藏及好友布局…………………………………….………………………..165．总结...............................................................................................................1711：前言博客是目前网上很流行的日志形式，很多网友都拥有自己的博客，甚至不止一个。对于自己的博客，用户往往都希望能制作出美观又合适自己风格的页面，很多博客网站也都提供自定义排版的功能，其实就是加载用户自定义的css文件。个人博客是一个自我展现的平台，可以让大家更好的进行交流。此次，我们的期末要求就是，自己完成一个个人博客的设计。博客是一种需要每位用户精心维护，整理日志的网络，各种各样的色调都有。我所制作的个人博客主要表现出一种青春，岁月的记录，因此采用灰白色作为主色调，而页面背景采用绿色，二者配合表现出明朗，清爽与洁净的感觉。2：设计要求要求：1除个人首页外，要求至少包含：自我介绍，图片收藏，网页布局技术，我的爱好，给我留言等栏目，亦可自行增加其他栏目。2整个网站至少包含10个html页（网站素材自行搜集整理，内容积极向上）。3个人首页中设定的每个超级链接，必须能够链接到相应页面。4其中“给我留言”栏目只要采用表单实验html页面部分即可，不需实现对留言内容的后台数据库保存。5要求综合应用CSS+DIV技术，对个人博客系统进行整体布局以及内容样式控制。最后效果：1）界面美观、布局设计独到；2）版面简洁，文本，图案整齐美观；3）整体色彩和谐，符合美感，贴近主题；4）网页内各个元素搭配合理；5）人机交互方便，结构清晰。3：开发工具的选用及介绍本次个人博客的设计主要是在MacromediaDreamweaver的环境下完成的。Dreamweaver这款专业的网页设计软件在代码模式下对HTML,CSS,和JavaScript等代码有着非常好的语法着色以及语法提示功能，并且自带很多实例，对CSS的学习很有帮助。4：个人博客设计4.1css+div布局Style层叠样式表:body{background:url(images/bg.jpg)no-repeatcentertop#000000;padding:0;font-family:Georgia,TimesNewRoman,Times,serif;font-size:12px;2margin:0pxautoautoauto;color:#696767;}p{padding:0px020px0;text-align:justify;margin:0px;line-height:17px;}p.tips{padding:0px07px0;text-align:justify;margin:0px;line-height:17px;border-bottom:1px#cebf91dashed;}h1{color:#7e5025;padding:5px010px0;margin:0px;font-size:19px;font-weight:normal;}h2{color:#2d7513;padding:0px05px0;margin:0px;font-size:12px;font-weight:bold;}a.read_more{display:block;color:#855f35;float:right;font-style:italic;margin:5px000;text-decoration:none;font-size:12px;}a:hover.read_more{text-decoration:underline;3}img.left_icon{float:left;padding:0px15px0px0px;}img.right_icon{float:right;padding:0px0px0px15px;}.clear{clear:both;}a{text-decoration:underline;}#main_container{width:960px;height:auto;margin:auto;padding:0px;position:relative;}.top_leafs{position:absolute;top:2px;left:3px;z-index:200;}#header{width:960px;height:196px;margin:0px;padding:0px;background:url(images/header_bg.jpg)no-repeattopcenter;}.logo{width:290px;text-align:center;font-size:28px;color:#7e5025;4float:left;padding:110px00112px;}.logoa{color:#7e5025;text-decoration:none;}/*----------------menutab----------------------*/.menu{width:470px;float:left;padding:145px0040px;}.menuul{list-style:none;padding:0px;margin:0px;}.menuulli{display:inline;}.menuullia{float:left;border:none;margin:010px010px;_margin:07px07px;text-decoration:none;color:#754928;font-size:14px;font-weight:bold;}.menuullia:hover{color:#754928;border-bottom:3px#bc8d46solid;}.menuulli.selecteda{float:left;border:none;margin:010px010px;text-decoration:none;color:#754928;5font-size:14px;font-weight:bold;border-bottom:3px#bc8d46solid;}/*-------------center_content-------------*/#center_content{width:819px;margin:autoauto20pxauto;height:auto;background-color:#fef8e6;}.left_content{width:410px;float:left;padding:15px10px10px60px;}.right_content{width:290px;float:left;padding:010px10px20px;}.bottom_content{width:819px;height:369px;clear:both;margin:auto;background:url(images/bottom_bg.jpg)no-repeattopcenter;}.photos_block{padding:10px010px0;}.photo_box{width:114px;height:111px;float:left;display:block;text-align:center;margin:018px00;position:relative;background:url(images/photo_bg.gif)no-repeatcenter;}6img.photo{padding:6px000;}a.view{float:right;padding:4px6px00;text-decoration:none;color:#706443;}.tip_box{clear:both;float:left;width:290px;padding:0015px0;}.news_box{clear:both;float:left;width:290px;padding:5px05px0;}.date_box{width:47px;height:49px;float:left;text-align:center;line-height:25px;font-weight:bold;background:url(images/date_bg.gif)no-repeatcenter;}span.day{color:#855f35;}span.month{color:#fef8e5;}.news_content{width:230px;float:left;padding:00010px;}7.about_text{width:300px;padding:195px0030px;float:left;}.friends_list{width:180px;float:left;padding:195px0030px;}/*----------------------list-------------------------*/ul.list{list-style:none;padding:0px;margin:0px;}ul.listli{list-style:none;width:auto;height:auto;padding:008px0;margin:0px;}ul.listlia{width:auto;padding:00015px;margin:0;color:#696767;text-align:left;display:block;text-decoration:none;background:url(images/footer_bullet.gif)no-repeatleft;}ul.listlia:hover{text-decoration:underline;}.bottom_right{width:240px;float:left;text-align:center;padding:195px0015px;