文档章节

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
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员

暂无文章

OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
51分钟前
4
1
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
1
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
1
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
1
0
麒麟AI首席科学家现世

8月31日,华为发布了新一代顶级人工智能手机芯片麒麟980,成为全球首款7nm工艺手机芯片,AI方面也实现飞跃,支持人脸识别、物体识别、物体检测、图像分割、智能翻译等。 虽然如今人人都在热议...

问题终结者
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部