自己仿的一个网页，比较适合小白入门

最新推荐文章于 2022-08-07 22:17:45 发布
最新推荐文章于 2022-08-07 22:17:45 发布
阅读量625 收藏 2
点赞数 2
分类专栏： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43260038/article/details/104795824
版权
html 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
css
17 篇文章 0 订阅
订阅专栏
js
17 篇文章 0 订阅
订阅专栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超星首页</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="head">
        <nav class="top-nav">
            <img class="logo" src="images/head-logo.png"/>
            <ul class="list">
                <li>
                    <a href="#">
                        <h3>首页</h3>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3>课程</h3>
                        <span>Courses</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3>服务</h3>
                        <span>Service</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3>资源</h3>
                        <span>Resource</span>
                    </a>
                </li>
            </ul>
            <div class="search">
                <img src="images/icon_search.png" >
                <input type="text" placeholder="请输入课程、教师、专题、讲座名称">
            </div>
            <div class="login">
                <img src="images/icon_login.png">
                <a href="#">登录</a>
            </div>
        </nav>
    </div>
    <div class="block">
        <div class="box_big ">
            <div class="box"><a href="#"><img src="images/1.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/2.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/3.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/4.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/5.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/6.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/7.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/8.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/9.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/10.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/11.jpg"/></a></div>
            <div class="box"><a href="#"><img src="images/1.jpg"/></a></div>
        </div>
        <div class="spot">
            <div class="spot_list"></div>
            <div class="spot_list"></div>
            <div class="spot_list"></div>
            <div class="spot_list"></div>
            <div class="spot_list"></div>
            <div class="spot_list"></div>
            <div class="spot_list"></div>
            <div class="spot_list"></div>
            <div class="spot_list"></div>
            <div class="spot_list"></div>
            <div class="spot_list"></div>

        </div>
        <div class="btn">
            <div class="left_btn"><img src="images/icon_left.png" alt=""></div>
            <div class="right_btn"><img src="images/icon_right.png" alt=""></div>
        </div>
    </div>
    <div class="content">
        <div class="index_title">
            <img src="images/index_title.png">
        </div>
        <div class="tuijian_block">
            <div class="tuijian_box_big">
                <!--<div class="tuijian_box"><a href="#"><img class="tuijian" src="images/swiper7.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img class="tuijian" src="images/swiper8.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img class="tuijian" src="images/swiper9.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img class="tuijian" src="images/swiper10.jpg"></a></div>-->
                <div id="1" class="tuijian_box"><a href="#"><img src="images/swiper0.jpg"></a></div>
                <div id="2" class="tuijian_box"><a href="#"><img src="images/swiper1.jpg"></a></div>
                <div id="3" class="tuijian_box"><a href="#"><img src="images/swiper2.png"></a></div>
                <div id="4" class="tuijian_box"><a href="#"><img src="images/swiper3.png"></a></div>
                <div id="5" class="tuijian_box"><a href="#"><img src="images/swiper4.png"></a></div>
                <div id="6" class="tuijian_box"><a href="#"><img src="images/swiper5.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img src="images/swiper6.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img src="images/swiper7.png"></a></div>
                <div class="tuijian_box"><a href="#"><img src="images/swiper8.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img src="images/swiper9.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img src="images/swiper10.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img src="images/swiper0.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img src="images/swiper1.jpg"></a></div>
                <div class="tuijian_box"><a href="#"><img src="images/swiper2.png"></a></div>
                <div class="tuijian_box"><a href="#"><img src="images/swiper3.png"></a></div>

            </div>
            <div class="next">
                <div class="left_btn_1"><img src="images/icon_left.png" alt=""></div>
                <div class="right_btn_1"><img src="images/icon_right.png" alt=""></div>
            </div>
        </div>
        <div class="more_class">
            <img src="images/btn_look_more.png">
        </div>
    </div>
    <hr>
    <footer class="page-footer">
        <img src="images/head-logo.png">
        <div class="footer_content">
            <div class="word">
                <span class="right">关于尔雅</span>
                <span class="right">常见问题</span>
                <span class="right">在线客服</span>
                <span>后台管理</span>
            </div>
            <div class="company">
                Copyright©2016 超星公司旗下网站-尔雅通识课
            </div>
        </div>
    </footer>
    <script src="js/index.js"></script>
</body>
</html>

CSS


*{
    margin:0;
    padding:0;
}
.clears{
    clear:both;
    height:0;
    line-height:0;
    font-size:0;
    overflow: hidden;
}
a{
    text-decoration:none;
    color: #000;
}
img{
    border:none;
    /*图片放在超链接里一些老的浏览器（ie）会有一个蓝色的边框*/
}
ul,li,ol{
    list-style:none;
}
li{
    float: left;
    width: 80px;
    height: 60px;
    text-align: center;
    padding-top: 20px;
}
.logo{
    float: left;
    line-height: 80px;
}
.list{
    width: 400px;
    margin-left: 300px;
}
.list span{
    font-size: 12px;
}
.head{
    width: 100%;
    height: 80px;
    background: #ffffff;
}
.top-nav{
    /*height: 105px;*/
    width: 1200px;
    height: 80px;
    display: block;
    margin: 0 auto;
}
.search{
    width: 253px;
    height: 34px;
    background: #f7f7f7;
    float: left;
    /*text-align: center;*/
    line-height: 34px;
    margin-top: 20px;
    margin-right: 45px;
    margin-left: 90px;
    border-radius: 4px;
}
.search img{
    width: 16px;
    height: 16px;
    display: inline-block;
    float: left;
    margin-top: 9px;
    margin-right: 6px;
    margin-left: 10px;

}
.search input{
    border: none;
    background: none;
    width: 200px;
    height: 34px;
    font-size: 12px;
    outline: none;
}
.login{
    width: 105px;
    height: 20px;
    float: left;
    margin-top: 30px;

}
.login img{
    float: left;
    margin-right: 5px;

}
/*.big-img{
    position: absolute;
    width: 1520px;
    height: 580px;
    !*width: 100%;*!
    !*height: 100%;*!
    !*display: block;*!
    overflow: hidden;
}
.main_img img{
    overflow: hidden;
    !*display: inline-block;*!
    !*animation-play-state:paused;*!
    margin: 0 auto;
    float: left;
    width: 1520px;
    height: 580px;
    overflow: hidden;
    !*float: left;*!
}
.main_img{
    width: 16720px;
    height: 580px;
    position: absolute;
    !*overflow: hidden;*!
    !*left: 0px;*!
    !*animation: move 10s ease 5s infinite;*!
    !*animation-play-state:paused;*!
    animation-name: move;
    animation-duration: 40s;
    animation-timing-function: step-start;
    !*animation-timing-function: ;*!
    animation-iteration-count: infinite;

}
@keyframes move {
    0% {
        left: 0px;
    }
    10% {
        left: -1520px;
    }
}*/

.page-footer{
    width: 600px;
    height: 64px;
    margin: 0 auto;
    padding-top: 7px;
    position: relative;
    /*float: left;*/
}
.page-footer img{
    float: left;
}
.footer_content{
    width: 380px;
    height: 54px;
    position: absolute;
    right: 0px;
    /*top: 0px;*/
    /*right: 0;*/
}
.word{
    width: 380px;
    height: 22px;
    margin-top: 11px;
    text-align: center;
}
.word span{
    width: 87px;
    height: 22px;
    display: inline-block;
    color: #666666;
    /*border: 1px;*/
}
.right{
    border-right: 1px solid #666666;
}
.company{
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    color: #666666;
}

/* 图片轮播*/

.block {
    width: 1520px;
    height: 580px;
    /*border: 1px solid black;*/
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.box_big {
    position: absolute;
    width: 18240px;
    float: left;
    height: 580px;

}

.nav {
   transition: margin-left 0.5s linear;
}

.box {
    width: 1520px;
    height: 580px;
    float: left;
}

.box_big img {
    width: 100%;
    height: 100%;
    /*display: block;*/
    float: left;
}

.spot {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 5px;
}

.spot_list {

    width: 8px;
    height: 8px;
    /*font-size: 20px;*/
    /*text-align: center;*/
    border: 1px solid gray;
    border-radius: 5px;
    /*line-height: 30px;*/
    font-weight: bolder;
    margin: 10px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.3);
}

/*.btn {
    width: 100%;
    height: 48px;
    position: absolute;
    margin: 0 auto;
    top: 266px;
}*/

.left_btn,.left_btn_1{
    float: left;
    left: 0;
    margin-left: 22px;
    width: 48px;
    height: 48px;
    position: absolute;
}
.left_btn,.right_btn{
    top: 266px;
}
.left_btn_1,.right_btn_1{
    top: 106px;
}
.right_btn,.right_btn_1{
    right: 0;
    float: right;
    margin-right: 22px;
    width: 48px;
    height: 48px;
    position: absolute;
}

.content{
    /*margin-top: 580px;*/
    /*position: absolute;*/
}
.index_title{
    height: 150px;
    width: 100%;
    background: #ffffff;
    display: inline-block;
    text-align: center;
    margin-top: 70px;
    /*line-height: 220px;*/
    /*margin: 0 auto;*/

}
.tuijian_block{
    /*text-align: center;*/
    height: 260px;
    width: 1350px;
    /*margin: 0 auto;*/
    position: relative;
    overflow: hidden;
    margin-bottom: 70px;
    margin-left: auto;
    margin-right: auto;
    /*border: 1px solid black;*/
    box-sizing: border-box;
}
.tuijian_box_big{
    position: absolute;
    width: 5175px;
    float: left;
    height: 260px;
}
.tuijian_box{
    /*position: absolute;*/
    width: 345px;
    height: 260px;
    float: left;
}
.tuijian_box img{
    box-sizing: border-box;
    width: 315px;
    height: 100%;
    float: left;
}
/*.first{
    position: absolute;
    left: 0;
    top: 0;
}
.second{
    position: absolute;
    left: 345px;
    top: 0;
}
.third{
    position: absolute;
    left: 690px;
    top: 0;
}
.fourth{
    position: absolute;
    left: 1035px;
    top: 0;
}*/
/*.next{
    width: 100%;
    height: 48px;
    position: absolute;
    margin: 0 auto;
    top: 106px;
}*/
.tuijian_box img:hover{
    transform: scale(0.98,0.98);
    transition: all 0.2s;
    border: 4px solid #902320;
}
.more_class{
    /*margin: 0 auto;*/
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px;
}

JS


    //首先获取元素，这里获取了所有需要的元素。
    var box = document.getElementsByClassName("box_big")[0];
    var spot = document.getElementsByClassName("spot_list");
    var block = document.getElementsByClassName("block")[0];
    var left_btn = document.getElementsByClassName("left_btn")[0];
    var right_btn = document.getElementsByClassName("right_btn")[0];
    var tuijian_block = document.getElementsByClassName("tuijian_images")[0];
    var tuijian_box_big = document.getElementsByClassName("tuijian_box_big")[0];
    var tuijian_box = document.getElementsByClassName("tuijian_box")[0];
    var left_btn_1 = document.getElementsByClassName("left_btn_1")[0];
    var right_btn_1 = document.getElementsByClassName("right_btn_1")[0];
    var time = null;
    spot[0].style.background = "#ffffff";
    var count = 0;
    showtime();
    //鼠标进入计时器停止
    block.onmouseenter = function () {
        clearInterval(time);
    };
    //鼠标出来计时器打开
    block.onmouseleave = function () {
        showtime();
    };
    //点的事件
    for (var i = 0; i < spot.length; i++) {
        spot[i].index = i;
        spot[i].onmouseenter = function () {
            spot[count].style.background = "rgba(255, 255, 255, 0.3)";
            this.style.background = "#ffffff";
            count = this.index;
            box.style.marginLeft = (count * -1520) + "px";
        }

    }
    //图片左边划
    left_btn.onclick = function () {
        spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";
        count--;
        if (count < 0) {
            box.className = "box_big";
            count = box.children.length - 2;
            box.style.marginLeft = "-16720px";
        }
        setTimeout(function () {
            box.className = "box_big nav";
            box.style.marginLeft = (-1520 * count) + "px";
            spot[count].style.backgroundColor = "#ffffff";
        }, 1);

    };
    //图片右边划
    right_btn.onclick = function () {
        mate();
    };
    //计时器
    function showtime() {
        time = setInterval(function () {
            mate();
        }, 5000);
    }
    //正常滚动
    function mate() {
        box.className = "box_big nav";
        spot[count].style.background = "rgba(255, 255, 255, 0.3)";
        count++;
        spot[count > box.children.length - 2 ? 0 : count].style.background = "#ffffff";
        box.style.marginLeft = (count * -1520) + "px";
        setTimeout(function () {
            if (count > box.children.length - 2) {
                count = 0;
                box.className = "box_big";
                box.style.marginLeft = "0px"
            }
        }, 200)
    }

    var time_ = null;
    var count_ = 0;
    showtime1();
    //鼠标进入计时器停止
    //计时器
    function showtime1() {
        time_ = setInterval(function () {
            mate1();
        }, 5000);
    }
    tuijian_block.onmouseenter = function () {
        clearInterval(time_);
    };
    //鼠标出来计时器打开
    tuijian_block.onmouseleave = function () {
        showtime1();
    };
    //正常滚动
    function mate1() {
        tuijian_box_big.className = "tuijian_box_big nav";
        count_++;
        tuijian_box_big.style.marginLeft = (count_ * -345) + "px";
        setTimeout(function () {
            if (count_ > tuijian_box_big.children.length - 5) {
                count_ = 0;
                // tuijian_box.className = "tuijian_box";
                tuijian_box_big.className = "tuijian_box_big";
                tuijian_box_big.style.marginLeft = "0px"
            }
        }, 200)
    }
    //图片左边划
    left_btn_1.onclick = function () {
        count_--;
        if (count_ < 0) {
            tuijian_box_big.className = "tuijian_box_big";
            count_ = tuijian_box_big.children.length - 5;
            tuijian_box_big.style.marginLeft = "-3795px";
        }
        setTimeout(function () {
            tuijian_box_big.className = "tuijian_box_big nav";
            tuijian_box_big.style.marginLeft = (-345 * count_) + "px";
        }, 1);

    };
    //图片右边划
    right_btn_1.onclick = function () {
        mate1();
    };
    // document.getElementById('1').className = 'tuijian_box first'
    // document.getElementById('2').className = 'tuijian_box second'
    // document.getElementById('3').className = 'tuijian_box third'
    // document.getElementById('4').className = 'tuijian_box fourth'
时光飞逝，岁月依然
关注
专栏目录
前端小白入门级仿站调用
qq_43354395的博客
11-29 1285
DEDE CMS仿站（静态、伪静态页面）l工作流程 一、扒页 进入想要仿制的站点，这里个人推荐老版本的2.6以前的firfox浏览器（链接：https://pan.baidu.com/s/1Xsjk0VwEu_4hdGiFkB6ngg 提取码：vxea ，注意取消插件，浏览器自检更新）—利用插件（firebug、scrap系列插件），加载完 ...
关于《web课程设计》网页设计 用html css做一个漂亮的网站 仿新浪微博个人主页
weixin__BJ050106的博客
08-08 284
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大......
非常适合初学者或者初学进阶者学习的商城模仿页面源码
04-27
模仿 天猫，亚马逊，加入了localStorage应用，融入了图片闪光、楼层、返回顶部、css3动画、对象写法、轮播图等效果，非常适合初学者或者初学进阶者学习。本源码所有内容仅供学习，不负任何法律责任。对于二次传播者，保留配合网站内学习资源提供者（天猫等）一起向二次传播者追究的权利。
复制互联网2010全球最值得模仿的230个网站
{'name':'hqman','type':'宅男'}
06-10 353
001 oMoby.com——手机视觉搜索 002 AmazType.tha.jp——基于亚马逊的新型搜索 003 Groupon.com——每天团购一次 004 Ezdia.com——知识交易平台 005 DealBK.com——本地手机优惠券 006 PleaseRobMe.com——搜索记录行踪日志 007 Seed.com——分发原创内容平台 008 WordItOut.co...
仿写一个简单的网站，以及初学前端的一点感悟
weixin_34043301的博客
11-22 2410
  这段时间在学习前端，并模仿了一个很简单的公司官网页面tongshai.net， 把这个页面内容对照着自己实现了一遍。 主要是因为该网站设计很简单（就几个静态页面，连什么控件都没用），很适合作为练手项目， 模仿的工程放在了我的另一个测试服务器上。 点击查看。  （很多功能仅为简单展示内容的网页都比较简单，都可以做为初学者很好的模仿对象）。 在仿写过程中，因为网页很简单，所以也没有碰到过什么很...
模仿的html网页
12-05
模仿的一个简单的购物类静态网页，旨在更好的学习和熟练的掌握html定义化语言和css布局
给HTML初学者的三十条最佳实践
颜海镜的博客
12-24 1006
Nettuts +运营最困难的方面是为很多技能水平不同的用户提供服务。如果我们发布太多高级教程，我的新手用户将无法从中受益。相反也是如此。我们尽我们最大的努力，但如果你觉得你被忽略了请联系我们。这个网站是为你服务的，所以说出来！如此说来，今天的教程是专为那些刚刚进入web开发领域的人准备的。如果你的经验是一年或更少，希望在这里列出的一些技巧将帮助你成为更好、更高效的开发者! 闲话少说，让我们
制作一个简单HTML游戏网页（HTML+CSS）仿龙之谷网络游戏官网
html精品源码
08-07 3094
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保...
网页模仿
weixin_30621959的博客
03-26 133
码云：https://gitee.com/zhanglingxion/codes/qjt7dgp1x28h0erswfzko66 网页：http://127.0.0.1:8020/HelloHBuilder/interweb.html?__hbt=1553608921099 1、原网页 2、模仿网页 1 <!DOCTYPE html> 2 &lt...
最值得模仿的230个网站
10-28
最值得模仿的230个网站最值得模仿的230个网站最值得模仿的230个网站
模仿网站（百度经验）
11-20
刚学了一点CSS，就赶紧模仿了一个网站 模仿的不够完整，没有学JS
html+css仿写简单网站
12-15
刚入门HTML+CSS，学习了一段时间后，为了练手，便写了这样一个静态的淘宝页面。就在刚才，终于完工。不得不说，内心有点小激动… 代码有点多，贴出来不太方便。如果大家有需要的话，直接去演示页面查看源代码扒取吧…
一个模仿写的网页代码，供参考
01-17
一个模仿写的网页代码，供参考
模仿某网站做的简约风格
spfLinux的博客
10-18 615
Document body { margin: 0; border: 0; padding: 0; background: #ECF0F1; } a { text-decoration: none; } .header { height: 50px; background: #456; } li { display:
全技术栈项目资源包：一键还原网页与多种技术源码.zip
该压缩包文件是针对学生和开发者在进行毕设（毕业设计）、课设（课程设计）、项目开发、实训等活动中，提供一个完整的学习和实践资源。文件内容涉及多个技术领域，适合不同水平的学习者，包括小白和进阶学习者，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值