<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿UC头条</title>
<style>
*{
margin: 0;
padding: 0;
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
padding-top: 75px;
color: #333;
}
a{
text-decoration: none;
color: #333;
}
a:hover{
color: #406599;
}
ul{
list-style: none;
}
h3{
font-weight: normal;
}
body>header{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
background: orange;
z-index: 10;
}
.top_box{
position: relative;
width: 1140px;
height: 50px;
margin: 0 auto;
}
.top_box>h1{
font-size: 0;
position: absolute;
left: 0;
bottom: 3px;
width: 102px;
height: 44px;
background: url("img/logo.png") no-repeat;
}
.top_box>a{
position: absolute;
right: 0;
height: 50px;
}
.top_box>a:hover{
color: #000;
}
.top_box>a>span{
display: block;
float: right;
margin-top: 14px;
}
.top_box>a>.icon_down{
float: left;
margin-top: 10px;
}
.top_box>nav{
position: absolute;
top: 75px;
left: 0;
width: 140px;
padding-right: 20px;
}
.top_box>nav>ul{
text-align: center;
}
.top_box>nav>ul>li{
height: 45px;
line-height: 45px;
margin-bottom: 2px;
}
.top_box>nav>ul>li>a{
display: block;
width: 100%;
height: 100%;
border: 1px solid transparent;
border-radius: 4px;
}
.top_box>nav>ul>li>a:hover{
background: orange;
color: #000;
}
.top_box>#sideBox{
display: none;
background: #ffffff;
position: absolute;
top: 50px;
right: 0;
width: 260px;
height: 500px;
padding-top: 15px;
}
.top_box>#sideBox>#searchBox{
margin-bottom: 10px;
}
.top_box>#sideBox>#erweima{
background: #f5f5f5;
padding: 15px 20px;
}
.top_box>#sideBox>#erweima img{
width: 100%;
}
main{
width: 1140px;
height: 2222px;
margin: 0 auto;
padding-left: 140px;
}
.content{
width: 710px;
float: left;
}
.content>ul>li{
position: relative;
width: 100%;
border-bottom: 1px solid #EEEEEE;
}
.content img{
width: 170px;
height: 109px;
}
.content h3{
line-height: 30px;
font-size: 20px;
overflow: hidden;
}
.content .info{
font-size: 14px;
color: #CCC;
}
.content .info>span{
margin-right: 10px;
}
.news_1{
height: 140px;
}
.news_1>a>h3{
position: absolute;
left: 190px;
top: 20px;
width: 520px;
height: 60px;
}
.news_1>a>img{
position: absolute;
left: 0;
top: 10px;
}
.news_1>.info{
position: absolute;
left: 190px;
top: 90px;
}
.news_2{
height: 220px;
}
.news_2>a>h3{
position: absolute;
left: 0;
top: 10px;
width: 710px;
height: 30px;
}
.news_2>a>div.pics{
position: absolute;
left: 0;
top: 50px;
}
.news_2>.info{
position: absolute;
left: 0;
top: 170px;
}
main>aside{
width: 260px;
float: right;
}
form{
position: relative;
}
form>input{
width: 100%;
height: 30px;
border: 1px solid #CCC;
padding-left: 8px;
}
form>input::-webkit-input-placeholder{
font-size: 12px;
color: #A0A0A0;
}
form>canvas{
position: absolute;
right: 5px;
top: 5px;
}
main>aside .side_box{
margin-top: 15px;
width: 100%;
background: #F5F5F5;
padding: 15px 20px;
}
h4{
margin-bottom: 15px;
position: relative;
}
h4::before{
content: '';
position: absolute;
left: -20px;
top: -2px;
width: 5px;
height: 26px;
background: orange;
}
main>aside>div.hot_news>ul>li{
width: 100%;
height: 70px;
padding-bottom: 8px;
border-bottom: 1px solid #E0E0E0;
}
main>aside>div.hot_news>ul>li:last-child{
border-bottom: none;
}
main>aside>div.hot_news>ul>li>h5{
float: right;
width: 145px;
height: 40px;
overflow: hidden;
line-height: 18px;
margin-top: 18px;
font-size: 12px;
font-weight: normal;
}
main>aside>div.hot_news>ul>li>img{
float: left;
width: 60px;
margin-top: 4px;
}
main>aside .contact>img{
width: 100%;
}
main>aside .friends p{
width: 100%;
color: #747474;
font-size: 13px;
word-break: keep-all;
line-height: 25px;
}
main>aside .about p{
font-size: 14px;
}
.menu_on{
background: orange;
color: #000;
}
#menuMore{
position: relative;
}
#menuMore>#menuMorePanel{
display: none;
position: absolute;
left: 125px;
bottom: 0;
width: 230px;
padding: 10px;
background: #ffffff;
-webkit-box-shadow: -1px 0 2px 1px rgba(55, 55, 55, 0.1);
box-shadow: -1px 0 2px 1px rgba(55, 55, 55, 0.1);
}
#menuMore>#menuMorePanel>ul>li{
float: left;
width: 50%;
height: 45px;
line-height: 45px;
margin-bottom: 10px;
}
#menuMore>#menuMorePanel>ul>li>a{
display: block;
border-radius: 5px;
width: 100%;
height: 100%;
}
#menuMore>#menuMorePanel>ul>li>a:hover{
background: orange;
color: #000;
}
#menuMore>#menuMorePanel>a{
clear: left;
display: block;
width: 100%;
height: 35px;
line-height: 35px;
background: #fefaf0;
font-size: 14px;
border: 2px solid #fff1c3;
padding-left: 10px;
}
#menuMore>#menuMorePanel>a>canvas{
float: left;
}
#menuMore>#menuMorePanel>a>span{
float: left;
height: 100%;
}
</style>
</head>
<body>
<header>
<div class="top_box">
<h1>UC头条新闻</h1>
<a href="#" target="_blank"><canvas width='30' height='30' class='icon_down'></canvas><span>下载UC头条，听新闻</span></a>
<nav>
<ul>
<li><a href="#" class="menu_on">推荐</a></li>
<li><a href="#">热点</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">搞笑</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">汽车</a></li>
<li><a href="#">财经</a></li>
<li id="menuMore">
<a href="javascript:0;">更多</a>
<div id="menuMorePanel">
<ul>
<li><a href="#">军事</a></li>
<li><a href="#">时尚</a></li>
<li><a href="#">科学探索</a></li>
<li><a href="#">健康</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">育儿</a></li>
<li><a href="#">旅游</a></li>
<li><a href="#">美食</a></li>
</ul>
<a href="#"><canvas width='30' height='30' class='icon_down'></canvas><span>更多频道，下载UC头条</span></a>
</div>
</li>
</ul>
</nav>
<div id="sideBox"></div>
</div>
</header>
<main>
<div class="content">
<ul>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_2">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<div class="pics">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
</div>
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_2">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<div class="pics">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
</div>
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_2">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<div class="pics">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
</div>
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_2">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<div class="pics">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
<img src="images/main.png" alt="新闻中图">
</div>
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
<li class="news_1">
<a href="#">
<h3>第一集上演“美救英雄”?重磅利好消息: 特力A、浙商证券、洛阳钼业、西部建设</h3>
<img src="images/main.png" alt="新闻中图">
</a>
<div class="info"><span class="time">2小时前</span><span>新闻作者</span></div>
</li>
</ul>
</div>
<aside>
<form action="#" id="searchBox">
<input type="search" placeholder="搜索你想看的资讯和视频">
<canvas width="20" height="20" id="icon_search"></canvas>
<input type="submit" hidden>
</form>
<div class="side_box hot_news">
<h4>精彩资讯</h4>
<ul>
<li>
<h5>中俄就朝鲜半岛问题举行磋商：决不允许半岛生战</h5>
<img src="images/aside.jpg" alt="精彩推荐">
</li>
<li>
<h5>中俄就朝鲜半岛问题举行磋商：决不允许半岛生战</h5>
<img src="images/aside.jpg" alt="精彩推荐">
</li>
<li>
<h5>中俄就朝鲜半岛问题举行磋商：决不允许半岛生战</h5>
<img src="images/aside.jpg" alt="精彩推荐">
</li>
<li>
<h5>中俄就朝鲜半岛问题举行磋商：决不允许半岛生战</h5>
<img src="images/aside.jpg" alt="精彩推荐">
</li>
</ul>
</div>
<footer>
<div class="side_box contact" id="erweima">
<h4>下载UC头条，听新闻</h4>
<img src="images/erweima.png" alt="uc头像下载链接二维码">
</div>
<div class="side_box friends">
<h4>友情链接</h4>
<p>飞猪 中国青年网 钉钉 海外网 中青在线 北青网 信报网 封面新闻 铁血军事 阿里健康 苹果助手 海峡网 淮安新闻网 西陆军事 鄂州新闻 华声论坛 台海网 银行信息港 每日财经 军情直播间 武林网 80后励志网 杭州在线 前瞻看点 韶关新闻网 中研网 研究报告 石家庄传媒网 九游苹果游戏 120健康新闻 当代先锋网</p>
</div>
<div class="side_box about">
<h4>关于我们</h4>
<p>
UC<a href="#" target="_blank" style="font-weight: bold">头条</a>从兴趣，发现乐趣 <br>
广州优视网络<br>
© 2017 news.uc.cn 版权所有<br>
网络文化经营许可证：<br>
粤网文[2014]0510-160号<br>
增值电信服务经营许可证：<br>
粤B2-20150063<br>
粤ICP备14027297号
</p>
</div>
</footer>
</aside>
</main>
<script>
window.onload = function () {
function icon_pait() {
var pDowns = document.querySelectorAll(".icon_down");
for(var i in pDowns){
var pDowni = pDowns.item(i);
var pDown = pDowni.getContext("2d");
pDown.lineWidth = 2;
pDown.moveTo(17,6);
pDown.lineTo(17,18);
pDown.moveTo(11,13);
pDown.lineTo(17,18);
pDown.lineTo(23,13);
pDown.moveTo(9,17);
pDown.lineTo(9,22);
pDown.lineTo(25,22);
pDown.lineTo(25,17);
pDown.stroke();
}
var pSearch = document.getElementById("icon_search").getContext("2d");
pSearch.strokeStyle = "#999";
pSearch.arc(10,10,4,0,7);
pSearch.moveTo(13,13);
pSearch.lineTo(17,17);
pSearch.stroke();
}
icon_pait();
var bool = true;
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(bool && scrollTop>1248){
bool = false;
var sideBox = document.getElementById("sideBox");
sideBox.innerHTML = "";
sideBox.style.display = "block";
sideBox.appendChild(document.getElementById("searchBox").cloneNode(true));
sideBox.appendChild(document.getElementById("erweima").cloneNode(true));
icon_pait();
}else if(!bool && scrollTop<1000){
var sideBox0 = document.getElementById("sideBox");
sideBox0.style.display = "none";
sideBox0.innerHTML = "";
bool = true;
}
};
var timeOut = 0;
document.getElementById("menuMore").addEventListener("mouseover",function () {
clearTimeout(timeOut);
document.getElementById("menuMorePanel").style.display = "block";
});
document.getElementById("menuMore").addEventListener("mouseout",function () {
timeOut = setTimeout(function () {
document.getElementById("menuMorePanel").style.display = "none";
},150);
});
};
</script>
</body>
</html>
