效果图如下所示。
分析过程:
总共分为heder、nav、aside、content、footer5个区域。
-
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; --清除浮动带来的影响
}
所犯下的错误
- 没有给图像定位
- 不会如何给img定位
- 在设置超链接a部分时曾经做法是以li设置的形式,导致字体的颜色和下划线无法实现想要的效果
- 浮动的概念不是很熟悉,导致content区域的文本无法居中、footer的背景颜色无法体现
打卡,今日学习,还算掌握。