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

代码语言：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;
        }
        
        #links-container > a:is(:hover, :focus) {
          text-decoration: underline; 
        }
        
        #header-container {
          width: 100%;
          position: relative;
          margin-top: 1rem;
        }
        
        #logo {
          display: flex;
          width: 100%; 
          border-radius: 0.5rem;
          border-bottom-left-radius: 0.2rem;
          border-bottom-right-radius: 0.2rem;
        }
        
        #user-menu-button {
          height: 47%;
          position: absolute;
          right: 0rem;
          bottom: 0rem;
          background-color: transparent;
          margin-right: 3.52%;
          margin-bottom: 2.70%;
          padding: 0rem;
          border: none;
          border-radius: 100%;
        }
        
        #user-menu-button > img {
          display: flex;
          height: 100%;
          border-radius: inherit;
        }
        
        #search-container {
          display: flex;
          gap: 0.2rem;
          margin-top: 0.2rem;  
        }
        
        #search-input-container > input,
        #search-container > button {
          background-color: rgb(255 255 255 / 10%);
          color: rgb(255 255 255 / 80%);
          font-size: 1rem;
          border: none;
        }
        
        #search-input-container:has(input:focus),
        #search-container > button:focus {
          background-color: rgb(255 255 255 / 16%);
        }
        
        #search-container > button {
          width: 3.5rem;
          border-radius: 0.2rem;
          cursor: pointer;
        }
        
        #search-container > #image-button {  
          border-bottom-right-radius: 0.5rem;
        }
        
        #search-input-container {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          background-color: rgb(255 255 255 / 10%);
          padding-left: 1rem;
          border-radius: 0.2rem;
          border-bottom-left-radius: 0.5rem;
        }
        
        #search-input-container > img {
          height: 1.5rem;
        }
        
        #search-input-container > input {
          width: 100%;
          height: 3.25rem;
          background-color: transparent;
          padding: 1rem;  
          padding-left: 0rem;
        }
        
        #apps-container {
          display: grid;
          gap: 0.2rem;
          grid-template-columns: repeat(2, 50%);  
          margin: 3rem 0rem;
        }
        
        #apps-container > a {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          background-color: rgb(255 255 255 / 10%);
          padding: 1rem 0.75rem;
          border-radius: 0.2rem;
          text-decoration: none;
        }
        
        #apps-con.........完整代码请登录后点击上方下载按钮下载查看