调整什么的好伤神啊...
博客页面以 div + css 排版为主，描述基本的博客静态页面，后续的 数据动态链接，往后再慢慢添加...
调整中慢慢发现， 主要的最重要的也就是：
position 属性的取值（那四个值，特别是 absolute 和 relative 的使用），
以及它们使用后对 padding margin border 这盒子模型的影响，
再外加个浮动方式 float 属性取值，以及 clear 属性 both 值等的使用。
这几个主要方面理解好了，网页排版形式就慢慢固定下来了。
Blog 大致页面如下：
下面顺便贴上代码吧...记录一下....
页面主要分四部分 头顶的 globallink 左边的 author 右边的 main 下面的脚注 footer , 然后由每个 div 再细分
首先是 主 html 部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLOG_CN</title>
<style type="text/css">
@import "blog.css";
</style>
</head>
<body>
<!-- 整体布局 -->
<div id="container">
<!-- 主题栏 -->
<div id="globallink">
<img src="logo.jpg" title="logo"/>
<span> imwtr 的专栏</span>
<p> You are a Programer ? --></p>
<input name="name_search" type="text" size="15"/>
<a href="Search.php">搜索</a>
<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>
</ul>
</div>
<div id="paramater">
<div id="author">
<div style="text-align:center;"><form name="clock"><input type="text" color="#999999"name="tTime" size="10"/><br><br></form></div>
<!-- 输出时间--头像上方 -->
<script language="javascript">
update();
function update()
{
var Time1= new Date();
var H = Time1.getHours();
H = (H>=10)?H:('0'+H);
var M = Time1.getMinutes();
M = (M>=10)?M:('0'+M);
var S = Time1.getSeconds();
S = (S>=10)?S:('0'+S);
T = H + "："+ M + "：" + S ;
document.clock.tTime.value = T;
setTimeout("update()",1000);
}
</script>
<!-- 输出时间--处理结束 -->
<img src="my_img.png" title="头像"/><br><br>
<span><hr color="#999999"> imwtr 的 Blog <hr color="#999999"><br><br></span>
</div>
<div id="subjects">
<span><b>我的文章分类</b></span>
<ul>
<li><a href="#">个人随笔</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Web</a></li>
<li><a href="#">NetWork</a></li>
<li><a href="#">ACM</a></li>
<li><a href="#">数据库</a></li>
</ul>
</div>
<div id="list">
<span><b>文章列表</b></span>
<ul>
<li><a href="#"> MySQL 初识</a></li>
<li><a href="#"> MySQL 继续</a></li>
<li><a href="#"> MySQL 进阶</a></li>
<li><a href="#"> PHP基础</a></li>
<li><a href="#"> 电脑整合</a></li>
<li><a href="#"> Android 平台搭建</a></li>
</ul>
</div>
<div id="comment">
<span><b>最新评论</b></span>
<ul>
<li><a href="#"> [user1]:什么跟什么......</a></li>
<li><a href="#"> [user2]:什么什么跟什么......</a></li>
<li><a href="#"> [user3]:什么什么什么跟什么......</a></li>
<li><a href="#"> [user4]:。。。。。</a></li>
<li><a href="#"> [user5]:这篇文章好啊</a></li>
<li><a href="#"> [user6]:膜拜大神中-+=</a></li>
</ul>
</div>
</div>
<!-- 主界面 -->
<div id="main">
<table><tr><td ><b>MySQL 初识</b></td></tr></table>
<span>imwtr@ 2014-07-14 18:11:10 </span>
<p>
这是标准的正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正<br>
文正文正文正文正文正文正文正文正文正正文正文正文正文正文正文正文正文正文正文正文正文<br>
正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正<br>
文正文正文正文。<br>
<br>
1.<br>
2、<br>
3<br>
<br>
（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）<br>
<br><br><br><br><br>
</p>
<div id="record">
<ul>
<li> 浏览 [34] | 评论 [11]</li>
</ul>
</div>
<!-- 评论内容 -->
<div class="banner_r"><ul><li>查看评论：</li></ul></div>
<div class="banner_show">
<ul><li> imwtr 的评论：</li></ul>
</div>
<div class="comm_read">
<textarea name="read_comm" rows="5" cols="40"> </textarea>
</div>
<div class="banner_w"><ul><li>发表评论：</li></ul></div>
<div class="comm_write" style="line-height:2.5em; margin-bottom:20px;">
<form name="form1" method="post" action="comm_requ.php">
用户名 ：<input type="text" name="name_comm" size="10"/><br>
评论内容：<textarea name="write_comm" rows="5" cols="40"> </textarea>
<input type="submit" value="提交" name="submit_comm"/>
</form>
</div>
</div>
<!-- 脚注 -->
<div id="footer">
<table><tr><td >更新时间 ： 2014--07--14 © All Rights Reserved </td></tr></table>
</div>
</div>
</body>
</html>
接下来是 css 属性部分：
<style type="text/css">
body{
margin:0px;
padding-left:70px;
padding-right:0px;
padding-bottom:0px;
background-color:#696969;
}
#container{
position : relative;
width:1200px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
background-color:#ffffff;
border-left:1px dashed #aaaaaa;
border-right:1px dashed #aaaaaa;
border-bottom:1px dashed #aaaaaa;
}
#globallink{
position:relative;
width:1200px;
height:183px;
background-color:#d3d3d3;
margin:0px;
padding:0px;
}
#globallink img{
margin:0px;
width:1200px;
height:150px;
z-index:1;
}
#globallink span{
font-family:"微软雅黑";
font-size:38px;
position:absolute;
padding:1px;
z-index:2;
color:#ffffff;
top:20px;
left:700px;
}
#globallink p{
font-family:"微软雅黑";
font-size:18px;
position:absolute;
padding:3px;
z-index:2;
color:#a0522d;
top:50px;
left:700px;
}
#globallink input{
position:absolute;
left:20px;
top:90px;
font-family:Arial;
}
#globallink >a{
position:absolute;
z-index:2;
text-decoration:underline;
left:160px;
top:90px;
font-family:"宋体";
font-size:20px;
}
#globallink ul{
font-family:"楷体";
font-size:large;
position:absolute;
left:740px;
top:140px;
z-index:1;
list-style-type:none;
}
#globallink li{
float: left;
display:block;
margin-left:4px;
text-align:center;
padding:2px;
background-color:#6495ed;
}
#globallink li> a:link{ text-decoration:none; color:#000000; }
#globallink li >a:visited{ text-decoration:none; color:#c71585; }
#globallink li >a:hover{ text-decoration:underline; color:#ffffff; }
#globallink li >a:active{ text-decoration:none; color:#8b008b; }
#paramater{
position: relative;
float: left;
width: 210px;
margin:0px;
padding:2px;
top:20px;
}
#author img{
width:170px;
height:170px;
margin-left:20px;
border-bottom:dotted 2px #000000;
border-top:dotted 2px #000000;
border-left:dotted 2px #000000;
border-right:dotted 2px #000000;
}
#author span{
font-size:18px;
text-align:center;
text-indent:3px;
font-family:"楷体";
}
#subjects span{
font-size:18px;
background-color:#b0c4de;
width:140px;
text-align:center;
}
#subjects li{
list-style-type:none;
margin-bottom:2px;
border-bottom:dashed 1px #999999;
font-size:15px;
}
#subjects li a:link{ text-decoration:none; color:#000000;}
#subjects li a:hover{ text-decoration:none; color:#0000ff;}
#subject li a:active{ text-decoration:none; color:#000000; }
#subject li a:visited{ text-decoration:none; color:#999999; }
#list span{
font-size:18px;
background-color:#b0c4de;
width:140px;
text-align:left;
}
#list li{
list-style-type:none;
margin-bottom:2px;
border-bottom:dashed 1px #999999;
font-size:15px;
}
#list li a:link{ text-decoration:none; color:#000000;}
#list li a:hover{ text-decoration:none; color:#0000ff;}
#list li a:active{ text-decoration:none; color:#000000; }
#list li a:visited{ text-decoration:none; color:#999999; }
#comment span{
font-size:18px;
background-color:#b0c4de;
width:140px;
text-align:left;
}
#comment ul{
margin-bottom:100px;
}
#comment li{
list-style-type:none;
margin-bottom:2px;
border-bottom:dashed 1px #999999;
font-size:15px;
}
#comment li a:link{ text-decoration:none; color:#000000;}
#comment li a:hover{ text-decoration:none; color:#0000ff;}
#comment li a:active{ text-decoration:none; color:#000000; }
#comment li a:visited{ text-decoration:none; color:#999999; }
#main{
position:relative;
float:left;
padding:5px;
margin-left:30px;
margin-top:20px;
margin-bottom:30px;
width:900px;
}
#main table{
width:870px;
border-bottom:dashed 1px #999999;
}
#main span{
position:absolute;
left:650px;
font-size:16px;
padding-bottom:3px;
color:#999999;
text-align:right;
}
#main p{
line-height:1.5em;
word-spacing:5px;
text-align:left;
text-indent:25px;
font-size:17px;
font-family:"宋体";
padding-left:3px;
padding-right:3px;
padding-top:15px;
}
#record> ul>li{
font-size:15px;
font-family:"宋体";
padding-left:0px;
list-style-type:none;
text-align:left;
margin-left:-40px;
padding-top:5px;
border-top:dashed 1px #999999;
}
.banner_r >ul>li{
position:relative;
border-top-width:0px;
display:block;
width:900px;
text-align:left;
padding:3px;
margin-left:-40px;
margin-top:130px;
border-width:0px;
background-color:#e0e0e0;
}
.banner_show >ul>li{
position:relative;
border-top-width:0px;
display:block;
width:900px;
margin-left:-40px;
text-align:left;
padding:3px;
background-color:#c0c0c0;
}
.banner_w >ul>li{
position:relative;
border-top-width:0px;
display:block;
width:900px;
text-align:left;
margin-left:-40px;
padding:3px;
background-color:#e0e0e0;
}
#footer {
position:relative;
clear:both;
margin-left:10px;
margin-top:50px;
padding-left:440px;
margin-bottom:30px;
}
#footer table{
width:400px;
padding:2px;
text-align:center;
color:#004a87;
border-top-style:dashed;
border-top-width:1px;
}
</style>
************************************************************华丽分割线*****************************************************
貌似配色什么的不太正经......
...
1084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
