用HTML和CSS仿制BBC新闻网

原创 2018年04月15日 09:29:44

制作工具: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;
        }

仿制画面
这里写图片描述

CSS 仿Excel表格功能

> html xmlns="http://www.w3.org/1999/xhtml"> head> title>Spreadsheet form - www.codefans.nettitle> s...
  • umgsai
  • umgsai
  • 2014-08-10 10:05:40
  • 481

如何访问BBC iPlayer上在加拿大

如何访问BBC iPlayer上在加拿大   英国广播公司的iPlayer允许用户观看所有的英国广播公司从他们最喜爱的电子设备产生的编程。的问题是,这种的iPlayer可以在加拿大或其他国家,由于区域...
  • kcgril
  • kcgril
  • 2014-08-05 10:38:33
  • 428

css-9.仿京东注册页面

导航 欢迎注册 tab部分 企业用户注册 *用户名: 4-20位数字和...
  • code_dream_wq
  • code_dream_wq
  • 2017-09-08 10:13:02
  • 473

在线听VOA和BBC得软件

  • 2010年03月08日 19:43
  • 491KB
  • 下载

使用idm下载新闻视频(bbc)及百度云盘内容

最近在寻找一些视频以做不可描述之用,但是在搜集资源的过程中,发现很多的视频没法直接下载(特别是新闻视频)。在本人孜孜不倦的努力研究下终于找到了一种下载视频的好方法(其实是公司内的一位多年老司机前辈所授...
  • blq4411568
  • blq4411568
  • 2017-07-19 01:21:06
  • 1178

仿豆瓣(静态web布局)(全)

  • hanyuwebant
  • hanyuwebant
  • 2017-05-22 19:55:18
  • 433

html+css网站模板(首页,新闻页面,新闻内容页,留言)

  • 2012年12月04日 23:12
  • 1.36MB
  • 下载

PhotoShop CC 2017软件工具面板使用---仿制图章工具

仿制图章工具包含了仿制图章工具和图案图章工具仿制图章工具  就是将图片中有相似的部分,但有部分被遮盖,需要用未被遮盖的部分去修补被遮盖的部分,用污点修复画笔工具又略显达不到要求图案图章工具  将系统中...
  • zxc514257857
  • zxc514257857
  • 2017-12-03 22:53:03
  • 568

Html+Css基础之仿百度首页

百度一下,你就知道 html { height: 100%; overflow-y: scroll; ...
  • q269399361
  • q269399361
  • 2016-12-21 15:06:42
  • 2760

如何进行简单的功能仿制(网页制作)

现在
  • zurich1979
  • zurich1979
  • 2014-07-13 14:43:39
  • 2377
收藏助手
不良信息举报
您举报文章:用HTML和CSS仿制BBC新闻网
举报原因:
原因补充:

(最多只允许输入30个字)