这是一个迟到的周总结。
本周主要解决了上次考核中网页布局的相关问题。
在学习了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使页面在缩小时内容仍在中间部分。
底部一般用多个无序标签来写。
以上就是本次周总结。