文档章节

css定位

lotozhou
 lotozhou
发布于 2015/11/30 09:49
字数 1275
阅读 35
收藏 1
点赞 0
评论 0

定位:
定位就是设置盒子的位置和坐标
定位分绝对定位和相对定位

定位标记:position:absolute(绝对定位以网页为坐标:常用)

left:(x轴)
top :(y轴)

position:relative 相对定位是以盒子为坐标(通常都是盒子嵌套盒子才用相对,不常用);

left:(x轴)
top :(y轴)
用定位必须写坐标,绝对定位,盒子会脱离文档流;(浮动也脱离文档流)

两个盒子定位在同一坐标范围内会产生重叠部分,设置层叠效果用z-index,两个盒子必须都要写z-index: 谁的值写的大,谁会显示在前面

也可用软件的设计中的布局--绘制层……来设置

 

控制盒子的显示和隐藏:
属性 visibility(能见度,可见性):hidden(隐藏); 隐藏后扔然占位;

 

display(显示):none; 隐藏后不占位;
样式对A标记的控制:用快捷键Ctrl+j 选择链接 ,链接颜色就是本身什么也点的颜色。变换图像链接就是鼠标放在上面时显示的颜色。
已访问链接就是已经访问过的链接的颜色。活动链接,就是点住此链接不放时显示的颜色。

这是一种伪元素选择器:同一个标记,有多种姿态;只有A链接和p标记使用伪元素选择器;

a:link(链接颜色) {
color: #FF0000;
}
a:visited (已经访问过的链接的颜色){
color: #0000FF;
}
a:hover (鼠标放在上面时显示的颜色) {
color: #00FF00;
}
a:active (就是点住此链接不放时显示的颜色){
color: #FFFF00;
}
将鼠标放在上面时显示的颜色做成抖动效果
a:hover {
color: #00FF00;
position:relative; 就是用的相对定位;
left:10px;
top:10px;
在css中〈!--浏览器认识的就显示,不认识就屏蔽--〉
做一个导航特效,鼠标一放在上面的时候显示另一张图片:

思路,1 先用ul做出列表导航 2 给列表加a链接 3 改a链接的默认色彩 4 去除无序列表前的点 5 使列表左浮动

6 加边框,调外边距 7 给li加背景图片;注意看图片的尺寸; 8 确定li宽高 9 调字体居中和垂直居中;

然后在伪元素选择器中的hover 标记添加背景图片,

这里我们要了解的一个知识点是: a 标记不是一个盒模型,不是四边形,所以不能写宽高,但是为了添加宽高,要用样式

使a 标记变成盒模型 display(显示): block (块) 可以理解为显示边框;

然后就可以和a 标记添加宽高了;

 

css 对空白页面的控制;
white(白色的)-space(空间):nowrap (强制在同一行内显示的所有文本,直到文本结束或者遭遇br标记;)

 

css 对溢出样式的的控制, 溢出就是内容超出盒子设定的宽度;
用overflow(流动)溢出 : 1.hidden(隐藏) 2.scroll(滚动条);

ie会对溢出做出自动调整,将宽高调大,使内容显示出来,但是容易影响周围的内容;

 

css 对滚动条的控制;使用css代码生成器--滚动条--查看源代码,不要cursor(对光标的控制)

但是在ie里能控制,在火狐里则不能;还可用网页调色板的吸管去吸取其它网页的rgb颜色;
选择器的命名方法:起名尽量做到见名知意:

1.驼峰法:一般用于合成词;第一个单词小写,然后第二个大写…… 样式一般用驼峰;

2.帕斯卡命名法:每个单词首字母大写; java php 给变量起名的时候一般用;

3.匈牙利命名法:采用 _ 一般用于数据库;
不同浏览器差异的解决方案:
1.盒模型的居中不一样,text-align:center ie浏览器好使,ff不好使;用margin:0px auto; 置顶居中解决;
2.ie指定的最小高度为18px.18px以内都按18px算,而ff指定多少都可以;可以用标尺软件量出;

解决方案是有 overflow:hidden 原理是ie自动溢出,所以用隐藏溢出即可;或者font-size:0px; 但是这个不好理解;
3. ie 自动调整高度,ff不会, 排版尽量不写高度,ie和ff都会随内容而定
4. ie 和ff在列表显示上有差别解决方法如下:

*(代表所有的标记都受控 ){
margin:0px;
padding:0px;

}

5.浮动,必须清除浮动;clear(清除):both(全部)

 

css项目实践
企业站 1创建css页面 html页面,用链接样式表的方法链接进来;
/*css的屏蔽 */
css页面思路:
*{ 1先解决列表差异;
margin:0px;
padding:0px;
}

body{ 2设定body 字体,和字体大小;
font-family:"宋体";
font-size:14px;
background:url(images/bg.gif);
}

a:link { 3.链接的四种样式;
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0000FF;
}
a:hover {
text-decoration: none;
color: #00FF00;
}
a:active {
text-decoration: none;
color: #FFFF00;
}

.clr{ 4清除浮动;
clear:both;

}


© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员

暂无相关文章

C++内存映射文件居然是这样?!

内存映射文件大家都时不时听过,但它到底是个什么?赶紧来看看吧 内存映射文件到底是干嘛的呢?让我们先来思考下面几个问题: 如果您想读的内容大于系统分配的内存块怎么办?如果您想搜索的字...

柳猫 ⋅ 23分钟前 ⋅ 0

MySQL 数据库设计总结

规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过1000字节...

OSC_cnhwTY ⋅ 今天 ⋅ 0

多线程(四)

线程池和Exector框架 什么是线程池? 降低资源的消耗 提高响应速度,任务:T1创建线程时间,T2任务执行时间,T3线程销毁时间,线程池没有或者减少T1和T3 提高线程的可管理性。 线程池要做些什...

这很耳东先生 ⋅ 今天 ⋅ 0

使用SpringMVC的@Validated注解验证

1、SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 [java] view plain copy edit.userna...

瑟青豆 ⋅ 今天 ⋅ 0

19.压缩工具gzip bzip2 xz

6月22日任务 6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具 6.1 压缩打包介绍: linux中常见的一些压缩文件 .zip .gz .bz2 .xz .tar .gz .tar .bz2 .tar.xz 建立一些文...

王鑫linux ⋅ 今天 ⋅ 0

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 今天 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 今天 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 今天 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 今天 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部