跟我一起重寫JAVA WEB網路硬碟( 1 )
阿新 • • 發佈：2019-01-05
大一課程設計寫了個網路硬碟，當時什麼都不知道，只是趕鴨子上架，雖然寫出來了，但還是拿不出手，經過半學期的時間，我想重新寫一寫網路硬碟（可以拿的出去手的...^-^）。
假期上了上開發論壇，有一位老師說你連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;
}
