Css、javascript、dom(一)
一:Css
1.1:position定义和用法
position 属性规定元素的定位类型。
可能的值
值 | 描述 |
---|---|
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
查看完整代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">.box {border:1px solid #f60; width:100px; height:100px; margin:0 auto;-webkit-border-radius:50px;-moz-border-radius:50px;-o-border-radius:50px;border-radius:50px;}</style> </head> <body><div style="position: relative;width: 500px;height: 300px;border: 2px solid red;margin:0 auto"><div style="position: absolute;width: 50px;height: 50px;background-color: black;left: 0;bottom: 0"></div><div style="position: absolute;width: 50px;height: 50px;background-color: blue;right: 0;bottom: 0"></div><div style="position: absolute;width: 50px;height: 50px;background-color: red;right: 0;top: 0"></div><div style="position: absolute;width: 50px;height: 50px;background-color: darkgoldenrod;top: 0;bottom: 0"></div><div class="box" style="position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;"></div></div> </body> </html>
position
二:Dom
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.hide{display: none;}.c1{position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.6;z-index: 9;}.c2{width: 500px;height: 400px;background-color: white;position: fixed;left: 50%;top: 50%;margin-left: -250px;margin-top: -200px;z-index: 10;}</style> </head> <body style="margin: 0"><div><input type="button" value="添加" onclick="ShowModel()"/><input type="button" value="全选" onclick="ChooseAll()"/><input type="button" value="取消" onclick="CancleAll()"/><input type="button" value="反选" onclick="ReverseAll()"/><table><thead><tr><th>选择</th><th>主机名</th><th>端口</th></tr></thead><tbody id="tb"><tr><td><input type="checkbox" /></td><td>1.1.1.1</td><td>10</td></tr><tr><td><input type="checkbox" /></td><td>1.1.1.2</td><td>20</td></tr><tr><td><input type="checkbox" /></td><td>1.1.1.3</td><td>30</td></tr></tbody></table></div><div id="i1" class="c1 hide"></div><div id="i2" class="c2 hide"><p><input type="text" /></p><p><input type="text" /></p><p><p><input type="button" value="取消" onclick="HideModel();" /></p><p><input type="button" value="确定" /></p></p></div><script>function ShowModel() {document.getElementById('i1').classList.remove('hide');document.getElementById('i2').classList.remove('hide');}function HideModel() {document.getElementById('i1').classList.add('hide');document.getElementById('i2').classList.add('hide');}function ChooseAll() {var tbody = document.getElementById('tb');var tr_list = tbody.children;for(var i=0;i<tr_list.length;i++){var current_tr = tr_list[i];var checkbox = current_tr.children[0].children[0];checkbox.checked = true;}}function CancleAll() {var tbody = document.getElementById('tb');var tr_list = tbody.children;for(var i=0;i<tr_list.length;i++){var current_tr = tr_list[i];var checkbox = current_tr.children[0].children[0];checkbox.checked = false;}}function ReverseAll() {var tbody = document.getElementById('tb');var tr_list = tbody.children;for(var i=0;i<tr_list.length;i++){var current_tr = tr_list[i];var checkbox = current_tr.children[0].children[0];if(checkbox.checked) {checkbox.checked = false;}else {checkbox.checked = true;}}}</script></body> </html>
模态对话框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.hide{display: none;}.item .header{height: 35px;background-color: #2459a2;color: white;line-height: 35px;}</style> </head> <body><div style="height: 48px"></div><div style="width: 300px"><div class="item"><div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div><div class="content"><div>内容1</div><div>内容1</div><div>内容1</div></div></div><div class="item"><div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div><div class="content hide"><div>内容2</div><div>内容2</div><div>内容2</div></div></div><div class="item"><div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div><div class="content hide"><div>内容3</div><div>内容3</div><div>内容3</div></div></div><div class="item"><div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div><div class="content hide"><div>内容4</div><div>内容4</div><div>内容4</div></div></div></div><script>function ChangeMenu(nid){var current_header = document.getElementById(nid);var item_list = current_header.parentElement.parentElement.children;for(var i=0;i<item_list.length;i++){var current_item = item_list[i];current_item.children[1].classList.add('hide');}current_header.nextElementSibling.classList.remove('hide');}</script> </body> </html>
后台管理
转载于:https://www.cnblogs.com/manger/p/6061700.html
Css、javascript、dom(一)相关推荐
- 前端代码 (html css JavaScript DOM JSON)
HTML 是超文本标记语言.用来完成一个静态网页. 结构: 由大量的标签组成的. 标签都是成对儿出现的 入门案例 <!DOCTYPE html> <!-- 文档声明 --> ...
- Dhtml Html Css JavaScript Dom
DHTML Dhtml是动态的html,是将Html Css Dom Javascript这四种技术进行融合产生的. Html: 将数据进行封装. Dom: 将标签封装成对 ...
- 六、前端开发-JavaScript DOM
六.前端开发语言体系-JavaScript DOM 文章目录 六.前端开发语言体系-JavaScript DOM JavaScript DOM DOM简介 DOM方法 DOM事件 DOM事件监听器 D ...
- JavaScript Dom编程艺术
当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...
- [JavaScript] DOM操作技术
1. 动态脚本 使用<script>元素可以向页面中插入JavaScript代码,一种方式是通过src属性包含外部文件,另一种方式是用这个元素本身来包含代码.动态脚本指在页面加载时不存在, ...
- 高性能JavaScript DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和 JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间 ...
- HTML,CSS,JavaScript学习笔记--导航
陆陆续续花了一个月的时间,把前端三大件HTML,CSS,JavaScript的基本语法学完了,感觉还是收益颇丰的.但是其中的知识远远不止这些,以后学习的过程中在进行补充吧. HTML,CSS学习笔记 ...
- Javascript——DOM编程
Javascript--DOM编程 基本概述 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语 ...
- JavaScript DOM编程艺术学习笔记(一)
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术第一章:JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
最新文章
- SpringMVC中使用Interceptor拦截器
- dea工具debug断点红色变成灰色
- 初识MQ--mq常见技术介绍
- python写日志文件_Python logging日志模块 配置文件方式
- 面向.NET开发人员的Dapr——状态管理
- matplotlib plt.plot
- BZOJ 2660 (BJOI 2012) 最多的方案
- Android 8.0(30)--- 应用快捷方式(ShortcutManager)的使用
- Java比较两个对象属性值变化情况,用于记录日志使用
- string StartsWith 方法 Https
- windows 编写的硬件驱动_黑科技or大势所趋?谈谈手机GPU驱动升级那点事
- class反编译软件,超级好用
- NLP - 结巴分词 词云
- html手机表白弹窗,怎么制作抖音弹窗表白代码 制作抖音弹窗表白代码的教程
- python输入月份判断天数用函数的方法,python 月份天数
- 今日早报 每日精选12条新闻简报 每天一分钟 知晓天下事 6月29日
- Android动画之 Alpha与Translate结合使用
- SpringBoot掌握的差不多了,就剩下一个Actuator没搞定了,本文详细来介绍!!!
- 台湾POWEREX电源拆解测试,告诉发烧友什么叫专业
- 在 macOS 中如何使用 XPC 实现跨进程通讯?
热门文章
- arrays中copyof复制两个数组_Java教程分享之数组知识梳理
- Connected to the target VM, address: '127.0.0.1:60885', transport: 'socket'
- php数量百分比,mysql PHP行数+百分比
- wps中下划线怎么也去不掉_黑头究竟怎么形成的?为什么总是去不掉?那是因为你用错方法...
- 目标检测(十三)--MultiPathNet
- php 文件上传框架,Laravel框架实现文件上传的方法分析
- C语言:从键盘中输入字符串,追加填写到指定文件中
- android 虚拟经纬度_Android原生方式获取经纬度
- 【数据库原理实验(openGauss)】 安全性控制
- Hive 存储格式入门