第一个web项目（静态，两页面）
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>My Website Of Swimming</title> 9 10 <!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> --> 11 <link type="text/css" rel="stylesheet" href="css/style.css"> 12 13 <link rel="icon" href="images/1.ico" type="image/x-icon" /> 14 </head> 15 16 <body> 17 <div class="banner"> 18 <div class="topBar"> 19 <div class="logo fl"><img src="images/logo.png" alt="logo" width="100%" height="100%"></div> 20 <div class="Others"> 21 <a href="#">消息通知</a> 22 <a href="#">文件下载</a> 23 <a href="#">捐赠我们</a> 24 <a href="#">用户中心</a> 25 </div> 26 <div class="regLogin fr login"> 27 <a href="login.html">登录</a> 28 </div> 29 <div class="regLogin fr reg"> 30 <a href="#">注册</a> 31 </div> 32 </div> 33 <div class="navBar"> 34 <ul> 35 <li class="fl"><a target="_blank" href="http://www.chinaswim.com/"> 36 <p>悠游网</p> 37 </a></li> 38 <li class="fl"><a target="_blank" href="http://www.goswimming.cn/"> 39 <p>中国游泳网</p> 40 </a></li> 41 <li class="fl"><a target="_blank" href="http://www.chinaws.org.cn/"> 42 <p>中国冬泳网</p> 43 </a></li> 44 <li class="fl"><a target="_blank" href="http://www.imooc.com/"> 45 <p>慕课网</p> 46 </a></li> 47 <li class="fl"><a target="_blank" href="http://www.cdu.edu.cn/"> 48 <p>成都大学</p> 49 </a></li> 50 </ul> 51 </div> 52 53 <div class="search"> 54 <form name="input" action=" " method="get"> 55 <input type="text" name="search" class="search_box"> 56 <input type="submit" value="搜索" class="search_btn"> 57 </form> 58 </div> 59 </div> 60 <!-- Details --> 61 <div class="details"> 62 <div class="detailsLeft"> 63 <div class="news"> 64 <h4 class="ac">今日新闻</h4> 65 <h6>2分6误!全明星变进攻黑洞 勇士最该觉醒的男人</h6> 66 <p>北京时间10月17日消息，金州勇士顺利拿到赛季开门红，他们在主场以108比100战胜俄克拉荷马城雷霆。作为球队核心之一，德拉蒙德-格林在防守上继续发挥作用，可他的进攻表现有些惨不忍睹。 67 勇士另外三巨头库里、杜兰特和汤普森本场的进攻表现都很不错，他们给球队带来很稳定的贡献。与他们相比，格林的进攻状态就要差不少，全场6投仅有1中，只得到2分，所幸他还贡献了13个篮板、5次助攻和3次抢断，不过也有6次失误。 68 坦白说，格林进攻表现不佳，这不算是什么新鲜事，他本就不是一个以进攻而闻名的球员。而且对于一支拥有杜兰特、库里和汤普森的球队来说，他们不太需要担心进攻，因此就不会太在意格林的投篮手感问题。当然，这支雷霆没有威少，他们还无法给勇士带来更多挑战，如果是遇到联盟的一些争冠热门，如火箭、凯尔特人，这时勇士就需要格林在进攻中能有更好的效率。 69 格林状态一般可能与季前赛期间受到膝伤困扰有关，此前就缺席了勇士的几场季前赛，只是在最后一场季前赛打湖人时才复出。赛前勇士主帅科尔也表示会在赛季初段减少格林的出场时间，以便让他的身体更快地恢复状态。 70 作为勇士攻守体系中很重要的一环，格林会懂得如何进行调整，他会随着赛季的进行慢慢找到状态。事实上，在本赛季勇士又有考辛斯加盟之后，格林在场上更需要注意的就是防守和篮板，他要在防守上倾注更多的精力，要帮助球队守护好内线，控制住篮板，本场他在篮板控制上就做得不错。至于进攻，格林要做的就是扮演进攻中的组织者，让勇士的进攻运转得更流畅，为队友们创造更好的进攻机会。 71 </p> 72 </div> 73 </div> 74 <div class="detailsCenter"> 75 <div class="video"> 76 <h4 class="ac">精彩视频</h4> 77 </div> 78 </div> 79 <div class="detailsRight"> 80 <div class="course"> 81 <h4 class="ac">游泳教程</h4> 82 </div> 83 </div> 84 </div> 85 <!-- Footer --> 86 <div class="footer"> 87 <p>Copyright © 2018.cdu.iot All rights reserved.</p> 88 </div> 89 </body> 90 91 </html>
这是主界面
还有一个登陆界面如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Website Of Swimming</title> <!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> --> <link type="text/css" rel="stylesheet" href="css/style.css"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> <body> <div class="login_banner"> <div class="login_topBar"> <div class="logo fl"><img src="images/logo.png" alt="logo" width="100%" height="100%"></div> <span class="logo_login">|</span> <span class="page_text">登 录</span> </div> </div> <div class="boundary" style="position: relative;top:40px;"></div> <!-- Details --> <div class="login_box"> <div class="loginInput_box"> <form name="login" action=" " method="get"> <label>账号:</label> <input type="input" name="username" value=" "> <br/><br> <label>密码:</label> <input type="password" name="password" value=" "> <br/> <div class="login_btn"> <input type="submit" name="login" value="登录"></input> </div> </form> </div> </div> </body> </html>
这是登陆界面的预览图（logo是直接扣的慕课网上的【捂脸】）
通过这次的web联系，是我对以前很多不清楚的地方理解的更清楚了，比如说position和float还有display三者之间如何去协调相互的位置关系，还新掌握了很多知识，总之，这是一次非常有意义的练习！
