刚开始学习前端，学了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>