个人网站
欢迎来到我的个人网站！我是一位热爱编程的开发者，希望通过这个网站分享我的知识和经验。
页面结构
网站采用了响应式设计，使用CSS Grid和Flexbox布局，使得在不同设备上都能有良好的显示效果。主要由以下几个部分组成：
.hy-target:设置容器的最大宽度为1200px。.hy-relative:设置相对定位。.hy-wrapper:设置容器的溢出隐藏，并设置绝对定位，使其覆盖整个页面。.hy-wrapper *:设置盒模型为border-box,消除浏览器默认的padding和border。.hy-fade .hy-box:设置透明度渐变动画。
HTML结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="hy-target">
<div class="hy-relative">
<div class="hy-wrapper">
<!-- 这里放置页面内容 -->
</div>
</div>
</body>
</html>
CSS样式
”`css
.hy-wrapper { overflow: hidden; position: absolute; top: 0; left: 0; height: 100%; } .hy-wrapper * { box-sizing: border-box; } .hy-fade .hy-box { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; -webkit-transition-property: opacity; /* Safari / -o-transition-property: opacity; / Opera / -moz-transition-property: opacity; / Firefox / } .hy-box.hy-fade-show { opacity: var(–opacity,1); / IE9+ / } .hy-fade-hide::before, / for modern browsers / .no-fade::before, / for IE6,7,8, and earlier / .hy-fade[data-animate]:not([data-animate=‘hide’])::before, / for modern browsers / .no-fade[data-animate]:not([data-animate=‘hide’])::before, / for IE6,7,8, and earlier /{ content: “; / required */ / ‘data-animate’ is the animation trigger ‘data-animate/ */ / data—/ data/ data/ data*/
