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使页面在缩小时内容仍在中间部分。

底部一般用多个无序标签来写。
以上就是本次周总结。