学习两个星期后做的第一个网页

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

 

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

以上是关于学习两个星期后做的第一个网页的主要内容,如果未能解决你的问题,请参考以下文章

学习总结 | 跟玄姐学三种架构设计思维模型

使用存储过程将星期一计算为一周的第一天

网页d

实践小节

计算两个日期之间的第一个星期一有多少个

渣渣HTML外加javascript做的第一个同乡会网页(好多功能都没写,只弄出来一个框架)