仿UC头条首页-html+css+纯JS
来源：互联网 发布：软件开发简历范文 编辑：程序博客网 时间：2024/05/01 09:07
<!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>阅读全文
2 0
- 仿UC头条首页-html+css+纯JS
- [IMWeb训练营作业] Vue.js 仿今日头条 首页
- Html+Css基础之仿百度首页
- html仿今日头条数据列表
- 仿新浪首页、主题、详情页，纯html静态页面
- Android 仿今日头条首页标题栏效果
- 仿淘宝首页的淘宝头条View垂直滚动
- Android 仿今日头条首页标题栏效果
- React Native之仿今日头条首页
- 仿淘宝首页的淘宝头条View垂直滚动
- 仿淘宝首页的淘宝头条View垂直滚动
- 仿淘宝首页的淘宝头条View垂直滚动
- 仿淘宝首页的淘宝头条垂直滚动
- 仿淘宝首页的淘宝头条垂直滚动
- 仿淘宝首页的淘宝头条View垂直滚动
- css+html仿今日头条的评论框动画效果
- 纯jq仿今日头条导航栏
- CSS仿淘宝首页导航条布局效果
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- 傅里叶变换和傅里叶级数的区别与联系（后续更新补充DTFT、DFS）
- SDUT-数据结构实验之查找一：二叉排序树
- Java基础02 方法与数据成员
- 回归算法之岭回归
- 仿UC头条首页-html+css+纯JS
- 数组---冒泡排序和选择排序
- JZOJ 5230. 【NOIP2017模拟A组模拟8.5】队伍统计
- Two Sum II
- NG机器学习week9 Anomaly Detection
- C++ vector(一)
- MFC编辑框
- 双彩虹是怎么回事？
- 利用sklearn包中的k-近邻算法进行分类
