仿UC頭條首頁-html+css+純JS
阿新 • • 發佈：2019-01-24
<!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>