上节内容回顾

如果点击图片调转到连接,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-block
4、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,auto
hover background-image:url('image/4.gif'); # 默认,div大,图片重复访
background-repeat: repeat-y;
background-position-x:
background-position-y: 示例:输入框右边放置图标

前端逼死强迫症之css续集的更多相关文章

  1. 前端逼死强迫症系列之css

    一.编写css样式 1.ID选择器 由于ID唯一,所以也是写多遍. <head> <style> #i1{ background-color: #2459a2; height: ...

  2. 前端逼死强迫症系列之javascript续集

    一.javascript函数 1.普通函数 function func(){ } 2.匿名函数 setInterval(function(){ console.log(123); },5000) 3. ...

  3. 前端逼死强迫症之DOM

    Dom:document.相当于把所有的html文件,转换成了文档对象. 之前说过:html-裸体的人:css-穿上衣服:js-让人动起来. 让人动起来,就得先找到他,再修改它内容或属性. 找到标签 ...

  4. 前端逼死强迫症系列之javascript

    JavaScript 和Python.C#.Java.Ruby一样,都是一门独立的编程语言. 像python.C.Java等都需要解释器,学习它们的语法.而浏览器本身就是javascript的解释器. ...

  5. 前端逼死强迫症系列之Html

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...

  6. Web 前端之HTML和CSS

    Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...

  7. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  8. web前端面试试题总结---css篇

    CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...

  9. 前端总结·基础篇·CSS(一)布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

随机推荐

  1. (十一)easyUI之下拉框

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. (十六)Hibernate中的延迟加载

    一.什么是延迟加载 为了节省Hibernate加载对象的性能节销,在Hibernate中真正需要用到这个对象时,才会发出        SQL语句来抓取这个对象.这一个过程称为延迟加载. 二.延迟加载 ...

  3. ubuntu装openssh-client和openssh-server

    1. 修改update源 进入/etc/apt/目录,首先用cp命令将sources.list备份成sources.list.bk,然后复制http://www.cnblogs.com/eastson ...

  4. 3、java基础:抽象类与接口的区别

    抽象类 我们都知道在面向对象的领域一切都是对象,同时所有的对象都是通过类来描述的,但是并不是所有的类都是来描述对象的.如果一个类没有足够的信息来描述一个具体的对象,而需要其他具体的类来支撑它,那么这样 ...

  5. 封装jquery的ajax

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. js原生方法的重写

    讲干货,不啰嗦,通过prototype可以获取到JavaScript的原型对象,进而可以在对象原型上添加新的属性和方法,当该方法与原方法名称一样时会覆盖原方法既:重写,当不一样时既:添加 如:实现数组 ...

  7. iOS分类(category),类扩展(extension)—史上最全攻略

    背景: 在大型项目,企业级开发中多人同时维护同一个类,此时程序员A因为某项需求只想给当前类currentClass添加一个方法newMethod,那该怎么办呢? 最简单粗暴的方式是把newMethod ...

  8. sql根据一个表查询的数据作为条件查询另一个表

    代码格式如下: ) 要注意的是:in后面的查询语句必须是查询一个字段跟前面的表相对应的.比如要根据订单号orderID,OpenBills 这个表就需要查询到orderID这个字段,BillConsu ...

  9. 5.Redis的持久化

    Redis中数据的持久化有两种方式:RDB(Redis DataBsse) 和 AOF(Append Only File),默认采取的是RDB方式 RDB 1.是什么:在指定的时间间隔内将内存中的数据 ...

  10. 《数据结构与算法之美》 <07>队列:队列在线程池等有限资源池中的应用?

    我们知道,CPU 资源是有限的,任务的处理速度与线程个数并不是线性正相关.相反,过多的线程反而会导致 CPU 频繁切换,处理性能下降.所以,线程池的大小一般都是综合考虑要处理任务的特点和硬件环境,来事 ...