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 ...
随机推荐
- 批量获取mysql数据库实例指定参数的值
需求:需要对比所有mysql数据库实例上面的指定参数配置情况,同时需要需要能看到如ip,端口,master or slave,毕竟主和从参数不一样还是有可能的. 说明:必须要有个数据库存储所有是数据库 ...
- 2019-08-21 纪中NOIP模拟A组
T1 [JZOJ6315] 数字 题目描述
- Java对MongoDB进行分组操作并统计各个分组的数量
最近在检索MongoDB的数据时需要用到分组操作,由于没有现成的说明文档可参考,只能是在代码中不断调试.摸索前进:目前已现实了Java对MongoDB的分组操作,并统计各个分组的数量.现通过示例详细解 ...
- If no other git process is currently running, this probably means a git proc
原因:用SourceTree提交代码,发现这个问题.好像是因为上个进程没停止,造成文件不识别 解决:把仓库目录里的.git/index.lock文件(文件是隐藏的)删除就可以了.删除index.loc ...
- Vue中v-show和v-if的使用以及区别
个人博客 地址:http://www.wenhaofan.com/article/20190321143330 v-if 1.v-if 根据条件渲染,它会确保在切换过程中条件块内的组件销毁和重建 ...
- 在Unity5中使用C#脚本实现UI的下滑、变色、渐隐渐现效果
一.首先,我们先创建一个Text 依次选择Component→UI→Text创建一个Text,创建完成后如下: 二.创建完成后,在Project面板点击Create→C# Script,本例命名 ...
- 165.扩展User模型-继承AbstractBaseUser
继承自AbstractBaseUser模型 如果你想要修改默认的验证方式,并且对于User模型上的一些字段不想要,那么可以自定义一个模型,然后继承自AbstractBaseUser,再添加你想要的字段 ...
- centos7下编译安装redis5.05
准备环境: 1.一台centos7机器,配置没有什么要求(能联网) 2.下载好redis压缩包 下载redis包: 1.登录redis官网: https://redis.io/download 2.选 ...
- Learn from Niu 2020.1.21
1. 你一定要看计算机领域的文章. 如果你是看一堆应用,你最终还是会不知道怎么做. 从计算机到energy是降维打击, 当你学习了计算机的hot skill,再去做应用很容易. 2. 搞研究的思路: ...
- Unable to connect to a repository at URL
缓存问题: 1. 右键点击本地副本,TortoiseSVN -> Settings -> Saved Data, 2.点击“Clear”按钮,把本地缓存都清除了,点击“确定”: 3. 再重 ...