文档章节

css定位

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

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

定位标记: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
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问

暂无文章

Spring AOP 切面编程记录日志和接口执行时间

最近客户现在提出系统访问非常慢,需要优化提升访问速度,在排查了nginx、tomcat内存和服务器负载之后,判断是数据库查询速度慢,进一步排查发现是因为部分视图和表查询特别慢导致了整个系统...

编程SHA
12分钟前
3
0
年度大盘点:机器学习开源项目及框架

摘要: 2018年马上就要结束了,我们来回顾一下过去的这一年中,机器学习领域有哪些有趣的事情吧! 我们先来看看Mybridge AI 中排名靠前的顶级开源项目,再聊聊机器学习今年都有哪些发展,最后...

阿里云官方博客
16分钟前
3
0
15个Spring的核心注释示例

众所周知,Spring DI和Spring IOC是Spring Framework的核心概念。让我们从org.springframework.beans.factory.annotation和org.springframework.context.annotation包中探索一些Spring核心注......

java菜分享
18分钟前
0
0
[LintCode] Binary Tree Level Order Traversal(二叉树的层次遍历)

描述 给出一棵二叉树,返回其节点值的层次遍历(逐层从左往右访问) 样例 给一棵二叉树 {3,9,20,#,#,15,7} : 3 / \9 20 / \ 15 7 返回他的分层遍历结果: [ [3], [...

honeymose
27分钟前
1
0
renderer

renderer Function 单元格绘制处理函数,同drawcell事件。

architect刘源源
47分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部