CSS+html:天涯网页仿照制作



CSS+html:天涯网页仿照制作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>天涯论坛</title>
    <style type="text/css">
        body {
            width: 1239px;
            height: 804px;
            margin: 0 auto;
        }
        #p1 {
            background-color: #EEEEEE ;
            color: #908D88;
            height: 35px;
            width: 900px;
            margin: 0 auto;
            margin-bottom: 3px;
        }
        #p2 {
            background-color:#4689C7 ;
            color: white;
            border-radius:5px ;
        }
        #p3 {
            background-color:#4689C7 ;
            color: white;
            border-radius:5px ;
        }
        #p4 {
            background-color: #EEEEEE ;
            color: #908D88;
            height: 40px;
            width: 900px;
            margin: 0 auto;
        }
        #p5 {
            float: right;
            width: 550px;
            margin-top: 10px;
        }
        #p6 {
            width: 600px;
            margin: 0 auto;
        }
        #p7 {
            vertical-align: middle;
            color: #8098C9;
            float: right;
            font-size: 12px;
            margin-right: 110px;
            margin-top: -18px;
        }
        #p8 {
            float: right;
            margin-right: 90px;
            width: 1000px;
        }
        #p9 {
            list-style-type: none;
            margin-bottom: 2px;
            margin-top: 4px;
            padding: 0px;
        }
        #p9 li {
            display: inline;
        }
        #p9 li a {
            padding: 0px;
            margin: 0px ;
            text-decoration: none;
            text-align: center;
        }
        #p9 li a:hover {
            color:red;
        }
        #p10 {
            float: left;
            margin-left: 240px;
        }
        #p11 {
            float: right;
            color:  #908D88;
            margin-right: 110px;
            margin-top: 4px;
        }
        #p12 {
            position: relative;
            left: 130px;
            bottom: 35px;
        }
        #p13 {
            float: right;
            margin-right: 90px;
            width: 1120px;
        }
        #p14 {
            text-align: center;
            color: #908D88;
            width:1372px;
        }
        #p15 {
            position: absolute;
            left: 400px;
            width:629px;
        }
    </style>
</head>
<body>
<div>
    <div>
        <div id="p1">
            <span style="float: left">来天涯,与<B>84732461</B>位天涯人共同演绎你的网络人生</span>
            <span style="float: right">目前在线:&nbsp;&nbsp;806975&nbsp;&nbsp;&nbsp;<a href="#"><font color="#908D88">忘记密码?</font></a></span>
        </div>
        <div id="p4">
            <center>
                <select id="name">
                    <option value="username" selected="selected">用户名</option>
                    <option value="name">用户名1</option>
                </select>&nbsp;&nbsp;&nbsp;
                <input type="text" width="50px"/>&nbsp;&nbsp;&nbsp;<a>密码</a>&nbsp;&nbsp;&nbsp;
                <input type="text" width="50px"/>&nbsp;&nbsp;&nbsp;
                <input type="checkbox" id="jizhuwo" value="jizhuwo" checked="checked">记住我&nbsp;&nbsp;&nbsp;
                <input type="button"value="登录" id="p2"/>&nbsp;&nbsp;&nbsp;
                <input type="button" value="免费注册" id="p3"/>&nbsp;&nbsp;&nbsp;
                <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px"/>&nbsp;&nbsp;&nbsp;
                <span><a href="#" ><font color="#908D88">浏览进入</font></a></span>
            </center>
        </div>
    </div>
    <div id="p5">
        <span><font color="#908D88">使用其它网站账号登录:</font></span>
        <img src="weibo%5B1%5D.gif"/>&nbsp;&nbsp;&nbsp;
        <img src="qq%5B1%5D.gif"/>&nbsp;&nbsp;&nbsp;
        <img src="tencent%5B1%5D.gif"/>
    </div>
    <div id="p6">
        <img src="1382940349463%5B1%5D.jpg"/>
    </div>
    <div id="p7">
        <span>手机客户端;</span>
        <img src="未标题-1_03.jpg" width="25px" height="25px" />安卓版
        <img src="未标题-1_06.jpg"   width="25px" height="25px"/>iPhone版
    </div>
    <br/>
    <img src="tianyalogo_120%5B1%5D.gif" id="p12"/>
    <img src="mobilebg%5B1%5D.png" id="p8"/>
    <div id="p10">
        <ul id="p9">
            <li><a href="#">关于天涯</a></li>&nbsp;&nbsp;
            <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px" style="vertical-align: middle"/>&nbsp;&nbsp;
            <li><a href="#">广告服务</a></li>&nbsp;&nbsp;
            <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px"style="vertical-align: middle"/>&nbsp;&nbsp;
            <li><a href="#">开放平台</a></li>&nbsp;&nbsp;
            <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px"style="vertical-align: middle"/>&nbsp;&nbsp;
            <li><a href="#">天涯客服</a></li>&nbsp;&nbsp;
            <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px"style="vertical-align: middle"/>&nbsp;&nbsp;
            <li><a href="#">隐私和版权</a></li>&nbsp;&nbsp;
            <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px"style="vertical-align: middle"/>&nbsp;&nbsp;
            <li><a href="#">联系我们</a></li>&nbsp;&nbsp;
            <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px"style="vertical-align: middle"/>&nbsp;&nbsp;
            <li><a href="#">加入天涯</a></li>
        </ul>
    </div>
    <div id="p11">
        <span>Copyright&copy;1999-2013 天涯社区</span>
    </div>
        <img src="mobilebg%5B1%5D.png" id="p13"/>
    <br/>
    <br/>
    <div id="p14">
        <p>增值电信业务经营许可证(琼B2-20060032号)网络文化经营许可证(琼网文[2012]0578-003号)互联网药品信息服务资格证书(琼)-经营性-2010-0003</p>
        <p>网络传播视听节目许可证(2110566号)广播电视节目制作经营许可证(琼字第052号)</p>
    </div>
    <div id="p15">
        <img src="piclink1%5B1%5D.png"/>&nbsp;&nbsp;&nbsp;
        <img src="piclink3%5B1%5D.png"/>&nbsp;&nbsp;&nbsp;
        <img src="piclink4%5B1%5D.png"/>&nbsp;&nbsp;&nbsp;
        <img src="piclink5%5B1%5D.png"/>
    </div>
</div>
</body>
</html>

效果图:

你可能感兴趣的:(CSS+html:天涯网页仿照制作)