网页制作之html基础学习4-格式与布局
1、position:fixed
锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗
例:
<head> <title>123</title> <style type="text/css"> #a { border:5px solid blue; width:100px; height:100px; margin:10px; background-color:#0F3; left:30px; bottom:20px; position:fixed; } </style> </head> <body> <div id="a">a </div> </body>
显示如下
<!--[endif]-->
2、position:absolute
1)、外层没有position:absolute(或relative);,那么div相对于浏览器定位,如下图中b(距离浏览器的右边框50像素,距离浏览器的下边框20像素)。
2)、外层有position:absolute(或relative);,那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框20像素)。
代码:
<head> <title>123</title> <style type="text/css"> .b { border:5px solid blue; width:100px; height:100px; margin:10px; background-color:#0F3; right:50px; bottom:20px; position:absolute; /**/ } .c { border:2px solid red; width:400px; height:200px; } </style> <style type="text/css"> .d { border:2px solid red; width:400px; height:200px; position:absolute; } </style> </head> <body> <div class="c">c <div class="b">b </div> </div> <div class="d">d <div class="b">bb </div> </div> </body>
显示如下:
3、position:relative
相对于默认位置的移动。如下图,a在用relative移动前的位置,aa为用relative移动后的位置,aa距原位置上部间距50像素,距原位置左边距20像素。
代码:
<
head> <title>123</title> <style type="text/css"> #a { border:5px solid blue; width:100px; height:100px; margin:10px; background-color:#0F3; position:fixed; } #aa { border:5px solid blue; width:100px; height:100px; margin:10px; background-color:#0F3; left:20px; top:50px; position:relative; } </style> </head> <body> <div id="a">a </div> <div id="aa">aa </div> </body>
显示如下:
4、分层(z-index)
在Z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。
在上面relative的示例中,我们看到aa盖住了a,这是因为后写代码的会盖住前面的,那么在不改变代码顺序的情况下如何让a盖住aa,如下:
<head> <title>123</title> <style type="text/css"> .a { border:5px solid blue; width:100px; height:100px; margin:10px; background-color:#0F3; position:fixed; z-index:2; /*这里做一下修改,默认情况下,都是第1层*/ } .aa { border:5px solid blue; width:100px; height:100px; margin:10px; background-color:#0F3; left:20px; top:50px; position:relative; } </style> </head> <body> <div class="a">a </div> <div class="aa">aa </div> </body> 显示如下:
5、float:left,right
<div style="clear:both"></div> 截断流;
附:
overflow:hidden; /*超出范围时隐藏;scroll,超出范围时出滚动条。*/
超链接样式:
<style type="text/css">
a:link /*一般链接*/
{
color:blue;
}
a:visited /*访问过的链接的格式*/
{
color:green;
}
a:hover /*设置鼠标指向链接时的形式*/
{
color:red;
}
</style>
cursor:pointer 鼠标指到上面时的形状。
© 版权符号©
半透明效果
<div class="box">透明区域</div>
//样式表中代码:
.box
{
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
}
布局的三种方式:
1.自然布局
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点(左上角)为参照点。
由于外层是position:relative,所以里层是absolute的话,则会以外层的左上角为位移参考对齐。当然外层只写position:relative,写上left,top这两个值,则表示以:以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是,只是一个position:absolute;外层没有position:relative,这时会找寻那个点为参考呢?这时候的原则是:如果某父级元素中有relative者,则以某父级元素为参考原点,如果没有position:relative,则以body为参考原点。如果position:absolute外层没有relative时,这两个布局上是没有区别的。
当然最后一种情况是:外层是:position:absolute;里边是position:relative,那会是什么情况?按着原来的原则,absolute会参考body为布局原点,relative会参考他本来应该在的位置为布局原点,这时候其实就是参考外层左上角为布局原点。
其它的要看实际情况而定。
网页制作之html基础学习4-格式与布局的更多相关文章
- 网页制作之html基础学习1-简介
学习网页制作主要分为三大块 1.HTML 超文本标记语言( 全称:Hyper Text Markup Language) 专门编辑静态网页 2.CSS 网页美化:是HTML控制的样式 ...
- 网页制作之html基础学习6-CSS浏览器兼容问题
初学html和css时,每天切图,总会遇到很多浏览器兼容性问题.最近一直关注移动平台开发,就html和css来说,不用考虑那么多浏览器兼容性问题.到现在,以至于很多浏览器兼容性几乎忘光了.今天把以前总 ...
- 网页制作之html基础学习3-css样式表
样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /* */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表 和 ...
- 网页制作之html基础学习2-标签
一.html结构组成 <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> & ...
- 网页制作之html基础学习5-background-position用法
我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body.td.p等的背景,道理一样. 代码: div{ background:#FFF url(image) no-rep ...
- Html JavaScript网页制作与开发完全学习手册
Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...
- 零基础学习java------39---------json格式交互,Restful(不懂),静态资源映射,SSM整合(ssm整合思想,application.xml文件详解(声明式事务管理),)
一. json格式交互(知道) 1 . 回顾ajax基本语法 $.ajax({ url:"", // 请求的后台路径 data:{"":"" ...
- IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...
- 学会网页制作,web app开发,必须先从语法基础开始学习
做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果. 前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言. ...
随机推荐
- Servlet、SPringMVC、Struts等防止表单反复提交的多种处理方法
第一种处理方法(非拦截器): 眼下这样的方法不建议,由于JSP规范不建议写JAVA代码.这样的能够方便另外一种处理方法的理解,另外一种方法引入拦截器的思想,原理基本一样,模仿Struts的Token机 ...
- 【原】spring boot在整合项目依赖的问题
最近要开发新的项目,就花了几天时间看了下spring boot的相关资料,然后做了一个demo,不得不说开发效率确实很快,几行注解就完成了事务,aop,数据库等相关配置:但由于先前习惯了spring ...
- JavaSE学习总结第15天_集合框架1
15.01 对象数组的概述和使用 public class Student { // 成员变量 private String name; private int age; // 构造方法 publ ...
- nvl与 is not null的区别等
Oracle中: Select Aae140 From Ab07 Where Aab001 = Pi_Aab001 And Aae002 = Pi_Aae002 ) 1 nvl(aaz288,0)&g ...
- 高级UNIX环境编程13 守护进程
linux下,keventd守护进程为内核中运行的执行的函数提供进程上下文 bdflush,kupdated将高速缓存中的数据冲洗到磁盘上
- python类继承
面向对象的编程带来的主要好处之一是代码的重用,实现这种重用的方法之一是通过 继承 机制.继承完全可以理解成类之间的 类型和子类型 关系. 假设你想要写一个程序来记录学校之中的教师和学生情况.他们有一些 ...
- JavaEE Tutorials (5) - 运行企业bean示例
5.1cart示例56 5.1.1业务接口57 5.1.2会话bean类57 5.1.3@Remove方法61 5.1.4辅助类61 5.1.5运行cart示例615.2一个单例会话bean示例:co ...
- wiki oi 3115高精度练习之减法
题目描述 Description 给出两个正整数A和B,计算A-B的值.保证A和B的位数不超过500位. 输入描述 Input Description 读入两个用空格隔开的正整数 输出描述 Outpu ...
- SQL Server SQL高级查询语句小结(转)
--select select * from student; --all 查询所有 select all sex from student; --distinct 过滤重复 select disti ...
- SSH框架入门学习之二(spring)
Spring也是一个开源框架,我在学习Spring的时候,认为最重要的几点是:IOC(控制反转).AOP(面向切面)和容器概念. 详细的教程还请大家去看网上的视频,这里贴一个小Demo以供学习. (前 ...