作业1-HTML中使用css+div设计简单网页.ppt

然后需要让content层的四周都空出25px的间隙： 方案一：可以在#content的css文件中加入padding: 25px； IE出现问题 方案二：需要填充的层中加入padding层，它的功能仅限于显示间隙： div id=sidebar-adiv class=paddingLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst./div/div 同样的，再往html文件的content层中加入padding层。然后在css中添加: #sidebar-a {float: right;width: 280px;}#sidebar-a .padding {padding: 25px;}#content {margin-right: 280px;}#content .padding {padding: 25px;}  接下来设置行距，content和sidebar-a的行距需要加宽，但在css中是没有行距(leading)这种属性(attribute)的，但是有行高(line-height)属性，因此往css中写入： #sidebar-a {float: right;width: 280px;line-height: 18px;} #content {margin-right: 280px;line-height: 18px;} h2img src=images/headings/about.gif width=54 height=14 alt=About h2img src=images/he//h2adings/contact.gif width=98 height=14 alt=Contact Us //h2 第七步：网站头部图标与logo部分的设计 为实现设计时的网页头部效果，我们需要以下两幅图：/images/headers/about.jpg /images/general/logo_enlighten.gif 首先给#header层添加背景图案 #header {height: 150px;background: #db6d16url(../images/headers/about.jpg);} 接着替换掉h1/h1标签里的Enlighten Designs div id=headerh1img src=images/general/logo_enlighten.gif width=236 height=36 alt=Enlighten Designs border=0 //h1/div logo_enlighten图片浮在头部的左上方，我们需要设置h1的属性值为 h1 {margin: 0;padding: 0;float: right;margin-top: 57px;padding-right: 31px;} 这样我们使存在于h1层的图片向右浮动，并且上边距(margin-top)为57px，右间隙(padding-right)为31px，如下图所示 第八步：页脚信息(版权等)的表现设置 首先需要控制页脚的文本显示： #footer {clear: both;height: 66px;font-family: Tahoma, Arial, Helvetica, Sans-serif;font-size: 10px;color: #c9c9c9;} 接着设置存在链接的文本的显示，例如 让 下