HTML+CSS基础03简单作息表

最新推荐文章于 2023-12-18 16:13:29 发布

文征

最新推荐文章于 2023-12-18 16:13:29 发布

阅读量558

点赞数 1

分类专栏： HTML+css 文章标签： css html

本文链接：https://blog.csdn.net/dodlge/article/details/65626880

版权

HTML+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图如下

如果看完我前面的（HTML+CSS基础 1和2）差不多就能用CSS和html做出这个简单的网页

链接如下HTML+CSS 01 HTML+CSS 02 这里面用到的在1 2里面都提到了

HTML如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="CSS/LifeTable.css" />
</head>
<body>
    <div id="d1">
        <img id="left_img"src="Image/Life/left.png" alt="图片加载失败" />
    </div>
    <div id="d2">
        <p id="p1">上午</p>
        <!--<p><img id="img_hx"  src="Image/Life/henxian.png" /></p>-->
        <hr />
        <br />
        <p>起    床:6:30</p>
        <p>穿衣洗漱:6:30-6:50</p>
        <p>出门坐车:6:50-7:00</p>
        <p>坐    车:7:00-7:40</p>
        <p>到公司:7:40-7:50</p>
        <p>吃早餐:7:50-8:00</p>
        <p>晨    会:8:10-8:20</p>
        <p>上    班:8:20-12:00</p>
        <p>午    饭:12:05-12:40</p>
    </div>
    <div id="d3">
        <p id="p1">下午</p>
        <!--<p><img id="img_hx"  src="Image/Life/henxian.png" /></p>-->
        <hr />
        <br />
        <p>午    休:13:00-13:55</p>
        <p>上班:14:00-18:00</p>
        <p>出门坐车:18:005-19:10</p>
        <p>回    家:19:10-19:20</p>
    </div>
    <div id="d4">
        <p id="p1">晚上</p>
        <!--<p><img id="img_hx"  src="Image/Life/henxian.png" /></p>-->
        <hr />
        <br />
        <p>看视频:19:30-20:00</p>
        <p>学    习:20:10-21:00</p>
        <p>洗    漱:21:05-21:15</p>
        <p>PlayGame:21:20-22:30</p>
        <p>睡    觉:22:40-6:30</p>
    </div>
    <div></div>
    <div></div>
</body>
</html>

CSS如下

#d1 {
    float:left;
    /*margin-left:0px;*/
    margin:50px auto auto 0px;
    clear:both;/*清除浮动*/
}
#left_img {
/*左边图大小*/
    width:100px;
    height:220px;
/*设置图片与上面的距离*/
    margin-top:60px;
}
div{
    
    float:left;
    margin-top:50px;
    margin-left:50px;
}
#p1{
    margin-right:200px;
}
#img_hx{
/*横线*/
    width:200px;
}
#p1{
/*标题字体大小颜色*/
    color:#ff0000;
    font-size:16px;
}
p{
/*字体颜色和大小*/
    color:#808080;
    font-size:12px;
}
hr{
    /*横线左浮动 宽度80px
    */
    float:left;
    width:80px;
}

文征

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS基础03简单作息表

效果图如下如果看完我前面的（HTML+CSS基础 1和2）差不多就能用CSS和html做出这个简单的网页链接如下HTML+CSS 01 HTML+CSS 02 这里面用到的在1 2里面都提到了HTML如下啊啊啊上午 -->
复制链接

扫一扫