ife task1.9

任务目的:

通过实现一个较为复杂的页面，加深对于HTML，CSS的实战能力。

实践代码的复用、优化

任务链接ife_task1_9

task1-9插图

  • 双栏布局

    采用了侧栏固定宽度左浮动的方式，整体偏离左侧固定宽度，这样正文宽度100%正好撑满容器。

1
2
3
4
5
6
<div class="container">
  <nav>这是侧栏</nav>
  <div class="maincontent">
     这里是主体
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container{
   margin-left: 260px;
}
nav{
	width: 260px;
	height: 1200px;
	background-color: #2a2e3d;
	display: inline-block;
	margin-left: -260px;
	float: left;
}
.maincontent{
	width: 100%;
	height: 1200px;
	background-color: #eeeeed;
	display: inline-block;
}

  • csssprite

    figure是html5图片的标签，固定占位后设置其背景图片，通过将小图切到一张大图中，然后设置背景图片的位置，完成图片的展示。

1
2
3
4
5
6
7
8
9
10
11
.backUrl(@url:"/images/csssprite_1_9.png"){
	background: url(@url) no-repeat;
}
figure:first-child{
	display: inline-block;
	margin:0;
	.backUrl();
	background-position: -87px -3px;
	width: 20px;
	height: 20px;
}
  • css实现列表的选中下拉状态
1
2
3
4
5
6
<li class="nav_first"><figure class="nav_post"></figure>
	<!-- <span>个人报表</span> -->
	<input type="checkbox" name="gerenbaobiao" id="fold1">
	<label for="fold1">个人报表</label>
	<ul id="foldlist1"></ul>
</li>
1
2
3
4
5
6
.task_nav_foldlist input[id^='fold']{
	display: none;
}
.task_nav_foldlist input[id^='fold']:checked ~ [id^='foldlist']{
	display: none;
}

总结

这次切图我基本精准到像素级，整个页面风格很像bootstrap。整体布局我首先注意到了双栏布局，但是没考虑滚动的时候侧栏和header是否应该固定这个体验，又因为中间多处使用position相对和绝对定位，所以后期修改比较麻烦，这点在以后页面总体布局的时候应该注意。

由于小图较多，所以我第一次尝试切雪碧图，是个不错的体验。

github链接
demo链接

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！