zoukankan      html  css  js  c++  java
  • 学习两个星期后做的第一个网页

    <!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{ 100%; height:2000px; background-color:rgb(221, 29, 14)}
    #tou{ 100%; background-color:#b4060a; border-top:1px solid #e00b00; z-index:3; min-990px; height:56px;}
    #w1{ 70%; float:right; position:absolute; left:280px; top:20px;}
    #a1{ color:#FFF; text-decoration:none; position:relative; bottom:750px; left:300px}
    #z1{ 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{ 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{ 1263px; height:40px; background-color:#FFF; margin-left:-600px; position:relative; top:18px }
    #d2{ 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{ 1263px; height:90px; margin-left:150px; position:relative;}
    #q2{1263px; height:90px; margin-left:-600px; position:relative; top:20px;background-color:#003}
    #q3{ 1263px; height:450px; background-color:#FFF;  margin-left:-10px;position:relative; top:-30px}
    #w1{ 1263px; height:80px; background-color:#FFF; margin-top:760px; margin-left:-280px}
    #w2{ 1263px; height:1200px; background-color:#FFF}
    #w3{ position:absolute; left:100px; bottom:-420px}
    #w4{ 220px;position:absolute; left:120px; bottom:-450px;}
    #e1{ position:absolute; left:300px; bottom:-420px}
    #e2{ 220px;position:absolute; left:300px; bottom:-450px;}
    #e3{ position:absolute; left:500px; bottom:-420px}
    #e4{ 220px;position:absolute; left:520px; bottom:-450px;}
    #e5{ position:absolute; left:700px; bottom:-420px}
    #e6{ 220px;position:absolute; left:730px; bottom:-450px;}
    #e7{ position:absolute; left:920px; bottom:-420px}
    #e8{220px;position:absolute; left:940px; bottom:-450px;}
    #r1{ position:absolute; left:100px; bottom:-700px}
    #r2{220px;position:absolute; left:100px; bottom:-710px;}
    #r3{ position:absolute; left:320px; bottom:-700px}
    #r4{220px;position:absolute; left:330px; bottom:-710px;}
    #r5{ position:absolute; left:520px; bottom:-700px}
    #r6{220px;position:absolute; left:530px; bottom:-710px;}
    #r7{ position:absolute; left:710px; bottom:-700px}
    #r8{220px;position:absolute; left:710px; bottom:-710px;}
    #r9{ position:absolute; left:930px; bottom:-700px}
    #r10{220px;position:absolute; left:930px; bottom:-720px;}
    #m1{ 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="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>

    做出来的效果是这样的,截了局部的三张图,。因为找的网站内容太长,所以下面暂时匆匆结了尾

  • 相关阅读:
    selenium自动化测试CSS定位
    思想重铸(转自知乎)
    闭环思维
    20170503xlVBA房地产数据分类连接
    20170517xlVBA添加数据透视表
    20170617xlVBA销售数据分类汇总
    20170621xlVBA跨表转换数据
    20170612xlVBA含方框文档填表
    20170612xlVBA多文件多类别分类求和匹配
    20170617xlVBA调查问卷基础数据分类计数
  • 原文地址:https://www.cnblogs.com/qishuang/p/6034058.html
Copyright © 2011-2022 走看看