學習兩個星期后做的第一個網頁 @ 互聯網

文章出處
<!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>&nbsp;
<a id="a1" href="http://sale.suning.com/dn/dn111/index.html">電腦</a>&nbsp;
<a id="a1" href="http://sale.suning.com/sm/smwdzn/index.html">相機</a>&nbsp;
<a id="a1" href="http://sale.suning.com/sm/smwdzn/index.html">手機</a>&nbsp;
<a id="a1" href="http://sale.suning.com/hd/s11yra/index.html">彩電</a>&nbsp;
<a id="a1" href="http://sale.suning.com/bx/bx1101/index.html">冰洗</a>&nbsp;
<a id="a1" href="http://cuxiao.suning.com/city/kt0006.html">空調</a>&nbsp;
<a id="a1" href="http://cuxiao.suning.com/city/yushou.html">廚衛</a>&nbsp;
<a id="a1" href="http://sale.suning.com/xjd/xjdkh11/index.html">生活電器</a>&nbsp;
<a id="a1" href="http://sale.suning.com/cs/zyzt1111/index.html">蘇寧超市</a>&nbsp;
<a id="a1" href="http://cuxiao.suning.com/myzcqjh1101.html">母嬰用品</a>&nbsp;
<a id="a1" href="http://cuxiao.suning.com/ydhw20161021.html">運動戶外</a>&nbsp;
</div>
<div clean:both></div>
<div id="z1">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;
<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>&nbsp;
<a id="b1" href="http://sale.suning.com/ju/yrzhc1101/index.html">我的易購</a>&nbsp;
<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>&nbsp;
<a id="a3" style="color:#F60" href="http://sale.suning.com/sc/dapaiPK/index.html">大牌pk</a>&nbsp;
<a id="a3" style="color:#999" href="http://cuxiao.suning.com/sc11jghc.html">5折加購</a>&nbsp;
<a id="a3" style="color:#999" href="http://cuxiao.suning.com/scs11yszn.html">定金翻100倍</a>&nbsp;
<a id="a3" style="color:#999" href="http://sale.suning.com/ju/yrzhc1101/index.html">筆記本5折起</a>&nbsp;
<a id="a3" style="color:#999" href="http://sale.suning.com/ju/yrzhc1101/index.html">9.9元搶車品</a>&nbsp;
<a id="a3" style="color:#999" href="http://sale.suning.com/ju/yrzhc1101/index.html">美的11.11秒殺</a>&nbsp;

<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>&nbsp;
<a id="d5" style="color:#333" href="http://vip.suning.com/">蘇寧會員</a>&nbsp;
<a id="d5" style="color:#333" href="http://fashion.suning.com/">服裝城</a>&nbsp;
<a id="d5" style="color:#333" href="http://chaoshi.suning.com/">蘇寧超市</a>&nbsp;
<a id="d5" style="color:#333" href="http://dianqi.suning.com/">電器城</a>&nbsp;
<a id="d5" style="color:#333" href="http://redbaby.suning.com/">紅孩子母嬰</a>&nbsp;
<a id="d5" style="color:#333" href="http://sale.suning.com/ju/yrzhc1101/index.html">大聚惠</a>&nbsp;
<a id="d5" style="color:#333" href="http://sale.suning.com/ju/yrzhc1101/index.html">蘇寧金融</a>&nbsp;
<a id="d5" style="color:#333" href="http://sale.suning.com/ju/yrzhc1101/index.html">海外購</a>&nbsp;

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