左右布局，背景图左侧定宽，自适应

如上图所示，左侧的阴影和sidebar右侧的2px的背景，代码

<div class="wrapper">
<div class="wrap-inner">
<div class="sidebar">
<ul class="nav">
<li class="active"><a href="#">个人体检报告</a></li>
<li><a href="#">个人体检指标追踪</a></li>
<li class="last"><a href="#">个人阳性指标追踪</a></li>
</ul>
</div>

<div class="content"></div>
</div>
</div>
style.css

为了使阴影兼容浏览器，把阴影切成背景图

body{
background: #ccc;
}

.wrapper {
width: 80%;
min-width: 1280px;
max-width: 1400px;
margin: 0 auto;
padding-left: 10px;
background: url("../images/bg_body_l.png") repeat-y left top #eee;
}

.wrap-inner {
width: 100%;
padding-right: 10px;
  min-height: 1000px;
background-image: url("../images/bg_body_r.png");
background-repeat: repeat-y;
background-position: right top;

/*注意：对于其父元素而言，父元素是最底层，子元素的颜色会把父元素的背景图给覆盖了 故不能给子元素设置背景色 即 background-color，html父子元素之间的关系类似于栈，后出现的会把先出现的样式给覆盖*/
}

左侧的背景是固定宽度的，在pc不同分辨率下，显示是不同的，为了达到上图的效果，方法有如下三种

方法一：使用定位

设置父元素的position:relative

.wrap-inner{

position: relative;

}

.sidebar {
position: absolute;
top: 0;
left: 0;
width: 222px;

}

.content{
padding-left: 222px;

}

方法二：左侧浮动，右侧overflow

.sidebar {
width: 222px;
float: left;

}

.content{

overflow: hidden;

}

方法三：左侧浮动，右侧padding-left,此方法有弊端，如果右侧内容里有清除浮动，右侧内容高度会有变化

.sidebar {
float: left;
width: 222px;

}

.content{
padding-left: 222px;

}

弊端出现的效果如下图

适用范围不同可以选择上面不同的方法

方法四：云盘里layout40.zip文件夹内容