12.8周總結

這是一個遲到的周總結。

本週主要解決了上次考覈中網頁佈局的相關問題。

在學習了css3中flex佈局，我選擇拋棄了浮動，flex佈局更爲簡單且能達到我想要的效果。

利用flex佈局和媒體查詢，已能完成大部分佈局要求。
在不同的設備上都能正常顯示網頁。

標題做一個網頁的準備工作

在做一個網頁時，首先在腦子中要有一個大致的佈局，然後選用佈局的方法，目前我主要選擇浮動或是flex。

然後用背景顏色代替內容，做出一個大致的網頁。後面再講內容加到div中即可。 可避免先寫內容而不佈局，寫到最後發現佈局錯亂或未達到預期效果，而需重做所有內容。不僅浪費大量時間精力，而且會使人產生挫敗感。

下面是我本次考覈中的網頁佈局。
網頁分三部分
頭部 內容 底部
頭部使用了flex佈局 然後使用justery-content:between 最後使用max-width使其居中，到達預期效果。這種頭部佈局是我在查看apple官網打開檢查模式時學習到的。

.header{
	background: #333333;
	height: 3em;
}
.header>ul>li{
	list-style:none;
}
.header>ul{
	display:flex;
	justify-content:space-between;
	max-width: 42em;
	margin: 0 auto;
	line-height:3em;
	z-index: 2;
}
.header>ul>li>a{
	text-decoration: none;
	color:#d1d9e0;
}
.header>ul>li>a:hover{
	color: white;
}

.header>ul>li>a>img{
	height: 1.5em;
	margin-top: 0.7em;
}

最後在利用媒體查詢，當頁面縮小或在移動端查看網頁時頭部樣式發生改變，

HTML：
<link rel="stylesheet"  media="(max-width:55em)" href="css/dome02.css"/>
<div id="hearderfather" class="headerfather">
				<div id="headerhd" class="headerhidden">
					<ul>
						<li><a href="#">首頁</a></li>
						<li><a href="#jianguoshouji">手機</a></li>
						<li><a href="#fushizhuanqu">服飾</a></li>
						<li><a href="#TNTzhuanqu">TNT顯示屏</a></li>
						<li><a href="#">關於我們</a></li>
						<li><a href="#">更多</a></li>
						
					</ul>
				</div>
			</div>
		</div>
————————————————————————————————————————————————
CSS：
.headerfather{
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}
.headerhidden{
	/*display: none;*/
	/*position: fixed;*/
	/*z-index: 999;*/
	position: relative;
	top: 0;
	right: 0;
	/*left: 0;*/
	height:100%;
	width:20%;
	background:rgba(22,24,35,0.9) ;
	color: white;
}
.headerhidden>ul>li{
	list-style: none;
	/*margin-top: 2em;*/
	margin: 2em auto;
	text-align: center;
}
.headerhidden>ul>li>a{
	text-decoration: none;
	color: white;
}

——————————————————————————————————————————————
JS：
var dome0=document.getElementById("headerhd");
var dome4=document.getElementById("hearderfather");
dome2.onclick=function(){
	dome4.style.display="block";
	dome0.style.display="block";
}
window.onclick=function(even){
	if(even.target==dome4){
		dome4.style.display="none";
	}
}

以給用戶更好的體驗。
並利用js完成菜單的打開和關閉。

內容寫在一個大的div中用margin:0 auto;居中，然後加上max-width使頁面在縮小時內容仍在中間部分。

底部一般用多個無序標籤來寫。
以上就是本次周總結。