7、博客设计与图像视频处理指南

博客设计与图像视频处理指南

1. 博客设计基础

在设计博客时，我们可以从页面布局、颜色字体、各个区域的样式等方面入手，逐步打造出具有特色的博客页面。

1.1 页面布局

从第12行开始输入以下代码（也可从 style_copy.txt 粘贴）：

/* The Page Layout */
div#wrapper {width: 850px; margin-left: auto; margin-right: auto;position: relative;}
div#container {float: left;width: 100%;}
div#content {margin: 0 430px 0 0;}
div.sidebar {float: left;overflow: hidden;width: 180px;}
div#primary {margin: 0 0 0 -400px;}
div#secondary {margin: 0 0 0 -200px;}
div#footer {clear: left;width: 100%}

此布局为固定宽度850px，适合屏幕分辨率至少为1024x768的设备。保存 style.css 并在浏览器中预览博客，可看到三列布局，右侧有两个侧边栏。

1.2 颜色和字体

基于博客主题，选择了土褐色和红色调的配色方案，并使用Arial字体。在页面布局代码后添加以下CSS规则：