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, ...
随机推荐
- ES读写流程
简述ES的写流程,GET读取数据流程和Search搜索数据流程. ES的读写流程主要是协调节点,主分片节点.副分片节点间的相互协调. ES的读取分为GET和Search两种操作.GET根据文档id从正 ...
- name 'xrange' is not defined
出现这个错误是因为examples使用的是Python2 在Python3中,移除了在Python2中的range, 并将 xrange 命名为 range 将代码中的xrange改为range就可以 ...
- 单元测试报错:Mybatis中数据库语句错误
org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.Persiste ...
- Linux系统中有趣的命令(可以玩小游戏)
Linux系统中有趣的命令(可以玩小游戏) 前言 最近,我在看一些关于Linux系统的内容,这里面的内容是真的越学越枯燥,果然学习的过程还是不容易的.记得前几个月初学Linux时,有时候就会碰到小彩蛋 ...
- docker入门3-docker swarm
swarm介绍 想要将应用部署在一个集群并运行在多台机器上? 通过将多台机器链接到"Dockerized"集群以实现应用程序运行在多容器,多机器的技术被称为swarm. 一个swa ...
- 什么?Java9这些史诗级更新你都不知道?Java9特性一文打尽!
「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...
- 数字货币比特币以太坊买卖五档行情数据API接口
数字货币比特币以太坊买卖五档行情数据API接口 数字货币一般包含比特币BTC.以太坊ETH.瑞波币XRP.泰达币USDT.比特币现金BCH.比特币SV.莱特币LTC.柚子币EOS.OKB. ...
- 浅析 MVC
MVC(Model–View–Controller) Model:数据模型 负责操作所有数据View:视图 负责所有UI界面Controller:控制器 负责其他 //数据放在m const m = ...
- Shell编程—正则表达式
1什么是正则表达式 1.1定义 正则表达式是你所定义的模式模板,Linux工具可以用它来过滤文本.Linux 工具(比如sed编辑器或gawk程序)能够在处理数据时使用正则表达式对数据进行模式匹配. ...
- in文件注意事项及详细解释(转载)
转载自:https://www.cnblogs.com/sysu/p/10817315.html 和 https://www.cnblogs.com/panscience/p/4953940.h ...