[Demo]html,css的一个复杂页面实现

预览地址：https://jh-leong.github.io/Dmeo/ife_2/index.html

说明：

• 最左侧一列要求自适应浏览器高度，左上面4个按钮相对浏览器左上角固定位置，左下方两个按钮相对浏览器左下角固定位置
• 左侧第二列(蓝色背景色)导航列固定宽度，高度也是自适应浏览器高度，最下面的Monthly Goals部分的内容相对浏览器下边固定位置

1. 对于最左侧深色快的侧边栏‘aside’，方便起见，我采取了flex布局，相对于浏览器的固定定位。需要固定的一些图标自然是绝对定位了。

<aside>
	<div id="nav">
		<a href="#"><img src="img/button1.png"></a>
		<a href="#"><img src="img/button2.png"></a>
		<a href="#"><img src="img/button3.png"></a>
		<a href="#"><img src="img/button4.png"></a>
		<div>
			<a href="#"><img src="img/grid.png"></a>
			<a href="#"><img src="img/Settings.png"></a>
		</div>
	</div>
	<div id="subnav">
		<div class="content">
			<dl>
				<dt>
					MENU<a href="#" class="setting"><img src="img/Settings.png"></a>
				</dt>
				<dd><a href="#">Overview</a></dd>
				<dd><a href="#">Sales<span class="tip">54</span></a></dd>
				<dd><a href="#">Your Staff</a></dd>
				<dd><a href="#">Analytics & Targeting</a></dd>
				<dd class="last_dd"><a href="#">What's New</a></dd>
			</dl>
			<dl>
				<dt>
					YOUR PRODUCTS<a href="#" class="setting"><img src="img/Settings.png"></a>
				</dt>
				<dd>
					<span class="icon" id="book"></span><a href="#">Books</a>
				</dd>
				<dd>
					<span class="icon" id="video"></span><a href="#">Tutorials</a>
				</dd>
				<dd>
					<span class="icon" id="painting"></span><a href="#">Stocks</a>
				</dd>
				<dd class="last_dd">
					<span class="icon" id="chart"></span><a href="#">Infographics</a>
				</dd>
			</dl>
			<dl>
				<dt>
					DASHBOARD <a href="#" class="setting"><img src="img/Settings.png"></a>
				</dt>
				<dd><a href="#">Messages</a><span class="tip">21</span></dd>
				<dd><a href="#">Connections</a></dd>
				<dd><a href="#">Integrations</a><span class="warning">!</span></dd>
				<dd><a href="#">Account Settings</a></dd>
				<dd class="last_dd"><a href="#">App Settings</a></dd>
			</dl>
		</div>
		<div id="goals">
			<span>Monthly Goals</span>
			<span>$580/$3200</span>
		</div>
		<div id="progress">
			<div id="rate"></div>
		</div>
	</div>
</aside>

• 整个白色区域自适应宽度，右上方的人脸，名字部分相对浏览器右上角固定位置 白色区域左侧列固定宽度，右侧列自适应宽度

1. 白色区域的最上方Message栏采用了flex布局，这是最方便的。定位使用了sticky定位，保证了就算页面滚动，也可以让其一直固定在浏览器的顶部。

header{
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e6e9ec;
    z-index: 99;
    background-color: white;
}

上面日期分割线我是使用了一个带着背景颜色高度为1px的div，作为了分割线；一个内容是日期的span，白色的背景颜色，相对定位形成的。代码如下：

<div id="week"><span class="time">Tuesday</span></div>

#week{
	position: relative;
	width: 100%;
	text-align: center;
	height: 1px;
	background-color: #d9dde3;
	margin-top: 20px;
}

#week span{
	background-color: #fff;
	position: absolute;
	top: -10px;
	left: 47%;
}

感觉还是有点麻烦的，是不是还有更好的方法呢…

完整代码和素材可以在这里查看：
https://github.com/jh-leong/Dmeo/tree/master/ife_2

整个页面实现上，感觉布局和代码都不够简洁简单，如果大家有更好的方法请多多指教呀：）