网页设计与制作 课件 10 制作侧边栏（盒模型）.pptxVIP

;入门测

作业分析

;网页设计中要学会精准计算元素实际占据的页面空间，合理地布局页面各元素，也要注重页面空间感设计，在不同栏目及不同内容之间设置留白，或添加边框线，提升作品视觉层次、可读性和美观度。

本任务学习盒模型的相关知识，美化目录列表，制作侧边栏。;学习内容;;;;计算盒子实际占位尺寸;;;内边距(padding)外边距(margin);内边距(padding)外边距(margin);内边距(padding)外边距(margin);结构分析

“相关推荐”栏目内容可以分成两个部分：

一是标题栏，可以使用标题标签组织；

二是新闻目录，可以使用无序列表进行组织，注意每一个列表项里都是一个超链接。;样式分析

设置侧边栏宽度为360px，后面任务中涉及侧边栏的都按此宽度设置。

栏目标题的高度设置为80px，上边框为3px的实线，框线颜色值为#95c62e，背景颜色为#f4f9ea。

列表内容与边线之间可设置20px的空隙。

列表项目符号使用背景图片，新闻标题不换行，超过部分用省略号表示。

设置超链接的hover状态效果。;出门测

小结

理解CSS盒模型

盒子总宽度=width+左右padding+左右border+左右margin

边框(border）

borer:solid2pxred;

设置盒子水平居中，需同时满足两个条件

wid