HTML+CSS基础03简单作息表

来源：互联网发布：四川广电网络上网慢编辑：程序博客网时间：2024/06/10 15:17

效果图如下

如果看完我前面的（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;}

0 0