制作工具：FireFox、TextWrangler
原始画面
HTML文件代码
<!doctype html>
<html>
<head>
<title>Lin's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css" /> <!--链接外部CSS文件 插入的位置 插入的类型 插入的链接-->
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="bbclogo">
<img src="images/bbclogo.png" width=84px />
</div>
<div id="signin">
<p><img src="images/signin.png" width=19.99px /><span class="signinfont">Sign in</span></p>
</div>
<div id="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>Shop</li>
<li>Earth</li>
<li>Travel</li>
</ul>
</div>
<div id="more">
<p>More<span class="popdownmenu"><img src="images/popdownmenu.png" width=6px /></span></p>
</div>
<div id="search">
<input type="text" placeholder="Search" /> <!--设定搜索框，输入类型为文字 占位符文字为search-->
</div>
</div>
</div>
<div id="newsbar">
<div class="fixedwidth">
<img src="images/news.svg" />
</div>
</div>
<div id="menu1">
<div class="fixedwidth">
<div id="home">
<p>Home</p>
</div>
<ul>
<li>Video</li>
<li>World</li>
<li>Asia</li>
<li>UK</li>
<li>Business</li>
<li>Tech</li>
<li>Science</li>
<li>Magazine</li>
<li>Entertainment & Arts</li>
<li>Health</li>
<li>World News TV</li>
</ul>
<div id="redmore">
<p>More<img src="images/redmore.png" width=8px /></p>
</div>
</div>
</div>
<div id="menu2">
<div class="fixedwidth">
<div id="asia">
<p>Asia</p>
</div>
<div id="china">
<p>China</p>
</div>
<div id="india">
<p>India</p>
</div>
</div>
</div>
<div id="blank" class="fixedwidth"></div> <!--留白区域 可以放置广告之类的-->
<div id="primary" class="fixedwidth">
<h1>Outrage spreads over eight-year-old's rape</h1>
<div class="clear"></div>
<div class="session1">
<p class="session1 width1">The rape and murder of the girl has become a
religious flashpoint in Indian-administered Kashmir</p>
</div>
<div class="pic1">
<img src="images/pic1.png" width=400px />
</div>
<p class="time"><img src="images/clock.png" width=12px /><span class="left">
13 April 2018</span><span class="right"> India</span></p>
<div class="line1" /></div>
<div class="width1 session2">
<p id="session2">The brutal crime that has Kashmir on edge</p>
<p id="sessino2">Was Delhi gang rape India's #Metoo moment?</p>
</div>
<div class="clear"></div>
<div class="line2" /></div>
<div class="clear"></div>
<div class="session3">
<div>
<img src="images/pic2.png" width=216px />
</div>
<div>
<h3>Bao is Pixar's first film by an Asian woman</h3>
</div>
<div>
<p>Bao, the cosy tale of a dumpling come to life, was conceived as a Chinese Gingerbread Man stroy.</p>
</div>
<div class="clear"></div>
<p class="time"><img src="images/clock.png" width=12px /><span class="left">
13 April 2018</span><span class="right"> Asia</span></p>
</div>
<div class="session4">
<div>
<img src="images/pic3.png" width=216px />
</div>
<div>
<h3>Smart cameras catch man in 60,000 crowd</h3>
</div>
<div>
<p>The suspect was caught by facial recognition technology at a
pop concert, which he regrets attending.</p>
</div>
<div class="clear"></div>
<p class="time"><img src="images/clock.png" width=12px /><span class="left">
13 April 2018</span><span class="right"> China</span></p>
</div>
<div id="session5" class="oldnews">
<h3>Thai women reject 'sexy' Songkran advice</h3>
<div class="clear"></div>
<p class="time"><img src="images/clock.png" width=12px /><span class="left">
13 April 2018</span><span class="right"> Asia</span></p>
<div class="oldnewsline"></div>
<h3>Woman missing after fall from cruise ship</h3>
<div class="clear"></div>
<p class="time"><img src="images/clock.png" width=12px /><span class="left">
3 hours ago</span><span class="right"> Australia</span></p>
<div class="oldnewsline"></div>
<h3>China's Xi inspects massive naval display</h3>
<div class="clear"></div>
<p class="time"><img src="images/clock.png" width=12px /><span class="left">
13 April 2018</span><span class="right"> China</span></p>
<div class="oldnewsline"></div>
</div>
</div>
</body>
</html>CSS文件代码
body {
margin:0;
}
.clear {
clear:both;
}
.fixedwidth {
width:976px;
height:100%;
margin:auto;
}
#topbar {
height:40.5px;
background-color:white;
font-family: Arial,Helvetica,freesans,sans-serif;
font-weight:bold;
font-size:13px;
color:#333333;
}
#bbclogo {
float:left;
width:92px;
height:39.5167px;
border-right:1px solid #E5E5E5;
}
#bbclogo img { /*引用图片*/
padding-top:8px; /*上方留白8px*/
}
#signin {
float:left;
width:166px;
height:100%;
border-right:1px solid #E5E5E5;
}
#signin p {
margin:11px 2px 0 15px;
}
.signinfont {
position:relative;
top:-3px;
left:8px;
}
#topmenu {
float:left;
}
#topmenu ul {
margin:0;
padding:0;
}
#topmenu li {
float:left;
list-style:none; /*消除无序列表前面的那个小黑点*/
padding:12px 12px 12px 12px;
border-right:1px solid #E5E5E5;
}
#more {
float:left;
}
#more p{
margin:0;
width:121px;
padding:12px 0 12px 12px;
border-right:1px solid #E5E5E5;
}
.popdownmenu {
float:right;
padding-right:12px;
}
#search {
float:left;
margin-top:7px;
margin-left:7.5px;
}
#search input{
width:180px;
height:24px;
background-color:#E4E4E4;
border:none;
font-family: Arial,Helvetica,freesans,sans-serif;
font-weight:bold;
font-size:13px;
padding-left:6px;
background-image:url("images/magnify.png"); /*添加背景图片*/
background-repeat:no-repeat;
background-size:8.5%;
background-position:right 4% center;
}
#newsbar {
height:56px;
background-color:#BB1919;
border-top:1px solid #E5E5E5;
}
#newsbar img {
padding-top:12px;
}
#menu1 {
height:36px;
background-color:#A91717;
font-family: Arial,Helvetica,freesans,sans-serif;
font-size:14px;
color:white;
}
#home p {
float:left;
margin-top:11px;
padding-right:12px;
border-right:1px solid #bb4545;
}
#menu1 ul {
float:left;
margin:0;
padding:0;
padding-top:11px;
}
#menu1 li {
float:left;
list-style:none;
padding-left:12px;
padding-right:12px;
border-right:1px solid #bb4545;
}
#redmore {
float:left;
}
#redmore img {
position:relative;
top:2px;
left:6px;
}
#redmore p {
float:left;
margin:0;
padding: 11px 5px 0 12px;
}
#menu2 {
height:35px;
font-family: Arial,Helvetica,freesans,sans-serif;
color:#222222;
}
#asia {
position:relative;
left:-50.88px;
float:left;
height:33px;
border-bottom:4px solid #BB1919
}
#asia p {
font-size:19px;
margin-top:4px;
padding-right:12px;
}
#china {
float:left;
position:relative;
left:-50.88px;
}
#china p {
font-size:14px;
margin-top:9px;
padding-left:12px;
padding-right:12px;
border-left:1px solid #E5E5E5;
border-right:1px solid #E5E5E5;
}
#india {
float:left;
position:relative;
left:-50.88px;
}
#india p {
font-size:14px;
margin-top:9px;
padding-left:12px;
padding-right:12px;
}
#blank {
width:976px;
height:10px;
}
#primary {
float:left;
margin:0;
margin:0 0 0 24.4%;
font-family: Arial,Helvetica,freesans,sans-serif;
width:680px;
height:660.25px;
}
#primary h1{
float:left;
color:black;
}
.pic1 {
float:right;
padding-right:15px;
}
.session1 {
margin:0;
width:232px;
float:left;
}
.width1 {
float:left;
width:232px;
font-size:0.9em;
}
.time {
float:left;
width:232px;
font-size:0.8em;
}
.left {
padding-left:3px;
padding-right:8px;
border-right:1px solid #E5E5E5;
}
.right {
padding-left:3px;
}
.line1 {
float:left;
margin:0;
height:1px;
width:40px;
border-bottom:1px solid #8B5A50;
}
.line2 {
float:left;
height:1px;
margin-top:8px;
width:665px;
border-bottom:1px solid #8B5A50;
}
.session3 {
float:left;
width:216px;
height:388px;
position:relative;
top:16px;
padding-right:16px;
border-right:1px solid #E5E5E5;
}
.session3 h3 {
float:left;
margin-top:5px;
}
.session3 p {
float:left;
margin-top:-10px;
padding:0;
font-size:0.91em;
color:#5A5A5A;
}
.session4 {
float:left;
width:216px;
height:388px;
position:relative;
top:16px;
padding-right:16px;
padding-left:16px;
border-right:1px solid #E5E5E5;
}
.session4 h3 {
float:left;
margin-top:5px;
}
.session4 p {
float:left;
margin-top:-10px;
padding:0;
font-size:0.91em;
color:#5A5A5A;
}
#session5 {
float:right;
width:165px;
height:388px;
padding-right:16px;
padding-left:16px;
}
.oldnews p{
margin:0;
padding:0;
font-size:0.91em;
}
.oldnewsline {
height:1px;
width:165px;
border-bottom:1px solid #E5E5E5;
margin-top:55px;
}仿制画面
