web前端-基础篇
该篇仅是本人学习前端时,做的备忘笔记:
一、背景图片设置:
设置背景图时的css代码:background-image:url(图片的url路径);
ps:设置好这个背景后请一定要设置该背景图片的大小和该背景图片的显示区域,css样式设置如下:
背景图片的平铺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前端-基础篇的更多相关文章
- web前端基础篇⑨
1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕 ...
- web前端基础篇⑧
1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...
- web前端基础篇①
html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6o ...
- web前端基础篇⑩
1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...
- web前端基础篇⑦
1.img src/url后一般接地址信息 标题为<h1>-<h6> 字体依次变小 预文本格式<pre></pre> 2.a标签实现跳转 例:<a ...
- web前端基础篇⑥
LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两 ...
- web前端基础篇⑤
1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...
- web前端基础篇④
1.BFC-块级元素-块级格式化上下文布局规则:独立区域,与外部毫不相关内部box会在垂直方向,一个个放置box垂直方向距离由margin决定BFC的区域不会与float box重叠计算BFC高度时, ...
- web前端基础篇③
1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src=“地址” controls=“controls” loo ...
随机推荐
- 最短路-B - 六度分离
B - 六度分离 1967年,美国著名的社会学家斯坦利·米尔格兰姆提出了一个名为“小世界现象(small world phenomenon)”的著名假说,大意是说,任何2个素不相识的人中间最多只隔着6 ...
- laravel框架用使用session 和cookie
1.介绍 cookie 位于用户的计算机上,用来维护用户计算机中的信息,直到用户删除.比如我们在网页上登录某个软件时输入用户名及密码时如果保存为cookie,则每次我们访问的时候就不需要登录网站了.我 ...
- HBase Hive
Hbase数据管理 Hbase就是Hadoop database Hbase是列式数据库 因此Hbase特别适合寻找按照时间排序寻找Top n的场景 Hive数据管理 基于 Hadoop 文件系统的数 ...
- cenos7 安装samba
1)安装samba应用# yum install samba samba-client2)启动Samba应用 systemctl start smb nmb3)Samba配置文件 /etc/samba ...
- FatMouse and Cheese HDU - 1078 dp
#include<cstdio> #include<iostream> #include<cstring> using namespace std; int n,k ...
- Codeforces 832A. Sasha and Sticks
It's one more school day now. Sasha doesn't like classes and is always bored at them. So, each day h ...
- [POI2006] SZK-Schools - 费用流
差不多就是个二分图带权匹配?(我还是敲费用流吧) 每个点向着自己能到的学校连边,费用按题意设定 跑最小费用最大流即可 #include <bits/stdc++.h> using name ...
- 158.Clickjacking点击劫持攻击实现和防御措施
clickjacking攻击: clickjacking攻击又称为点击劫持攻击,是一种在网页中将恶意代码等隐藏在看似无害的内容(如按钮)之下,并诱使用户点击的手段. clickjacking攻击场景: ...
- JUC-JUC是什么?
一.JUC是什么? java.util.concurrent在并发编程中使用的工具类 进程/线程回顾 1.进程/线程是什么? 进程:进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动.它是 ...
- 在vue中使用swiper4.x
需求 :实现一个左右两边有边距的轮播图vue+swiper4 轮播图左右两边含有上一张和下一张的一部分 先安装swiper: 1.npm install swiper 安装swiper 2.在入口 ...