这个网页是在学过CSS之后，对当当网首页进行模仿的网页，没有看当当网的网页源码，纯按照自己之前学的写的，由于是刚学过HTML和CSS才一个星期，所以里面有许多地方写的非常没有水平，仅仅用来学习使用，欢迎各位大佬对我的这个简单网页不足的地方进行指正，谢谢各位大佬。
代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-color: rgba(234,234,234,1); margin: 0; /*border: 0;*/ z-index: 1; } .head { /*margin: 0;*/ background-color: black; margin:0; padding:0; z-index: 2; } .head .menu{ width: 1100px; margin: 0 auto; line-height: 38px; /*height: 38px;*/ } .head .menu li{ color: rgba(159,159,159,1); float: left; margin-top: 8px; list-style-type:none; } .menu a{ color: rgba(159,159,159,1); text-decoration: none; font-size: 5px; } .menu a:hover{ color: white; } .menu .found{ display: inline; margin:0; } .menu .found a{ float: right; margin-right: 3px; margin-left: 3px; } .menu .found a:hover{ background-color: rgba(145,145,145,1); } .eyes{ margin:0 auto; width: 1100px; height: 100px; line-height: 100px; background-color: rgba(234,234,234,1); border:0; padding:0; position: relative; z-index: 999; } .eyes .eyes_z img{ height: 55px; margin-top: 15px; position: absolute; } .eyes span { margin-top: 15px; width: 2px; } .eyes input{ margin-top: -15px; margin-left: 180px; height: 40px; width:500px; padding-left:80px; /*border-break: close;*/ } .eyes .eyes_o{ position: absolute; left: 190px; } .eyes .eyes_t{ margin-top: 30px; margin-left: 6px; width: 45px; height: 45px; background-color: rgba(226,0,82,1); display: inline-block; z-index: 1; position: absolute; border:maroon; } .eyes .eyes_t img{ top: 12px; left: 4px; position: absolute; } .eyes_f{ display: inline-block; float: right; font-size: 15px; } .eyes_f a{ margin: 3px; text-decoration: none; color: lightslategray; } .eyes_f a:hover{ color: white; } .body{ width:1100px; margin:0 auto; } .head_top{ margin: 0 auto; font-size: 14px; /*height: 35px;*/ line-height: 20px; background-color: rgba(199,0,72,1); z-index: 1; font-family:微软雅黑; } .head_top_head{ /*width: 1100px;*/ margin: 0; height: 30px; line-height: 35px; background-color: rgba(116,8,110,1); z-index: 999; } .head_top_ee{ width: 1100px; margin:0 auto; } .head_top_ee li{ float: left; list-style-type: none; } .head_top_ee a{ color: rgba(237,237,237,1); text-decoration: none; margin-left: 10px; margin-right: 10px; float: left; } .head_top_ee a:hover{ line-height: 30px; height: 30px; background-color: rgba(199,0,72,1); } .body_zero{ width: 1100px; height: 600px; /*background-color: black;*/ /*opacity:;*/ position: relative; } .img_one{ width: 1100px; height: 600px; /*border: ;*/ border: 3px; } .body_and{ position: absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); color: white; text-align:center; visibility: hidden; } .body_zero:hover .body_and{ visibility: visible; } /*.img_one:hover{*/ /*background-color: black;*/ /*opacity:0.4;*/ /*}*/ .body_and { font-size: 32px; padding :30px 0; } .c1{ margin-top: 200px; } .body_three span a{ text-decoration: none; margin-left: 19px; font-size: 15px; color: rgba(102,102,102,1); } .body_three span a:hover{ text-decoration: solid; color: inherit; } .body_good { display: inline-block; } .body_good div{ display: inline-block; width: 75px; height: 25px; background-color: white; border:solid 2px lightslategray; /*border: 2px;*/ } .body_good div:hover{ border:solid 2px #D90A0F; } .body_good a{ margin: 5px; color: #343434; text-decoration: none; } .body_bfbd{ background-image: url("http://v.dangdang.com/Standard/Vipshop/Extend/hosts/images/shop_box_title_bg.png"); width: 960px; height: 50px; margin: 0 auto; } .body_bfbd h1{ margin-left: 20px; color: white;; } .body_commodity{ border: outset 3px rgba(62,7,62,0.69); margin-top: 20px; width: 250px; height: 250px; position: relative; display: inline-block; margin-right: 15.4px; } .body_commodity img { width: 250px; height: 250px; } .body_commodity .pj{ position: absolute; top: 150px; left:0; right: 0px; bottom:0; background:rgba(0,0,0,.6); color: white; text-align:center; /*文字居中*/ visibility: hidden } .body_commodity:hover .pj{ visibility: visible; } .pj_one{ font-size: 22px; padding :30px 0; } .footer_zero{ height: 50px; line-height: 50px; } .footer_one{ width: 720px; height: 80px; line-height: 80px; position: relative; border-left-width: 0; } /*.footer_one img{*/ /*position: absolute;*/ /*}*/ /*.footer .footer_one a{*/ /*display: block;*/ /*height: 52px;*/ /*width: 187px;*/ /*float: left;*/ /*padding: 7px 0 7px 48px;*/ /*!*display: none;*!*/ } /*footer .footer_one a span{*/ /*text-indent: -9999px;*/ /*display:block;*/ /*width: 138px;*/ /*height: 52px;*/ /*background: url("http://img61.ddimg.cn/upload_img/00660/home/footer_bg.png") 0 0 no-repeat;*/ /*font-size:0;*/ /*line-height: 0;*/ /*cursor: pointer;*/ /*}*/ .footer_three .footer_five{ float: left; /*margin-left: 40px;*/ margin-left: 10px; } .footer_five{ margin-left: 20px; display: inline-block; width: 130px; } .footer_three{ background-color: white; /*width: 1000px;*/ margin:0 auto; height: 200px; /*line-height: 200px;*/ z-index: 3 } .footer_four{ background-color: white; height: 200px; width: 1000px; margin:0 auto; /*left: -500px;*/ } ul{ list-style-type: none; } .footer_five ul a{ color: rgba(0,0,0,0.69); text-decoration: none; font-size: 5px; } .footer_five a:hover{ color: black; } .fly { margin-top: 203px; width: 150px; height: 100px; float: right; margin-right: 200px; position: fixed; } .fly img{ width: 150px; height: 150px; } </style> </head> <body> <div class="fly"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506449298549&di=8f72c24e3e54a28c705a8cf3178661df&imgtype=0&src=http%3A%2F%2Feasyread.ph.126.net%2FHQKV9YFqAoL3SAatH6WQCg%3D%3D%2F7916715716943982967.gif"> </div> <div> <div class="head"> <div class="menu"> <span style=" font-size:5px;color: rgba(159,159,159,1);">欢迎光临当当，请</span> <a style="margin-right: 10px" href="https://login.dangdang.com/signin.aspx?returnurl=http%3A//v.dangdang.com/">登录</a>< <a href="https://login.dangdang.com/Register.aspx?returnurl=http%3A//v.dangdang.com/">成为会员</a> <div class="found"> <a href="http://giftcard.dangdang.com/giftcardCompany">企业采购</a> <a href="http://help.dangdang.com/index">客户服务</a> <a href="http://e.dangdang.com/touch/special/goldenIP/essays.html">小说投稿</a> <a href="https://login.dangdang.com/Signin.aspx?ReturnUrl=http://myhome.dangdang.com/">我的当当</a> <a href="https://login.dangdang.com/signin.aspx?returnurl=http%3A%2F%2Fe.dangdang.com%2Fbooksshelf_page.html">我的云书房</a> <a href="https://login.dangdang.com/Signin.aspx?ReturnUrl=http://myhome.dangdang.com/myOrder">我的订单</a> <a href="http://shopping.dangdang.com/shoppingcart/shopping_cart.aspx?product_ids=0&referer=http://v.dangdang.com/pn10748_355_1.html&prev_referer=">购物车</a> </div> </div> </div> <div class="eyes"> <a class="eyes_z"><img src="http://img60.ddimg.cn/upload_img/00694/weipinhui_header/v_logo.png"></a> <span></span> <input> <a class="eyes_o">全部分类</a> <div class="eyes_t"><a><img style="margin-left: 8px ;margin-top: 0px" src="001.PNG"></a></div> <div class="eyes_f"> <span> 大家都在搜: </span> <a href="http://search.dangdang.com/?key=%B3%E4%C6%F8%CD%E6%BE%DF&act=input">气球</a> <a href="http://search.dangdang.com/?key=%B0%B4%C4%A6%B0%F4&act=input">按摩椅</a> <a href="http://search.dangdang.com/?key=%B5%E7%B6%AF%CD%E6%BE%DF&act=input">电动玩具</a> </div> <!--<div style="clear: both">1</div>--> </div> <div class="head_top"> <div class="head_top_ee"> <ul > <li><a href="http://v.dangdang.com/pn10748_355_1.html">当当首页</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">尾品会</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">孕婴童</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">男装</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">女装</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">内衣</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">鞋履</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">运动/户外</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">箱包/礼品</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">珠宝饰品</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">居家</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">美装</a></li> <li><a href="http://v.dangdang.com/pn10748_355_1.html">童书/图书</a></li> <li><a style="float: right;" href="http://baidu.com">收藏此页</a></li> </ul> </div> <!--<div style="clear: both">1</div>--> <div class="head_top_head"></div> <div style="clear: both">1</div> </div> <div class="body"> <div class="body_zero"> <div> <img class="img_one" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506359964250&di=1c714f95a4e30404ad31c7bd5a4e4e3c&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages %2F20150606%2Ftooopen_sy_128761962238.jpg"> </div> <div class="body_and"> <div class="c1">天堂</div> <div class="c2">100万-200万</div> </div> </div> <div class="body_three" style="position: relative;"> <a style="font-size: 20px;margin-top:7px;position: absolute;">分类: </a> <div style=" z-index: 1;margin-top:5px;margin-left:50px;position: relative;width: 50px;line-height: 30px;height: 30px;display: inline-block;background-color: rgba(226,0,82,1) "> <a href="http://v.dangdang.com/pn10748_355_1.html" style="text-decoration: none;margin-left: 8px;font-size: 15px;color: white;">全部</a> </div> <span> <a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html">运动/户外鞋（32）</a> <a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html">休闲鞋（17）</a> <a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html">靴子/雪地靴</a> <a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html">皮鞋</a> <a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html">帆布鞋/板鞋</a> <a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html">亲子鞋</a> <a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html">学步鞋</a> </span> </div> <hr> <div> <div style="margin-left: 8px;width: 10px;height: 10px;background-color: white;border: solid 1px black ;display: inline-block;"></div> <a style="text-decoration: none;color: #343434;" href="http://v.dangdang.com/pn10748_355_1.html">只显示有货的产品</a> <div class="body_good"> <div><a href="http://v.dangdang.com/pn10748_355_1-f1-srdiscount_desc.html">折扣▼</a></div> <div><a href="http://v.dangdang.com/pn10748_355_1-f1-srdiscount_desc.html">价格▲</a></div> <div><a href="http://v.dangdang.com/pn10748_355_1-f1-srdiscount_desc.html">默认排序</a></div> </div> </div> <div class="body_bfbd"> <h1>特惠专区</h1> </div> <div class="body_moth"> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506419519658&di=3472d0446b397ad5b0dceac678cb8fb5&imgtype=0&src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome %2F1458198286459_000.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506419519658&di=3472d0446b397ad5b0dceac678cb8fb5&imgtype=0&src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome %2F1458198286459_000.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506419519658&di=3472d0446b397ad5b0dceac678cb8fb5&imgtype=0&src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome %2F1458198286459_000.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506419519658&di=3472d0446b397ad5b0dceac678cb8fb5&imgtype=0&src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome %2F1458198286459_000.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506419519658&di=3472d0446b397ad5b0dceac678cb8fb5&imgtype=0&src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome %2F1458198286459_000.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506419519658&di=3472d0446b397ad5b0dceac678cb8fb5&imgtype=0&src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome %2F1458198286459_000.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506419519658&di=3472d0446b397ad5b0dceac678cb8fb5&imgtype=0&src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome %2F1458198286459_000.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506419519658&di=3472d0446b397ad5b0dceac678cb8fb5&imgtype=0&src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome %2F1458198286459_000.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506438937051&di=ee4c1e5927da0737c0dca5910e4b2342&imgtype=0&src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506438937051&di=ee4c1e5927da0737c0dca5910e4b2342&imgtype=0&src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506438937051&di=ee4c1e5927da0737c0dca5910e4b2342&imgtype=0&src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506438937051&di=ee4c1e5927da0737c0dca5910e4b2342&imgtype=0&src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506438937051&di=ee4c1e5927da0737c0dca5910e4b2342&imgtype=0&src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506438937051&di=ee4c1e5927da0737c0dca5910e4b2342&imgtype=0&src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506438937051&di=ee4c1e5927da0737c0dca5910e4b2342&imgtype=0&src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> <div class="body_commodity"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506438937051&di=ee4c1e5927da0737c0dca5910e4b2342&imgtype=0&src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"> </div> <div class="pj"> <div class="pj_one">MAX</div> </div> </div> </div> </div> <div class="footer"> <div style="height: 40px;line-height: 40px;background-color: rgba(234,234,234,1)"></div> <div style="height: 5px;line-height: 5px;background-color: white"></div> <div style="height: 2px;line-height: 2px;background-color: #FE0123"></div> <div class="footer_zero"> <div class="footer_one"> <a> <span styel=> </span> </a> </div> </div> <div class="footer_three" > <div class="footer_four"> <div class="footer_five" > <ul> <li><a>购物指南</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">购物流程</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">发票制度</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">账户管理</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">会员优惠</a></li> </ul> </div> <div class="footer_five" > <ul> <li><a>支付方式</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">货到付款</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">网上支付</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">礼卡支付</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">银行转帐</a></li> </ul> </div> <div class="footer_five" > <ul> <li><a>订单服务</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">订单配送查询</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">订单状态说明</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">自助取消订单</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">自助修改订单</a></li> </ul> </div> <div class="footer_five" > <ul> <li><a>配送方式</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">配送范围及免邮</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">当日递/次日达</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">订单自提</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">验货与签收</a></li> </ul> </div> <div class="footer_five" > <ul> <li><a>退换货</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">退换货政策</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">自助申请退换货</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">退换货进度查询</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">退款方式和时间</a></li> </ul> </div> <div class="footer_five" > <ul> <li><a>商家服务</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">商家中心</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">运营服务</a></li> <li><a class=".footer_end" href="http://help.dangdang.com/details/page2">加入尾品汇</a></li> </ul> </div> </div> <div style="clear: both"></div> </div> </div> </div> </body> </html>
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/12380.html