WEB前端-3.2-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84670424/article/details/145098292

css

【例】飙升榜

【源码】

<!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;

background-color: #f4f4f4;

margin: 0;

padding: 0;

}

.rank-container {

width: 300px;

margin: 20px auto;

background-color: #fff;

padding: 20px;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.rank-header {

display: flex;

align-items: center;

margin-bottom: 20px;

}

.rank-logo {

width: 60px;

height: 60px;

background-color: #800080;

color: #fff;

display: flex;

justify-content: center;

align-items: center;

font-size: 20px;

margin-right: 30px;

border-radius: 5px;

}

.rank-title {

font-size: 20px;

font-weight: bold;

}

.icon-container {

margin-left: auto;

}

.icon-container img {

width: 20px;

height: 20px;

margin-left: 10px;

}

.rank-list {

list-style: none;