这次网络硬盘,首页大致上模仿115网盘的布局,自己又添加了点,删除了点。
这次可能会用到各种技术..html5 css3 javasript jquery ajax ..我也说不准,写一步看一步。
这次是真正的现场直播,可能有些困难我也不知道。。所以就一个问题我可能写几天,希望和大家一起努力。
2013-2-26 18:33:41
今天先和大家来完成首页布局。
我以为很简单很简单,就是div+css,但第一次用MyEclipse开发,自己生成的HTML是如下
[html] view
plaincopy
- <!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生成了一个
[html] view
plaincopy
- <!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
[html] view
plaincopy
- <!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
[css] view
plaincopy
- * {
- 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;
- }
刚闲着没事又把header和nav写了一下,出了一点小问题:
.想把logo做成<h1>标签的形式方便搜索引擎搜索,但是header的背景却遮盖住了logo,用浮动也只能显示一半,不知道怎么解决!
2013-2-26 21:29:47(重新编辑)
晕...发上后看到heigth怎么没标亮?结果一看打错了 - -应该是height..现在就可以用<h1>了
basic.css
[css] view
plaincopy
- * {
- margin:0;
- padding:0;
- }
- a {
- text-decoration:none;
- }
- ul {
- list-style-type:none;
- }
- body {
- width:860px;
- margin:0 auto;
- font-size:12px;
- background:#ccc;
- }
- #header {
- height:80px;
- margin:0 auto;
- background:#4380DB url(../images/logo.jpg) no-repeat;
- }
- #header h1{
- background:;
- width:199px;
- heigth:100px;
- font-size:100%;
- }
- #header ul li {
- width:60px;
- float:right;
- }
- #header ul li a{
- color:#fff;
- }
- #header ul li a:hover{
- font-weight:bold;
- }
- #nav {
- height:35px;
- background:#eee;
- }
- #nav ul{
- background:#eee;
- }
- #nav ul li {
- float:left;
- width:144px;
- height:35px;
- }
- #nav ul li a{
- text-align:center;
- font-size:150%;
- font-weight:bolder;
- font-family:Microsoft YaHei;
- line-height:35px;
- width:140px;
- height:35px;
- display:inline-block;
- color:#4380DB;
- }
- #nav ul li.lastnav{
- width:140px;
- }
- #nav ul li a:hover{
- background:#4380DB;
- color:#eee;
- }
- #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;
- }
index.html
[html] view
plaincopy
- <!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" />
- <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
- </head>
- <body>
- <div id="header">
- <ul>
- <li><a href="#">关于本站</a></li>
- <li><a href="#">帮助文档</a></li>
- <li><a href="#">网站首页</a></li>
- </ul>
- </div>
- <div id="nav">
- <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 class="lastnav"><a href="#">####</a></li>
- </ul>
- </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>
- 刚有写了点..基本完成首页布局,现在就差Jquery了
.
index.html
[html] view
plaincopy- <!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" />
- <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
- </head>
- <body>
- <div id="header">
- <h1>CQUT网络硬盘</h1>
- <ul>
- <li><a href="#">关于本站</a></li>
- <li><a href="#">帮助文档</a></li>
- <li><a href="#">网站首页</a></li>
- </ul>
- </div>
- <div id="nav">
- <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 class="lastnav"><a href="#">客服服务</a></li>
- </ul>
- </div>
- <div id="adv">
- <h2>热门推荐</h2>
- <div id="imagetab">
- </div>
- </div>
- <div id="login">
- <h2>网盘登录</h2>
- <div>
- <form action="#" method="post">
- <ul>
- <li><input class="logintext" name="username" type="text" placeholder="请输入你的用户名" required/></li>
- <li><input class="logintext" name="password" type="password" placeholder="请输入你的密码" required/></li>
- <li class="button1">
- <input class="submit" name="submit" type="button" value="登录"/>
- <input class="submit" name="submit" type="button" value="注册"/>
- </li>
- <li>
- <input id="autologin" name="autologin" type="checkbox"/><label for="autologin">自动登录</label>
- <a id="forgetpassword" href="#">忘记密码?</a>
- </li>
- </ul>
- </form>
- </div>
- </div>
- <div id="share">
- <h2>最新共享</h2>
- <div>
- <ul><strong>文件名</strong>
- <li><a href="#">轻量级Java_EE李刚著.rar</a></li>
- <li><a href="#">轻量级Java_EE李刚著.rar</a></li>
- <li><a href="#">轻量级Java_EE李刚著.rar</a></li>
- <li><a href="#">轻量级Java_EE李刚著.rar</a></li>
- <li><a href="#">轻量级Java_EE李刚著.rar</a></li>
- </ul>
- <ul><strong>上传时间</strong>
- <li>2013-2-28 20:00:55</li>
- <li>2013-2-28 20:00:55</li>
- <li>2013-2-28 20:00:55</li>
- <li>2013-2-28 20:00:55</li>
- <li>2013-2-28 20:00:55</li>
- </ul>
- <ul><strong>上传用户</strong>
- <li><a href="#">adawdsa</a></li>
- <li><a href="#">adawdsa</a></li>
- <li><a href="#">adawdsa</a></li>
- <li><a href="#">adawdsa</a></li>
- <li><a href="#">adawdsa</a></li>
- </ul>
- </div>
- </div>
- <div id="rank">
- <h2>最新排名</h2>
- <div id="irank">
- <ul>
- <li>上传排名</li>
- <li>下载排名</li>
- </ul>
- </div>
- </div>
- <div id="footer">
- <strong>版权信息:重庆理工大学计算机学院软件工程</strong>
- </div>
- </body>
- </html>
[css] view
plaincopy- * {
- margin: 0;
- padding: 0;
- }
- a {
- text-decoration: none;
- }
- ul {
- list-style-type: none;
- }
- h2 {
- padding: 20px;
- font-size: 160%;
- font-weight: bolder;
- color: #eee;
- text-align: center;
- }
- body {
- width: 860px;
- margin: 0 auto;
- font-size: 12px;
- background: #ccc;
- font-family: Microsoft YaHei;
- }
- #header {
- height: 80px;
- margin: 0 auto;
- background: #4380DB;
- }
- #header h1 {
- background: url(../images/logo.jpg) no-repeat;
- width: 199px;
- height: 80px;
- font-size: 100%;
- float: left;
- text-indent: -9999px;
- }
- #header ul li {
- width: 60px;
- float: right;
- }
- #header ul li a {
- color: #fff;
- }
- #header ul li a:hover {
- font-weight: bold;
- }
- #nav {
- height: 35px;
- background: #eee;
- }
- #nav ul {
- background: #eee;
- }
- #nav ul li {
- float: left;
- width: 144px;
- height: 35px;
- }
- #nav ul li a {
- text-align: center;
- font-size: 150%;
- font-weight: bolder;
- line-height: 35px;
- width: 140px;
- height: 35px;
- display: inline-block;
- color: #4380DB;
- }
- #nav ul li.lastnav {
- width: 140px;
- }
- #nav ul li a:hover {
- background: #4380DB;
- color: #eee;
- }
- #adv, #login, #share, #rank, #footer {
- margin: 15px 0 0 0;
- -webkit-border-radius: 15px;
- -moz-border-radius: 15px;
- border-radius: 15px;
- background: #4380DB;
- }
- #adv {
- width: 550px;
- height: 400px;
- float: left;
- width: 550px;
- }
- #adv div {
- padding-top: 50px;
- background: #eee;
- height: 220px;
- }
- #login {
- width: 300px;
- height: 400px;
- float: right;
- }
- #login div {
- padding-top: 50px;
- background: #eee;
- height: 220px;
- }
- #login div form input.logintext {
- width: 246px;
- height: 16px;
- margin-left: 20px;
- padding: 11px 0 11px 18px;
- margin-bottom: 20px;
- line-height: 16px;
- font-size: 14px;
- font-weight: bold;
- border: 1px solid #b8b8b8;
- border:1px solid #aaa;
- box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
- border-radius:2px;
- }
- #login div form input.submit {
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- border-radius: 8px;
- margin-left: 20px;
- width: 110px;
- height: 50px;
- background: #4380DB;
- font-size: 130%;
- color: #fff;
- font-weight: bolder;
- }
- #login div form #autologin {
- background: #fff;
- width: 18px;
- height: 18px;
- margin: 20px 0 0 28px;
- }
- #login div form ul li #forgetpassword {
- margin-left: 140px;
- }
- #share {
- width: 550px;
- height: 420px;
- float: left;
- }
- #share div {
- background: #eee;
- height: 300px;
- }
- #share div ul{
- float:left;
- margin:10px 10px 0 50px;
- }
- #share div ul li{
- line-height:40px;;
- }
- #rank {
- width: 300px;
- height: 420px;
- float: right;
- margin-bottom: 10px;
- }
- #rank div {
- padding-top: 50px;
- background: #eee;
- height: 250px;
- }
- #footer {
- height: 60px;
- clear: both;
- }
- #footer strong{
- margin: 30px 300px;
- color: #eee;
- line-height: 60px;
- }
这两天在实验室忙。。
不过首页还是做了一点
主要是图片的切换和选项卡的切换
主要是Jquery的一个插件
[javascript] view
plaincopy- <script type="text/javascript" src="js/jquery.Xslider.js"></script>
- lt;script type="text/javascript" src="js/jquery-1.9.1.js"></script>
[javascript] view
plaincopy[javascript] view
plaincopy[javascript] view
plaincopy- <p> /*淡隐淡现*/</p><p> $("#imagetab").Xslider({
- affect:'fade',
- ctag: 'div'
- });</p>