摄影网站的基本布局

<!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>

.box{ 100%; background-image: url(images11-5/1301.gif); background-repeat: repeat-x; background-color:#DBD5CA; margin:auto; } .top{ background-color:#e8e6da; } .top1{ font-size:12px; height:30px; background-image:url(images11-5/1301.gif); } .top1 ul { float:left; list-style-type:none; padding-top:5px; margin-left:115px; } .top1 ul li { float:left; 60px; padding-right:50px; } .top2{ 900px; height:229px; margin:auto; } .top3{ margin:auto; background-image:url(images11-5/1303.gif); background-repeat:repeat-x; 900px; font-size:12px;

} .top4{ background-image:url(images11-5/婚纱摄影网站.jpg); font-size:12px; margin:auto; 900px; height:30px; } .top4 ul{ color:#81914A; list-style-type:none; padding-top:5px; } .m{ 900px; margin:auto; background-color:#e8e6da; } .m1-l{ float:left; background-image:url(images11-5/1323.gif); background-repeat:no-repeat; 450px; margin-bottom:25px; } .m1-l ul{ float:left; font-size:12px; margin-top:40px; } .m1-l ul li{ list-style-type:none; line-height:15px; } .m1-r{ float:left; background-image:url(images11-5/1323.gif); background-repeat:no-repeat; 450px; height:45px; margin-bottom:25px; } .m1-r dl{ float:left; margin-top:40px; } .m1-r dl dd{ text-align:center; font-size:12px; } .m2{ background-color:#bdd1c4; 833px; height:230px; float:left; margin-top:15px; margin-bottom:15px; } .m2-l{ float:left; 260px; padding-top:10px; } .m2-m{ float:left; 226px; padding-top:10px; } .m2-r{ float:left; 320px; padding-top:10px; height:230px; } .m2-r dl{ 320px; padding-left:5px; } .m2-r dl dd{ font-size:12px; text-align:center; 305px; padding-left:5px; padding-right:5px; line-height:20px; } .m-i{ padding-top:10px; background-color:#d0dfd6; 320px; height:92px; } .m2-r ul{ padding-left:10px; } .m2-r ul li{ font-size:12px; list-style-type:none; } .ma{ float:left; margin-top:10px; } .m3{ 900px; margin:auto;

} .m3-l{ background-image:url(images11-5/1334.gif); background-repeat:no-repeat; float:left; 430px; padding-top:40px; padding-left:5px; } .m3-l ul{ padding-top:5px; } .m3-l ul li{ border-bottom-1px; border-bottom-style:solid; border-bottom-color:e6e4d8; background-image:url(images11-5/1346.gif); background-repeat:no-repeat; font-size:12px; color:#807d6a; padding-left:25px; margin-bottom:5px; line-height:25px; list-style-type:none; } .m3-r { float:left; 440px; background-image:url(images11-5/1335.gif); background-repeat:no-repeat; margin-left:15px; margin-bottom:25px; } .m3-r dl{ float:left; margin-top:50px; padding-left:3px; } .m3-r dt{ padding-left:5px; } .m3-r dd{ text-align:center; font-size:12px; color:#807d6a; padding-top:5px; } .m3-z{ float:left; 440px; background-image:url(images11-5/1336.gif); background-repeat:no-repeat; margin-left:15px; margin-bottom:15px; } .m3-z dl{ float:left; margin-top:50px; padding-left:3px; } .m3-z dt{ padding-left:5px; } .m-img{ background-color:#FFFFFF; 99px; height:68px; padding-top:5px; } .m3-z dd{ text-align:center; font-size:12px; color:#807d6a; padding-top:5px; } .bottom1{ margin:auto; 900px; } .bottom1 ul{ float:left; 900px; background-color:#ded7ca; height:26px; padding-top:15px; } .bottom1 ul li{ float:left; padding-right:8px; list-style-type:none; font-size:12px; color:#5b5246; margin-left:10px; } .bottom2{ 900px; margin:auto; } .bottom2-l{ background-image:url(images11-5/1337.gif); background-repeat:no-repeat; float:left; 154px; height:85px; margin-top:10px; } .bottom2-r{ 736px; float:left; padding-top:10px; } .bottom2-r ul{ padding-left:30px; } .bottom2-r ul li{ font-size:12px; color:#807d6a; list-style-type:none; line-height:20px; } body { background-color: #e8e6da; } .STYLE1 { color: #FFFF00; font-weight: bold; } .STYLE2 {color: #FFFFFF} .STYLE3 {color: #FF0000} .shu{ padding:2px 2px; float:left; margin-top:13px; } .STYLE4 { color: #807d6a; font-weight: bold; } .STYLE5 {color: #807d6a} .STYLE6 {color: #425e4b} --> </style> </head>

<body> <div class="box"> <div class="top"> <div class="top1"> <ul> <li class="STYLE2">雪莉首页</li> <li class="STYLE2">站点地图</li> <li class="STYLE2">帮助文档</li> <li class="STYLE1">登陆/注册</li> </ul> </div> <div class="top2"><img src="../hunsha/images-xuelihunsha/1302.gif" /> </div> <div class="top3"> <img src="images11-5/1304.gif" width="80" height="49" /><img src="images11-5/1305.gif" width="80" height="49" /><img src="images11-5/1306.gif" width="80" height="49" /><img src="images11-5/1307.gif" width="80" height="49" /><img src="images11-5/1308.gif" width="80" height="49" /><img src="images11-5/1309.gif" width="80" height="49" /><img src="images11-5/1310.gif" width="80" height="49" /><img src="images11-5/1311.gif" width="80" height="49" /><img src="images11-5/1312.gif" width="80" height="49" /><img src="images11-5/1313.gif" width="80" height="49" /> </div> <div class="top4"> <ul> <li>欢迎来到雪莉梦工厂！你现在的位置：首页</li> </ul> </div> </div> <div class="m"> <div class="m1-l"> <ul> <li>用户名<input name="" type="text" size="20" />密码<input name="" type="text" size="20" /> <img src="images11-5/1338.gif" width="59" height="20" /></li> <li>欢迎来到雪莉梦工厂，如果您还不是我们的会员请点这里注册</li> <li>如果您已是我们的会员，你可以通过浏览我们的网页了解我们网站以及订购优惠的套系婚纱。详细混套请点击这里！</li><br /> <li><img src="images11-5/1339.gif" width="405" height="67" /></li> </ul> </div> <div class="m1-r"> <dl> <dt><img src="images11-5/1340.gif" /></dt> <dd><strong>梵谷恋</strong></dd> <dd class="STYLE3">Date:2010-09-18</dd> <dd><img src="images11-5/1343.gif" /><span style="font-size:8px;">   </span>308<span style="font-size:8px;">   </span><img src="images11-5/1344.gif" /><span style="font-size:8px;">   </span>1<span style="font-size:8px;">   </span><img src="images11-5/1345.gif" /><span style="font-size:8px;">   </span>1<span style="font-size:8px;">   </span></dd> </dl> <dl> <dt><img src="images11-5/1341.gif" /></dt> <dd><strong>时尚妆面造型</strong></dd> <dd class="STYLE3">Date:2010-09-15</dd> <dd><img src="images11-5/1343.gif" /><span style="font-size:8px;">   </span>389<span style="font-size:8px;">   </span><img src="images11-5/1344.gif" /><span style="font-size:8px;">   </span>51<span style="font-size:8px;">   </span><img src="images11-5/1345.gif" /><span style="font-size:8px;">   </span>2<span style="font-size:8px;">   </span></dd> </dl> <dl> <dt><img src="images11-5/1342.gif" /></dt> <dd><strong>唯美时尚时尚造型</strong></dd> <dd class="STYLE3">Date:2010-09-10</dd> <dd><img src="images11-5/1343.gif" /><span style="font-size:8px;">   </span>218<span style="font-size:8px;">   </span><img src="images11-5/1344.gif" /><span style="font-size:8px;">   </span>1<span style="font-size:8px;">   </span><img src="images11-5/1345.gif" /><span style="font-size:8px;">   </span>0<span style="font-size:8px;">   </span></dd> </dl> </div> <div class="m2"> <div class="m2-l"> <div align="center"><img src="images11-5/1327.gif" /><br /><img src="images11-5/1328.gif" /></div> </div> <div class="shu" style="border-right:1px solid #FFFFFF; height:198px;"></div> <div class="m2-m"> <div align="center"><img src="images11-5/1329.gif" /><br /> <img src="images11-5/1330.gif" width="199" height="175"/> </div> </div> <div class="shu" style="border-right:1px solid #FFFFFF; height:198px;"></div> <div class="m2-r"> <dl> <dt> <div align="center"><img src="images11-5/1331.gif" /></div> </dt> <dd class="m-i"> <div align="left">十多年来，中国的婚纱摄影行业历经了成长、发展的、整合、提升四个阶段。随着城市的进化和中国经济的发展加速，婚纱照的市将以每年10%-15%的速度增长，因此婚纱摄影行业的加入者越来越多...... </div> </dd> </dl> <ul> <li><span class="STYLE4">加盟合作</span><span style="font-size:22px;">            </span><span class="STYLE4">电子邮件</span></li> <li><span class="STYLE5">QQ:11004455</span><span style="font-size:22px;">        </span><span class="STYLE6">xxxxxxxx@126.com</span></li> <li><span class="STYLE5">QQ:11004466</span><span style="font-size:22px;">        </span><span class="STYLE6">xxxxxx@163.com</span></li> </ul> </div> </div> <span class="ma"><img src="images11-5/1326.gif" height="230" /></span></div> <div class="m3"> <div class="m3-l"> <ul> <li>XIULI梦工厂被评为中国婚纱摄影名店</li> <li>第九届CEO群英会</li> <li>第十二届上海婚博会</li> <li>雪莉梦工厂官方网站正式开通</li> <li>第十二届上海婚博会</li> <li>雪莉梦工厂拍摄体验</li> <li>阳朔概括</li> <li>东部华侨城--绝美之地，绝美摄影</li> </ul> </div> <div class="m3-r"> <dl> <dt class="m-img"><img src="images11-5/1350.gif" width="95" /></dt> <dd>雪莉婚纱</dd> </dl> <dl> <dt class="m-img"><img src="images11-5/1351.gif" width="95" /></dt> <dd>雪莉婚纱</dd> </dl> <dl> <dt class="m-img"><img src="images11-5/1352.gif" width="95" /></dt> <dd>雪莉婚纱</dd> </dl> <dl> <dt class="m-img"><img src="images11-5/1353.gif" width="95" /></dt> <dd>雪莉婚纱</dd> </dl> </div> <div class="m3-z"> <dl> <dt class="m-img"><img src="images11-5/1354.gif" width="95" /></dt> <dd>雪莉婚纱</dd> </dl> <dl> <dt class="m-img"><img src="images11-5/1355.gif" width="95" /></dt> <dd>雪莉婚纱</dd> </dl> </div> </div> <div class="bottom1"> <ul> <li><strong>雪莉首页</strong></li> <li><strong>摄影作品</strong></li> <li><strong>礼服馆</strong></li> <li><strong>形象设计</strong></li> <li><strong>周边产品</strong></li> <li><strong>新闻中心</strong></li> <li><strong>在线订单</strong></li> <li><strong>合作加盟</strong></li> <li><strong>关于我们</strong></li> <li>友情链接</li> <li>BBS</li> </ul> </div> <div class="bottom2"> <div class="bottom2-l"></div> <div class="bottom2-r"> <ul> <li>地址：北京市海淀区城府路288号五道口城铁站旁新浩城花园裙楼二楼</li> <li>上海店：上海市青浦区金沙江西路1789弄7789号</li> <li>咨询电话：（86010）-87788778 传真：（86010）-87788779 手机：13522889966</li> <li>技术支持：胖鸟工作室</li> </ul> </div> </div> </body> </html>