跟我一起重写JAVA WEB网络硬盘( 1 )
大一课程设计写了个网络硬盘，当时什么都不知道，只是赶鸭子上架，虽然写出来了，但还是拿不出手，经过半学期的时间，我想重新写一写网络硬盘（可以拿的出去手的...^-^）。
假期上了上开发论坛，有一位老师说你连servlet都搞不清楚getAttribute和getParameter的区别都不知道，你用什么框架？我之前还一个劲的看S2SH。。
所以呢...这次开发不用框架，就用jsp+java bean +servlet。
这次网络硬盘，首页大致上模仿115网盘的布局，自己又添加了点，删除了点。
这次可能会用到各种技术..html5 css3 javasript jquery ajax ..我也说不准，写一步看一步。
这次是真正的现场直播，可能有些困难我也不知道。。所以就一个问题我可能写几天，希望和大家一起努力。
2013-2-26 18:33:41
今天先和大家来完成首页布局。
我以为很简单很简单，就是div+css，但第一次用MyEclipse开发，自己生成的HTML是如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
</html>
"-//W3C//DTD HTML 4.01 Transitional//EN这种规格貌似对DIV+CSS存在兼容问题，在wenkit和firefox兼容但是在IE的任何版本都是排版错的。
主要问题表现为已经在CSS中限定BODY的大小但是在IE中却充满全窗口，貌似CSS没有继承了。
之前搞了半天都不知道问题出在哪，后来用Dreamwear CS4生成了一个
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> </body> </html>
测试后在IE还是W3C中都可以...文件先暂时这样创建
其中index.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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CQUT网络硬盘</title> <link rel="stylesheet" type="text/css" href="styles/basic.css" /> </head> <body> <div id="header">header</div> <div id="nav">nav</div> <div id="adv">adv</div> <div id="login">login</div> <div id="share">share</div> <div id="rank">rank</div> <div id="footer">footer</div> </body> </html>
basic.css
* {
margin:0;
padding:0;
}
body {
width:860px;
margin:0 auto;
background:#ccc;
}
#header {
height:80px;
margin:0 auto;
background:yellow;
}
#nav {
height:35px;
background:lightblue;
}
#adv {
width:550px;
height:420px;
background:pink;
float:left;
}
#login {
width:300px;
height:420px;
background:blue;
float:right;
}
#share {
width:550px;
height:420px;
background:green;
float:left;
}
#rank {
width:300px;
height:420px;
background:orange;
float:right;
}
#footer {
height:80px;
background:black;
clear:both;
}
