首页 技术 正文
技术 2022年11月15日
0 收藏 439 点赞 5,012 浏览 1559 个字

css015 定位网页上的元素

一、   定位属性的功能

1、         四中类型的定位

Position: absolute relative fixed static

a、 绝对定位

绝对定位通常单位为:px  em  percentage

绝对定位会脱离页面流,相对的是整个浏览器

如果a标签在设定了absolute relative fixed值的b标签中,那么a标签就是性对与b标签定位。

b、相对定位

相对定位是相对于当前html流中的当前位置进行定位的。

c、 固定定位

Background-attacment:fixed;

d、  静态定位

默认的定位方式

2、         设置定位值

a、 position:reality

top:2px;

right:5px;

bottom:5px;

left:7px;

3、         当绝对定位变为相对定位时

a、 绝对定位是相对于离它最近的父元素的边界上。

b、 如果一个标签的位置是绝对定位的,且它又不在其他任何设定了absolute、relative或fixed定位的标签里面,那它就相对于浏览器的窗口定位。

c、如果一个标签处在另一个设定了absolute、relative或fixed定位的标签里面,那它就是相对于另一个元素的边沿进行定位。

4、         何时何处使用相对定位

   a、

5、         堆叠元素

   a、z-index 控制元素的堆叠顺序,数值越大,堆叠的位置越高。

6、         隐藏部分网页

a、 visibility(可见性)值可为:hidden(隐藏) visible(可见)(与display的none值有点像)

b、opacity:0;(隐藏)   opacity:1;(显示)

c、

二、   强大的定位策略

1、          在元素内部进行定位

A、利用定位最有效的方法之一就是让小的元素相对于网页上的其他元素进行定位

2、          让元素超出方框

3、          用固定定位创建css式的框架

Css016 设计打印页面的css技术

一、     media样式表的作用

css支持10种不同的媒体类型:all(使用每一种设备)、braille、embossed、handheld、print(使用与打印网页)、projection、screen(使用与显示器)、speech、tty、tv

二、     如何添加media样式表

给外部样式表指定媒体类型

<link rel=”stylesheet” media=”print” type=”text/css” href=”print.css”>

在样式表中指定媒体类型

@media print{

<!– put your styles for the printer in here –>

}

三、     创建打印样式表

用!important覆盖屏显样式

h1{ color:#000 !important;

}

重写文本样式

定义打印背景

四、     保留背景元素

1、在html中添加<img>标签,位置在打印是图片需要出现的地方:

<img src=”logo.png” height=”100″ width=”100″ class=”logo”>

2、在朱样表中添加隐藏图片的样式

.logo { display: none; }

3、 在打印样式表中添加最后一个样式,用来显示图片

.logo{ display:inline; }

4、隐藏不需要的页面区域

5、给打印添加分页符

Css017 改正css设计习惯

一、     添加注释

二、     组织样式和样式表

三、     要根据用途而不是外观来命名样式

四、     不要根据位置命名

五、     不要用意义含糊的名称

六、     使用多各类可以节省时间

上星期忘了更新了

版权声明:未经作者同意,不得私自转载。http://www.cnblogs.com/lal-fighting/

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,086
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,561
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,411
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,184
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,820
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,904