第一个网页（仿照当当网,仅仅使用CSS）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这个网页是在学过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>
<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 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>