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三者之間如何去協調相互的位置關系，還新掌握了很多知識，總之，這是一次非常有意義的練習！