div+css实现一个酷黑搜索手机网站ui设计代码-html代码-BFW代码库

div+css实现一个酷黑搜索手机网站ui设计代码

代码语言：html

代码描述：div+css实现一个酷黑搜索手机网站ui设计代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">



    <style>
        :root {
          --body-color: 48 48 58;
          
          --font-color: 255 255 255;
          --highlight-color: 0 0 0;
          
          --theme-background: 20 20 20;
          
          --theme-light: 0 0 0;
          --theme-medium: 0 0 0;
          --theme-dark: 0 0 0;
        }
        
        body {
          background-color: rgb(var(--body-color));
          margin: 0px;
        }
        
        body::-webkit-scrollbar {
          width: 4px;
        }
        
        body::-webkit-scrollbar-track {
          background-color: rgb(var(--theme-background));
        }
        
        body::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.15);
        }
        
        * {
          box-sizing: border-box;
        }
        
        h1, h2, h3, h4, input, select, button, span, a, p {
          color: rgb(var(--font-color));
          font-family: "Noto Sans", sans-serif;
          font-size: 1rem;
          font-weight: 400;
          margin: 0px;
        }
        
        button, a, input {  
          outline: none;
        }
        
        .highlight {
          color: rgb(var(--highlight-color));
        }
        
        .fancy-scrollbar::-webkit-scrollbar {
          height: 4px;
          width: 4px;
        }
        
        .fancy-scrollbar::-webkit-scrollbar-track {
          background-color: transparent;
        }
        
        .fancy-scrollbar::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.15);
        }
        
        .no-scrollbar::-webkit-scrollbar {
          height: 0px;
          width: 0px;
        }
        
        #phone {
          background-color: rgb(var(--theme-background));
          box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
          height: 851px;
          width: 393px;  
          margin: 100px auto;
          position: relative;
          overflow: hidden;
        }
        
        #main-wrapper {
          height: 100%;
          overflow: auto;
        }
        
        #main {
          height: 100%;
        }
        
        #content {
          padding: 1rem;
        }
        
        #links-container {
          display: flex;
          align-items: center;
          justify-content: space-around;
          gap: 0.75rem;
        }
        
        #links-container > a {
          color: rgb(255 255 255 / 80%);
          font-size: 0.75rem;
          text-decoration: none;
       .........完整代码请登录后点击上方下载按钮下载查看