故事区：样式《网页设计案例：故事区》

添加一个 .content ，这个元素里包装的就是故事区里的文字内容 ... 给它一个 width ，值可以是 50.5% ..

再设置一下 image .. 让它里面的 img 的宽度，是 100% ... 再让它绝对定位 .. 把 position 设置成 absolute ... right ，top，bottom 这些值都设置成 0 ... margin 设置成 auto ...

然后在这个 content 里面用一个 z-index ，值可以是 1 ... 这样它就会在图片的上一层显示出来了 ..

给它一个 background ... 值是 #ededed ... 这个颜色的值我想有点透明效果.. 所以可以使用 rgba 的形式表示这个颜色 ..

编辑器里安装了 color picker 插件以后，shift + command + C ，会显示一个颜色选择器，选择 rgb .. 再把它的不透明度设置成 0.85 ..

内容的右边可以点一条边框 .. 大小是 8 像素 solid ，颜色是 #f8f8f8

再设置一下内容的内边距 ... 上边可能是 14% ... 右边是固定的 40px，下边儿是 14% ... 左边儿是 8% ...

然后是文字内容的样式 ..

子标题上面有个 .sub.header .. 把字号设置成 14 .. 3 个像素的字间距 .. 再把它改成大写的 .. 下边儿留出 8 个像素的外边距 ..

子标题的下面是大标题 .. 上面有个 .header

字号是 36 像素 .. margin 设置成 0 下边儿留出 40 个像素的外边距

接着是内容里的描述的样式 .. 添加一个 40 像素的下边儿的外边距 .. line-height ，行间距，设置成 1.8 ..

里面嵌套一个 p 标签 ... 行间距也把它设置城 1.8 ...

统计