前端逼死强迫症之css续集
上节内容回顾
如果点击图片调转到连接,a标签下套img标签,在IE有的版本中,会有蓝色边框。
因为a标签默认字体颜色就是蓝色,img标签继承了父级标签,而IE浏览器默认给边框加了宽度。解决:
<head><style>img {border: 0;}</style> </head> <body><a href="http://blog.csdn.net/fgf00" target="_blank"><img src="作业--效果图.png" style="width: 300px; height: 200px" /></a> </body>
回顾
1、块级和行内2、form标签 提交表单<form action='http://sssss' methed='GET' enctype="multipart/form-data"><div>asdfasdf</div><input type='text' name='q' /># 上传文件<input type='file' name='f' /> <!--依赖form表单属性 enctype--><input type='submit' /></form>GET: http://sssss?q=用户输入的值&b=用户输入的内容POST:请求头请求内容3、display: block;inline;inline-block4、float:<div><div style='float:left;'>f</div><div style='clear:both;'></div></div>5、margin: 0 auto; <!--整个页面居中-->6、padding, ---> 内边距。自身发生变化
一、css之position分层
1.position:fixed 永远固定位置
返回顶部和上方的菜单,永远固定在一个位置
网页有好几屏,不管怎么拉,右下角都有个返回顶部,网页的菜单也一直固定在上方。
前边的内容,所有的页面都是在一层上的。实现返回顶部,就需要position:fixed分层了。
CSS全称:层叠样式表
- 返回顶部
position:fixed ==> 固定在页面某个位置
<div onclick="GoTop();" style="width: 40px; height: 40px; background-color: #0000cc; color: white;position: fixed;bottom: 20px;right: 20px;">返回顶部</div> <div style="height: 5000px; background-color: #dddddd;">FGFGF</div> <script>function GoTop(){document.body.scrollTop = 0;} </script>
- 菜单永远在顶部
菜单position固定,内容margin设定外边距
<head><meta charset="UTF-8"><title>Title</title><style>.pg-header{height:48px; background-color:#2459a2; color: #dddddd;position:fixed;top:0; right:10px; left:10px;}.pg-body{background-color: #dddddd; height: 5000px;margin-top: 50px;}</style> </head> <body><div class="pg-header">头部</div><div class="pg-body">内容</div> </body>
2.position:relative+absolute相对定位
posttion: absolute :一次性固定在网页某个位置,再移动滑轮跟着动
posttion: relative :单独使用没有任何变化。
组合(relative + absolute) :固定在父类标签的某个位置。
<div style="position: relative; width:500px;height:200px; background-color: #b3b3b3; margin:auto;"><div style="position: absolute; left: 0; bottom: 0; width: 50px; height: 50px; background-color: blue;"></div> </div>
3.多层展示
- opcity: 0.5 透明度
- z-index: 层级顺序 ,值大在上面
<!--z-index:值大的在上面; display:none;--> <div style="z-index:10; position:fixed; top:50%; left:50%;margin-left:-250px; margin-top:-200px; /*居中*/ background-color:white; height:400px; width:500px;"><input type="text" /> </div><!--opacity:0.5 透明度;上右下左:0:全遮住--> <div style="z-index:9; position:fixed; opacity:0.5; top:0; bottom:0; right:0; left:0; background-color:black;"></div><div style="height:5000px; background-color: greenyellow">FGFFGF</div>
二、css之overflow 图片显示方式
当图片大小超过了父级标签,就把父级标签撑开了。
- overflow: auto:图片滚动条显示
- overflow: hidden:图片只显示父级标签大小
<!--图片出现滚动条--> <div style="height:200px; width:300px; overflow: auto"><img src="1.png" /> </div> <!--图片只显示父级大小--> <div style="height:200px; width:300px; overflow: hidden"><img src="1.png" /><!--<img src="1.png" style="height:200px; width:300px;"/>--> </div>
三、css之hover鼠标移动过去样式
网站上,鼠标移动过去,变颜色
样式后加上hover :当鼠标移动到当前标签上时,才生效的css属性
<head><meta charset="UTF-8"><title>Title</title><style>.pg-header{position: fixed;right: 0; left: 0; top: 0; height: 48px;background-color: #2459a2; line-height: 48px;}.pg-body{margin-top: 50px;}.w{width: 980px;margin: 0 auto;}.pg-header .menu{display: inline-block;padding: 0 10px 0 10px; /*上 右 下 左 加上内边距*/color: white;}/*当鼠标移动到当前标签上时,以下CSS属性才生效*/.pg-header .menu:hover{background-color: blue;}</style> </head> <body><div class="pg-header"><div class="w"><a class="logo">LOGO</a><a class="menu">全部</a><a class="menu">42区</a><a class="menu">段子</a><a class="menu">1024</a></div></div><div class="pg-body"><div class="w">a</div></div> </body>
四、css之background背景
- background-color :背景颜色
- background-image:背景图片
设置了背景图片,当图片很小,父级div很大,图片会堆叠重复放。水平垂直方向都会帮你重复增加。
<div style="height:790px; width:980px; border: 1px solid red;"><div style="background-image: url(http://www.autohome.com.cn/images/error/bg.png); height: 100%; "></div> </div>
background-repeat(no-repeat;repeat-x;repeat-y):指定方向堆叠
- no-repeat:不堆叠
<div style="background-image:url('4.gif'); height: 80px;background-repeat:no-repeat"></div>
repeat-x:只水平堆叠
repeat-y:只垂直堆叠
background-position :指定背景显示位置
如图:icon.png
<div style="background-image: url(icon.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;background-position-x: 0; <!--水平方向位置-->background-position-y: -78px;<!--垂直方向位置-->"></div>
这样指定位置有点麻烦,下面说下几种指定x、y值的方式
<!--第一种:直接x、y写--> background-position-x: background-position-y: <!--第二种:background-position(直接跟x、y值)--> background-position: 10px 10px <!--第三种: 简写的方式:--> <div style="background: #f8f8f8 url(icon.png) 0 -78px no-repeat;height: 20px;width:20px;border: 1px solid red;"></div>
六、总结
CSS补充position:a. fiexd => 固定在页面的某个位置b. relative + absolute<div style='position:relative;'><div style='position:absolute;top:0;left:0;'></div></div>opcity: 0.5 透明度z-index: 层级顺序 overflow: hidden,autohoverbackground-image:url('image/4.gif'); # 默认,div大,图片重复访background-repeat: repeat-y;background-position-x:background-position-y:示例:输入框右边放置图标
转载于:https://www.cnblogs.com/lixiaoliuer/p/7136035.html
前端逼死强迫症之css续集相关推荐
- 前端逼死强迫症系列之css
一.编写css样式 1.ID选择器 由于ID唯一,所以也是写多遍. <head><style>#i1{background-color: #2459a2;height: 48p ...
- 前端逼死强迫症系列之javascript续集
一.javascript函数 1.普通函数 function func(){ } 2.匿名函数 setInterval(function(){console.log(123); },5000) 3.自 ...
- 前端逼死强迫症之DOM
Dom:document.相当于把所有的html文件,转换成了文档对象. 之前说过:html-裸体的人:css-穿上衣服:js-让人动起来. 让人动起来,就得先找到他,再修改它内容或属性. 找到标签 ...
- 【持续..】WEB前端面试知识梳理 - CSS部分
传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分 最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...
- css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动 这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1.高度塌陷 举个例子我们看一下. 我们在 ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文
CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...
- 做好前端的话HTML和CSS基础必须夯实!
很多前端大佬说,要做好前端的话html和css基础必须夯实.那么,达到什么水平才能叫基础夯实呢? 1.拿到设计人员给的图,不管是pc或者是移动端的图,看一遍之后脑海中已经有了很明确的结构和页面书写过程 ...
- 一个注册页面的前端模板(html+css+javascript)可自适应屏幕
一个注册页面的前端模板(html+css+javascript)可自适应屏幕,修改样式即可用. 截图 代码 <!DOCTYPE html> <html><head> ...
最新文章
- java正则学习笔记三
- java排队叫号_java多线程(4)模拟排队叫号程序,不能出现交替执行的结果
- 提高ASP性能的最佳选择
- 《易学Python》——1.4 Linux
- publiccms实现首页菜单栏下拉的方法
- php正规则表达式学习笔记(几个常用函数的区别)
- 系统运维遇上了大救星,是什么让IT效率提高48%
- java程序员 进阶_Java程序员进阶架构师的五个阶段,你到
- springboot启动原理_SpringBoot启动原理及相关流程
- odoo10参考系列--Odoo中的安全机制
- Sublime功能拓展及插件
- 高级python_高级Python功能
- Google 电子表格函数列表
- EndNote参考文献管理软件
- 报错Ordinal parameter not bound
- win7磁盘清理_Win7系统使用久变慢怎么办?Windows7系统优化方法
- 【小技巧】H5禁止手机虚拟键盘弹出
- 三层交换机转发原理与实验(三层交换技术原理,MLS条目,虚接口详解与配置)
- 协同办公“战役”,华为输了吗?
- 用php进行联查,Thinkphp使用join联表查询的方法
热门文章
- mysql虚拟主机_远程连接mysql要点 虚拟主机定义与分类
- 满头黑发开始_python
- java邮件接收_Java邮件发送与接收原理
- STM32F4 SPI NSS硬件模式配置及使用
- html实现自动清理js、css文件的缓存
- 如何在OC类里 调用swift类
- psv 进php,php - 使用htaccess将网站http重定向到lapsvel中的https - SO中文参考 - www.soinside.com...
- 基于bp神经网络的pid控制,pid神经网络什么原理
- 不同坐标系BIM模型导出参数配置
- 大数据工程师工作笔记之集群节点准备