今日份实操——(HTML+CSS)浮动布局练习
发布日期:2021-06-29 11:16:24
浏览次数:4
分类:技术文章
本文共 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; --清除浮动带来的影响 }
所犯下的错误
- 没有给图像定位
- 不会如何给img定位
- 在设置超链接a部分时曾经做法是以li设置的形式,导致字体的颜色和下划线无法实现想要的效果
- 浮动的概念不是很熟悉,导致content区域的文本无法居中、footer的背景颜色无法体现
打卡,今日学习,还算掌握。
转载地址:https://blog.csdn.net/zx2014567296/article/details/106316335 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
表示我来过!
[***.240.166.169]2024年04月05日 22时54分11秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
半导体芯片原厂涨价及调价声明新增了这些!
2019-04-29
为什么你学C++这么难?
2019-04-29
无人机破巡检难题,秒变电网卫士
2019-04-29
五年,我成为了一名嵌入式工程师。
2019-04-29
2020年电赛题目,命题专家们怎么看?
2019-04-29
PCB元器件摆放不可忽略的10个技巧
2019-04-29
掌握AI核心技术没有秘籍,能自己创造就是王道
2019-04-29
大学老师的月薪多少?实话实说:4万多一点……
2019-04-29
2020年电赛题目,命题专家权威解析!
2019-04-29
如何掌握“所有”的程序语言?没错,就是所有!
2019-04-29
39岁单身程序员入住养老院
2019-04-29
写论文,这个神器不能少!
2019-04-29
我在哥大读博的五年,万字总结
2019-04-29
本科、硕士、博士,究竟有何区别?
2019-04-29
如果我的实验室也这样布置,那多好。
2019-04-29
现在做硬件工程师还有前途吗?
2019-04-29
用 50 种编程语言写“Hello,World!”
2019-04-29
GD32替换STM32,这些细节一定要知道。
2019-04-29
华为员工离职心声:菊厂15年退休,感恩,让我实现了财务自由!
2019-04-29
春晚上的“拓荒牛”
2019-04-29