《CSS+DIV网页设计》
目录
1．前言................................................................ .... ...........................................1
2．设计要求...................................................... .... .... ........................................1
3．开发工具的选用及介绍...................................................................................1
4．个人博客设计………………………………………………………………………..2
4.1 css+div布局...............................................................................................2
4.2 首页布局................................. ..................................................…………9
4.3 日志布局………………………………………….…………………………...12
4.4 博友布局…………………………………………………….….……………..13
4.5 相册布局……………………….…………….……………………….……….15
4.6 留言布局…….………………………….……………………………………..16
4.7 收藏及好友布局…………………………………….………………………..16
5．总结...............................................................................................................17
1：前言
博客是目前网上很流行的日志形式，很多网友都拥有自己的博客，甚至不止一个。对于自己的博客，用户往往都希望能制作出美观又合适自己风格的页面，很多博客网站也都提供自定义排版的功能，其实就是加载用户自定义的css文件。
个人博客是一个自我展现的平台，可以让大家更好的进行交流。此次，我们的期末要求就是，自己完成一个个人博客的设计。
博客是一种需要每位用户精心维护，整理日志的网络，各种各样的调都有。我所制作的个人博客主要表现出一种青春，岁月的记录，因此采用灰白作为主调，而页面背景采用绿，二者配合表现出明朗，清爽与洁净的感觉。
2：设计要求
要求：1除个人首页外，要求至少包含：自我介绍，图片收藏，网页布局技术，我的爱好，给我留言等栏目，亦可自行增加其他栏目。
2整个网站至少包含10个html页（网站素材自行搜集整理，内容积极向上）。
3个人首页中设定的每个超级链接，必须能够链接到相应页面。
4其中“给我留言”栏目只要采用表单实验html页面部分即可，不需实现对留言内容的后台数据库保存。
5要求综合应用CSS+DIV技术，对个人博客系统进行整体布局以及内容样式控制。
最后效果： 1）界面美观、布局设计独到；
2）版面简洁，文本，图案整齐美观；
3）整体彩和谐，符合美感，贴近主题；
4）网页内各个元素搭配合理；
5）人机交互方便，结构清晰。
3：开发工具的选用及介绍
本次个人博客的设计主要是在Macromedia Dreamweaver的环境下完成的。
Dreamweaver这款专业的网页设计软件在代码模式下对HTML,CSS,和JavaScript等代码有着非常好的语法着以及语法提示功能，并且自带很多实例，对CSS的学习很有帮助。
4：个人博客设计
4.1 css+div布局
Style层叠样式表:
body
{
background:url(images/bg.jpg) no-repeat center top #000000;
html网页设计报告总结padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
margin:0px auto auto auto;
color:#696767;
}
p{
padding:0px 0 20px 0;
text-align:justify;
margin:0px;
line-height:17px;
}
p.tips{
padding:0px 0 7px 0;
text-align:justify;
margin:0px;
line-height:17px;
border-bottom:1px #cebf91 dashed;
}
h1{
color:#7e5025;
padding:5px 0 10px 0;
margin:0px;
font-size:19px;
font-weight:normal;
}
h2{
color:#2d7513;
padding:0px 0 5px 0;
margin:0px;
font-size:12px;
font-weight:bold;
}
a.read_more{
display:block;
color:#855f35;
float:right;
font-style:italic;
margin:5px 0 0 0;
text-decoration:none;
font-size:12px;
}
ad_more{
text-decoration:underline;
}
img.left_icon{
float:left;
padding:0px 15px 0px 0px;
}
img.right_icon{
float:right;
padding:0px 0px 0px 15px;
}
.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-repeat top center;
}
.logo{
width:290px;
text-align:center;
font-size:28px;
color:#7e5025;
float:left;
padding:110px 0 0 112px;
}
.logo a{
color:#7e5025;
text-decoration:none;
}
/*---------------- menu tab----------------------*/
.menu{
width:470px;
float:left;
padding:145px 0 0 40px;
}
.menu ul{
list-style:none;
padding:0px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li a{
float:left;
border:none;
margin:0 10px 0 10px;
_margin:0 7px 0 7px;
text-decoration:none;
color:#754928;
font-size:14px;
font-weight:bold;
}
.menu ul li a:hover{
color:#754928;
border-bottom:3px #bc8d46 solid;
}
.menu ul li.selected a{
float:left;
border:none;
margin:0 10px 0 10px;
text-decoration:none;
color:#754928;
font-size:14px;
font-weight:bold;
border-bottom:3px #bc8d46 solid;
}
/*-------------center_content-------------*/
#center_content{
width:819px;
margin:auto auto 20px auto;
height:auto;
background-color:#fef8e6;
}
.left_content{
width:410px;
float:left;
padding:15px 10px 10px 60px;
}
.right_content{
width:290px;
float:left;
padding:0 10px 10px 20px;
}
.bottom_content{
width:819px;
height:369px;
clear:both;
margin:auto;
background:url(images/bottom_bg.jpg) no-repeat top center;
}
.photos_block{
padding:10px 0 10px 0;
}
.photo_box{
width:114px;
height:111px;
float:left;
display:block;
text-align:center;
margin:0 18px 0 0;
position:relative;
background:url(images/photo_bg.gif) no-repeat center;
}
img.photo{
padding:6px 0 0 0;
}
a.view{
float:right;
padding:4px 6px 0 0;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。