热门标签 | 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初探


推荐阅读
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
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社区 版权所有