模拟sina网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新浪网-投资者关系</title>
		<link rel="shortcut icon" href="img/sina.png" type="image/x-icon"/>
		<style>
			body{
				font: 12px/22px 'Arial','Microsoft Yahei'
			}
			*{
				margin: 0px;
				padding: 0px;
			}
			/*div{
				border: 1px solid blue;
			}*/
			#header,#container{
				width: 1200px;
				margin: 0 auto;
				overflow:hidden;
			}
			#header{
				height: 99.6px;
			}
			#header:after{
				content: ;
				display: block;
				clear: both;
			}
			#header #letter{
				position: relative;
				float: right;
				top: 38.9px;
			}
			#header #letter a{
				color: #4c92fc;
				font-size: 14px;
				text-decoration: none;
			}
			#header #letter a:visited {
			    color: #4c92fc;
			}
			#header #letter a:hover{
        		text-decoration: underline;
        	}
        	#header #letter span{
			    color: #e1e3e5;
			    overflow: hidden;
			}
			#header #pic{
				position: absolute;
				top: 26.2px;
			}
			#header #pic img{
				border: none;
				float: left;
			}
			#container .lieb ul,li{
				list-style-type: none;
				padding-left: 0px;
			}
			#container .lieb .lie{
				cursor: pointer;
				line-height: 49px;
				border-bottom: 1px solid #e1e3e5;
			}
			#container .lieb .lie:first-child{
				cursor: pointer;
				color: #4c92fc;;
				line-height: 49px;
				border-bottom: 1px solid #e1e3e5;
			}
			#container .lieb .lie:last-child{
				cursor: pointer;
				line-height: 49px;
				border-bottom: none;
			}
			#container .lieb{
				float: left;
				width: 200px;
			    display: inline-block;
			    vertical-align: top;
			    font-size: 16px;
			}
			#container .main{
				float: right;
			}
			#container .main .pics{
				position: relative;
			}
			#container .main .pics img{
				vertical-align: middle;
			}
			#container .main .pics #anniu{
				position: absolute;
				right: 2px;
				bottom: 8px;
			}
			#container .main .pics #anniu span{
				width: 20px;
				height: 5px;
				display: inline-block;
				background-color: #000;
				margin: 0 4px;
				float: left;
				opacity: .2;
				border: 1px solid #ffffff;
			}
			#container .main .pics #anniu span:first-child{
				background: #fff;
				opacity: 1;
			}
			#container .main .pics #anniu:after{
				content: ;
				display: block;
				clear: both;
			}
			#container .main .pics,.dongtai,.baogao{
				width: 960px;
			}
			#container:after{
				content: ;
				display: block;
				clear: both;
			}
			#container .main .biaoti{
			    line-height: 50px;
			    border-bottom: 1px solid #e1e3e5;
			}
			#container .main span{
			    color: #323232;
			    font-size: 16px;
			    font-weight: bold;
			}
			#container .main .biaoti a{
				float: right;
				color: #4c92fc;
				font-size: 12px;
				text-decoration: none;
			}
			#container .main a:visited {
			    color: #4c92fc;
			}
			#container .main a:hover{
        		text-decoration: underline;
        	}
        	#container .main #s1 a{
				color: #4c92fc;
				font-size: 14px;
				text-decoration: none;
			}
			#container .main #s1 a:visited {
			    color: #4c92fc;
			}
			#container .main #s1 a:hover{
        		text-decoration: underline;
        	}
        	#container .main #s1 span{
				color: #575859;
    			padding-right: 12px;
			}
			#container .main li{
				font-size: 14px;
			    line-height: 35px;
			    text-align: justify;
			}
			#footer{
				margin-top: 70px;
				padding-top: 30px;
				padding-bottom: 50px;
				border-top: 1px solid #e1e3e5;
				text-align: center;
			}
			#footer p{
			    padding-top: 50px;
			    font-size: 14px;
			    color: #575859;
			    text-align: center;
			    display: block;
			}
			#footer .sina,.weibo{
				display: inline-block;
				padding-left: 32px;
				padding-right: 50px;
			}
			#footer span{
				display: block;
			    font-size: 12px;
			    color: #707173;
			    padding-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="header";>
			<div id="pic" style="clear: left;">
				<img src="img/logo1.png"/>
			</div>
			<div id="letter" style="clear: right;">
				<a href="http://17kanju.com/" target="_blank">EN</a>
				<span>|</span>
				<a href="http://www.5nj.com/" target="_blank">中文</a>
			</div>
		</div>
		<div id="container" ;>
			<div class="lieb">
				<ul>
					<li class="lie">首页</li>
					<li class="lie">公司概况</li>
					<li class="lie">股票咨询</li>
					<li class="lie">新浪动态</li>
					<li class="lie">财务信息</li>
					<li class="lie">投资者日</li>
					<li class="lie">联系我们</li>
				</ul>
			</div>
			<div class="main">
				<div class="pics">
					<img src="img/d1.jpg" width="960px" height="356px"/>
					<div id="anniu">
						<span></span><span></span><span></span>
					</div>
				</div>
				<div class="dongtai">
					<div class="biaoti">
						<span>新浪动态</span>
						<a href="https://www.pianku.tv/" target="_blank">更多</a>
					</div>
					<ul id="s1">
						<li><span class="date">07/06/20</span><a href="https://www.pianku.tv/" target="_blank">新浪宣布收到非约束性私有化要约</a></li>
						<li><span class="date">05/19/20</span><a href="https://www.pianku.tv/" target="_blank">新浪发布2020年第一季度未经审计财报</a></li>
						<li><span class="date">05/12/20</span><a href="https://www.pianku.tv/" target="_blank">新浪将于5月19日发布2020年第一季度财报</a></li>
						<li><span class="date">02/26/20</span><a href="https://www.pianku.tv/" target="_blank">新浪发布2019年第四季度及全年未经审计财报</a></li>
						<li><span class="date">02/18/20</span><a href="https://www.pianku.tv/" target="_blank">新浪将于2月26日发布2019年第四季度及全年财报</a></li>
						<li><span class="date">12/31/19</span><a href="https://www.pianku.tv/" target="_blank">新浪宣布5亿美元股票回购计划</a></li>
                	</ul>
                </div>
				<div class="baogao">
					<div class="biaoti">
						<span>财务报告</span>
						<a href="https://www.pianku.tv/" target="_blank">更多</a>
					</div>
					<ul id="s1">
						<li><span class="date">05/19/20</span><a href="https://www.pianku.tv/" target="_blank">2020年第一季度</a></li>
						<li><span class="date">11/14/19</span><a href="https://www.pianku.tv/" target="_blank">2019年第三季度</a></li>
						<li><span class="date">08/19/19</span><a href="https://www.pianku.tv/" target="_blank">2019年第二季度</a></li>
						<li><span class="date">05/23/19</span><a href="https://www.pianku.tv/" target="_blank">2019年第一季度</a></li>
						<li><span class="date">03/05/19</span><a href="https://www.pianku.tv/" target="_blank">2018年第四季度</a></li>
            		</ul>
				</div>
			</div>
		</div>
		<div id="footer" style="clear: left;">
			<div class="sina">
		        <a href="https://www.pianku.tv" target="_blank"><img src="img/sina1.png"/></a>
		        <span>SINA</span>
			</div>
			<div class="weibo">
				<a href="https://www.pianku.tv" target="_blank"><img src="img/weibo.png"/></a>
		        <span>Weibo</span>
			</div>
			<p>Copyright © 2020 SINA Corp. All Rights Reserved.</p>
		</div>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值