HTML学习笔记 css定位(静态,相对,固定,绝对布局)偏移案例 第十二节 (原创) 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位(静态,相对,固定,绝对布局)小广告案例</title> <link rel="stylesheet" href="tzy.css" type="text/css"> </head> <body> <div id="position1"></div> <script> for(var i=0;i<10;i++){ document.write(i+"<br/>"); } </script> <div id="position2"></div> <script> for(var i=10;i<20;i++){ document.write(i+"<br/>"); } </script> <div id="position3"></div> <script> for(var i=20;i<50;i++){ document.write(i+"<br/>"); } </script> <br/><br/><br/><br/><br/> <div id="position4"></div> <script> for(var i=30;i>0;i--){ document.write(i+"<br/>"); } </script> <div id="position5"></div> <div id="position6"></div> </body> </html>
#position1{ width: 100px; height: 100px; background-color: mediumturquoise; position: relative; /*相对布局(无变化)*/ left:2px; /*向左偏移*/ } #position2{ width: 100px; height: 100px; background-color: mediumturquoise; position: absolute; /*绝对布局(无变化)*/ left:10px; /*向左偏移*/ } #position3{ width: 100px; height: 100px; background-color: forestgreen; position: fixed; /*固定布局(无变化)*/ z-index:; /*值大的更靠近用户*/ } #position4{ width: 100px; height: 100px; background-color: mediumturquoise; position: static; /*静态布局(无变化)*/ right: 100px; /*向右偏移100px*/ left:20px; /*向右偏移*/ /*偏移无用*/ } #position5{ width: 100px; height: 100px; background-color: mediumturquoise; position: relative; /*相对布局(无变化)*/ top: 20px; /*向上偏移100px*/ left:20px; /*向左偏移*/ z-index:; /*值大的更靠近用户*/ } #position6{ width: 100px; height: 100px; background-color: coral; position: relative; /*相对布局(无变化)*/ left:10px; /*向左偏移*/ z-index:; /*值大的更靠近用户*/ } /*静态无法被控制 其他的都可以*/
HTML学习笔记 css定位(静态,相对,固定,绝对布局)偏移案例 第十二节 (原创) 参考使用表的更多相关文章
- [CSS3] 学习笔记-CSS定位
页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...
- HTML学习笔记 css定位浮动及瀑布流案例 第十三节 (原创) 参考使用表
#fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- Windows phone 8 学习笔记(8) 定位地图导航
原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(基本样式4)--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
随机推荐
- 如何修改select标签的默认下拉箭头样式?
对于一般的项目而言,select标签在浏览器中表现出来的默认样式也不算丑,但是一次项目中,项目经理却要求对select标签本身进行样式修改,美化其下拉小箭头的样式.我思考和尝试了许多方法,最终得到一种 ...
- Message Queuing(MSMQ)
一.前言 MicroSoft Message Queuing(微软消息队列)是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可以分布于相连的网络空间中的任 ...
- HDU1423 LCIS
1,先离散化,然后DP: 注意这个解法中,dp[i][j][k]代表a序列中前i个和b序列中前j个数结尾为k或小于k时的最大. 但是由于i是单增(一次1->n),而j反复变化(多次1->m ...
- zoj 2022
分析: 组合数学类型的题目. 正常的话可能会去分解1~N数里面有几个5和2,但是这样的复杂度为O(nlogn). 其实有更巧妙的办法,可以把问题分解成子问题. 可以发现N!末尾的0与1~N中有几个5的 ...
- jdbc-日期格式的转换及代码示例
时间类型相互转换 把数据库的三种时间类型赋给java.util.Date,基本不用转换,因为这是把子类对象给父类的引用,不需要转换. java.sql.Date date = - java.ut ...
- html加载时事件触发顺序
一般情况下页面的响应加载顺序时,域名解析-加载html-加载js和css-加载图片等其他信息. jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对D ...
- c# 【MVC】WebApi开发实例
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using S ...
- Linux硬链接和软连接详解
硬链接: 硬链接是通过索引节点inode来进行链接的(关于inode,http://www.cnblogs.com/ZGreMount/p/7653307.html).在Linux(ext2,ext3 ...
- Babylon.GUI官方文档翻译
Babylon.GUI是一个基于Babylon.js的WebGL库,可以用来在WebGL3D场景中生成交互性UI与动态纹理.相比于html ui,Babylon.GUI的功能较为简化,但使用起来也更加 ...
- eclispe中安装hibernate插件
用eclispe玩ee的朋友,写配置文件的时候没有提示非常苦恼,而配置dtd文件还是没有得到解决,最后试了试安装插件解决了问题 地址:http://download.jboss.org/jbossto ...