Web前端課程設計——我的主頁

時間 2019-11-24

標籤 web 前端課程設計我的主頁欄目 HTML 简体版

原文原文鏈接

　　大三上學期期末總結，嗯，沒錯，是上學期，寫在新學期開始hhh。javascript

　　上學期學了一門HTML5+CSS3的課程，也叫Web前端技術，期末的課程設計是寫一個我的主頁，可以在瀏覽器中打開的靜態網頁。經過一學期的學習，雖然系統學習過一遍，可是綜合起來實踐仍是有些難度的。不過很開心的是在個人不懈努力之下仍是基本完成了。下面是設計要求和課程設計獲取方式。css

《Web前端技術實驗》期末做品html

——我的網站設計要求前端

主題：我是大學生java

欄目：jquery

自我介紹算法

個人大學編程

專業及課程瀏覽器

校園活動app

室友

社團經歷

得到獎項、證書

課外閱讀

推薦的文章

要求：

內容積極向上，頁面美觀、佈局合理，可參照教材第10章，加入部分圖片、視頻、動畫等美化頁面。

提交時間：第16週週五以前。

提交內容：以「學號姓名」命名網站文件夾，總體網站文件夾一塊兒提交。

　　首先編寫基本的網頁框架，導航，頭部，中間，尾部。而後根據選擇器的命名不一樣，按照語法編寫樣式，調整大小和格局。最後使用jQuery插入動畫播放照片，增長亮點。

　　百度網盤連接：https://pan.baidu.com/s/1MRKFAbg2TZ_1xbIsMNNsew

　　寫在最後，這也是我學期末主要完成的做品，基本是邊查邊學邊寫的（做品劣質，大佬輕噴），這種一鼓作氣，暢快淋漓的感受真的很爽。

　　網頁效果圖：

　　HTML代碼：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>我的網站-首頁</title>
  6 <link rel="stylesheet" href="css/comm_style.css" type="text/css">
  7 
  8 <script src="slide/js/jquery-1.7.2.min.js" type="text/javascript"></script>
  9 <script src="slide/js/imgslide05.js" type="text/javascript"></script>
 10 <link rel="stylesheet" href="slide/css/picslide05.css" type="text/css" />
 11 
 12 <style type="text/css">
 13 #left{width: 180px;height: 362px;border: 1px solid #d9d7cb;margin: 10px; float: left;clear: left;}
 14 h4{letter-spacing: 1em;font-size: 15px;background: #e6e4db;height: 24px;border-bottom: 1px solid #d9d7cb;padding-top: 5px;
 15     margin-top:2px; padding-left: 10px;}
 16 #left h4{width: 170px;}
 17 #left ul{margin: 16px;line-height: 3em;}
 18 #left li{width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
 19 
 20 #right_up{width: 564px;height: 175px;border: 1px solid #d9d7cb;margin-top: 10px;float: left;}
 21 #right_up h4{width: 554px;}
 22 #right_up p{width: 500px;height: 90px;background: #f4f4f0;border: 1px none #999;text-indent: 2em;line-height: 1.5em; overflow: hidden;}
 23 
 24 #right_down{width: 564px;height: 175px;border: 1px solid #d9d7cb;margin-top: 10px;float: left;}
 25 #right_down h4{width: 554px;}
 26 #right_down p{width: 500px;height: 90px;background: #f4f4f0;border: 1px none #999;text-indent: 2em;line-height: 1.5em;overflow: hidden;} 
 27 #photo {width: 756px;height: 176px;border: 1px solid #d9d7cb;margin-left: 10px;float: left;}
 28 #photo h4{width: 746px;}
 29 /*#photo_img{width: 700px;margin-left: 60px;margin-top: 10px;text-align: center;}
 30 #photo img{display: block;width: 100px;height: 100px;float: left;margin-right: 30px;border: 1px solid #d9d7cb;}
 31 #photo h5{width: 100px;margin-right: 30px;margin-top: 5px;font-size: 12px;float: left;}*/
 32 
 33 </style>
 34 </head>
 35 <body>
 36 <div id="top">
 37     <div id="top_txt"><a href="#" target="_self">&nbsp;收藏本頁&nbsp;</a>|<a href="#" target="_self">&nbsp;聯繫站長</a></div>
 38 </div>
 39 <div id="vi">
 40     <div id="tt">沒有白走的路<br>每一步都算數<br></div>
 41 </div> 
 42 <div id="nav">
 43     <ul>
 44         <li><a href="#" target="_self">&nbsp;&nbsp;首頁</a></li>
 45         <li class="bar">|</li>
 46         <li><a href="#" target="_self">自我介紹</a></li>
 47         <li class="bar">|</li>
 48         <li><a href="#" target="_self">個人大學</a></li>
 49         <li class="bar">|</li>
 50         <li><a href="#" target="_self">社團經歷</a></li>
 51         <li class="bar">|</li>
 52         <li><a href="#" target="_self">最新照片</a></li>
 53         <li class="bar">|</li>
 54     </ul>
 55 </div>
 56 <div id="main">
 57     <div id="left">
 58         <h4>|社團經歷</h4>
 59         <ul>
 60             <li>◆參加各院校舉辦的新生編程賽</li>
 61             <li>◆參加第九屆河南省藍橋杯大賽</li>
 62             <li>◆參加第十屆河南省藍橋杯大賽</li>
 63             <li>◆組織升達ACM宣講會和新生培訓</li>
 64             <li>◆參加第十屆河南省ACM大學生程序設計競賽</li>
 65             <li>◆參加第十一屆河南省ACM大學生程序設計競賽</li>
 66             <li>◆參加2018ACM亞洲區域賽青島站</li>
 67             <li>◆參加2018ACM亞洲區域賽焦做站</li>
 68         </ul>
 69     </div>
 70 
 71     <div id="right_up">
 72         <h4>|自我介紹</h4>
 73         <p>&nbsp;&nbsp;我叫溫飛飛，來自牡丹花城洛陽，如今是鄭州升達經貿管理學院的一名在校大三學生，專業是物聯網工程。爲人真誠，性格沉穩，踏實肯幹。喜歡互聯網行業，在校期間熱衷算法編程競賽，若是志同道合，不妨交個朋友吧（hhhh）</p>
 74     </div>
 75     <div id="right_down">
 76         <h4>|個人大學</h4>
 77         <p>&nbsp;&nbsp;鄭州升達經貿管理學院（Zhengzhou Shengda University Of Economics,Business &amp Management，ZSDU）簡稱「升達學院」，位於河南省新鄭市，是豫籍臺灣著名教育家王廣亞博士捐資創辦的一所全日制民辦普通本科院校。
 78 學校建於1993年，前身爲鄭州大學升達經貿管理學院，2011年4月更爲現名。</p>
 79     </div>
 80 
 81     <div id="photo">
 82         <h4>|最新照片</h4>
 83         <div id="picslide" class="picslide05">
 84             <div class="slides">
 85                 <ul class="frame"> <li></li><li></li><li></li> </ul>
 86             </div>
 87             <ul class="content" style="display:none;">
 88                   <li><a href="#" target="_self"><img src="slide/img/tu1.png" alt="Happy Bokeh Thursday!" /></a></li>    
 89                   <li><a href="#" target="_self"><img src="slide/img/tu2.png" alt="Save my love for loneliness" /></a></li>    
 90                   <li><a href="#" target="_self"><img src="slide/img/tu3.png" alt="Happy Bokeh raining Day" /></a></li>  
 91                   <li><a href="#" target="_self"><img src="slide/img/tu4.png" alt="We Eat Light" /></a></li>  
 92                   <li><a href="#" target="_self"><img src="slide/img/tu5.png" alt="&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;" /></a></li>  
 93              </ul>
 94              <div class="next"></div>
 95                     <div class="pre"></div>
 96                     <ul class="pointer">
 97                         <li class="on"></li>
 98                         <li></li><li></li><li></li><li></li>
 99                     </ul>
100              </div>
101 
102              <script type="text/javascript">
103                     $(function () {
104                         $("#picslide").picslide05();
105                     });
106              </script>
107     </div>
108 </div>
109 <div id="bt">&copy;&nbsp;本網站版權爲溫飛飛全部</div>
110 </body>
111 </html>

View Code

　　CSS代碼：

 1 /*公共部分樣式*/
 2 *{margin: 0px;padding: 0px;}
 3 ul{list-style: none;}
 4 body{background: #d9d7cb url(../img/body_bg.PNG) repeat-y center;font-size: 12px;}
 5 #top,#vi,#nav,#main,#bt{width: 779px;margin: 0px auto;}
 6 #top,#bt{background: #000;}
 7 
 8 #top{height: 18px;padding-top: 5px;text-align: right;color: #fff;}
 9 #top_txt{margin-right: 5px;}
10 #top_txt a{color: #fff;text-decoration: none;}
11 #top_txt a:visited{color: #fff;}
12 #top_txt a:hover{color: #ddd;}
13 #vi{height: 110px;
14     background-color: 98a363;
15     background-image: url(../img/top_bg.PNG);
16     opacity: 0.7;
17     background-repeat: no-repeat;
18     background-size: 779px 130px;
19 }
20 #tt{margin-left: 120px;text-indent:-40px;line-height: 1.8em;font-size: 14px;font-weight: bold; }
21 
22 #nav{height: 35px;background: e6e4db;}
23 #nav ul{margin-left: 30px;}
24 #nav ul li{float: left;}
25 #nav ul a{display: block;width: 120px;height: 25px;padding-top: 10px;text-decoration: none;letter-spacing: 8px;text-align: center;
26     color: #000;font-size: 15px;font-weight: bold; }
27 #nav ul a:visited{color: #000;}
28 #nav ul a:hover{color: 98a363;background: #fff;}
29 #nav ul li.bar{width: 6px;padding-top: 12px;}
30 #main{height: 600px;background: #fff;}
31 
32 /*主題內容*/
33 #bt{margin-top: 0px; height: 30px;padding-top: 34px;text-align: center;color: #fff;}