本文共 2401 字，大约阅读时间需要 8 分钟。

效果图如下所示。

• body区：把所有的margin和padding设为0。

• div：设置整个大的盒子宽度为图片的宽度，高度可随机设置。

• header区域：图片可以以背景图片设置，用定位布局设置在底部；设置整个header部分的背景颜色，由于图片遮掩不住上面部分，露出颜色背景，就能做出图示效果。

• nav区域：由5个超链接构成，每个超链接要设置渐变背景，当鼠标划过时更改渐变背景方向；设置float：left使得块级元素li变成行内元素。

• aside区域：宽度取和nav超链接同宽，设置背景颜色。

• content区域：位于aside区域右侧。

• footer区域：设置背景颜色，计算好宽高，设置clear：both来消除浮动的影响。

  代码环节：

  ·养成良好的习惯，先把body区写完，再一点点修改样式。

• body区：

  

• 总体body设置：

  body {
  margin: 0; --清除外边距
  padding: 0; --清除内边距
  }

• div区：

  div {
  width: 950px; --设置盒子的宽度
  height: 750px; --设置盒子的高度
  margin: 0 auto; --使得盒子居中、置顶（需要设置宽高才能使用auto属性）
  }

• header区：

  header{
  width: 950px; --设置header的宽度
  height: 150px; --设置header的高度
  padding-top: 30px; --设置上内边距为30px
  background: #0F6; --设置背景的颜色
  background-image: url(images/banner.gif); --设置背景图像
  background-repeat: no-repeat; --设置背景图像不平铺（只显示一个）
  background-position: left bottom; --给背景图像定位（图像定位以图片的左上角为基准）
  position: relative; --以header为父类设置相对定位
  }

• 设置img相关属性：

  img {
  position: absolute; --以img为子类设置绝对变量
  left: 450px; --设置左边距
  bottom: 1px; --设置下边距
  z-index: 1; --设置叠层等级属性，让小猫图片能压在背景图上
  }

• 设置ul相关属性：

  ul {
  list-style: none; --把无序列表前面的标点去掉
  margin: 0; --把无序列表本身自带的外边距设为0
  padding; --把无序列表本身自带的内边距设为0
  }

• 设置超链接a的相关属性：

  a {
  width: 188px; --给超链接a设置盒子宽度
  height: 35px; --给超链接a设置盒子高度
  border: 1px solid #FFF; --设置盒子边框属性
  background-image: linear-gradient(0deg, #0C0, #3F6); --设置渐变效果
  text-align: center; --文字居中
  color: #FFF; --设置字体颜色为白色
  text-decoration: none; --去除下划线，看起来更美观
  float: left; --定义元素浮动
  font: 16px/35px “微软雅黑”; --设置字体大小/行高，字体样式
  letter-spacing: 5px; --定义字间距
  }

• 给超链接a设置链接伪类：

  ul li a:hover {
  background-image: linear-gradient(180deg, #0C0, #3F6); --链接伪类来实现鼠标悬停时渐变属性相反
  }

• aside区：

  aside {
  float: left; --定义浮动属性，元素向左浮动
  width: 188px; --设置aside区域的宽度
  height: 485px; --设置aside区域的高度
  background-color: #0F0; --设置aside区域的背景颜色
  text-align: center; --文本居中
  font: 20px/485px “楷体”; --设置字体大小/行高，字体样式
  color: #CCC; --定义字体颜色
  }

• content区：

  content {
  width: 762px; --设置content区域的宽度
  height: 485px; --设置content区域的宽度
  float:left; --定义浮动属性，元素向左浮动
  text-align: center; --文本居中
  font: 20px/485px “楷体”; --设置字体大小/行高，字体样式
  color: #666; --定义字体颜色
  }

• footer区：

  footer {
  width: 950px; --设置footer区域的宽度
  height: 50px; --设置footer区域的高度
  text-align: center; --文本居中
  font: 20px/50px “仿宋”; --设置字体大小/行高，字体样式
  color: #333; --定义字体颜色
  background-color: #0F3; --定义背景颜色
  clear:both; --清除浮动带来的影响
  }

所犯下的错误

1. 没有给图像定位
2. 不会如何给img定位
3. 在设置超链接a部分时曾经做法是以li设置的形式，导致字体的颜色和下划线无法实现想要的效果
4. 浮动的概念不是很熟悉，导致content区域的文本无法居中、footer的背景颜色无法体现

打卡，今日学习，还算掌握。

转载地址：https://blog.csdn.net/zx2014567296/article/details/106316335 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！