HTML页面 - 爱码网

/*HTML文件*/

<!DOCTYPE html><html><head><metahttp-equiv="Content-Type"content="text/html" ;charset="utf-8"><title>前端_练习</title><linkhref="style/Css.css"rel="stylesheet"></head><body><divid="top"><ulclass="top_menu"><li><ahref="#">Account Sign In</a></li><li><ahref="#">Register</a></li><li><ahref="#">Buyers Guide</a></li><li><ahref="#">About</a></li><li><ahref="#">Blog</a></li><liclass="no_dot"><ahref="#">Contact</a></li></ul> <ul class="top_bar">  <li class="phone">131 41324 355</li> <li class="help"><a href="#">Live Help</a></li> <li class="jianada"><a href="#"><img src="images/jia.png" alt="1" title="加拿大"></a></li> <li class="meiguo"><a href="#"><img src="images/mei.png" alt="2" title="美国"></a></li> </ul> </div>  <div id="header">  <div id="shop">  <p>0 items in your bag</p> <a href="#">Check Out</a> </div> <h1 title="ECOMMERCE WEBSITE"><a href="#"><img src="images/logo.png" alt="3" ></a></h1>  <div class="search">  <form action=""> <input class="text1" type="text" value="Search Website"> <input class="btn" type="submit" value=""> </form> </div> </div>  <ul id="dao">  <li class="shouye"><a href="#"><strong><span>HOME</span></strong></a></li> <li><a href="#"><strong><span>LATEST ARRIVALS</span></strong></a></li> <li><a href="#"><strong><span>MEN'S</span></strong></a></li> <li><a href="#"><strong><span>WOMEN'S</span></strong></a></li> <li><a href="#"><strong><span>KID'S</span></strong></a></li> <li><a href="#"><strong><span>BRANDS</span></strong></a></li> <li><a href="#"><strong><span>SALE</span></strong></a></li> <li><a href="#"><strong><span>GIFT CARDS</span></strong></a></li> <li><a href="#"><strong><span>FREEBIES</span></strong></a></li> </ul> <div id="content">  <div id="content_top">  <div id="content_bottom">  <div id="ad">  <ul> <li style="filter:alpha(opacity=100);opacity: 1;"><a href="#a1"><img src="images/banner/1.png" alt="4" title="广告横幅"></a></li> </ul> <h2>PRODUCT TITLE</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit lacus dapibus ante mattis in adipiscing nibh placerat. Cras bibendum porta diam, non dignissim sapien malesuada vitae.</p> <div class="bg"></div> </div> <div id="main">  <div id="left">  <div class="side1_menu">  <h2><strong><span>Browse Categories</span></strong></h2><div class="list">  <ul> <li><a href="#">Lorem ipsum dolor sit</a></li> <li><a href="#">Amet consectetur</a></li> <li><a href="#">Adipiscin elit</a></li> <li><a href="#">Cras suscipit lacus</a></li> <li><a href="#">Dapibus ante mattis</a></li> <li><a href="#">Adipiscing nibh placerat</a></li> <li><a href="#">Cras bibendum</a></li> <li><a href="#">Porta diam elit</a></li> <li><a href="#">Adipiscing nibh placerat</a></li> <li><a href="#">Cras bibendum</a></li> <li><a href="#">Porta diam elit</a></li></ul> </div> </div> <div id="side2">  <div class="side2_join_1">  <div class="side2_join_2">  <div class="join_form"> <p>Join our newsletter list to get the latest updates</p> <form action=""> <input type="text" class="text"> <input type="submit" value="Join Now" class="btn"> </form> </div> <ul class="join_list">  <li class="space1">Follow us on Twitter</li> <li class="space2">Become our fan on Facebook</li> <li class="space3">Connect with us on LinkedIn</li> <li class="space4">Send us your email enquiries</li> </ul> </div> </div> </div>  <div id="payment">  <img src="images/payment.png" alt="">  </div> </div> <div id="right">  <div id="part1" class="sort"> <dl>  <dt>Sotr by:</dt>  <dd>  <h2>Ascending</h2> <a href="javascript:;"></a> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </dd> <dd> <h2>Name1</h2> <a href="javascript:;"></a> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </dd> <dd> <h2>Name2</h2> <a href="javascript:;"></a> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </dd> </dl><p> <strong>Items per page:</strong> <span>12</span> / <span>20</span> / <span class="color_style">30</span> / <span class="color_style">50</span> </p> </div>  <div class="part2"> <h2>Our Products</h2> <ul class="clear">  <li> <a href="#"><img src="images/pro1.png" alt="" title=""></a> <h3>Product1</h3> <p>Price: <span>$12.99</span></p> </li>  <li> <a href="#"><img src="images/pro2.png" alt=""></a> <h3>Product2</h3> <p>Price: <span>$12.99</span></p> </li> <li> <a href="#"><img src="images/pro3.png" alt=""></a> <h3>Product3</h3> <p>Price: <span>$12.99</span></p> </li> <li> <a href="#"><img src="images/pro4.png" alt=""></a> <h3>Product4</h3> <p>Price: <span>$12.99</span></p> </li> <li> <a href="#"><img src="images/pro1.png" alt="" title=""></a> <h3>Product1</h3> <p>Price: <span>$12.99</span></p> </li> <li> <a href="#"><img src="images/pro2.png" alt=""></a> <h3>Product2</h3> <p>Price: <span>$12.99</span></p> </li> <li> <a href="#"><img src="images/pro3.png" alt=""></a> <h3>Product3</h3> <p>Price: <span>$12.99</span></p> </li> <li> <a href="#"><img src="images/pro4.png" alt=""></a> <h3>Product4</h3> <p>Price: <span>$12.99</span></p> </li> <li> <a href="#"><img src="images/pro1.png" alt="" title=""></a> <h3>Product1</h3> <p>Price: <span>$12.99</span></p> </li> <li> <a href="#"><img src="images/pro2.png" alt=""></a> <h3>Product2</h3> <p>Price: <span>$12.99</span></p> </li> <li> <a href="#"><img src="images/pro3.png" alt=""></a> <h3>Product3</h3> <p>Price: <span>$12.99</span></p> </li><li> <a href="#"><img src="images/pro4.png" alt=""></a> <h3>Product4</h3> <p>Price: <span>$12.99</span></p> </li> </ul> </div>  <div class="part3"> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">NEXT <span>></span></a> <a href="#">LAST <span>>></span></a> </div> <div id="part4">  <h2>FEATURED PRODUCTS</h2> <div class="scroll_1">  <div class="scroll_2"> <div id="run1" class="scroll_3">  <a class="prev" href="javascript:;"></a> <a class="next" href="javascript:;"></a> <div class="list_scroll"> <ul> <li> <a href="#"><img src="images/scroll_1.png" alt=""></a> <p>Elegant MP3 player skin PSD download</p> </li> <li> <a href="#"><img src="images/scroll_2.png" alt="" /></a> <p>Download shopping bag & icons (PSD & PNG)</p> </li> <li> <a href="#"><img src="images/scroll_3.png" alt="" /></a> <p>High resolution abstract bokeh background</p> </li> </ul> </div></div> </div> </div> </div> </div> </div> </div> </div></div> <div id="footer"> <div id="footer_1">  <p class="f1">Shop online with us safely & securely</p> <p class="f2">We ship your orders anywhere!</p> <div class="search"> <form action="#"> <input id="text" class="text" type="text" value="Search Website"> <input class="btn" type="submit" value=""> </form> </div> </div><div id="footer_link1"> <dl> <dt>Company</dt> <dd><a href="#">Home</a></dd> <dd><a href="#">About Us</a></dd> <dd><a href="#">Latest News</a></dd> <dd><a href="#">Login</a></dd> <dd><a href="#">Join Us</a></dd> </dl> <dl class="footer_link2"> <dt>Categories</dt> <dd><a href="#">Lorem ipsum dolor sit</a></dd> <dd><a href="#">Amet consectetur</a></dd> <dd><a href="#">Adipiscin elit</a></dd> <dd><a href="#">Cras suscipit lacus</a></dd> <dd><a href="#">Dapibus ante mattis</a></dd> <dd><a href="#">Adipiscing nibh placerat</a></dd> </dl> <dl class="footer_link3"> <dt>Information</dt> <dd><a href="#">My Account</a></dd> <dd><a href="#">Rewards</a></dd> <dd><a href="#">Terms & Conditions</a></dd> <dd><a href="#">Buying Guide</a></dd> <dd><a href="#">FAQ</a></dd> </dl> <dl class="footer_link4"> <dt>Social Network</dt> <dd><a href="#">My Account</a></dd> <dd><a href="#">Rewards</a></dd> <dd><a href="#">Terms & Conditions</a></dd> <dd><a href="#">Buying Guide</a></dd> <dd><a href="#">FAQ</a></dd> </dl> <dl class="footer_link5"> <dt>Contact Us</dt> <dd><a href="#">Phone: 1.234.567.8901</a></dd> <dd><a href="#">Toll-Free: 1.234.567.8901</a></dd> <dd><a href="#">Fax: 1.234.567.8901</a></dd> <dd><a href="#">Email:<span>Send us an email</span></a></dd> <dd class="space"><a href="#">MON - SAT 9am to 7:30pm</a></dd> <dd><a href="#">Sundays, holidays closed</a></dd> </dl> </div> </div></body></html>

HTML页面

/*CSS文件*/

/*样式重置表*/

body,ul,p,h1,h2,h3,h4,dl,dd,form,input,textarea,select{padding:0;margin:0;font-family: arial;}
li{list-style:none;}
img{border:none;}
a{text-decoration: none;}
a:hover{text-decoration: underline;}/*下划线*/

/*body用背景图平铺*/

body{background:url(../images/bg_1.png) repeat-x;}

/*top设置宽高,margin:外边距,第一个表示top和bottom，第二个表示left和right
因为0 auto，表示上下边界顶到头，左右则根据宽度自适应相同值（即居中）*/

#top{width: 960px;height:30px;margin:0 auto;}

.top_menu{float:left; }
.top_menu li{float:left;background:url(../images/bg-2.png) no-repeat right /*块的右边*/ 14px;font-size:13px;line-height:30px;padding-right: 18px;margin-right: 15px;}
.top_menu a{color:#c0c0c0;text-decoration: none;} /*以a的颜色为主(默认紫色)*/
.top_menu a:hover{color:#fff;}
.top_menu .no_dot{background:none;padding:0;margin-right:16px;} /*contact与电话图标之间的间隙是contact的外边距：16px*/

.top_bar{float:left;}
.top_bar li{float:left;height:30px;color:#fff;font-weight: bold;font-size:13px;line-height:30px;}/*国旗与高度有关，居中；字体与行高有关*/
.top_bar .phone{background: url(../images/bg-2.png) no-repeat 5px -16px;padding:0 30px;}/*默认图片在字体的左边，往右移4px,上移16px*/
.top_bar .help{background:url(../images/bg-2.png) no-repeat 0 -48px;padding:0 38px;} /*上右下左*/
.top_bar .help a{color:#fff;/*text-decoration: none;*/}
.top_bar .meiguo{float: left; /*position: relative;*/}
.top_bar .jianada{margin-right: 20px;}

/*css中的display是设置元素显示的方式,block是一块状元素的方式显示，inline是以内联元素的方式显示，none是不不显示；
块状元素会单独占据一样，其他元素跟他在同一行的会被迫换行，挤到下一行那里去，inline则不会这样*/

/*如果用<div>+<a> 做一个按钮，这个能理解吧，就是想通过 link 来实现跳转，但是看起来是个按钮，且不需要触发事件。
而且 css 也比 button 的好用。这中情况下，如果不是“块”block，那么只要点到文字上时才会触发，点到按钮<div>但是没点到字是不行的，
但是用了 block 后，整个按钮都可以承载 a 的link操作了*/

/*position：absolute这个是绝对定位；
是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left再定位。应该用margin。
比如：<div class="1"></div><div class="2"></div>
当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右边，距离120px*/

/*padding:1px 2px 3px 4px; (上右下左)*/

/*float: left; 表示向左浮动，比如多个div在一个页面上，默认情况是：一行一个div，但是只要在div的css中使用float：left，
可以使一行有多个div，这样可以把网页划分成很多块，但是使用该属性会影响后面的元素，所有如果后面的div不想再被影响，
可以使用clear:both；可以理解为清除float:left和float:right的影响，返回到默认状态。像<ul><li></li></ul>也可以这么使用，
做导航菜单基本上有这个元素,使用float:left使其横向显示。*/

/*text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐，text-align属性只能针对文本文字和img标签，对其他标签无效。
left 默认值，左对齐 center 居中对齐 right 右对齐 justify 两端对齐*/

/*span:行内元素，对在一行的数据、元素分隔设置样式，可分多块空间*/

#header {width: 960px; height: 100px;margin:0 auto;position:relative;background: url(../images/header.png);}
#shop {width: 260px;height: 100px;background: url(../images/shop.png) no-repeat; position:relative;}
#shop p {color: #f7f7f7;font-size:20px;font-family: arial;padding:30px 0 0 84px;}
#shop a {display:block; width: 114px; height: 23px; background: url(../images/shop.png) no-repeat 0 -100px; position:absolute;top:63px;left:104px;font-size: 15px;color: #ffc200;text-decoration: none;font-weight: bold;text-align: center; line-height: 23px;}
#shop a:hover{color: #ffe388;}

#header h1{width:238px;margin:-100px auto 0;}

#header .search{width:292px;height:32px;background:url(../images/GO.png) no-repeat ;position: absolute;top:32px;right:0; }
#header .search .text1{width:230px;height: 32px;position: absolute;top:0;left: 20px;line-height: 32px;background: none;border:none;font-size:13px;color:#666;outline:none;}
#header .search .btn{width:42px;height:32px;position: absolute;top:0;right: 0;background: none;border:none;}

#dao {width:960px;height: 36px;margin:0 auto;padding-top:8px;}
#dao li{float:left;height: 28px;margin-right:2px;text-align: center;}
#dao a{float:left;height: 28px;text-decoration: none;color: #fff;line-height: 28px;font-size:15px;font-family: Arial;cursor:pointer ;}
#dao strong{float: left;font-weight: normal;}
#dao span{float: left;height: 28px; padding:0 16px;} /*以里面的span为主*/

#dao a:hover,#dao .shouye a{background:url(../images/hover.png) repeat-x 0 -56px;}/*(默认平铺）平铺不需要左右移*/
#dao a:dover strong,#dao .shouye strong{background: url(../images/hover.png) no-repeat;} /*一定要按父子级别*/
#dao a:hover span,#dao .shouye span {background: url(../images/hover.png) no-repeat right -28px;}

#content { width:1000px; height:1324px;margin:24px auto 20px; background:url(../images/content_bg.gif) repeat-y -1000px 0 ; }
#content_top { width:1000px;height: 1324px; background:url(../images/content_bg.gif) no-repeat ; }
#content_bottom { width:1000px;height:1324px;background:url(../images/content_bg.gif) no-repeat -2000px bottom ; padding-top:10px; }
/*bottom是height：1324px的下面*/
/*三层嵌套，上圆角，平铺，下渐变*/

/*z-index 属性设置元素的堆叠顺序*/
/*兼容写法：
filter:alpha(opacity=100);opacity: 1;
d*/
/*印屏幕才能抵消相同背景颜色，一个图层。文字不能放在一张图片上，需分块平铺*/
/*strong,span不认高，需设置成块disply:block;*/

#ad{width:940px;height:300px;position:relative;margin:0 auto;}
#ad ul,#ad li,#ad h2,#ad p,#ad .bg{position: absolute;}
#ad ul{top:0;left:0;z-index:1;}
#ad li{top:0;left: 0;filter:alpha(opacity=0);opacity: 0;}
#ad h2{left:0;bottom:10px;z-index: 3;width:268px;text-align: center;font-size:25px;color:#ffc600;}
#ad p{left:268px;bottom:2px;font-size: 13px;color:#fcc;z-index: 3;width:630px;line-height: 16px;}
#ad .bg{bottom:0;width:940px;height: 52px;background: #000;filter:alpha(opacity=80);opacity: 0.8;z-index: 2;}

#main{width: 942px;margin:0 auto;margin-top:30px;}
#left{width: 209px;float: left;}
#right{width:706px;float:right;}

.side1_menu h2{height: 28px;line-height: 28px;text-align: center;font-size: 15px;color: #fff;background: url(../images/side1_menu.png) repeat-x 0 -58px;margin-bottom:1px; }
.side1_menu strong{display:block;height:28px;background: url(../images/side1_menu.png) no-repeat;}
.side1_menu span{display: block;height: 28px;background: url(../images/side1_menu.png) no-repeat right -29px;}

.list{background:url(../images/list.gif) repeat-y;}
.list ul{background: url(../images/list.gif) no-repeat -209px bottom;padding:10px 4px 15px;}
.list a{display:block;height:27px;line-height: 26px;border-bottom: 1px solid #fff;color:#434343;text-decoration:none;font-weight: bold;font-size:10px;padding-left:10px; }
.list a:hover{color:#b20e00;border-bottom:1px solid #b20e00;background: #fae191;text-decoration:none;}

#side2{width:209px;background: url(../images/side2_bg.gif) repeat-y -209px 0;border:1px solid #c0c0c0;margin-top:20px;padding-bottom: 5px;padding-top: 5px;}
.side2_join_1{background: url(../images/side2_bg.gif) no-repeat ; }
.side2_join_2{background: url(../images/side2_bg.gif) no-repeat -418px bottom;}

.join_form{width:180px;margin:0 auto 15px;}
.join_form p{font-size:15px;color:#666;line-height:18px;padding:5px 0 12px;}
.join_form .text{width:175px;height:25px;line-height:25px;background: #fff;border:1px solid #fff;border:1px solid #c0c0c0;margin-bottom: 12px;}
.join_form .btn{width:88px;height:25px;border:none;font-size:15px;color:#fff;font-weight: bold;background: url(../images/btn_bg2.png);margin:0 auto;display: block;cursor: pointer;} /*在按钮处放一个背景图按钮不是块级不能居中*/

.join_list{width:192px;margin:0 auto;background: url(../images/side2.gif) no-repeat 10px 6px;}
.join_list li{border-top:1px solid #fff;padding-left:50px;color:#434343;font-size:13px;}

.space1{line-height:38px;}
.space2{line-height: 24px;}
.space3{line-height: 24px;}
.space4{line-height: 24px;}

#payment{margin:32px 0 0 18px;}

.sort{height:20px;}
.sort dl{float:left;}
.sort dt{float:left;font-size:12px;color:#747474;font-weight: bold;margin-right: 6px;}
.sort dd{float:left;width:108px;height: 18px;position:relative;margin-right: 16px;}
.sort h2{width:108px;height:17px;border:1px solid #ccc;font-size:12px;color:#747474;font-weight: normal;text-indent:6px;}/*text-indent 属性规定文本块中首行文本的缩进*/
.sort a{position: absolute;top:0;left:91px;width:18px;height:18px;background: url(../images/xia.png);z-index: 2;}
.sort a:hover{background: url(../images/xia2.png);}
.sort ul{width:108px;border:1px solid #ccc;background: #fff;position:absolute;top:18px;left:0;z-index:1;display: none;}/*以dd为相对定位在Ascending下方18px display: none;此元素不会被显示*/
.sort li{font-size:12px;line-height: 20px;text-indent: 6px;cursor: pointer;}
.sort .active{background: #099;color:#fff;}
.sort p{font-size:12px;float:right;color:#747474;}
.sort p strong{color:#999;}
.sort p span{padding:0 4px;}
.color_style{color:#b20e00;}

.part2{width:706px;overflow:hidden;}/*div里添加的东西再多，高度或宽度也不变。超出的部分隐藏*/
.part2 h2{height: 56px;line-height: 62px;overflow: hidden;font-size:18px;color:#666;}
.part2 ul{width:736px;}
.part2 li{float: left;width:182px;height: 200px;}
.part2 a{display: block;width: 156px;height: 116px;border:1px solid #c6c6c6;margin-bottom: 6px;}
.part2 a:hover{border:1px solid #663;}
.part2 h3{font-size: 15px;color: #666;line-height: 16px;}
.part2 p{font-size: 13px;color: #333;line-height: 16px;margin-top:2px;}
.part2 span{color: #b20e00;}

.part3 {text-align: center;border-bottom: 1px solid #cdcdc8;padding-bottom: 5px;}
.part3 a{display: inline-block;height: 20px;line-height: 20px;padding:0 8px;color:#b20e00;text-decoration: none;font-size: 12px;}/*display: inline-block;可给a，span设置宽高*/
.part3 a:hover,.part3 .active{color:#fff;background: #b20e00;}/*点上去1变白，背景变成红色*/
.part3 span{font-family: '宋体';}

#part4 h2{height: 56px;line-height: 62px;overflow: hidden;font-size:18px;color:#666;}
.scroll_1{height:196px;background: url(../images/zhong.png) repeat-x;}
.scroll_2{height: 196px;background: url(../images/zuo.png) no-repeat;}
.scroll_3{height: 196px;background: url(../images/you.png) no-repeat right -2px;position:relative;}

.prev,.next { width:35px; height:42px; position:absolute; top:70px; }
.prev { left:0; background:url(../images/prev.png) no-repeat; }
.next { right:0; background:url(../images/next.png) no-repeat; }

.list_scroll{width:615px;padding-top:32px;margin:0 auto;overflow: hidden;position: relative;}
.list_scroll ul{height: 150px;position: relative;}
.list_scroll li{width: 150px;float:left;margin-right:30px;margin-left: 20px;}
.list_scroll a{display: block;width: 150px;height: 100px;}
.list_scroll p{line-height: 14px;padding-top:10px;font-size:12px;color:#600;text-align: center;}

#footer{height: 302px;background: url(../images/footer_bg.png) repeat-x;}
#footer_1{width: 940px;height: 60px;margin:0 auto;position: relative;}
#footer_1 p{height:60px;line-height: 60px;color: #cbcbcb;font-weight: bold;font-size: 12px;float: left;}
#footer_1 .f1{background: url(../images/footer_zuo.png) no-repeat;text-indent: 56px;/*margin-right: 4px;*/}
#footer_1 .f2{background: url(../images/footer_you.png) no-repeat;text-indent:54px;}
#footer_1 .search{padding-bottom: 20px;width:290px;height:32px;position: absolute;top:15px;right:0;background: url(../images/GO.png) no-repeat;}
#footer .search .text{width:238px;height: 32px;position: absolute;top:0;left: 10px;line-height: 32px;background: none;border:none;font-size:13px;color:#666;outline:none;}
#footer .search .btn{width:42px;height:32px;position: absolute;top:0;right: 0;background: none;border:none;}

#footer_link1{width:920px;margin:0 auto;overflow: hidden;padding-top:20px;}
#footer_link1 dl{float:left;width:184px;}
#footer_link1 dt{font-size:15px;color:#fff;font-weight: bold;line-height: 50px;}
#footer_link1 dd{line-height: 20px;}
#footer_link1 a{font-size: 13px;color:#cfcfcf;}