学习两个星期后做的第一个网页
Posted 风中摇曳的小花朵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习两个星期后做的第一个网页相关的知识，希望对你有一定的参考价值。
<!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> <style type="text/css"> *{ margin:oxp auto; padding:opx} #wai{ width:100%; height:2000px; background-color:rgb(221, 29, 14)} #tou{ width:100%; background-color:#b4060a; border-top:1px solid #e00b00; z-index:3; min-width:990px; height:56px;} #w1{ width:70%; float:right; position:absolute; left:280px; top:20px;} #a1{ color:#FFF; text-decoration:none; position:relative; bottom:750px; left:300px} #z1{ width:100%; height:36px;background-color:#eee; margin-top:56px;} #b1{font-size: 12px;font-family: arial, tahoma, 宋体;;color:#333; line-height: 35px; height: 35px; margin-left:30px;text-decoration:none} #c1{ width:100%; height:110px; background:#FFF} #c2{ margin-left:600px; position:relative; top:-60px} #c4{ margin-left:600px; position:relative; top:-50px} #a3{ font-size: 12px; line-height: 1.5; font-family: arial, tahoma, 宋体; text-decoration:none} #d1{ width:1263px; height:40px; background-color:#FFF; margin-left:-600px; position:relative; top:18px } #d2{ width:200px; height:38px; background-color:#FC0; position:absolute; left:130px; bottom:0px} #d3{ font-family: arial, tahoma, 宋体; font-size:12px; color:#333; position:absolute; bottom:10px; left:10px; text-decoration:none} #d5{ font-size: 14px; line-height: 1.5; font-family: arial, tahoma, 宋体; text-decoration:none} #d4{ margin-left:350px; position:relative; top:10px} #q1{ width:1263px; height:90px; margin-left:150px; position:relative;} #q2{width:1263px; height:90px; margin-left:-600px; position:relative; top:20px;background-color:#003} #q3{ width:1263px; height:450px; background-color:#FFF; margin-left:-10px;position:relative; top:-30px} #w1{ width:1263px; height:80px; background-color:#FFF; margin-top:760px; margin-left:-280px} #w2{ width:1263px; height:1200px; background-color:#FFF} #w3{ position:absolute; left:100px; bottom:-420px} #w4{ width:220px;position:absolute; left:120px; bottom:-450px;} #e1{ position:absolute; left:300px; bottom:-420px} #e2{ width:220px;position:absolute; left:300px; bottom:-450px;} #e3{ position:absolute; left:500px; bottom:-420px} #e4{ width:220px;position:absolute; left:520px; bottom:-450px;} #e5{ position:absolute; left:700px; bottom:-420px} #e6{ width:220px;position:absolute; left:730px; bottom:-450px;} #e7{ position:absolute; left:920px; bottom:-420px} #e8{width:220px;position:absolute; left:940px; bottom:-450px;} #r1{ position:absolute; left:100px; bottom:-700px} #r2{width:220px;position:absolute; left:100px; bottom:-710px;} #r3{ position:absolute; left:320px; bottom:-700px} #r4{width:220px;position:absolute; left:330px; bottom:-710px;} #r5{ position:absolute; left:520px; bottom:-700px} #r6{width:220px;position:absolute; left:530px; bottom:-710px;} #r7{ position:absolute; left:710px; bottom:-700px} #r8{width:220px;position:absolute; left:710px; bottom:-710px;} #r9{ position:absolute; left:930px; bottom:-700px} #r10{width:220px;position:absolute; left:930px; bottom:-720px;} #m1{ width:1263px; height:700px; background-color:#FFF} #m2{ position:relative; margin-left:100px} #m3{ position:relative; margin-left:100px} #m4{ position:relative; margin-left:620px; bottom:250px} #m5{ position:relative; margin-left:620px; bottom:250px} #m6{ position:relative; margin-left:900px; bottom:490px} #m7{ position:relative; margin-left:900px; bottom:490px} #n1{ position:relative; margin-top:-350px; left:100px} </style> </head> <body> <div id="wai"> <div id="tou"> <a href="http://cuxiao.suning.com/sc11zc.html"><img src="../tou.jpg" / style="position:absolute; left:130px"></a> <div id="w1"> <a id="a1" href="http://sale.suning.com/ju/yrzhc1101/index.html">大聚惠</a> <a id="a1" href="http://sale.suning.com/dn/dn111/index.html">电脑</a> <a id="a1" href="http://sale.suning.com/sm/smwdzn/index.html">相机</a> <a id="a1" href="http://sale.suning.com/sm/smwdzn/index.html">手机</a> <a id="a1" href="http://sale.suning.com/hd/s11yra/index.html">彩电</a> <a id="a1" href="http://sale.suning.com/bx/bx1101/index.html">冰洗</a> <a id="a1" href="http://cuxiao.suning.com/city/kt0006.html">空调</a> <a id="a1" href="http://cuxiao.suning.com/city/yushou.html">厨卫</a> <a id="a1" href="http://sale.suning.com/xjd/xjdkh11/index.html">生活电器</a> <a id="a1" href="http://sale.suning.com/cs/zyzt1111/index.html">苏宁超市</a> <a id="a1" href="http://cuxiao.suning.com/myzcqjh1101.html">母婴用品</a> <a id="a1" href="http://cuxiao.suning.com/ydhw20161021.html">运动户外</a> </div> <div clean:both></div> <div id="z1"> <a id="b1" href="http://www.suning.com/">返回易网购首页</a> <a id="b1" href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fssl.suning.com%2Fwebapp%2Fwcs%2Fstores%2Fauth%3FtargetUrl%3Dhttp%253A%252F%252Fsale.suning.com%252Fall%252Fju%252Findex.html&method=GET&loginTheme=b2c">网站导购</a> <a id="b1" href="http://sale.suning.com/ju/yrzhc1101/index.html">商家入驻</a> <a id="b1" href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fssl.suning.com%2Fwebapp%2Fwcs%2Fstores%2Fauth%3FtargetUrl%3Dhttp%253A%252F%252Fsale.suning.com%252Fall%252Fju%252Findex.html&method=GET&loginTheme=b2c">登录</a> <a id="b1" href="https://reg.suning.com/person.do">注册</a> <a id="b1" href="http://sale.suning.com/ju/yrzhc1101/index.html">我的订单</a> <a id="b1" href="http://sale.suning.com/ju/yrzhc1101/index.html">我的易购</a> <a id="b1" href="http://shopping.suning.com/cart.do">购物车</a> <a id="b1" href="http://sale.suning.com/ju/yrzhc1101/index.html">手机苏宁</a> <a id="b1" href="https://pay.suning.com/epp-epw/login/login.action?res_code=4&res_message=NOT_LOGIN&ticket=ST49C4C0002259C3AF3AAB48D8351EE469">易付宝</a> <a id="b1" href="http://b.suning.com/b2b.htm">企业采购</a> <a id="b1" href="http://sale.suning.com/ju/yrzhc1101/index.html">客户服务</a> </div> <div id="c1"><img src="../素材/snlogo.png" / style=" margin-left:130px"> <div id="c2"> <form action="http://www.baidu.com" method="post"> <input type="text" name="ss" value="" /> <input type="submit" value="搜索"/></form></div> <div id="c4"> <a id="a3" style="color:#F60" href="http://cuxiao.suning.com/sc11zc.html">双11提前抢</a> <a id="a3" style="color:#F60" href="http://sale.suning.com/sc/dapaiPK/index.html">大牌pk</a> <a id="a3" style="color:#999" href="http://cuxiao.suning.com/sc11jghc.html">5折加购</a> <a id="a3" style="color:#999" href="http://cuxiao.suning.com/scs11yszn.html">定金翻100倍</a> <a id="a3" style="color:#999" href="http://sale.suning.com/ju/yrzhc1101/index.html">笔记本5折起</a> <a id="a3" style="color:#999" href="http://sale.suning.com/ju/yrzhc1101/index.html">9.9元抢车品</a> <a id="a3" style="color:#999" href="http://sale.suning.com/ju/yrzhc1101/index.html">美的11.11秒杀</a> <div id="d1"> <div id="d2"> <a id="d3" href="http://sale.suning.com/ju/yrzhc1101/index.html" ><b>全部商品分类</b></a> </div> <div id="d4"> <a id="d5" style="color:#333" href="http://www.suning.com/">首页</a> <a id="d5" style="color:#333" href="http://vip.suning.com/">苏宁会员</a> <a id="d5" style="color:#333" href="http://fashion.suning.com/">服装城</a> <a id="d5" style="color:#333" href="http://chaoshi.suning.com/">苏宁超市</a> <a id="d5" style="color:#333" href="http://dianqi.suning.com/">电器城</a> <a id="d5" style="color:#333" href="http://redbaby.suning.com/">红孩子母婴</a> <a id="d5" style="color:#333" href="http://sale.suning.com/ju/yrzhc1101/index.html">大聚惠</a> <a id="d5" style="color:#333" href="http://sale.suning.com/ju/yrzhc1101/index.html">苏宁金融</a> <a id="d5" style="color:#333" href="http://sale.suning.com/ju/yrzhc1101/index.html">海外购</a> </div> </div> <div id="q2"> <div id="q1"><img src="../素材/top_07.jpg" style="width:800; height:90px"/></div> </div> </div> <div id="q3"> <a id="q4" href="http://rec.suning.com/show/recommend.html"><img src="../素材/LBlunbo77.jpg" style="margin-top:5px; margin-left:120px" /></a> </div> </div> <div id="w1"><img src="../素材/floor_01.jpg" style="margin-left:120px" /></div> <div id="w2"></div> <div> <a id="w3" href="http://product.suning.com/0000000000/134003091.html?srcPoint=sale_cxpd_floor01_01"><img src="../素材/000000000134003091_1_200x200.jpg" style="height:200px"; width="200" /></a> <a id="w4" href="http://product.suning.com/0000000000/134003091.html?srcPoint=sale_cxpd" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">Apple iPhone 6s 16GB...</a> </div> <div style=" margin-top:-330px; margin-left:150px;font-family:宋体; font-size: 12px; color:#999";>苏宁直发，正品行货</div> <a id="e1" href="http://product.suning.com/0000000000/134003091.html?srcPoint=sale_cxpd_floor01_01"><img src="../素材/000000000134003091_1_200x200.jpg"</a> <a id="e2" href="http://product.suning.com/0000000000/134004868.html?srcPoint=sale_cxpd_floor01_02" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">Apple iPhone 6s Plus 64GB...</a> <div> <div style=" margin-top:-10px; margin-left:340px;font-family:宋体; font-size:12px; color:#999";>苏宁直发，正品行货</div> <a id="e3" href="http://product.suning.com/0000000000/139836231.html?srcPoint=sale_cxpd_floor01_03"><img src="../素材/000000000139836231_1_200x200.jpg" /></a> <a id="e4" href="ttp://product.suning.com/0000000000/139836231.html?srcPoint=sale_cxpd_floor01_03" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">华为畅享5S 金色 全网通版...</a> <div> <div style=" margin-top:-14px; margin-left:540px;font-family:宋体; font-size:12px; color:#999";>苏宁直发，正品行货</div> <a id="e5" href="http://product.suning.com/0000000000/136471549.html?srcPoint=sale_cxpd_floor01_04"><img src="../素材/000000000136471549_1_200x200.jpg" /></a> <a id="e6" href="http://product.suning.com/0000000000/136471549.html?srcPoint=sale_cxpd_floor01_04" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">小米4c标准版全网通...</a> <div> <div style=" margin-top:-14px; margin-left:730px;font-family:宋体; font-size:12px; color:#999";>苏宁直发，正品行货</div> <a id="e7" href="http://product.suning.com/0000000000/132449922.html?srcPoint=sale_cxpd_floor01_05"><img src="../素材/000000000132449922_1_200x200.jpg" /></a> <a id="e8" href="http://product.suning.com/0000000000/132449922.html?srcPoint=sale_cxpd_floor01_05" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">小米4c标准版全网通...</a> <div> <div style=" margin-top:-14px; margin-left:950px;font-family:宋体; font-size:12px; color:#999";>苏宁直发，正品行货</div> <a id="r1" href="http://product.suning.com/0000000000/125416349.html?srcPoint=sale_cxpd_floor01_06"><img src="../素材/000000000125416349_1_200x200.jpg" /></a> <a id="r2" href="http://product.suning.com/0000000000/125416349.html?srcPoint=sale_cxpd_floor01_06" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">美素佳儿(Friso)金装幼儿 ...</a> <div> <div style=" margin-top:250px; margin-left:150px;font-family:宋体; font-size:12px; color:#999";>数量有限，抢完为止</div> <a id="r3" href="http://product.suning.com/0000000000/103771451.html?srcPoint=sale_cxpd_floor01_07"><img src="../素材/000000000103771451_1_200x200.jpg" /></a> <a id="r4" href="http://product.suning.com/0000000000/103771451.html?srcPoint=sale_cxpd_floor01_07" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">美素佳儿(Friso)金装幼儿 ...</a> <div> <div style=" margin-top:-15px; margin-left:370px;font-family:宋体; font-size:12px; color:#999";>好贴身，好舒适</div> <a id="r5" href="http://product.suning.com/0000000000/103771451.html?srcPoint=sale_cxpd_floor01_08"><img src="../素材/000000000102878795_1_200x200.jpg" /></a> <a id="r6" href="http://product.suning.com/0070125240/102878795.html?srcPoint=sale_cxpd_floor01_08" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">雀巢Nestle能恩幼儿配方...</a> <div> <div style=" margin-top:-15px; margin-left:570px;font-family:宋体; font-size:12px; color:#999";>益护升级智力加分</div> <a id="r7" href="http://product.suning.com/0000000000/137439705.html"><img src="../素材/000000000137439705_1_200x200.jpg" /></a> <a id="r8" href="http://product.suning.com/0000000000/137439705.html" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">奥妙净蓝全效深层洁净洗衣...</a> <div> <div style=" margin-top:-15px; margin-left:730px;font-family:宋体; font-size:12px; color:#999";>去除99种污渍，3倍更快更轻松</div> <a id="r9" href="http://product.suning.com/0000000000/137439705.html"><img src="../素材/000000000124177344_1_200x200.jpg" /></a> <a id="r10" href="http://product.suning.com/0000000000/137439705.html" style=" font-size:15px; color:#000;font-family:微软雅黑; text-decoration:none">奥妙净蓝全效深层洁净洗衣...</a> <div> <div style=" margin-top:-10px; margin-left:930px;font-family:宋体; font-size:12px; color:#999";>去除99种污渍，3倍更快更轻松</div> </div> <div id="m1"> <div id="m2"><img src="../素材/floor_02.jpg"/></div> <div id="m3"><img src="../素材/DJHrukoutu.jpg"/></div> <a id="m4" href="http://product.suning.com/103799658.html?srcPoint=sale_cxpd_floor02_01"><img src="../素材/000000000103799658_1_200x200.jpg"/></a> <a id="m5" href="http://product.suning.com/103799658.html?srcPoint=sale_cxpd_floor02_01" style="font-size:15px; color:#333;font-family:微软雅黑; text-decoration:none"><b>DHC蝶翠诗橄榄卸妆油200ml</b></a> <div style=" position:relative; bottom:240PX; margin-left:620px;font-family:宋体; font-size:12px; color:#999";>连毛孔污垢也可一并去除的植物性卸...</div> <a id="m6" href="http://product.suning.com/101387461.html?srcPoint=sale_cxpd_floor02_02"><img src="../素材/000000000101387461_1_200x200.jpg"/></a> <a id="m7" href="http://product.suning.com/103799658.html?srcPoint=sale_cxpd_floor02_02" style="font-size:15px; color:#333;font-family:微软雅黑; text-decoration:none"><b>薇姿(VICHY)温泉矿物保湿清润...</b></a> <div style=" position:relative; bottom:470PX; margin-left:950px;font-family:宋体; font-size:12px; color:#999";>温和调理、滋润皮肤</div> <div id="n1"><img src="../素材/floor_03.jpg" /></div> <div id="h1" style="font-size:10px; color:#999; text-align:center"> <p> Copyright© 2002-2015 ，苏宁云商集团股份有限公司版权所有<a href="http://www.miitbeian.gov.cn/">苏ICP备10207551号-4</a><a href="http://img.suning.cn/public/v3/images/SUB1-20130131.png">苏B1-20130131</a><a href="http://img.suning.cn/public/v3/images/SUB2-20130376.png">苏B2-20130376</a><a href="http://img.suning.cn/public/v3/images/SUB2-20130391.png">苏B2-20130391</a>出版物经营许可证新出发苏批字第A-243号 </p> <p> 本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
做出来的效果是这样的，截了局部的三张图，。因为找的网站内容太长，所以下面暂时匆匆结了尾
以上是关于学习两个星期后做的第一个网页的主要内容，如果未能解决你的问题，请参考以下文章