【HTML/CSS】网页布局之结构

来源：互联网发布：百度一下淘宝男裤编辑：程序博客网时间：2024/05/19 14:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>布局</title></head><style>.main{width:800px;position:relative;}.main.left img{margin-left:20px;}.left{width:50px;float:left;}.right{padding:20px;width:688px;float:right;background:#999;border:2px green dashed;border-radius:20px;40px;}p{font-size:12px;line-heght:25px;}span{position:absolute;right:20px;top:10px;font-size:10px;}</style><body><div class="main"><div class="left"><img src="../Pictures/Saved Pictures/6.jpg" width="60px" height="69"/></div><div class="right"><h3>樱桃小丸子</h3><p>生活虽然一地鸡毛，但仍要欢歌高进，成长之路虽有玫瑰有荆棘，但什么都不能阻挡坚强的心。”，听了让人扎心，但也满目光芒……</p><span>10分钟前</span></div></div></body></html>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>相对参照元素进行定位</title><style>body{margin:0;padding:0;}.top{height:50px;background:#0FF;}.head{width:200px;height:50px;background:#666;margin:0 auto;}.main{width:800px;height:300px;background:#666;margin:0 auto;}.left{float:left;background:#000;width:300px;height:300px;}.right{widht:500px;height:300px;background:#F0F;float:right;}.sub1{width:200px;height:300px;background:#F00;float:left;}.sub2{width:300px;height:300px;background:#6F0;float:right;}.foot{width:800px;height:50px;background:#909;margin:0 auto;}</style><body><div class="top"><div class="head"></div></div><div class="main"><div class="left"></div><div class="right"><div class="sub1"></div><div class="sub2"></div></div></div><div class="foot"></div></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>布局</title></head><style>.main{width:800px;position:relative;overflow:hidden;}.main.left img{margin-left:20px;}.main .left{width:50px;float:left;}.main .right{padding:20px;width:688px;float:right;background:#999;border:2px green dashed;border-radius:20px;40px;}.main .right p{font-size:12px;line-heght:25px;}.main .right span{position:absolute;right:20px;top:10px;font-size:10px;}.main2{width:800px;position:relative;overflow:hidden;margin-top:10px;}.main2 img{float:left;}.main2 .right{padding:20px;width:688px;float:right;background:#999;border:2px green dashed;border-radius:20px;40px;}.main2 .right p{font-size:12px;line-heght:25px;}.main2 .right span{position:absolute;right:20px;top:10px;font-size:10px;}.main3{padding:20px;width:688px;background:#999;border:2px green dashed;border-radius:20px;40px;margin-left:65px;margin-top:10px;position:relative;}<!--向右移-->.main3 img{float:left;margin-left:-65px;margin-top:20px;}<!--图片移回原来的位置-->.main3 p{font-size:10px;line-heght:25px;}.main3 span{position:absolute;right:20px;top:10px;font-size:10px;}</style><body><div class="main"><div class="left"><img src="../Pictures/Saved Pictures/6.jpg" width="60px" height="69"/></div><div class="right"><h3>樱桃小丸子</h3><p>生活虽然一地鸡毛，但仍要欢歌高进，成长之路虽有玫瑰有荆棘，但什么都不能阻挡坚强的心。”，听了让人扎心，但也满目光芒……</p><span>10分钟前</span></div></div><div class="main2"><img src="../Pictures/Saved Pictures/6.jpg" width="60px" height="69"/><div class="right"><h3>樱桃小丸子</h3><p>生活虽然一地鸡毛，但仍要欢歌高进，成长之路虽有玫瑰有荆棘，但什么都不能阻挡坚强的心。”，听了让人扎心，但也满目光芒……</p><span>10分钟前</span></div></div><div class="main3"><img style="float:left;margin-left:-90px;" src="../Pictures/Saved Pictures/6.jpg" width="60px" height="69"/><h3>樱桃小丸子</h3><p style="font-size:12px;line-heght:25px;">生活虽然一地鸡毛，但仍要欢歌高进，成长之路虽有玫瑰有荆棘，但什么都不能阻挡坚强的心。”，听了让人扎心，但也满目光芒……</p><span>10分钟前</span></div></body></html>

http://www.imooc.com/video/242/0

阅读全文

0 0