好看的网站html下载代码

ls4.cn • 1 年前 • 346 次点击 • 源码下载
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>网盘按钮</title>  
<style>  
  /* 基础样式 */  
  body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 20px;  
    background-color: #f4f4f4;  
  }  

  .sbtn-container {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
  }  

  .sbtn {  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
    padding: 10px 20px;  
    margin-bottom: 10px;  
    background-color: #4CAF50;  
    color: white;  
    border: none;  
    border-radius: 5px;  
    text-decoration: none;  
    transition: background-color 0.3s ease;  
    cursor: pointer;  
    text-align: center;  
    position: relative;  
  }  

  .sbtn:hover {  
    background-color: #45a049;  
  }  

  .sbtn .ico {  
    width: 20px;  
    height: 20px;  
    margin-right: 5px;  
    background-size: contain;  
    background-repeat: no-repeat;  
    background-position: center;  
  }  

  .sbtn .line {  
    width: 1px;  
    height: 15px;  
    background-color: #ccc;  
    margin: 0 5px;  
  }  

  /* 具体的图标背景，请替换为实际的URL */  
  .sbtn.baidu .ico { background-image: url('baidu-icon-url.png'); }  
  .sbtn.lanzou .ico { background-image: url('lanzou-icon-url.png'); }  
  .sbtn.tianyi .ico { background-image: url('tianyi-icon-url.png'); }  
  .sbtn.aliyun .ico { background-image: url('aliyun-icon-url.png'); }  
  .sbtn.quark .ico { background-image: url('quark-icon-url.png'); }  
</style>  

<body>  

<div class="sbtn-container">  
  <a href="https://pan.baidu.com/s/1GWVyOnUWsOxzHEyJbW3R-w" class="sbtn baidu" title="百度网盘" target="_blank">  
    <i class="ico"></i>  
    <i class="line"></i>  
    百度网盘  
  </a>  
  <a href="https://xiaodao.lanzoui.com/b0dqxok9g" class="sbtn lanzou" title="蓝奏网盘" target="_blank">  
    <i class="ico"></i>  
    <i class="line"></i>  
    蓝奏网盘  
  </a>  
  <a href="https://cloud.189.cn/web/share?code=FbEfaa3IVF3y" class="sbtn tianyi" title="天翼网盘" target="_blank">  
    <i class="ico"></i>  
    <i class="line"></i>  
    天翼网盘  
  </a>  
  <a href="https://www.aliyundrive.com/s/cyv917xyWJC" class="sbtn aliyun" title="阿里云盘" target="_blank">  
    <i class="ico"></i>  
    <i class="line"></i>  
    阿里云盘  
  </a>  
  <a href="https://pan.quark.cn/s/ccc69f93d2c4" class="sbtn quark" title="夸克网盘" target="_blank">  
    <i class="ico"></i>  
     <i class="line"></i>  
   夸克网盘
  </a>
扫描二维码，在手机上阅读