css定位
博客专区 > lotozhou 的博客 > 博客详情
css定位
lotozhou 发表于2年前
css定位
  • 发表于 2年前
  • 阅读 31
  • 收藏 1
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购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;

}


共有 人打赏支持
粉丝 8
博文 51
码字总数 51524
×
lotozhou
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: