热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

day15CSSJSDOM初探

居中line-hight是上下text-line是左右实现一个返回顶部的功能:1先写好CSS2写动作JS写一个悬浮菜单:
居中  line-hight  是上下
         text-line  是左右
 
 实现一个返回顶部的功能:
1 先写好CSS
技术分享

2 写动作JS

技术分享

写一个悬浮菜单:



    
    
    


    
此处为菜单
此处为内容

效果:

技术分享

上下滚动菜单始终固定在顶部

实现一个点赞按钮的效果:



    
    


    

效果:

技术分享

 实现一个遮罩层,就是平时的弹出选择框,即模态框:

加透明度:
opacity  设置遮罩层的透明度  0-1 的范围
技术分享
三层  
设置一个值,谁的大谁在上面:
z-index

 技术分享

实践:



    
    


    
姓名
密码
hehhehhehe

效果:

技术分享

图片的问题:
overflow
可以设置隐藏或者自动生成滚动条

 技术分享

设置上右下左的间隔:

技术分享

伪类:

鼠标移到后应用:
当鼠标移到当前标签上时,就会使得下面的css生效
hover

 技术分享

实践:



    
    
    


    
LOGO 段子 1024 42区
ddddd

技术分享

 技术分享

渐变色 就是一个非常细的图片一直自动堆叠

高度增加 也是自动堆叠
控制图片怎么堆叠,使用下面的

 技术分享

其实图标都是只用一个图,然后通过调整

就能显示一个图片不同的位置

实践:

    

技术分享

显示不同位置: 

    

技术分享

相对的位置,如点赞的图案:

 技术分享

有个问题,图片会挡住输入,修改后就好了

技术分享

实践:



    
    


    
账号:
这是密码:

技术分享

 
开始 Javascript

一门独立的语言
和java没半毛钱关系
 
技术分享

 helloworld

 技术分享

 写代码的位置,两种形式:

1在html 文件中:

技术分享

 2 单独文件,引入到html文件中:

技术分享

先执行js  从上往下读运行
 
js没有完成之前 网页就一直等待js完成,这样对用户就不友好
 
解决办法就是把js放在html尾部
写在body 内部的最下面:

 技术分享

技术分享

技术分享

技术分享

技术分享

写的时候先写 var
斟酌以后确实是全局,再去掉var

 技术分享

技术分享

 技术分享

定义函数:

 技术分享

在控制台打印日志:
console.log(1)


根据id找到内容:

技术分享

获取内容:

 技术分享

 
获取子列表:
技术分享

拼接字符串:

 技术分享

做一个滚动条效果:

技术分享

 技术分享

实践:



    
    
    


    
欢迎老男孩莅临指导 

效果:

技术分享

技术分享

技术分享

 技术分享

技术分享

技术分享

 技术分享

技术分享

技术分享

技术分享

join 添加分隔符

 技术分享

 循环:

技术分享

技术分享

 技术分享

 技术分享

技术分享

DOM
做了一个动作就是把文档转换为一个对象

 技术分享

技术分享

技术分享

改变数据:
document.getElementById(‘i1‘).innerText = ‘new数据‘
 
技术分享

技术分享

技术分享

 技术分享
 技术分享

实现模态框:



    
    
    


    

效果:

技术分享

 
实现一个全选和取消的功能:
 技术分享

技术分享

分号必须要加,因为线上的时候会把js文件成为一行,必须用分好来断句, 生成一行就是为了节约空间,有专门的压缩工具

实现一个后台管理的简单页面,需要点击菜单显示菜单,可以全选,反选,可以点击有模态框效果:



    
    
    


    
LOGO
美女

IP:
主机:

选择 主机 IP 备注
web101 192.168.8.5
web102 192.168.8.6
web103 192.168.8.7
web104 192.168.8.8
web105 192.168.8.9

效果:

技术分享

 
 
 
 
 
 

day15 CSS JS DOM初探


推荐阅读
  • 利用树莓派畅享落网电台音乐体验
    最近重新拾起了闲置已久的树莓派,这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多,我决定将其重新启用。恰逢落网电台进行了改版,回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐,便萌生了同样的想法。通过一番调试,终于实现了在树莓派上流畅播放落网电台音乐的功能,带来了全新的音乐享受体验。 ... [详细]
  • HDU1176:免费馅饼问题的动态规划解法分析
    题目“免费馅饼”通过动态规划方法进行了解析。该问题的时间限制为 Java 2000ms 和其他语言 1000ms,内存限制为 Java 65536K 和其他语言 32768K。本文详细探讨了如何利用动态规划算法高效求解此问题,并对算法的时间复杂度和空间复杂度进行了深入分析。此外,还提供了具体的实现步骤和代码示例,帮助读者更好地理解和应用这一方法。 ... [详细]
  • 虚拟机网络设置与数据库远程连接优化指南
    本文针对个人计算机上虚拟机网络配置与数据库远程连接的问题,提供了一套详细的优化指南。在探讨远程数据库访问前,需确保网络配置正确,特别是桥接模式的设置。通过合理的网络配置,可以有效解决因虚拟机或网络问题导致的连接失败,提升远程访问的稳定性和效率。 ... [详细]
  • 本文详细介绍了 Windows API 中的按钮控件及其应用实例。主要功能包括:1. `CheckDlgButton` 用于更改对话框中按钮的选中状态;2. `CheckRadioButton` 用于设置单选按钮的选中状态。此外,还探讨了按钮控件在实际开发中的多种应用场景,帮助开发者更好地理解和使用这些功能。 ... [详细]
  • C++入门必备:首个博客知识点汇总
    本文总结了C++初学者需要掌握的关键知识点,特别强调了成员类型的区分。其中,protected成员与private成员在本类中的作用相同,但protected成员允许派生类的成员函数访问,而private成员则不允许。此外,文章还介绍了其他重要的C++基础概念,如类的构造函数、析构函数以及继承机制,为初学者提供了一个全面的学习指南。 ... [详细]
  • 在处理遗留数据库的映射时,反向工程是一个重要的初始步骤。由于实体模式已经在数据库系统中存在,Hibernate 提供了自动化工具来简化这一过程,帮助开发人员快速生成持久化类和映射文件。通过反向工程,可以显著提高开发效率并减少手动配置的错误。此外,该工具还支持对现有数据库结构进行分析,自动生成符合 Hibernate 规范的配置文件,从而加速项目的启动和开发周期。 ... [详细]
  • 在遍历集合的过程中,若需根据特定条件对集合进行修改操作,如添加或删除元素,应特别注意避免引发 `ConcurrentModificationException` 异常。例如,在当前场景中,当集合中的对象ID与另一个集合中的对象ID不匹配时,需要向集合中添加新元素。为了避免这一异常,建议使用迭代器的 `remove` 方法或采用线程安全的集合类型,如 `CopyOnWriteArrayList`,以确保操作的安全性和一致性。 ... [详细]
  • 如何在Mac上构建高效的本地服务器环境
    在Mac上构建高效的本地服务器环境,首先需要了解基本步骤:1. 配置目录基础;2. 启动Apache服务;3. 添加自定义文档至本地服务器;4. 查看自定义效果。此外,还可以通过手机或其他电脑访问本机服务器,以确保跨设备的兼容性和调试效果。Mac系统自带的Apache服务为本地开发提供了便捷的工具,本文将详细介绍每个步骤的具体操作方法。 ... [详细]
  • 【Linux进阶指南】第一阶段第三课:体验与部署Ubuntu系统
    在正式踏上Linux学习之旅之前,本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练,你将掌握Ubuntu的基本安装、配置及常用命令,为后续的进阶学习打下坚实的基础。此外,课程还将介绍如何解决常见问题和优化系统性能,帮助你更加高效地使用Ubuntu。 ... [详细]
  • 通过 NuGet 获取最新版本的 Rafy 框架及其详细文档
    为了帮助开发者更便捷地使用Rafy领域实体框架,我们已将最新版的Rafy框架程序集上传至nuget.org,并同步发布了最新版本的Rafy SDK至Visual Studio。此外,我们还提供了详尽的文档和示例,以确保开发者能够快速上手并充分利用该框架的强大功能。 ... [详细]
  • 1. 设置用户密码:使用 `slappasswd` 工具生成加密密码,确保账户安全。具体步骤如下:输入命令 `slappasswd -s NewPassword`,系统将提示重新输入新密码,并生成加密后的哈希值 {SSHA}xxxxxxxxxxxxxxxxx。2. 编写配置文件:编辑 `vildapus` 配置文件,添加必要的用户账户信息,以确保新用户能够顺利登录系统。 ... [详细]
  • 在HDU 1166敌军布阵问题中,通过运用线段树数据结构,可以高效地计算指定区间的敌军数量。该算法不仅能够在限定的时间和内存条件下快速求解,还能够灵活应对动态变化的战场局势,为实时决策提供支持。 ... [详细]
  • 为了向用户提供虚拟应用程序,通常会在基础架构中部署StoreFront或Web Interface。为了确保安全的远程访问,通常需要在DMZ中配置Secure Gateway或Access Gateway。本文详细对比了这两种界面工具的功能特性,包括用户管理、安全性、性能优化等方面,为企业选择合适的解决方案提供了全面的参考。 ... [详细]
  • 掌握Linux Shell核心概念与基础技能,本文详细介绍了文件系统和安全管理中的`chmod`命令。`chmod`命令支持两种模式:符号模式和绝对模式。符号模式使用`ugo`表示用户类别,`rwx`表示权限类型;而绝对模式则通过八进制数值来精确设置不同用户的权限。此外,文章还探讨了其他重要的Shell命令和技巧,帮助读者全面理解和应用Linux环境下的文件管理和安全控制。 ... [详细]
  • 本文详细介绍了使用C++实现插入排序算法的方法,并对其进行了优化。通过具体的代码示例,解释了插入排序的基本原理和优化技巧,包括交换两个元素的函数 `SwapTwo` 的实现。此外,文章还探讨了插入排序的时间复杂度和适用场景,为读者提供了深入理解该算法的全面指南。 ... [详细]
author-avatar
咪了眼的小迷糊
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有