仿UC头条首页-html+css+纯JS

最新推荐文章于 2024-05-06 19:36:11 发布

java_qq_99811494

最新推荐文章于 2024-05-06 19:36:11 发布

阅读量2.7k

点赞数 3

分类专栏： web_前端_html5 文章标签： html5 仿UC头条

本文链接：https://blog.csdn.net/java_qq_99811494/article/details/76736021

版权

本文详细介绍了如何利用HTML5、CSS3以及JavaScript技术，从零开始构建UC头条首页的克隆版。内容涵盖页面布局、响应式设计、动态加载和交互实现等关键点，旨在提升前端开发实战技能。

摘要由CSDN通过智能技术生成

<!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%;