HTML CSS 模仿当当网
生活随笔
收集整理的這篇文章主要介紹了
HTML CSS 模仿当当网
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用HTML + CSS 編寫當當網
效果圖如下展示：
代碼塊：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>當當網</title><style type="text/css">body {padding: 1px 40px;}.header{clear: all;height: 60px;}.header_left {float: left;margin: 0px 10px;width: 30%;}.header_all_right {width: 25%;float: right;margin-right: 10px;font-family: "arial, helvetica, sans-serif";}.header_right_top {margin-bottom: -5px;clear: right;}.head_right_bottom {clear: right;height: 40px;background-color: aliceblue;}.header_right {margin: 8px 6px;}.header_right a {text-decoration: none;color: black;padding: 3px;}.contend {clear: left;padding: 0px 10px;}.chart {clear: left;margin-top: 10px;}.bar {background-color: orangered;height: 35px;}.puture {margin-top: 10px;border: solid;border-color: aquamarine;clear: left;height: 400px;}.footer {text-align: center;}.contend .tag {float: left;width: 4.3%;margin: 6px 10px 6px 10px;}.contend .tag a {text-decoration: none;color: black;padding: 3px;color: white;}.puture1 {margin-top: 10px;margin-bottom: 10px;margin-left: -10px;}.puture2 {margin-left: 10px;clear: left;height: 300px;background: url(img/book-01.jpg);background-repeat: no-repeat;}.puture2 .shu{float: left;}.puture2 .shu img{padding-left:20px ;}.puture2 .one {margin-right: 0px;}.puture .four .jianjie{padding-top: 80px;padding-right: 100px;}.puture2 .nine {margin-left: 0px;}.four .jianjie{}.four .jianjie a{text-decoration:none;color: blue;}.book2{clear: left;height: 130px;margin: 20px 5px;}.book2 .six a{text-decoration: none;font-size:small;color: blue;}.book2 .six p{font-size: x-small;margin: 5px;}.book2 .twol {background: url(img/book-02.jpg);height: 120px;background-repeat: no-repeat;}.book3 .six a{text-decoration: none;font-size:small;color: blue;}.book3 .six p{font-size: x-small;margin: 5px;}.book3 .twol {background: url(img/book-03.jpg);height: 120px;background-repeat: no-repeat;}.footer{color: lightgray;font-size: smaller;}.one {width: 8%;float: left;}.two {width: 25%;float: right;text-align: center;}.twol{width: 20%;float: left;}.three {width: 26%;float: left;}.four {width: 37%;float: left;}.nine {widows: 92%;float: left;}.six{width: 65%;float: left;}.five{width: 50%;float: left;}</style></head><body><div class="header"><div class="header_left"><img src="img/logo.jpg" alt="logo" /></div><div class="header_all_right"><div class="header_right_top"><img src="img/icon_count.png" alt="" /></div><div class="head_right_bottom"><div class="two"><div class="header_right" style="height:30px;width: 70px;"><a href="#">都看樂器</a></div></div><div class="two"><div class="header_right" style="height:30px;width: 70px;"><a href="#">數字館</a></div></div><div class="two"><div class="header_right" style="height:30px;width: 70px;"><a href="#">當當優品</a></div></div><div class="two"><div class="header_right" style="height:30px;width: 70px;"><a href="#">唯品會</a></div></div></div></div></div><div class="contend"><div class="bar"><div class="tag"><a href="#">首頁</a></div><div class="tag"><a href="#">圖書</a></div><div class="tag"><a href="#">音像</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div><div class="tag"><a href="#">童裝</a></div></div><div class="chart"><img height="100%" width="100%" src="img/banner.png" alt="#" /></div><div class="puture"><div class="three"><div class="puture1"><img src="img/bg_bang.gif" alt="" /></div><div class="puture2"><div class="shu"><img src="img/bookNo1.gif" alt="" /></div></div></div><div class="four"><div class="jianjie"><a href="#">偷影子的人</a><p>埃及——世界上*偉大的文明體，其古代故事跨越了四千多年的歷史時段，而這一歷史時段又塑造了日后整個世界的形態。，</p><p>本書是喬安?弗萊切的代表作，作為英國BBC該書電視臺相關古埃及解讀的系列節目的原著，因此具有BBC紀錄片式的客觀性和權威性。</p><p>全書以古埃及4000多年一代代的王朝為階段，按時間推行的王朝興衰為軸線來講述不同王朝的情況，根據考古實物，如壁畫、神廟、金字塔等，以及各類出土的文獻來還原每代帝王的生活和王朝的發展</p></div></div><div class="four" style="height: 400px;"><div class="book1" style="height: 60px;"></div><div class="book2" ><div class="twol"><img src="img/bookNo2.gif" alt="" /></div><div class="six"><a href="#">看見（央視知名記者，主持人蔡靜：十年個人成長的告白，中國社會變遷的備忘）</a><br /><p>作者：蔡靜 著</p><p>出版社：廣西師范大學出版社</p> <p>29.4 7.4折</p></div></div><div class="book3" ><div class="twol"><img src="img/bookNo3.gif" alt="" /></div><div class="six"><a href="#">看見（央視知名記者，主持人蔡靜：十年個人成長的告白，中國社會變遷的備忘）</a><br /><p>作者：蔡靜 著</p><p>出版社：廣西師范大學出版社</p> <p>29.4 7.4折</p></div></div></div></div><div class="footer">Copyright (C) 當當網 2004-2017, All Rights Reserved <img src="img/validate.gif" alt="#" />京ICP證041189號出版物經營許可證 新出發京批字第直0673號</div></body></html>?
總結
以上是生活随笔為你收集整理的HTML CSS 模仿当当网的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： git分支（存在意义和使用方法）
- 下一篇： 计算机网络基带和宽带,基带信号和宽带信号