程序猿小白成长之路[定位]

定位

1-1在 CSS 中使用 position 属性实现网页的定位技术,他有4个值:
static 是position属性的默认值,标签会显示在正常的文档流中
relative
absolute
fixed
1-2除了 static之外,使用另外3个值可以让一个标签变成定位元素
当一个标签被定位之后,你就可以使用CSS的top、 right、bottom、left四个属性精确控制标签在HTML文档中的位置,
利用这些定位属性你可以在HTML文档中任意摆放一个标签的位置。

2-1relative 相对定位
将position的值设为: relative;时:
标签显示在正常的文档流中
其他元素的位置不受影响
可以使用top、right、bottom和left这些定位属性,使这个标签相对于原来的位置偏移显示

3-1absolute 绝对定位
将position的值设为: absolute;时:
其他元素忽略绝对定位元素
标签不显示在正常的文档流中
使用top、right、bottom和left属性对元素定位

3-2当我们将一个标签设置为绝对定位的时候:
默认情况下绝对定位是以整个浏览器为基准进行绝对定位
除非他有一个父元素是定位元素,除了static以外

4-1固定定位 fixed
无论用户怎样拖拽浏览器上的滚动条这个区域都不会跟着移动

5-1定位元素的前后位置: z-index
如果我们没有为他们设置 z-index
或者为他们设置了相同的 z-index属性
那么在html文件中后出现的标签将会覆盖前面的标签
5-2z-index属性只能用在定位元素上面
记住,如果你不想移动一个元素的位置
只想让他变成定位元素
那么就使用position:relative;

任务:用相对定位和绝对定位的技术添加大背景图和小背景图和一些说明文字
文字背景有透明度
给登录条设置固定定位属性
拖动浏览器的滚动条,登录条会一直停留在在右上方,具有一个有透明度的背景
添加2张图片在主页背景中
步骤
1-1 把 main-content的内容用新的div替换掉
1-2主页的图片盒子div.home_imgbox
1-3添加子div.info
1-4再加一个姿姿div.info_wrap
1-5wrap:是包裹的意思,包裹一个图片或文字
1-6再子子div中创建h3标签,再h3标签中创建p标签,给p标签添加内容

2-1在CSS中为home_imgbox 的内容添加那张最大的背景图片,看图片宽100%和高、背景图片background: url 左右上下居中居中
没有平铺
2-1把文字绝对定位 定位在页面下方位置
home_imgbox最外层的盒子 position:relative;

home_imgbox.info 有一个绝对定位的特性 position:absolute;
显示在上面那个盒子的下方:那就添加bottom 0像素
再定义一个left 0像素 宽度是整个浏览器的宽度100% 高度200 背景颜色background-color rgba(0,0,0,0.75)a代表透明度,
稍微有点透明的意思

2-2添加一个小图片
home_imgbox.info_wrap
添加背景图片background url() 左侧0上下居中 不平铺no-repeat
宽670 高200 居中显示在底部:margin:0 auto;auto 居中显示的意思

让文字靠右一点
左侧补白 padding-left 至少270像素,如果想要文字与图片有点距离,可以设置为320像素

3-1把h3标题文字大小改一下
home_imgbox.info_wrap .h3:
颜色 #ffffff 字体大小font-size:32 标题粗体显示font-weight bold 高是44像素 border 是0像素

4-1定义p标签的颜色白色color#ffffff 字体大小font-size14 行间距light-weight 24 顶部补白padding-top6像素

5-1设置登录条为固定定位元素
把原来登录条的css删掉,添加position:fixed 属性
然后显示在页面右上角,right 30 top10像素 背景颜色:background-color 有透明都的背景颜色rgba(138, 32, 10, 0.74)
10像素的补白padding 10

登录区域显示在背景下面,如何让他浮在背景什么呢?
那就为他添加一个 z-index属性就可以了,z-index: 99;

原文地址:https://www.cnblogs.com/smillin2018-0803/p/9255333.html

时间: 2024-10-06 20:34:06

程序猿小白成长之路[定位]的相关文章

程序猿小白成长之路[盒模式&浮动布局]

深入盒模式及浮动布局 1文档流:浏览器在页面上摆放HTML元素所用的方法1-1块元素的文档流 1-2内联标签的文档流:如果有足够空间 他们会挨个摆放,如果空间不够,剩下的会摆到下一行 2浮动布局<div>float 浮动clear 清除 有left right both none值 3浮动不居中的盒模式计算 在列表页添加左侧浮动的图片1-1使用 img 同样也添加一个alt属性 <img src="images/egg.jpg" alt="西红柿炒鸡蛋&qu

程序猿小白成长之路[初级框架布局]

HTML框架布局 AJAX: 是JavaScript中的一个技术,需要先掌握JavaScript;AJAX是请求接口用的 frameset标签 frame 标签 框架页面的基本架构 水平布局 cols:表示子框架水平排列 垂直布局 rows:定义垂直布局的框架集 混合框架集 cols & rows 为框架添加内容 使用 style属性定义一个标签的内联样式 框架中的导航 框架的尺寸可以通过拖动边框来调整的,如何是边框固定? 1-1在源代码中为 frameset标签设置 一个属性noresize

菜鸟程序猿的成长之路(一)——菜鸟程序猿起步

看到标题之后,突然想起一句文的话:白驹过隙,时光荏苒.每当看到这么有文採的话,总认为有点酸,再酸我也用*^◎^*. 9月开学季,大家陆续返校,让我想起了三年前自己带着新鲜与憧憬步入大学,大学对我来说一切都那么的美好和新鲜,时刻盼望着大学的生活.那些美好的场景仿佛就在昨天,转眼间,今年都大四了,"大四"简简单单的两个字让我清醒了很多,另一年的时间,我该面临毕业,就业压力也随之而至.青春,总是经不起蹉跎,留在大学的最后一年,也许一晃就过,如今的我们,也唯有奋力拼搏. 进入提高班也满两年的时

Linux小白成长之路

Linux小白成长之路 本人忘祭,一个刚刚进入跨入Linux世界的小白.Linux对于我来说其实是很神秘的,很早以前就听说过.也曾见各种技术大牛使用过.但是一直以来也没有去接触的想法,因为感觉太高深.从四月开始报名马哥教育,到现在看预习视频已经一个月了.刚开始看到那些专业术语,感觉脑袋都要大了.对于一个已经三十岁的我来说,当初是硬逼着自己看下去的.看一遍不理解,就两遍三遍重复着看.随后在网上查看各种帖子.文章,想从中找到些学习的切入点,但是觉得不是那么容易着手.无法理解.但是现在听了王老师的面授

菜鸟程序员的成长之路(三)——2014,逝去的半年,奋斗的半年

从3月份到现在,仅仅半年的时间让我扮演了两个完全不同的角色,从在校生一下变成了毕业生,作为毕业生不能再像在校生一样自由自在,无所顾忌,想怎样就怎样,肆无忌惮的生活,浪费时间.如果你想从容的面临未来的生活,就需要彻头彻尾的改变.多一份稳重,多一份责任,多一份担当. 鉴于LZ不太擅长写非技术博文,那就以碎碎念的形式,来回顾一下我的奋斗历程: 技术 3月份开始备战软考,软考准备了两个多月的时间,从看视频做笔记,再到大家一起讲课,复习,做试题巩固,整个过程至今历历在目.软考虽然不难,但是对于基础差的同学

菜鸟程序员的成长之路(四)——欢送2014,欢迎2015

最近半个月一直想写年终总结,却迟迟没有提笔,不是不知道写什么而是需要写的东西太多,不知从哪下笔.继菜鸟程序员的成长之路(三)--2014,逝去的半年,奋斗的半年,请大家跟我一起再重新将2014"活"一遍. 2014年对于我来说承载了满满的回忆,也是我人生中比较重要的一年,因为在这一年里发生很多重要的事:1.我毕业了:2.我考过了软件设计师了:3.我考上了在职研究生... 学习篇 对于学习,其实有很多想写的内容,由于上篇博文:2014,逝去的半年,奋斗的半年,我已经写了2014上半年的总

高效程序猿的狂暴之路

不觉间已经工作六年,回忆第一天实习的场景历历在目.恍若昨日.六年已足以令很多人转管理.转产品.转測试.转行,也一定有人还在坚守着编码,仅仅因热爱.遇到过形形色色的经理.架构师.运维.性能工程师等等,还是认为写代码的才是最厉害的!在这里分享一些这些年来修习到的个人心得.或许并不适用于其它人,但对于我却都是最珍贵的"宝藏". 也谨以此文纪念在代码堆里度过的青春~ 看到这些点点滴滴的收获,就会感到全部逝去的光阴和挥洒的汗水都是值得的. 1.启动:得心应手的工具 1.1 全能IDE 关于IDE

程序员的成长之路

从一个编程初学者,到一个程序开发菜鸟,再到技术高手.技术大牛.大师级人物, 必有一个成长路线. 根据自己的学习开发经历,我觉得一个程序员的成长之路可以按照如下循序渐进: 技术技能: 1.  初学编程: 找一两本优秀的编程语言书籍,按照例子敲代码. 推荐 K&R <TCPL> 和 BE <Thinking in java> ,每一种主流开发语言都有一些非常优秀的入门书籍.如果国外书看得不大懂,可以先找国内编程书籍看看,一般国内书籍更注重技术和技巧,而国外书籍更注重思想和思路:

一个程序猿的梦想之路

梦想的第一步 2006年,因为怀揣着对计算机浓烈的兴趣,于是高考第一志愿志愿填写了计算机专业,很快第一批次录取结束,大学入学通知书寄来了,是的,很激动,很多年过去了,再回忆那时的心情,心里还是有点微波荡漾,这应该算是我实现梦想的第一步. 来到了乌鲁木齐市,开始了学习计算机专业的生涯.那个时候班里的女生不多,不过我们这一届的女生算是多了,我也是其中一名,大学时光说短暂也漫长,我们意气风发,期待着在这里学到更多,只为了毕业后能找到一份工作,但是并不是无忧无虑的,希望时间过得快一点,赶紧毕业,赶紧工作