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---浮动 背景图设置 相对定位绝对定位的更多相关文章

  1. 背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)

    MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个fla ...

  2. vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法

    当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,w ...

  3. css background 背景图设置

  4. [osg]osg背景图设置

    转自:https://blog.csdn.net/qq_30754211/article/details/61190698 #include <osg/Geometry> #include ...

  5. 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

  6. 【CSS】css网页背景图片设置

    刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...

  7. IE6下 input 背景图滚动问题及标签规范

    ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300p ...

  8. css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面

    1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...

  9. css 浮动 相对定位 绝对定位区别

    今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然 ...

随机推荐

  1. jsp内置对象-response对象

    一.概念 隐含对象response是javax.servlet.HttpServletResponse接口实现类的对象.response对象封装了JSP产生的响应,用于响应客户端的请求,向客户端输出信 ...

  2. windows下vagrant的安装使用

    vagrant是简便虚拟机操作的一个软件,而使用虚拟机有几个好处: 1.为了开发环境与生产环境一致(很多开发环境为windows而生产环境为linux),不至于出现在开发环境正常而移步到正式生产环境时 ...

  3. [20190417]隐含参数_SPIN_COUNT.txt

    [20190417]隐含参数_SPIN_COUNT.txt--//在探究latch spin计数之前,先简单探究_SPIN_COUNT.实际上oracle现在版本latch spin的数量不再是200 ...

  4. REST教程

    REST教程 越来越多的人开始意识到,网站即软件,而且是一种新型的软件.这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high late ...

  5. sqlsever存储过程配合代理作业自动定时建表

    1.自动建表存储过程 USE [ThreeToOne] GO /****** Object:  StoredProcedure [dbo].[WTO_CreateTable_ScanDoXXX]    ...

  6. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  7. zabbix监控交换机状态

    1.在Zabbix中添加主机 输入名称.群组和交换机IP(交换机要开启snmp) 2.创建监控项 输入OID和其它信息(键值随便填,但是不能和系统内的键值重复)OID获取方法可查看上一篇文章:http ...

  8. cent os 7 与cent os 6 修改主机名称

    centos6 需要修改两处:一处是/etc/sysconfig/network,另一处是/etc/hosts,只修改任一处会导致系统启动异常.零时修改用hostname your-name cnet ...

  9. Python-语法模板大全(常用)

    目录 1.怎么存数据 变量: 字符串: 不可变对象 列表: 元组: 字典: 三大容器的遍历方法 2.怎么用数据 数字操作符: 判断循环: 3.函数 4. Python核心编程 4.1. 列表生成器 5 ...

  10. [SNOI2017]炸弹

    嘟嘟嘟 这题有一些别的瞎搞神奇做法,而且复杂度似乎更优,不过我为了练线段树,就乖乖的官方正解了. 做法就是线段树优化建图+强连通分量缩点+DAGdp. 如果一个炸弹\(i\)能引爆另一个炸弹\(j\) ...