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

小咪咪 2023-09-29 23:50 4阅读 0赞

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

<!DOCTYPE html>
    <html>
    
    <head>
      <title>个人博客主页</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      
      <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定义了滚动条的样式和动画效果。

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