本文共 2401 字,大约阅读时间需要 8 分钟。
效果图如下所示。
分析过程: 总共分为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; --清除浮动带来的影响 }所犯下的错误
打卡,今日学习,还算掌握。
转载地址:http://oceff.baihongyu.com/