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