如何設計我的網頁

時間 2019-11-30

標籤如何設計我的網頁欄目 HTML 简体版

原文原文鏈接

　　金三銀四，筆者最近都在忙着找實習，奈何技術是硬傷，目前顆粒無收。痛定思痛，反思事後，筆者以爲有必要弄一個我的網頁版的簡歷，這樣一來去面試的時候不至於做品過少，又可使得我的簡歷生動一點。javascript

　　搗鼓了兩天，我的網頁的雛形基本搞定，如下是網頁截圖，由於涉及到我的信息，部分地方馬賽克了哈哈但願讀者們理解。css

主頁：導航欄由主頁、前端狀況、大學學習狀況、大學生活狀況、還有社交聯繫方式以及我的頭像右浮動組成，內容則由居中的我的姓名、簡要的我的概況組成，點擊底部的箭頭可到達前端狀況頁面，也可選擇點擊導航欄或者滾動鼠標到達任意想要了解的我的信息部分html

接下來就是前端、學習、生活三個小節的頁面，每個小節我都給定一個小高度使得三個環節能夠盡收眼底，每個小環節的結構大同小異，基本上是由一張表明圖片還有比較重要要在第一眼展現的信息組成，固然若是相關信息較多的話，這可能還不夠徹底展現我的信息，因此我在每一小節底部增長一個名爲「詳情」的連接，這使得想要了解相關部分更多信息的訪客能夠點擊瞭解更多。前端

點擊「詳情」瞭解更多的效果以下，在這裏我使用一個本身編寫的腳本，使得點擊相應連接的時候彈出一個小浮窗，背景均變爲透明以及不可點擊，查閱完相關信息後點擊關閉按鈕才能夠回到本來的頁面，這麼設計就是爲了減小頁面跳轉加載，減小用戶等待頁面跳轉刷新的時間：java

最後的社交聯繫方式還有頁面底部效果如圖：jquery

大體的頁面就是這樣啦啦啦。面試

碰見的問題以及須要改進的問題：框架

1.由於中間三部分大同小異，可是具體內容仍是有區別，我在設計樣式還有js動畫的時候畫了好多時間，涉及到的類別區分實在太擾人，雖然暫時大體把效果實現了，我仍是得花時間再去把代碼優化一下，要不整體代碼風格會重複累贅，加油騷年；ide

2.筆者決定在實現代碼優化以後，想將中間三部分點擊浮現小彈窗的效果改成鼠標放在相應環節上的時候該區域變透明表面浮現一層具體信息，鼠標移開後又變回原來的內容，但願能早點實現吧學習

代碼就不徹底貼出來了，貼個框架和js動畫腳本吧：

<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
	<head>
		<title>
		</title>
		<link rel="shortcut icon" href="./img/zxp.ico" />
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/style.css">
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"</script>
		<script type="text/javascript">	
		</script>
	</head>
	<body>
		<div class="part1">
			<div class="nav">
				<ul>
				<li><img src="./img/head.png"></li>
				<div class="li">
				<li><a href="#footer">社交</a></li>
				<li><a href="#part5">生活</a></li>
				<li><a href="#part4">學習</a></li>
				<li><a href="#part3">前端</a></li>
				<li><a href="#">首頁</a></li>
				</div>
				</ul>
			</div>
			<div class="header">
			</div>
		</div>
		<span id="part3" name="part3"></span>
		<div class="part3">			
		</div>
		<span id="part4" name="part4"></span>
		<div class="part4">			
		</div>
		<span id="part5" name="part5"></span>
		<div class="part5">			
		</div>
		<div class="part2">
		<span id="part2" name="part2"></span>
		</div>
		<div class="footer">
			<span id="footer" name="footer">
			<h3>@copyright by chopin chuong</h3>
			</span>
		</div>
	</body>
</html>

js代碼以下：

<script type="text/javascript">
			$(document).ready(function($){
				$('.theme-login').click(function(){
					$('.theme-popover-mask').show();
					$('.theme-popover-mask').height($(document).height());
					$('.theme-popover').slideDown(200);
				})
				$('.theme-poptit .close').click(function(){
					$('.theme-popover-mask').hide();
					$('.theme-popover').slideUp(200);
				})
			});
			
		</script>

對頁面改進有想法的朋友歡迎提供想法哦~　　