刚开始学习前端,学了HTML和CSS之后,自己照着BBC网站用学到的知识把整个网站复刻下来,仅仅只是把网站的模样复制过来,还没有交互的内容,继续学JS希望可以做出更好看的网站。
- CSS学习过程中一开始对margin, border, padding难以区分,后来借鉴了w3school上的图,一目了然。
- 在加入同一类别的文字或图像,最好使用class标签,以便于统一对文字或图像进行修改。养成良好的编程习惯,e.g.缩进,命名等。
- 目前最大的疑惑就是对width的控制,经常需要微调才能达到理想的效果。
附源代码:
<html> <head> <title>Technology - BBC News</title> <style type="text/css"> #topbar { width:1090px; margin:0 auto; height:40px; } body { margin:0; padding:0; font-family:Helvetica,Arial,sans-serif; } #logo { margin:8px; width:80px; float:left; margin-right:8px; } .topbar-section { float:left; border-left:1px #CCCCCC solid; height:100%; } #signin-image { width:25px; margin:8px 15px; float:left; } #signin-text { text-decoration:bold; position:relative; top:12px; padding-right:50px; } #wigglyline { float:left; height:40px; } #bell { height:25px; margin:9px 9px 0 9px; } #bell-div { float:left; } .topbar-menu { font-weight:bold; font-size:100%; padding:12px 15px 0 15px; height:27px; float:left; } #more-arrow { width:10px; margin-left:20px; } #search-box { background-color:#E4E4E4; border:none; font-weight:bold; font-size:14px; padding:5px; margin:5px 0 5px 5px; float:left; } #magnifying-glass { height:27px; margin-top:5px; } .clear { clear:both; } #menu-bar-container { background-color:#BB1919; width:100%; height:80px; } #menu-bar { width:1080px; margin: 0 auto; } h1 { padding:0; margin:0; color:white; font-size:40px; font-weight:normal; padding-top:9px; } #menu-bar-2-container { background-color:#A91717; width:100%; } #menu-bar-2 { width:1100px; margin: 0 auto; height:30px; } #menu-bar-2 a { color:white; height:20px; text-decoration:none; padding:0 10px; border-right:1px solid #BB4545; font-size:16px; position:relative; top:5px; } #menu-bar-2 a:hover { text-decoration:underline; } .no-border { border:none !important; } #down-arrow { height:8px; position:relative; top:4px; } #page-container { width:1080px; margin: 0 auto; } h2 { font-weight:normal; font-size:20px; margin-top:15px; border-bottom:2px solid #a91717; width:105px; } h3 a { color:black; font-size:30px; text-decoration:none; } h3 a:hover { color:#1167a8; } #article-summary { color:#5a5a5a; width:230px; float:left; } .clock { height:16px; position:relative; top:2px; } #topic-link { text-decoration:none; color:#a91717; border-left:1px solid #CCCCCC; padding-left:10px } #topic-link:hover { color:#1167a8; } #article-summary a:hover { color:#1167a8; } .date { color:#5a5a5a; padding-right:10px; } #article-container { float:left; width:650px; border-right:1px solid #CCCCCC; } #main-article-image { width:380px; margin-top:10px; margin-left:20px; } #article-hr { border-top:1px solid #a91717; width:35px; } .article-link { color:black; text-decoration:none; } #watch-listen { float:right; margin-left:10px; width:400px; } h4 { font-weight:normal; font-size:20px; } .article-side-image { width:120px; float:left; margin-right:10px; } .watch-listen-link { padding-top:0; text-decoration:none; color:black; font-weight:bold; font-size:18px; } .watch-listen-link:hover { color:#1167a8; } </style> </head> <body> <div id="topbar"> <img id="logo" src="images/bbclogo.png"> <div id="signin-div" class="topbar-section"> <img id="signin-image" src="images/signinimage.png"> <span id="signin-text"><strong>Sign in</strong></span> </div> <div id="bell-div"> <img id="wigglyline" src="images/wigglyline.png"> <img id="bell" src="images/bell.png"> </div> <div class="topbar-section topbar-menu"> News </div> <div class="topbar-section topbar-menu"> Sport </div> <div class="topbar-section topbar-menu"> Weather </div> <div class="topbar-section topbar-menu"> Shop </div> <div class="topbar-section topbar-menu"> Travel </div> <div class="topbar-section topbar-menu"> More <img id="more-arrow" src="images/more-arrow.png"> </div> <div class="topbar-section"> <input id="search-box" type="text" value="Search"> <input type="image" id="magnifying-glass" src="images/magnify-glass.png"> </div> </div> <div class="clear"></div> <div id="menu-bar-container"> <div id="menu-bar"> <h1>NEWS</h1> </div> <div class="clear"></div> <div id="menu-bar-2-container"> <div id="menu-bar-2"> <a href=>Home</a> <a href=>UK</a> <a href=>World</a> <a href=>Business</a> <a href=>Tech</a> <a href=>Science</a> <a href=>Stories</a> <a href=>Entertainment & Arts</a> <a href=>Vedio & Radio</a> <a href=>World News TV</a> <a href="" class="no-border">More</a> <img id="down-arrow" src="images/down-arrow.png"> </div> </div> </div> <div class="clear"></div> <div id="page-container"> <div id="main-article"> <h2>Technology</h2> <div id="article-container"> <h3><a href="">BMW advert 'promoted dangerous driving'</a></h3> <div id="article-summary"> <p>The UK's advertising watchdog rules a recent BMW campaign encouraged irresponsible driving.</p> <p><img class="clock" src="images/clock.png"> <span class="date">10 May 2018</span> <a id="topic-link" href="">Technology</a></p> <hr id="article-hr" align="left"> <p><a class="article-link" href="">BMW recalls 300,000 cars over stalling risk</a></p> </div> <img id="main-article-image" src="images/main-article-image.png"> </div> </div> <div id="watch-listen"> <h4>Watch/Listen</h4> <img class="article-side-image" src="images/article1.png"> <p><a class="watch-listen-link" href="" >Is this the ultimate autonomous car?</a></p> <p><img class="clock" src="images/clock.png"> <span class="date">10 May 2018</span> <a id="topic-link" href="">Technology</a></p> <img class="article-side-image" src="images/article3.png"> <p><a class="watch-listen-link" href="">Could Trump's Space Force'become a reality?</a></p> <p><img class="clock" src="images/clock.png"><span class="date">10 May 2018</span> <a id="topic-link" href="">US & Canada</a></p> </div> </div> </body> </html>