html制作课程表界面——小白笔记

最新推荐文章于 2024-04-30 22:05:29 发布

Shmily_ox

最新推荐文章于 2024-04-30 22:05:29 发布

阅读量1.3k

点赞数 3

文章标签： css html

本文链接：https://blog.csdn.net/Shmily_ox/article/details/104743746

版权

html制作课程表界面

先看看制作的效果
在这里插入图片描述
整体构思：综合使用了<div>标记、列表以及CSS样式。
详细代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超级课程表</title>
    <style>
        body{
            margin:0% auto;
            padding:0;
            background:#fff;
            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: #d2d2d2;}
        .czxt{background-color: #56f106;}
        .ui{background-color: #ff655d;}
        .dl{background-color: #1affd8;}
        .sjsj{background-color: #0cfdff;}
        .pe{background-color: #fdd10e;}
        .mg{background-color: #7d74ff;}
        .ps{background-color: #306cf6;}
        .rg{background-color: #5fcff6;}
        .web{background-color: #ebec06;}
        .nr{
            width:890px;
            height:1180px;
            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;

最低0.47元/天解锁文章

Shmily_ox

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
html制作课程表界面——小白笔记

html制作超级课程表界面先看看制作的效果整体构思：综合使用了<div>标记、列表以及CSS样式。详细代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超级课程表</title> &...
复制链接

扫一扫