该篇仅是本人学习前端时,做的备忘笔记:

一、背景图片设置:

  设置背景图时的css代码:background-image:url(图片的url路径);

  ps:设置好这个背景后请一定要设置该背景图片的大小和该背景图片的显示区域,css样式设置如下:

        e.g.   background-image:url(图片的url路径);
                 width:18px;height:18px;
  不设置的话,出现的情况就是只有该内容区域有内容时,才会出现背景图片;ps:因为要让一个区域的背景图片显示的话,那前提肯定是得先让背景图片所在的块级区域有宽度和高度(高度必须要有,宽度没有则默认宽度为整个浏览器的宽度)才行啊,

  背景图片的平铺css样式:background-repeat:repeat/no-repeat/repeat-x/repeat-y;

  背景图片的定位:background-position: 

     取值 1.x y 以px为单位的数字,定义x轴和y轴的位置

          2.x% y%

       3.x 或者 x%,不写y,默认y为50%

         4.关键字 x:left/center/right  y:top/center/bottom

  背景图片的固定

     background-attachment:

    取值:1.scroll 默认值,背景图定位以容器为准

    背景图会随着页面滚动条滚动而变化

        2. fixed 固定,背景图定位以body为准

    页面的滚动条,滚动,背景图不会随着发生位置变化

    但是,只能在本容器区域内显示

web前端-基础篇的更多相关文章

  1. web前端基础篇⑨

    1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕 ...

  2. web前端基础篇⑧

    1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...

  3. web前端基础篇①

    html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6o ...

  4. web前端基础篇⑩

    1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...

  5. web前端基础篇⑦

    1.img src/url后一般接地址信息 标题为<h1>-<h6> 字体依次变小 预文本格式<pre></pre> 2.a标签实现跳转 例:<a ...

  6. web前端基础篇⑥

    LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两 ...

  7. web前端基础篇⑤

    1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...

  8. web前端基础篇④

    1.BFC-块级元素-块级格式化上下文布局规则:独立区域,与外部毫不相关内部box会在垂直方向,一个个放置box垂直方向距离由margin决定BFC的区域不会与float box重叠计算BFC高度时, ...

  9. web前端基础篇③

    1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src=“地址” controls=“controls” loo ...

随机推荐

  1. redux基础概念及执行流程详解

    一.执行流程 全局有一个公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发布订阅)==>red ...

  2. python 3 可迭代对象与迭代器

    1,可迭代对象 内部含有__iter__方法的对象是可迭代对象 遵循可迭代协议 dir() 检查对象含有什么方法 dir()会返回一个列表,这个列表中含有该对象的以字符串的形式所有方法名.这样我们就可 ...

  3. PHP目录操作(附封装好的目录操作函数文件)

    目录函数库常用API $path='test'; var_dump(is_dir($path));//检测是否为目录 echo '<hr/>'; echo getcwd();//得到当前的 ...

  4. canvas特效-文字粒子

    具体的效果 https://www.ui.cn/detail/393461.html 实现类似的动效 要求: 1.文字内容可以自定义 2.粒子的运动轨迹 是曲线,返回是按照 原运动轨迹 3.粒子 堆叠 ...

  5. 题解【AcWing95】费解的开关

    题面 一道非常好的递推练习题. 我们考虑每次枚举第一行的操作,由上一行的状态递推出下一行的状态,最后判断最后一行是否全部为 \(1\) 即可. 实现代码时要注意一些细节问题. #include < ...

  6. 如何在macOS下安装geoserver

    macOS 下的编译包 如果是使用安装文件,请查看官网文档,如果想要部署在已有的tomcat服务下,请查看网页压缩包章节. Web archive. An alternate way of insta ...

  7. C语言-基本数据类型

    一.C语言数据类型深度剖析 1.什么是数据类型? -可以理解为固定内存大小的别名 -数据类型是创建变量的模子 -数据类型是对内存的格式化操作 上面三句话如何理解? 在以前的汇编语言时代,我们要存储一些 ...

  8. 多个iframe,删除详情页时刷新同级iframe的table list

    说明:在使用iframe开发时,经常遇到多个iframe之间的操作. 下面就是一个需求:在一个iframe中关闭时,刷新指定的iframe: 添加需要刷新的标识reload=true //添加npi2 ...

  9. STL-priority_queue H - 看病要排队

    H - 看病要排队 看病要排队这个是地球人都知道的常识.不过经过细心的0068的观察,他发现了医院里排队还是有讲究的.0068所去的医院有三个医生(汗,这么少)同时看病.而看病的人病情有轻重,所以不能 ...

  10. AE 打开Shp文件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...