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

一、背景图片设置:

  设置背景图时的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. VMware安装centos7与配置网络

    自己想搭建个虚机学习下k8s,使用VMware安装centos7,上不了网,折腾了很久才连上.发现网上很多教程都是错误的或者不明确的,这边写下自己的配置记录 首先安装centos7系统就不赘述了,这边 ...

  2. 安装oracle client及配置

    一.下载oracle client 下载地址:https://www.oracle.com/technetwork/database/enterprise-edition/downloads/1120 ...

  3. DirectX11--HLSL语法入门

    前言 编写本内容仅仅是为了完善当前的教程体系,入门级别的内容其实基本上都是千篇一律,仅有一些必要细节上的扩充.要入门HLSL,只是掌握入门语法,即便把HLSL的全部语法也吃透了也并不代表你就能着色器代 ...

  4. 4P遇上了5P

    (1)4P工作要素:任何一位从业者,都应该好好想想自己工作的初衷是什么?你将自己所从事的工作又是定位在什么位置?而这份工作的视角又有多宽.多广?最后是你会在某个周期内完成工作或者是实现突破. (2)5 ...

  5. STL标准库面试题(转)

    一.vector的底层(存储)机制 二.vector的自增长机制 三.list的底层(存储)机制 四.什么情况下用vector,什么情况下用list 五.list自带排序函数的排序原理 六.deque ...

  6. python之爬虫(爬取.ts文件并将其合并为.MP4文件——以及一些异常的注意事项)

    //20200115 最近在看“咱们裸熊——we bears”第一季和第三季都看完了,单单就第二季死活找不到,只有腾讯有资源,但是要vip……而且还是国语版……所以就瞄上了一个视频网站——可以在线观看 ...

  7. [HAOI2011] 向量 - 裴蜀定理

    给你一对数a,b,你可以任意使用(a,b), (a,-b), (-a,b), (-a,-b), (b,a), (b,-a), (-b,a), (-b,-a)这些向量,问你能不能拼出另一个向量(x,y) ...

  8. AttributeError: 'SQLAlchemy' object has no attribute 'Foreignkey'

    在学习<Flask Web开发----基于Python的Web应用开发实战>的过程中,调试程序,如下图,运行报错: AttributeError: 'SQLAlchemy' object ...

  9. HandlerMethod解析

    api写HandlerMethod的作用: Encapsulates information about a handler method consisting of a method and a b ...

  10. react 和 vue 的优缺点总结

    React推广了Virtual DOM并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML Vue使用模板系统而不是JSX,但能对现有应用的升级更加容易,这是因为模板用的就 ...