新拟态按钮界面模仿B站——Index界面注释

李洙赫老婆

于 2020-11-26 10:26:45 发布

阅读量417

点赞数

分类专栏：平时记录文章标签： css3 html

本文链接：https://blog.csdn.net/qq_46987086/article/details/110167727

版权

本文介绍了如何利用CSS3的样式和HTML结构来创建一个模仿B站新拟态风格的按钮界面，详细讲解了实现过程，并提供了相关代码注释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

jsp

<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%)"">
<head>
    <meta charset="UTF-8">
    <name="viewport"content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./css/myCss.css"href="./css/style.css">
    <title>index</title>
----------------------------------
</head>
<body style="
    width: 1367px;
    height: 1000px;
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1), -18px -18px 30px rgba(255, 255, 255, 1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: box-shadow .2s ease-out;
    position:relative;">
<center>

一个大div作为一个容器
  <div class="container"style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%)" ;">
里面是若干个小div分别为个按钮      
 001
  <div class="box">
            <div class="img">
               <a href="registerUser.jsp"> <img src="icos/sign up.png"/>  </a>
            </div>
            <p>sign up</p>
        </div>
 002     
        <div

最低0.47元/天解锁文章