css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面
1、绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况))

随着滚动,最上面的块级不动,下面的文字可以随着滚动条而滚动

2、相对定位position:relative和被定位position:absolute,这两句如果不加的话,下面的对48*48的小方块无法挪到对应的角落

相对定位中z-index:n 属性(没有写z-index的就是z-index:0),只要n大于另一个z-index属性就会展示在页面最上层

3、滚动条属性(比如没有加滚动条属性时,给的图片会比较大时的情况)

解决办法:
1、裁剪多余的图片overflow:hidden;

2、新增滚动条overflow:scroll和overflow: auto;二者都可以实现滚动条,但是是有区别的

区别:无论外边框大于还是小于图片的时候,scroll都会加上滚动条,当边框大于图片时,auto会自动识别
用scroll

用auto

4、背景图属性background-image:url("......."):图片比外边框小时,会被重复显示整个边框

解决办法:background-repeat:no-repeat(表示不会被重复)
background-repeat:repeat-x(表示横向被重复填满)

背景图2:加大background-position会发现图片在方框内在移动

5、字体大小font-size:
正常情况是:

加大、加粗

6、鼠标放按钮上箭头图标变成小手的图标

7、点击某个超链接跳转到某个页面

css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面的更多相关文章
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- css为网页顶部和底部都加入背景图
网页背景图是我们常用的功能,一般来说.给网页加一个背景图,只要在网页的body标签中加入css属性就行. 代码如下:<body style="background-image:url( ...
- 前端之CSS列表及背景类属性
一.列表类属性: 1.列表符号样式: list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式); 2. ...
- web前端学习(三)css学习笔记部分(3)-- css常用操作
5. CSS常用操作 5.1 对齐 使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...
- css — 定位、背景图、水平垂直居中
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- html--前端css常用属性
1.颜色属性 <div style="color:blueviolet">ppppp</div> 输入颜色英文单词 <div style=" ...
- css常用文本属性
[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...
随机推荐
- 防止多次引入js文件导致的重复注册点击事件
前端代码中的js文件如果是动态引入的或者是某个事件操作进行注册的,那么重复的引入js文件或者多次触发注册事件会导致事件多次进行注册,造成不必要的麻烦,所以需要在每次注册之前将先前的事件进行取消,下面以 ...
- Spark优化之小文件是否需要合并?
我们知道,大部分Spark计算都是在内存中完成的,所以Spark的瓶颈一般来自于集群(standalone, yarn, mesos, k8s)的资源紧张,CPU,网络带宽,内存.Spark的性能,想 ...
- 简述python中`functools.wrapper()
简述python中functools.wrapper() 首先对于最简单的函数: def a(): pass if __name__ == '__main__': print(a.__name__) ...
- Linux top详解
命令 top 参数说明: d:改变显示的更新速度 q: 没有任何延迟的显示速度 c:切换显示模式,共有两种模式,一是只显示执行档的名称,零一种显示完整的路径与名称S:累计模式,会将已完成或消失的子行 ...
- 浏览器自动化的一些体会9 访问angular页面的一个问题
发现浏览器自动化有一个重要方面没有提及,即所谓的无页面浏览器,不过最近没有需求,不想尝试,先记上一笔,以后有需求时,可以有个思路. 大约一两个月前(现在比较懒散,时间不知不觉过去,连今天是几号有时候都 ...
- Dotnet Core Public API的安全实践
公开API的安全,其实更重要. 一.API的安全 作为一个Dotnet Core的老司机,写API时,能兼顾到API的安全,这是一种优雅. 通常,我们会用认证来保证API的安全,无敌的Auth ...
- windows 服务端 狼人杀 发牌器 开发完成 待继续开发其他服务
开发工具: python2.7 eric4 成果链接地址 https://wws.lanzous.com/iPCDTfnuoif
- Javascript之其实我觉得原型链没有难的那么夸张!
原型链.闭包.事件循环等,可以说是js中比较复杂的知识了,复杂的不是因为它的概念,而是因为它们本身都涉及到很多的知识体系.所以很难串联起来,有一个完整的思路.我最近想把js中有点意思的知识都总结整理一 ...
- Kubernetes实战指南(三十三):都0202了,你还在手写k8s的yaml文件?
目录 1. k8s的yaml文件到底有多复杂 2. 基于图形化的方式自动生成yaml 2.1 k8s图形化管理工具Ratel安装 2.2 使用Ratel创建生成yaml文件 2.2.1 基本配置 2. ...
- [WPF][Rubyer] 写一个自己的 UI 库 (二) - Icon
前言 制作 WPF 的图标包,主要介绍从 iconfont 下载的图标包导入到 WPF 使用: 1. 添加文件 Ruyber 下添加 自定义控件(WPF) Icon.cs.类 IconType.cs. ...