HTML、css、javascrip个人博客主页设计

最新推荐文章于 2024-09-03 01:28:26 发布

高山莫衣

最新推荐文章于 2024-09-03 01:28:26 发布

阅读量525

点赞数 1

分类专栏：小工具开发文章标签： css html css3

原创作品，共同进步！

本文链接：https://blog.csdn.net/AdamCY888/article/details/129688373

版权

小工具开发专栏收录该内容

5 篇文章 1 订阅

订阅专栏

此示例展示了如何使用HTML、CSS和JavaScript创建一个具有学术风格的个人博客主页，包括自定义滚动条效果、文章列表和链接样式。博客设计包含文章标题、简介、阅读更多链接以及研究领域和联系方式的展示。

摘要由CSDN通过智能技术生成

以下是一个使用HTML、CSS和JavaScript编写的具有学术风格的个人博客主页示例：

<!DOCTYPE html>
<html>

<head>
  <title>个人博客主页</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 导入Google字体 -->
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">

  <style>
    /* 背景样式 */
    body {
      background-color: #f2f2f2;
      font-family: 'Lato', sans-serif;
      font-size: 16px;
      line-height: 1.5;
      color: #333333;
    }
    
    /* 标题样式 */
    h1, h2, h3 {
      margin-top: 0;
      margin-bottom: 20px;
      font-weight: 700;
      text-align: center;
    }
    
    h1 {
      font-size: 40px;
    }
    
    h2 {
      font-size: 32px;
    }
    
    h3 {
      font-size: 24px;
    }
    
    /* 内容区样式 */
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 50px;
      background-color: #ffffff;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* 链接样式 */
    a {
      color: #333333;
      text-decoration: none;
      border-bottom: 1px solid #333333;
    }
    
    a:hover {
      color: #666666;
      border-bottom: 1px solid #666666;
    }
    
    /* 图片遮罩效果 */
    .post-image {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
    }
    
    .post-image img {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .post-image .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
    }
    
    .post-image:hover .overlay {
      opacity: 1;
    }
    
    .post-image .overlay-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #ffffff;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    
    /* 滚动条样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    
    ::-webkit-scrollbar-track {
      background-color: #f2f2f2;
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: #cccccc;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background-color: #999999;
    }
  </style>
</head>

<body>

  <div class="container">
  
    <h1>个人博客</h1>
    
    <p>欢迎来到我的个人博客！我是一名研究者，专注于<a href="#">领域1</a>和<a href="#">领域2</a>的研究。本博客将分享我的最新研究成果、思考和见解。</p>
    
    <h2>最新文章</h2>
    
    <div class="post-list">
    
      <div class="post-item">
      
        <div class="post-image">
          <img src="https://picsum.photos/800/400?random=1">
          <div class="overlay">
            <div class="overlay-text">文章标题1</div>
          </div>
        </div>
        
        <p>这里是文章1的简介。</p>
        
        <div class="read-more">
          <a href="#">阅读更多</a>
        </div>

  </div>
  
  <div class="post-item">
  
    <div class="post-image">
      <img src="https://picsum.photos/800/400?random=2">
      <div class="overlay">
        <div class="overlay-text">文章标题2</div>
      </div>
    </div>
    
    <p>这里是文章2的简介。</p>
    
    <div class="read-more">
      <a href="#">阅读更多</a>
    </div>
  
  </div>
  
  <div class="post-item">
  
    <div class="post-image">
      <img src="https://picsum.photos/800/400?random=3">
      <div class="overlay">
        <div class="overlay-text">文章标题3</div>
      </div>
    </div>
    
    <p>这里是文章3的简介。</p>
    
    <div class="read-more">
      <a href="#">阅读更多</a>
    </div>
  
  </div>

</div>

<h2>研究方向</h2>

<ul>
  <li><a href="#">领域1</a></li>
  <li><a href="#">领域2</a></li>
  <li><a href="#">领域3</a></li>
</ul>

<h2>联系方式</h2>

<p>如果您有任何疑问或建议，请随时与我联系：</p>

<ul>
  <li>Email：<a href="mailto:youremail@example.com">youremail@example.com</a></li>
  <li>Twitter：<a href="#">@yourtwitterhandle</a></li>
</ul>
</div>

<script> // 自定义滚动条效果 const container = document.querySelector('.container'); container.addEventListener('scroll', function() { const scrollTop = container.scrollTop; const scrollHeight = container.scrollHeight; const clientHeight = container.clientHeight; const scrollbar = document.querySelector('.scrollbar'); const progress = document.querySelector('.progress'); const heightRatio = clientHeight / scrollHeight; const topOffset = scrollTop * heightRatio; const height = clientHeight * heightRatio; scrollbar.style.top = ${topOffset}px; scrollbar.style.height = ${height}px; progress.style.height = ${(scrollTop / (scrollHeight - clientHeight)) * 100}%; }); </script>

<div class="scrollbar"> <div class="progress"></div> </div>

</body>

</html>

在这个示例中，我们添加了一些新的HTML和CSS代码来实现更丰富的页面设计和交互效果。

在最新文章部分，我们使用一个名为"post-list"的<div>元素，包含三个名为"post-item"的子元素。每个"post-item"包含一张图片、标题、简介和"阅读更多"链接。图片具有一个鼠标悬停时出现黑色半透明遮罩的效果，通过使用"post-image"、"overlay"和"overlay-text"三个子元素的相对定位和绝对定位实现。阅读更多链接的样式也被自定义为带下划线的无边框按钮。

在滚动条部分，我们使用JavaScript为页面添加自定义滚动条效果。首先，我们获取容器元素的scrollTop、scrollHeight和clientHeight属性，计算出滚动条的位置和大小，并设置给名为"scrollbar"的<div>元素和其中的"progress"子元素。此外，我们还通过CSS定义了滚动条的样式和动画效果。

这个示例仅仅作为参考，实际上根据具体的博客主题和需求，需要更加丰富的功能和样式，可以根据自己的需求进行修改和定制。