Java CSS 研究 easyUI frameSet框架
以上 第一個文件程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一個CSS</title>
<link href="style/style.1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<div id="logo"><img src="images/" width="410" height="220" alt="logo" /></div>
<div id="banner"><img src="images/203.jpg" width="982" height="210" alt="banner" /></div>
<div id="menu"><img src="images/204.jpg" width="223" height="80" alt="gamestart" /><img src="images/205.jpg" width="106" height="80" alt="menu1" /><img src="images/206.jpg" width="102" height="80" alt="menu2" /><img src="images/207.jpg" width="105" height="80"
alt="menu3" /><img src="images/208.jpg" width="100" height="80" alt="menu4" /><img src="images/209.jpg" width="77" height="80" alt="menu5" /><img src="images/210.jpg" width="86" height="80" alt="menu6" /><img src="images/211.jpg" width="77" height="80" alt="menu7"
/><img src="images/212.jpg" width="106" height="80" alt="menu8" /></div>
<div id="main">
<div id="left">
<div id="login">
<form id="f_login" name="f_login" method="post" action="">
<label for="f_login_name"></label>
<input name="f_login_name" type="text" style="font-family:'宋體'; font-size:12px; color:#000000" id="f_login_name" accesskey="n" tabindex="1" value="ID" />
<label for="f_login_pass"></label>
<input name="f_login_pass" type="password" style="font-family:'宋體'; font-size:12px; color:#000000" id="f_login_pass" tabindex="2" value="pass" />
<br />
<input name="btn_ent" type="submit" id="btn_ent" tabindex="3" value=" " />
<input type="checkbox" name="f_login_fuxuan" value="checkbox" tabindex="4" id="f_login_fuxuan" />
<label for="f_login_fuxuan" class="font01">記住密碼</label>
<br />
<img src="images/215.gif" name="f_login_pic" width="80" height="21" id="f_login_pic" alt="mima" />
<img src="images/216.gif" name="f_login_pic" width="89" height="21" id="f_login_pic" alt="zhuce" />
</form>
</div>
<div id="help"><img src="images/217.gif" name="help_pic" width="206" height="65" id="help_pic" alt="downgame" /><img src="images/218.gif" width="202" height="61" alt="gamehelp1" /><img src="images/219.gif" width="202" height="66" alt="gamehelp2"
/><img src="images/220.gif" width="202" height="63" alt="gamehelp3" /></div>
</div>
<div id="middle">
<div id="pic">
<div id="gamepic"><img src="images/222.gif" width="94" height="26" alt="gamepic" /><img src="images/223.gif" name="g_pic_more" width="41" height="26" id="g_pic_more" alt="gamepicmore" /></div>
<div id="gamecont">來趣網即將開通，敬請關注！強大的實力與良好的信譽已經與眾多國外知明遊戲建立了廣泛的聯絡，這些良好的聯絡...</div>
<div id="picgame">
<div id="picgame1"><img src="images/224.gif" width="144" height="101" alt="gamepic1" /><img src="images/226.gif" name="downpic" width="51" height="20" id="downpic" alt="gamepicdown" /></div>
<div id="picgame2"><img src="images/225.gif" width="144" height="101" alt="gamepic2" /><img src="images/226.gif" name="downpic" width="51" height="20" id="downpic" alt="gamepicdown" /></div>
</div>
</div>
<div id="game">
<div id="gamelist"><img src="images/227.gif" width="94" height="26" alt="gamelist" /><img src="images/223.gif" name="g_pic_more" width="41" height="26" id="g_pic_more" alt="gamelistmore" /></div>
<div id="gamelpic1"><img src="images/228.gif" name="listpic" width="96" height="107" id="listpic" alt="gamelistpic1" /></div>
<div id="gamelpic2"><img src="images/229.gif" name="listpic" width="96" height="107" id="listpic" alt="gamelistpic2" /></div>
<div id="gamelpic3"><img src="images/230.gif" name="listpic" width="96" height="107" id="listpic" alt="gamelistpic3" /></div>
</div>
</div>
<div id="right">
<div id="bbs">
<div id="bbstitle"><img src="images/233.gif" width="83" height="23" alt="bbs1" /><img src="images/234.gif" width="84" height="23" alt="bbs2" /><img src="images/235.gif" name="bbs_more" width="33" height="11" id="bbs_more" alt="bbsmore" /><img src="images/232.gif"
width="354" height="7" alt="bbsbottom" /></div>
<div id="bbscont">
<ul>
<li>送幾個激法號...</li>
<li>新人，想請問一下這個私服的問題...</li>
<li>廣州地區長期出售天幣，23級25級遊戲ID</li>
<li>有人能邊上游戲嗎？</li>
<li>靜軒SF，我怎麼註冊，暈死，註冊頁呢....</li>
</ul>
</div>
</div>
<div id="list"><img src="images/239.gif" width="366" height="199" alt="peizhi" /></div>
</div>
</div>
<div id="bottom">
<div id="bimg"><img src="images/243.gif" width="158" height="76" alt="bottomlogo" /></div>
<div id="bcont">使用者須知 導購說明 尺碼換算 貨運方式 付費說明 售後服務 積分說明<br />
<br />
北京來趣網路資訊科技有限公司版權所有，本公司保留所有權利<br />
Copyright 2005-2006 intojoy.com. All Rights reserved. </div>
</div>
</div>
</body>
</html>
CSS程式碼：style.1.css
* {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
body {
background-color: #11FFFF;
background-image: url(../images/6.jpg);
text-align: center;
font-family: "����";
font-size: 12px;
color: #575757;
}
#logo {
background-image: url(../images/1.jpg);
background-repeat: repeat-x;
height: 220px;
width: 100%;
text-align: left;
margin: 0 auto;
}
#banner {
height: 210px;
width: 982px;
margin: 0 auto;
}
#menu {
height: 87px;
width: 982px;
margin: 0 auto;
}
#main {
width: 982px;
text-align: left;
margin: 0 auto;
}
#left {
width: 223px;
text-align: center;
float: left;
}
#login {
text-align: left;
height: 117px;
width: 206px;
background-image: url(../images/213.jpg);
padding-top: 40px;
}
#f_login_name,#f_login_pass {
width: 110px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 13px;
border: 1px solid #0792D5;
}
#btn_ent {
width:56px;
height:43px;
position:absolute;
right:795px;
background-image: url(../images/214.gif);
background-repeat: no-repeat;
top: 383px;
}
#f_login_fuxuan {
margin-left: 13px;
}
.font01 {
font-family: "����";
font-size: 12px;
color: #313131;
}
#f_login_pic {
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 10px;
}
#help {
height: 278px;
width: 206px;
}
#help_pic {
margin-top: 5px;
margin-bottom: 5px;
}
#middle {
text-align: left;
width: 358px;
float: left;
}
#right {
width: 366px;
float: left;
}
#pic {
margin-top: 4px;
margin-bottom: 14px;
}
#gamepic {
background-image: url(../images/221.gif);
background-repeat: repeat-x;
height: 26px;
width: 345px;
}
#g_pic_more {
margin-left: 210px;
}
#gamecont {
font-family: "����";
font-size: 12px;
line-height: 20px;
color: #575757;
text-indent: 24px;
margin-right: 10px;
margin-left: 10px;
}
#picgame {
background-color: #EFEFEF;
padding: 3px;
margin-right: 28px;
margin-left: 14px;
height: 141px;
}
#picgame1 {
background-color: #FFFFFF;
text-align: center;
padding: 3px;
height: 135px;
width: 145px;
border: 1px solid #C7C7C7;
float: left;
}
#downpic {
text-align: right;
margin-top: 10px;
float: right;
}
#picgame2 {
background-color: #FFFFFF;
padding: 3px;
float: right;
height: 135px;
width: 145px;
border: 1px solid #C7C7C7;
text-align: center;
}
#gamelist {
background-image: url(../images/221.gif);
background-repeat: repeat-x;
height: 26px;
width: 345px;
}#gamelpic1 {
background-color: #EFEFEF;
text-align: center;
padding: 3px;
float: left;
height: 118px;
width: 108px;
margin-top: 8px;
margin-bottom: 10px;
}
#listpic {
background-color: #FFFFFF;
padding: 4px;
border: 1px solid #C7C7C7;
}
#gamelpic2 {
background-color: #EFEFEF;
text-align: center;
padding: 3px;
float: left;
height: 118px;
width: 108px;
margin-top: 8px;
margin-bottom: 10px;
margin-left: 3px;
}
#gamelpic3 {
background-color: #EFEFEF;
text-align: center;
padding: 3px;
float: left;
height: 118px;
width: 108px;
margin-top: 8px;
margin-bottom: 10px;
margin-left: 3px;
}
#bbstitle {
background-image: url(../images/231.gif);
background-repeat: repeat-x;
height: 30px;
width: 354px;
float: left;
margin-top: 5px;
}
#bbs_more {
margin-right: 10px;
margin-left: 144px;
margin-top: 5px;
margin-bottom: 5px;
}
#bbscont {
background-image: url(../images/237.gif);
background-repeat: no-repeat;
text-align: left;
height: 136px;
width: 342px;
float: left;
padding-right: 6px;
padding-left: 6px;
}
#b_bottom {
margin-top: 129px;
}
#list {
height: 199px;
width: 366px;
margin-top: 13px;
float: left;
}
#bottom {
background-image: url(../images/240.gif);
background-repeat: repeat-x;
height: 100px;
width: 982px;
float: none;
clear: both;
padding-top: 33px;
text-align: left;
margin: 0 auto;
}
#bimg {
height: 76px;
width: 158px;
margin-left: 40px;
float: left;
}
#bcont {
text-align: center;
height: 85px;
width: 480px;
margin-left: 94px;
float: left;
line-height: 18px;
}
#bbscont li {
font-family: "����";
font-size: 12px;
line-height: 25px;
color: #333333;
background-image: url(../images/236.gif);
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #8E8E8E;
text-indent: 24px;
list-style-type: none;
background-position: 10px center;
}
===============================================================
==================================================================
=============================================================
================================================================