【一、项目背景】
随着HTML5 CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。
【二、项目分析】
想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。
2024年12月07日
【一、项目背景】
随着HTML5 CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。
【二、项目分析】
想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。
2024年12月07日
将网页中的PPT的各个页面截图下载到本地。
1）打开控制台查看元素，可以发现PPT的页面是用DOM元素实现的。基于这个情况，首先想到的是使用html2canvas将PPT页面截图保存到本地。
2024年12月07日
基于css3新属性transform，实现3d立方体的旋转
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性
从而通过改变transform：rotate属性值来达到3d立方体旋转的效果
HTML代码块：
2024年12月07日
Web 开发主要会用到 HTML 和 CSS，而可视化则较少涉及 HTML 和 CSS。可视化更多地要同浏览器的 Canvas、SVG、WebGL 等其他图形 API 打交道。
Web 开发着重于处理普通的文本和多媒体信息，渲染普通的、易于阅读的文本和多媒体内容；可视化开发则着重于处理结构化数据，需要深入渲染引擎层，从而控制细节，让浏览器渲染出各种相对复杂的图表和图形元素。
可视化用一句话来说，本质上就是将数据信息组织起来后，以图形的方式呈现出来。
2024年12月07日
我们继续来讲下页面对象的定位方法，本文主要讲css_selector的定位方法。那么讲css_selector其实和xpath一样，因为很多时候我们要定位的页面对象会没有id、name、class等属性，甚至也无法通过link text的方法定位，所以我们就需要用到css_selector，css_selector对于所有的对象定位都是适用的！1、find_element_by_css_selectorcss_selector定位其实和xpath是类似的，只是写法有一些差异而已，它也有绝对路径和相对路径的定位方法。
2024年12月07日
import React, {useState} from 'react';
import './NavBar.css';
const NavBar = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleNavbar = () => {
setIsOpen(!isOpen);
};
return (
<nav className={`navbar ${isOpen ? 'open' : ''}`}>
<div className='nav-container'>
<h1>LOGO</h1>
<div className='menu-icon' onClick={toggleNavbar}>
<div className={`bar ${isOpen ? 'open' : ''}`}></div>
<div className={`bar ${isOpen ? 'open' : ''}`}></div>
<div className={`bar ${isOpen ? 'open' : ''}`}></div>
</div>
<ul className={`nav-links ${isOpen ? 'open' : ''}`}>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
)
}
export default NavBar;2024年12月07日
话说搞安全的大佬们都非常忙，自己在一步一步成长中无暇顾及其他琐碎的事情，比如让猎头注意到各位大佬。如何让猎头和大厂注意到自己呢？第一、提高自己在整个行业的曝光度；第二、定时刷新自己的简历；还有第三，第四等等，各位发挥脑洞。针对第一点，很多大佬各有自己的办法，但是针对第二点其实我们有全自动化的解决方案，可以为自己相对地节约点时间。今天就带来自己动手打造工具系列之自动刷新简历。
2024年12月07日
不用下载任何档案，只要将CSS代码加入网站即可轻松套用漂亮平铺式背景！
如果对于SVG格式有些了解应该知道，SVG就是所谓的以代码画图，也因此不用再下载额外图片档案，只要将产生的代码加到自己网站CSS就能出现背景效果。
站点名称：Hero Patterns
网站连接：http://www.heropatterns.com/
2024年12月07日
项目上有个需求，html页面展示多个视频，视频的提供方式是一个html页面，需要将视频页面使用iframe的方式嵌入到展示页面。
html视频页面（video.html），内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.1" />
<title>视频播放页面</title>
<style>
*,body,html{
margin: 0;
padding: 0;
overflow: hidden;
line-height: 0px;
}
body{
background-color: rgb(248, 244, 244);
}
</style>
</head>
<body>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>