这是一个个人网站示例

欢迎访问我的个人网站

欢迎来到我的个人网站！在这里，你可以了解到我的兴趣爱好、工作经历和个人成就。请随意浏览，希望你会喜欢这个网站。

页面布局和样式

  • 为了让页面内容自适应不同的屏幕尺寸，我在body标签中设置了最小宽度为1200px。同时，我为常用的HTML标签(如div、h2、h3等)设置了box-sizing: border-box,以确保元素的宽度包括边框和内边距，而不是将它们添加到总宽度。
  • 在.block-main类中，我设置了容器的宽度为1200px,并将其居中显示。这使得页面内容在不同屏幕尺寸下都能自适应。
  • 为了实现清除浮动效果，我在.block-clearfix伪元素中设置了一个空的内容块，并设置了display: block; clear: both;属性。
  • 我使用.block-fr和.block-fl类分别设置了左侧浮动和右侧浮动的样式。
  • 在.block-info类中，我设置了内部元素的外边距，以便在需要时提供一定的空白间距。在.block-info-left和.block-info-right类中，我分别为左侧和右侧元素设置了固定宽度和外边距，以便在不同屏幕尺寸下保持适当的布局。
  • 我还为.block-title类设置了一个固定的宽度和黑色字体颜色。

图片优化

为了提高图片加载速度和用户体验，我使用了懒加载技术。当用户滚动到图片位置时，图片才会被加载并显示出来。这样可以减少页面加载时间，提高用户的浏览体验。