面试官：来实现一个js上下信息循环滚动_当scroll-content中的内容高度超过父元素,使用js让它进行上下循环滚动-CSDN博客

本文介绍了网页设计中关于样式和布局的优化技巧，包括隐藏滚动条、固定宽高比、内容对齐方式以及颜色和字体的选择。通过示例代码展示了如何使用CSS实现无滚动条效果，以及针对不同部分的文字和背景色设定，强调了内容的重要性。

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

在这里插入图片描述

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes,viewport-fit=cover">
    <title>title</title>
    <meta name="keywords" content="title" />
    <meta name="description" content="title" />
    <link href="css/css_zsy.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <style>
        .rdwd{
     width: 90%;
     margin: 0 auto;
     margin-top: 1rem;
}
.rdwd_title{
     text-align: center;
     color: #00c8aa;
     font-weight: bold;
     font-size: 0.7rem;
}
.rdwd_box{
    width: 100%;
    height: 10rem;
    overflow-y: auto;
    margin-top:0.5rem;
}
.rdwd_box::-webkit-scrollbar {
    display: none;
}
.rdwd_box01 {
    overflow: hidden;
}

.rdwd_box02 {
    overflow: hidden;
}
.rdwd_box1
{
margin-top:0.5rem;
}
.rdwd_box2{
margin-top:0.5rem;
}
.rdwd_box3{
margin-top:0.5rem;
}
.rdwd_box1 p:nth-child(1){
    color: #fd9c2b;
    margin-bottom:0.2rem;
}
.rdwd_box1 p:nth-child(2) {
    color: #666666;
    text-align: justify;
    font-size: 0.55rem;
}
.rdwd_box2 p:nth-child(1) {
    color: #fd9c2b;
    margin-bottom:0.2rem;
}

.rdwd_box2 p:nth-child(2) {
    color: #666666;
    text-align: justify;
    font-size: 0.55rem;
}
.rdwd_box3 p:nth-child(1) {
    color: #fd9c2b;
    margin-bottom:0.2rem;
}

.rdwd_box3 p:nth-child(2) {
    color: #666666;
    text-align: justify;
    font-size: 0.55rem;
}

    </style>
</head>

<body>
    <!-- 热点问答 -->
    <div class="rdwd">
        <div class="rdwd_title">