Day042---浮动 背景图设置 相对定位绝对定位
1.练习浮动
2.文本属性和字体属性
文本对齐
text-align
left 左对齐
right 右对齐
center 中心对齐
justify 两边对齐 只适应于英文
text-indent 首行缩进 建议单位使用em
text-decoration: underline 下划线
text-decoration:none; 无线
文本垂直居中
单行文本 行高== 盒子的高度
多行文本 padding-top = (height-行数* 行高)/2,并且减掉盒子的高度
3.background属性
背景颜色 background-color
颜色表示法: 单词 rgb 十六进制
背景图片 background-image:url('')
背景图片 background-image:url('')
background: url("banner.jpg") no-repeat center top; 调整大图显示区域 水平居中,顶部对齐页面
right top表示 图片右端,顶部对齐页面背景图定位 background-position: x方向 y方向
如果x和y方向 是正值,表示调整背景图的位置
如果是负值 表示"精灵图技术"(在一张大图有多张小图片)
banner图设置 大图来说
.wrap{
width: 100%;
height: 500px;
/*left center right*/
background: url("./banner.jpg") no-repeat center top;
}
4.定位
布局的一种方法
相对定位
绝对定位
固定定位
相对定位
position:relative;
如果对一个盒子仅仅设置相对定位,这个盒子没有任何变化
参考点
以原来的位置
相对定位有压盖现象,小心相对定位留的坑
相对定位的作用
微调元素
'子绝父相'
绝对定位
position:absolute
参考点
单独设置绝对定位,以top描述,是以页面的左上角(区分浏览器左上角)
以bottom描述,是以浏览器左下角
绝对定位的现象
脱标
压盖(层级提高 用绝对定位)
父相子绝的参考点
父辈元素设置相对定位,子盒子设置绝对定位,是以父辈盒子的左上角为参考点
Day042---浮动 背景图设置 相对定位绝对定位的更多相关文章
- 背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)
MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个fla ...
- vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法
当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,w ...
- css background 背景图设置
- [osg]osg背景图设置
转自:https://blog.csdn.net/qq_30754211/article/details/61190698 #include <osg/Geometry> #include ...
- 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- 【CSS】css网页背景图片设置
刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...
- IE6下 input 背景图滚动问题及标签规范
ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300p ...
- css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面
1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...
- css 浮动 相对定位 绝对定位区别
今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然 ...
随机推荐
- jsp内置对象-response对象
一.概念 隐含对象response是javax.servlet.HttpServletResponse接口实现类的对象.response对象封装了JSP产生的响应,用于响应客户端的请求,向客户端输出信 ...
- windows下vagrant的安装使用
vagrant是简便虚拟机操作的一个软件,而使用虚拟机有几个好处: 1.为了开发环境与生产环境一致(很多开发环境为windows而生产环境为linux),不至于出现在开发环境正常而移步到正式生产环境时 ...
- [20190417]隐含参数_SPIN_COUNT.txt
[20190417]隐含参数_SPIN_COUNT.txt--//在探究latch spin计数之前,先简单探究_SPIN_COUNT.实际上oracle现在版本latch spin的数量不再是200 ...
- REST教程
REST教程 越来越多的人开始意识到,网站即软件,而且是一种新型的软件.这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high late ...
- sqlsever存储过程配合代理作业自动定时建表
1.自动建表存储过程 USE [ThreeToOne] GO /****** Object: StoredProcedure [dbo].[WTO_CreateTable_ScanDoXXX] ...
- AngularJS学习之旅—AngularJS 表单(十六)
一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...
- zabbix监控交换机状态
1.在Zabbix中添加主机 输入名称.群组和交换机IP(交换机要开启snmp) 2.创建监控项 输入OID和其它信息(键值随便填,但是不能和系统内的键值重复)OID获取方法可查看上一篇文章:http ...
- cent os 7 与cent os 6 修改主机名称
centos6 需要修改两处:一处是/etc/sysconfig/network,另一处是/etc/hosts,只修改任一处会导致系统启动异常.零时修改用hostname your-name cnet ...
- Python-语法模板大全(常用)
目录 1.怎么存数据 变量: 字符串: 不可变对象 列表: 元组: 字典: 三大容器的遍历方法 2.怎么用数据 数字操作符: 判断循环: 3.函数 4. Python核心编程 4.1. 列表生成器 5 ...
- [SNOI2017]炸弹
嘟嘟嘟 这题有一些别的瞎搞神奇做法,而且复杂度似乎更优,不过我为了练线段树,就乖乖的官方正解了. 做法就是线段树优化建图+强连通分量缩点+DAGdp. 如果一个炸弹\(i\)能引爆另一个炸弹\(j\) ...