HTML5与CSS3实现网页课表设计-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46440394/article/details/104826375

本文介绍如何使用HTML5和CSS3技术来创建一个功能丰富的网页课表，详细阐述了从布局到样式的实现过程，帮助读者掌握网页制作的基础技巧。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的课程表</title>
       <style>

    body{
      margin:0% auto;
      padding:0;
      background: #ff9e95;
      text-align:center;
      }
    body>div{
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }
    div,form,ul,ol,li,span,p,dl,dt,dd,img{
          margin: 0;
          padding: 0;
          border: 0;
    }
    h1,h2,h3,h4,h5,h6{
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-weight: normal;
    }
    ul,ol,li{
        list-style: none;
    }  /*清除列表默认样式*/
/*设置浮动*/
      .fl{float: left;}
/*课程背景颜色*/
      .xsyzc{background-color:#00ff40;}
      .czxt{background-color:#A349A4;}
      .ui{background-color:#ffff17;}
      .dl{background-color:#ff5858;}
      .sjsj{background-color:#ff8040;}
      .ps{background-color:#400080;}
      .rg{background-color:#408080;}
      .web{background-color:#804040;}
      .nr{
        width:890px;
        height:1180px;
        background-image: url(bg.jpg);
        margin: 0 auto;
      }
/*设置标题CSS规则*/
      .bt{
        padding-top: 35px;
        margin: 0 auto;
      }
      .bt p{
        font-size: 40px; font-family: 微软雅黑;color: #fff;
      }
/*设置星期CSS规则*/
      .TL{
        width: 890px;
        height: 4px;
        background-color: #d2d2d2;
        margin-top: 30px;
      }
      .Week{
        width: 890px;
        height: 58px;
        background-color: #fff;
        filter: alpha(opacity=60);
        opacity: 0.6;
      }
      .Week ul{
        padding-left: 60px;
      }