一、positionfixed

  锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。

二、positionabsolute

  1.外层没有position:absolute(或relative);那么div相对于浏览器定位。

  2.外层有position:absolute(或relative);那么div相对于外层边框定位。

三、positionrelative

  相对位置。

把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。

四、分层(z-index

  z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

五、floatleftright

Leftright时不用给他规定位置(lefttop),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。

  overflow:hidden;    //超出部分隐藏;scroll,显示出滚动条;

半透明效果:

  <div class="box">透明区域<div>

在样式表中的代码为:

.box

{

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

}

opacity:0;/*为全透明*/

opacity:1;/*为不透明*/

CSS阴影效果(Box-shadow)用法

格式与布局 CSS阴影效果(Box-shadow)用法的更多相关文章

  1. css样式表:样式分类,选择器。样式属性,格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  2. css样式,边界和边框,格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

  3. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  4. 关于CSS格式与布局中的基础知识的简单操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  6. css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)

    一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

  7. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  8. 9月11日上午HTML有序列表、无序列表、网页的格式和布局

    样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...

  9. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

随机推荐

  1. Mysql添加外键约束

    简单说一下使用外键的好处 1.完整性约束 比如:用户表中有字段 用户编号(id) , 名称(username)设备表中有字段 设备编号(id) , 设备名称(devicename) 设备属于的用户编号 ...

  2. VIM学习笔记

    参考: http://linux.chinaunix.net/techdoc/beginner/2009/12/20/1150108.shtml VIM命令大全 光标控制命令 命令           ...

  3. gdb调试小结

    gdb最基本的调试命令. 1以调试程序test.cpp为例: 进入调试环境 gdb test 2.b 12 在文件的第12行设置断点. 删除断点: info b 列出所有的断点信息 (gdb) inf ...

  4. Streaming data from Oracle using Oracle GoldenGate and Kafka Connect

    This is a guest blog from Robin Moffatt. Robin Moffatt is Head of R&D (Europe) at Rittman Mead, ...

  5. 第二个div+css前端项目

    先展示效果图: 为了看全景,截图有点挫.实际效果比这个好一点. 通过 text-overflow可以隐藏多出的文字,而不会吧把div撑开或者溢出. html代码: <!DOCTYPE html& ...

  6. log4j.xml 日志只输出指定类配置

    1.日志增加appender 指定日志生成时间.格式.间隔时间. 2.category指定哪些或哪个类日志生成在文件中. 3.自定义logger避免不要将userBehavior定义到root中避免继 ...

  7. MongoDB 入门之安装篇

    前言:MongoDB 在各 OS 上的安装比较简单,此文章只用来记录,不考虑技术深度. 一.Ubuntu 导入 MongoDB 公钥,添该软件源文件,更新源列表 sudo apt-key adv -- ...

  8. WPF拖放功能实现zz

    写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放 ...

  9. JQuery validate验证 自定义

    http://www.w3cschool.cc/jquery/jquery-plugin-validate.html http://blog.163.com/zhao_jinggui/blog/sta ...

  10. CF# 334 Alternative Thinking

    A. Alternative Thinking time limit per test 2 seconds memory limit per test 256 megabytes input stan ...