web制作的小网页

最新推荐文章于 2024-05-30 10:28:13 发布

Pink&Sakura

最新推荐文章于 2024-05-30 10:28:13 发布

阅读量862

点赞数 2

分类专栏： Web前端文章标签：前端 html webview

本文链接：https://blog.csdn.net/galaxyrt/article/details/121785295

版权

Web前端专栏收录该内容

23 篇文章 6 订阅

订阅专栏

代码css和js部分需要自己创建文件夹加进去

图片也需要自己新建自己的images文件夹插入

完整工程文件免费下载链接：

web简易网页制作.zip-互联网文档类资源-CSDN下载

效果图：

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/footer.css">
  <script src="js/script.js">

  </script>
</head>

<body>
  <div class="BoxWrap">
    <div class="horn">
      <div class="bor lt"></div>
      <div class="bor rt"></div>
      <div class="bor rb"></div>
      <div class="bor lb"></div>

      <div class="box1">
        <div class="logo"><img src="images/a4.jpg" alt=""></div>
        <div class="news">

          <ul>
            <li><a href="">Name:</a>
              <p>刘剑辉</p>
            </li>
            <li><a href="">Class:</a>
              <p>计算机类20-7班</p>
            </li>
            <li><a href="">ID:</a>
              <p>201002721</p>
            </li>
          </ul>
          <div class="icon"><a href="">
              <p>More Details</p>
            </a></div>
        </div>
        <button class="btn-danger">
          <div class="Code"><a href="">QR Code</a>
            <img src="images/a3.jpg" alt="">
          </div>
        </button>
      </div>


      <div class="container">
        <div class="menu">
          <ul>
            <li><a href="">Hobby</a></li>
            <li><a href="">Music</a></li>
            <li><a href="">Achievement</a></li>
            <li><a href="">Dream</a></li>
          </ul>
        </div>
        <div class="list">
          <div class="dropdown">
            <button class="dropbtn">下拉菜单</button>
            <div class="dropdown-content">
              <a href="#">下拉菜单 1</a>
              <a href="#">下拉菜单 2</a>
              <a href="#">下拉菜单 3</a>
            </div>
          </div>
        </div>
        <div class="main">
          <ul>
            <li style="background-image:url(images/k1.jpg);"><a href="">我的相册</a></li>
            <li style="background-image:url(images/k2.jpg);"><a href="">我的收藏</a></li>
            <li style="background-image:url(images/k3.jpg);"><a href="">我的日志</a></li>
            <li style="background-image:url(images/k4.jpg);"><a href="">我的爱好</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- ****************part two*************************** -->
  <hr />
  <div class="box3">
    <ul id="banner">
    </ul>
  </div>

  <div class="box2">
    <div class="text">
      <h2>Personal Information</h2>
      <li><a href="">姓名： </a>
        <p>刘剑辉</p>
      </li>
      <li><a href="">性别： </a>
        <p>男</p>
      </li>
      <li><a href="">名族: </a>
        <p>汉族</p>
      </li>
      <li><a href="">出生日期：</a>
        <p>2021/6/1</p>
      </li>
      <li><a href="">居住地址：</a>
        <p>云南省曲靖市宣威市振兴北路</p>
      </li>

      <div class="news1">
        <p>
          热爱运动，热爱学习，积极向上，性格比较内向，不怎么爱说话，但是懂得关心在意别人的感受，体贴关心自己的盆友，同时热衷帮助他人。本人性格热情开朗，待人友好，为人诚实谦虚。工作勤奋，认真负责，能吃苦耐劳，尽职尽责，有耐心。具有亲和力，平易近人，善于与人沟通。
          活泼开朗、乐观向上、兴趣广泛、适应力强、上手快、勤奋好学、脚踏实地、认真负责、坚毅不拔、吃苦耐劳、勇于迎接新挑战。
          忠实诚信,讲原则，说到做到，决不推卸责任；有自制力，做事情始终坚持有始有终，从不半途而废；肯学习,有问题不逃避,愿意虚心向他人学习；自信但不自负,不以自我为中心；愿意以谦虚态度赞扬接纳优越者,权威者；会用100%的热情和精力投入到工作中；平易近人。为人诚恳,性格开朗,积极进取,适应力强、勤奋好学、脚踏实地，有较强的团队精神,工作积极进取,态度认真。
          本人性格开朗、为人诚恳、乐观向上、兴趣广泛本人性格开朗、为人诚恳、乐观向上、兴趣广泛、拥有较强的组织能力和适应能力、并具有较强的管理策划与组织管理协调能力。</p>
      </div>
    </div>
    <div class="pic">
      <img src="images/m4.jpg" alt="">
    </div>
  </div>

  <div class="box4">
    <div class="section">
      <div class="text1">
        <video width="536" height="300" controls autoplay>
          <source src="images/Five hundred miles.mp4">
        </video>
      </div>
      <div class="pic1">
        <h2>My Favorite Song--Five hundred mlies.</h2>
        <p>此曲由美国民谣歌手Hedy West创作，并于1961年率先发行在民歌三重唱The Journeymen(旅行者)的同名专辑中，后有日本摇滚歌神忌野清志郎改编日文版的500
          miles，被松隆子和忌野清志郎本人唱过。值得注意的是，应区别于Bobby Bare的《500 miles away from home》。</p>
      </div>
    </div>
    <div class="section">
      <div class="text1">
        <img src="images/d11.jpg">
      </div>
      <div class="pic1">
        <h2>My Favorite Exercise--Climb the mountain</h2>
        <p>登山是一项运动，他既可以锻炼身体，又可以陶冶情操登山带来的好处之一就是缓解负面情绪。走在绿水青山的环境中，可以排解掉你的心理压力，让你心情变愉悦，以更积极的心态回归生活。

          当今快节奏的工作给人们带来很大压力，容易引发焦虑、暴躁、抑郁</p>
      </div>
    </div>
  </div>
  <div class="box5">
    <div class="section">
      <div class="part">
        <div class="pic2"><img src="images/b4.jpg" alt=""></div>
        <div class="pic2"><img src="images/b5.jpg" alt=""></div>
        <div class="pic2"><img src="images/h3.jpg" alt=""></div>
      </div>
      <div class="part">
        <div class="text2">
          <h2>Favorite friuts</h2>
          <h3>Watermelon</h3>
          <h3>Wasberry</h3>
          <h3>&Strawberry</h3>
          <p>
            我喜欢酸酸甜甜的水果，比如西瓜、杨梅、草莓，因为他们算不上很酸，的那会也不会甜到齁，酸酸甜甜很可口,让我来介绍一下杨梅吧，早在7000年前中国地区就有杨梅的生长。该属有50多个种，中国已知的有杨梅、白杨梅、毛杨梅、青杨梅和矮杨梅，经济栽培主要是杨梅。
            杨梅枝繁叶茂，树冠圆整，初夏又有红果累累，十分可爱，是园林绿化结合生产的优良树种。孤植、丛植于草坪、庭院，或列植于路边都很合适；若采用密植方式来分隔空间或起遮蔽作用也很理想。经济用途果味酸甜适中，既可直接食用，又可加工成杨梅干、酱、蜜饯等，还可酿酒，有止渴、生津、助消化等功能。
          </p>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="part">
        <div class="pic2"><img src="images/v3.jpg" alt=""></div>
        <div class="pic2"><img src="images/v2.jpg" alt=""></div>
        <div class="pic2"><img src="images/v1.jpg" alt=""></div>
      </div>
      <div class="part">
        <div class="text2">
          <h2>Favorite vegetables</h2>
          <h3>Baby Chinese cobbage</h3>
          <h3>Broccoli</h3>
          <h3>&Bright vegetables</h3>
          <p>
            我非常热衷素食主义，我非常喜欢各种各样的，五彩斑斓的新鲜蔬菜，因为蔬菜给人一种富有活力的感觉，它能为我们提供丰富的维生素、矿物质和粗纤维，这些营养物质都是我们人体不可缺少的，尤其是小朋友正是长身体的时候，更不能缺少它。比如维生素!是人体也是小朋友们需要最多的一种维生素，如果这种维生素不能满足需要，就会影响小朋友牙齿和骨骼的发育，而患上龋齿或佝偻病。维生素!在蔬菜中含量是较高的，因此，多吃些蔬菜，骨骼就会长得好，牙齿也会长得整齐。
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="box5">
    <div class="text3">
      <div class="part1">
        <h2>Log management</h2>
        <p>This is my personal homepage,which is all about personal information such as my photo album ,my diary and the
          form of my collect .</p>
      </div>
      <div class="part2">
        <ul>
          <li><a href=""></a>
            <div class="sousuo"><img src="images/s2.gif" alt=""></div>
            <h1>Photo Album</h1>
          </li>
          <li><a href=""></a>
            <div class="sousuo"><img src="images/s3.gif" alt=""></div>
            <h1>Collect List</h1>
          </li>
          <li><a href=""></a>
            <div class="sousuo"><img src="images/s4.gif" alt=""></div>
            <h1>Search</h1>
          </li>
        </ul>
      </div>
    </div>
    <div class="pic3">
      <div class="news3"><h1>关于未来的规划</h1></div>
      <div class="touxiang">
        <ol>
          <li><p>假期巩固C++和web前端所学知识，同时积极拓展相关方面的知识体系。</p></li>
          <li><p>与此同时要进一步学习数据结构方面的知识，打好基础以至于开学以后可以轻松一点，还可以备考四级。</p></li>
          <li><p>学习编程的同时不能放松其他基础科目的学习，重视并坚持学习英语。</p></li>
          <li><p>我的目标是先把老师讲授的知识先完全掌握，再去探索更广泛的计算机方面的知识体系，终极目标是提高自己的写代码的能力。提高自己的竞争力。</p></li>
        </ol>
      </div>
      <div class="news3"></div>
    </div>
  </div>
          
  <div class="site-footer">
        
    <div class="footer-related">

        <div class="footer-article w1100">
            <dl class="contact clearfix">
                <dt class="fl">
                    <i class="iconfont"></i>
                </dt>
                <dd class="fl">
                    <p class="text">Personal Wbsite</p>
                    <p class="tel">36334044@qq.com</p>
                    <a href="#" >更换头像</a>
                </dd>
            </dl>

            <dl class="col-article">
                <dt>MyHomepage</dt>

                <dd>
                    <a  href="#">我的相册</a>
                </dd>

                <dd>
                    <a  href="#">我的日志</a>
                </dd>

                <dd>
                    <a  href="#">动态</a>
                </dd>

                <dd>
                    <a  href="#">收藏</a>
                </dd>

                <dd>
                    <a  href="#">盆友圈</a>
                </dd>

                <dd>
                    <a  href="#">最近</a>
                </dd>

            </dl>

            <dl class="col-article">
                <dt>My Hobby</dt>

                <dd>
                    <a  href="#">Games</a>
                </dd>

                <dd>
                    <a  href="#">About Fruits</a>
                </dd>

                <dd>
                    <a  href="#">About Vegetables</a>
                </dd>

                <dd>
                    <a  href="#">Music</a>
                </dd>

                <dd>
                    <a  href="#">Film</a>
                </dd>

                <dd>
                    <a  href="#">Festival</a>
                </dd>

            </dl>

            <dl class="col-article">
                <dt>Education</dt>

                <dd>
                    <a  href="#">Primary School</a>
                </dd>

                <dd>
                    <a  href="#">Middle School</a>
                </dd>

                <dd>
                    <a  href="#">Senior School</a>
                </dd>

                <dd>
                    <a  href="#">College</a>
                </dd>

                <dd>
                    <a  href="#">About Beijing</a>
                </dd>

                <dd>
                    <a  href="#">Beilin</a>
                </dd>

            </dl>

            <!--关于我们-->
            <dl class="col-article">
                <dt>University</dt>

                <dd>
                    <a href="#">Major</a>
                </dd>

                <dd>
                    <a href="#">School of Information</a>
                </dd>

                <dd>
                    <a href="#">Computer Science</a>
                </dd>

                <dd>
                    <a href="#">Grade</a>
                </dd>

                <dd>
                    <a href="#">Class</a>
                </dd>

                <dd>
                    <a href="#">Duty</a>
                </dd>

            </dl>
            <dl class="wx">
                <dt> QR Code</dt>

                <dd>
                    <img src="images/z1.jpg">
                </dd>

                <dd class="other">
                    <span>扫码支付</span></span>
                
                </dd>
            </dl>
        </div>

        <div class="footer-links w1100">
            <p>我的CSDN创作超链接</p>
            <div class="clearfix">
                <!-- 友情链接循环开始 -->

                <a href="https://blog.csdn.net/galaxyrt/article/details/117403649?spm=1001.2014.3001.5501">详细讲解Jquery</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117398577?spm=1001.2014.3001.5501">详细介绍DOM操作</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117396457?spm=1001.2014.3001.5501">详细介绍Javascript</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117388956?spm=1001.2014.3001.5501">Keyframes关键帧</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117253022?spm=1001.2014.3001.5501">C++的指针</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117196755?spm=1001.2014.3001.5501">C++栈的使用</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117196104?spm=1001.2014.3001.5501">队列queue</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117983077?spm=1001.2014.3001.5501">C++重载运算符</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117233288?spm=1001.2014.3001.5501">C++的流和流对象</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117173456?spm=1001.2014.3001.5501">北林OJ</a>

                <a href="https://blog.csdn.net/galaxyrt/article/details/117414138?spm=1001.2014.3001.5501">配色大全</a>       
                <a href="https://blog.csdn.net/galaxyrt/article/details/117388142?spm=1001.2014.3001.5501">transition属性</a>

                <!-- 超链接链接结束 -->
            </div>
        </div>

        <div class="footer-info w1100">
            <div class="info-text w1100">
                <p class="copyright">
                        北京林业大学信息学院2020级计算机类207班刘剑辉制作 <em></em>
                    <a href="Index.html" >点击返回主页</a>
                </p>
                <p class="dizhi"> Copyright  北京市海淀区学院路清华东路35号北京林业大学</p>
                <p class="qualified">

                </p>
            </div>
        </div>

    </div>
</div>
</body>

</html>

CSS部分（style.css）

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
}


body {
    width: 100vw;
    height: 600vh;
    background: linear-gradient(135deg, #c76968, #008792, #19caad, #f05b72);
    background-size: 100% 200%;
    animation: gradient-move 15s ease alternate infinite;
    background-repeat: no-repeat;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

.BoxWrap {
    width: 1100px;
    height: 560px;
    position: relative;
}

.horn {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #00d3e7;
    margin: 100px;
    margin-top: 50px;
}

.bor {
    width: 10px;
    height: 10px;
    position: absolute;
}

.horn .lt {
    border-top: 3px solid #00d3e7;
    border-left: 3px solid #00d3e7;
    left: -3px;
    top: -3px;
}

.horn .rt {
    border-top: 3px solid #00d3e7;
    border-right: 3px solid #00d3e7;
    right: -3px;
    top: -3px;
}

.horn .rb {
    border-bottom: 3px solid #00d3e7;
    border-right: 3px solid #00d3e7;
    right: -3px;
    bottom: -3px;
}

.horn .lb {
    border-bottom: 3px solid #00d3e7;
    border-left: 3px solid #00d3e7;
    left: -3px;
    bottom: -3px;
}

/* ************************************* */

.box1 {
    float: left;
    width: 300px;
    height: 540px;
    border: 1px solid turquoise;
    margin: 10px;
}

.logo {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin: auto;
    margin-top: 10px;
    background-size: cover;
}

.logo img {
    width: 248px;
    height: 248px;
    border-radius: 50%;
    border: #19caad solid 1px;
}

.logo img:hover {
    border: #f70b65 2px solid;
}

.news {
    width: 300px;
    height: 140px;
    border: mediumturquoise 1px solid;
    border-radius: 10px;
}

/* *****************特效******************** */
.icon {
    width: 300px;
    height: 70px;
    border: 1px solid aliceblue;
    position: relative;
    text-transform: uppercase;
    cursor: pointer;
}

.icon a {
    color: linen;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 2px;
}


.icon:hover {
    background: linear-gradient(90deg, #2bd2ff, #f70b65, turquoise, #2bd2ff);
    background-size: 400%;
}

.icon:before {
    content: '';
    position: absolute;
    background: inherit;
    top: -5px;
    right: -5px;
    left: -5px;
    border-radius: 50px;
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.5s;
}

.icon:hover:before {
    opacity: 1;
    z-index: -1;
}

.icon {
    z-index: 1;
    animation: glow 8s linear infinite;
}

@keyframes glow {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 400%;
    }
}

/* *******************二维码及简介部分********************** */
.news ul {
    float: bottom;
    width: 300px;
    height: 68px;
    border: aliceblue 1px solid;
}



.news ul li {
    width: 290px;
    height: 22px;
    margin-left: 10px;
    font-size: 6px;
    border-bottom: rgb(192, 192, 192, 0.5) 1px solid;
}

.news ul li a {
    text-decoration: none;
    color: aliceblue;

}

.news ul li p {
    float: right;
    color: cornsilk;
    margin-right: 30px;
    font-family: '楷体';
    margin-top: 5px;
}

.news ul li p:hover {
    color: #f70b65;
}

.Code {
    width: 300px;
    height: 140px;
    border: floralwhite 1px solid;
    float: bottom;
    position: relative;
    overflow: hidden;
    background-color: lightseagreen;
}

.Code a {
    text-decoration: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: aliceblue;
    font-size: 22px;
}

.Code:hover {
    box-shadow: 0 0 10px #f70b65;
}

.Code img {
    height: 138px;
    width: 138px;
    transform: translateY(138px);
}

.btn-danger:hover img {
    transform: translateY(0);
}


/* *****************菜单******************* */
.container {
    width: 768px;
    float: right;
    background-color: green;
}

.menu {
    float: left;
    height: 50px;
    width: 555px;
    border: turquoise 1px solid;
    margin-top: 10px;
    margin-right: 30px;
}

.menu ul li {
    float: left;
    width: 138px;
    height: 50px;
    border-right: turquoise 1px solid;
    position: relative;
}

.menu ul li:hover {
    background-color: #f70b65;

}

.menu ul li:nth-child(4) {
    border-right: none;
}


.menu ul li a {
    float: left;
    text-decoration: none;
    color: white;
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.menu ul li a:hover {
    color: #f70b65;
}

/* *****************主界面**************** */
.main {
    float: right;
    width: 768px;
    height: 485px;
    border: rebeccapurple 1px solid;
    margin: 5px;
}

.main ul li {
    list-style: none;
    float: left;
    width: 378px;
    height: 240px;
    margin: 2px;
    background-size: cover;
    position: relative;
}

.main ul li img {
    width: 378px;
    height: 240px;
    position: relative;
}

.main ul li a {
    font-size: 36px;
    color: seashell;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    letter-spacing: 2px;
}

.main ul li a:hover {
    background-color: #f70b65;
}


/* **************下拉表单**************** */
.list {
    margin-top: 13px;
    margin-left: 8px;
    float: left;
    width: 140px;
    height: 50px;

}

.dropbtn {
    background-color: aquamarine;
    color: white;
    border: none;
    cursor: pointer;
    width: 140px;
    height: 50px;
    margin-left: 9px;

}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(127, 255, 212, 0.5);
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    margin-left: 9px;
}

.dropdown-content:hover {}

.dropdown-content a {
    color: darkcyan;
    width: 140px;
    height: 45px;
    text-decoration: none;
    display: block;


}

.dropdown-content a:hover {
    background-color: rgb(245, 245, 245, 0.5);
    border: 1px solid #999;
    box-shadow: 3px 3px 3px 3pxS crimson;


}

.dropdown:hover .dropdown-content {
    display: block;

}

/* **********************part two******************* */

.box2 {
    width: 1100px;
    height: 500px;
    margin: 100px;
    margin-top: 400px;
    background: radial-gradient(circle at center center, rgba(25, 25, 112, 0), rgba(25, 25, 112, 0)),
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,
        linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;
    background-repeat: no-repeat;
    background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;
    background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;

}

.box4 {
    width: 1100px;
    height: 500px;
    margin: 100px;
    background: radial-gradient(circle at center center, rgba(25, 25, 112, 0), rgba(25, 25, 112, 0)),
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,
        linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;
    background-repeat: no-repeat;
    background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;
    background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;

}

.box5 {
    width: 1100px;
    height: 600px;
    margin: 100px;
    background: radial-gradient(circle at center center, rgba(25, 25, 112, 0), rgba(25, 25, 112, 0)),
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,
        linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;
    background-repeat: no-repeat;
    background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;
    background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;

}

hr {
    border: 1px solid #008792;
    margin-top: 100px;
}

.box3 {
    margin-left: 280px;
    margin-top: 100px;
}

.box3 ul {
    list-style: none;
    /**/
    position: absolute;
    float: left;
    /**/
    width: 700px;
    /**/
    height: 200px;
    /**/
}


.box3 ul:hover {
    cursor: pointer;
    /**/
}

.box3 ul li {
    float: left;
    /**/
    position: absolute;
    /**/
    left: 0px;
    /**/
    transition-duration: 2s;
    /**/
}

/* ****************简介部分*************** */
.text {
    float: left;
    width: 60%;
    /* border: 1px solid #f70b65; */
}

.text h2 {
    color: aliceblue;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.text li {
    clear: both;
}

.text li a {
    margin-left: 20px;
    float: left;
    text-decoration: none;
    color: aliceblue;
    letter-spacing: 1px;

}

.text li p {
    float: left;
    text-align: center;
    margin-left: 100px;
    color: aliceblue;
    letter-spacing: 1px;

}

.news1 p {
    margin-top: 60px;
    margin: 5px;
    letter-spacing: 1px;
    margin-top: 30px;
    color: aliceblue;
}

.pic {
    float: right;
    width: 36%;
    /* border: 1px solid #f70b65; */
}

.pic img {
    width: 380px;
    height: 300px;
    margin-top: 100px;
}

.section {
    width: 49%;
    /* border: #f70b65 1px solid; */
    float: left;
    margin: 5px;
}

.text1 {
    height: 290px;
    float: left;

}

.pic1 {
    height: 200px;
    float: left;
}

.pic1 h2 {
    margin-top: 20px;
    color: white;
    text-align: center;
}

.pic1 p {

    margin: 15px;
    color: white;
    letter-spacing: 1px;
}

.text1 img {
    width: 400px;
    height: 290px;
    margin-left: 60px;
}

.part {
    float: left;
    margin: 1px;
    height: 590px;
    width: 49%;
    background-color: teal;
}

.pic2 {
    width: 100%;
    /* background-color: yellowgreen; */
    margin: 2px;
}

.pic2 img {
    margin: 6px;
    width: 270px;
    height: 180px;
}

.text2 h2 {
    text-align: center;
    margin-top: 50px;
    letter-spacing: 1px;
}

.text2 h3 {
    text-align: center;
    margin-top: 15px;
    letter-spacing: 1px;
}

.text2 p {
    margin: 10px;
    font-family: "楷体";
}

.bbox {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
    border-radius: 20px;
    position: relative;
}

.text3 {
    float: left;
    width: 60%;
    border: 1px solid darkorchid;
    height: 600px;

}

.pic3 {
    width: 40%;
    float: left;
    height: 600px;
    border: 1px solid #f05b72;
    background-color: honeydew;
}

.news3 {
    clear: both;
    float: left;
    border: 1px solid #f70b65;
    width: 100%;
    height: 150px;
    background-color: paleturquoise;
}

.news3 h1 {
    text-align: center;
    margin-top: 40px;
}

.touxiang {
    clear: both;
    float: left;
    width: 100%;
    height: 300px;
    border: 1px solid orange;
}

.touxiang ol li {
    width: 100%;
    height: 60px;
    border: 1px solid darkcyan;
}

.touxiang ol li p {
    letter-spacing: 1px;
    margin: 10px;
}

.part1 {
    width: 100%;
    height: 40%;
    background-color: honeydew;
}

.part1 h2 {
    float: left;
    margin-top: 60px;
    margin-left: 40px;
    font-size: 36px;
}

.part1 p {
    float: left;
    margin-top: 80px;
    margin-left: 40px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.part2 ul h1 {
    float: left;
    font-size: 24px;
    margin-left: 10px;
    margin-top: 20px;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
}

.part2 ul {
    width: 100%;
    height: 360px;
    background-color: honeydew;

}

.part2 ul li {
    float: left;
    width: 30%;
    height: 300px;
    margin: 10px;
    margin-top: 30px;
    border-radius: 30px;
    border: 3px solid darkcyan;
}


.part2 ul li:nth-child(2) {
    background-color: navy;
}

.part2 ul li:nth-child(2) h1 {
    color: white;
    margin-left: 30px;
}

.part2 ul li:nth-child(3) h1 {
    margin-left: 50px;
}

.sousuo {
    width: 60px;
    height: 60px;
    margin: auto;
    border: 1px solid grey;
    margin-top: 50px;
    border-radius: 50%;
}

footer.css

* {
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}

a {
    text-decoration: none;
}

/*底部*/
.site-footer {
    font-size: 14px;
    line-height: 1.8;
    color: #a8aaba;
    background: #32333b;
}

.site-footer a {
    color: #a8aaba;
}

.site-footer a:hover {
    color: #f44 !important;
}

.site-footer .footer-article {
    padding: 30px 0 20px;
    overflow: hidden;
}

.site-footer .contact {
    float: left;
    width: 280px;
}

.site-footer .contact dt {
    width: 90px;
}

.site-footer .contact .iconfont {
    width: 66px;
    height: 66px;
    display: block;
    float: left;
    background: url(../images/z2.jpg) center center no-repeat;
    background-size: 55px;
}

.site-footer .contact .text {
    font-size: 14px;
    line-height: 30px;
    color: #fff;
}

.site-footer .contact .tel {
    padding: 3px 0 15px;
    font-size: 20px;
    color: #fff;
}

.site-footer .contact a {
    display: block;
    width: 90px;
    font-size: 14px;
    line-height: 30px;
    color: #9b9ea0;
    text-align: center;
    border: 1px solid #9b9ea0;
    border-radius: 4px;
}

.site-footer .contact a:hover {
    color: #fff !important;
}

.site-footer .col-article {
    float: left;
    width: 171px;
}

.site-footer .col-article dt {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: normal;
    color: #d7d8d9;
}

.site-footer .col-article dd {
    margin-bottom: 8px;
    overflow: hidden;
}

.site-footer .col-article dd a {
    font-size: 12px;
    color: #9b9ea0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.site-footer .wx {
    float: left;
    width: 135px;
    margin-right: 0;
}

.site-footer .wx dt {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: normal;
    color: #d7d8d9;
}

.site-footer .wx dd {
    margin-bottom: 15px;
}

.site-footer .wx dd img {
    display: block;
    width: 110px;
    height: 110px;
    margin: 5px 0;
    border-radius: 2px;
}

.site-footer .wx dd.other {
    margin-bottom: 0;
    line-height: 18px;
}

.site-footer .wx dd.other span {
    display: block;
    font-size: 12px;
}

.site-footer .wx dd.other a {
    display: inline-block;
    margin-right: 5px;
    font-size: 12px;
    line-height: 18px;
    vertical-align: top;
}

.footer-links {
    padding: 10px 0;
    border-top: 1px solid #41424c;
    border-bottom: 1px solid #41424c;
}

.footer-links p {
    font-size: 14px;
    color: #a8aaba;
}

.footer-links a {
    margin-right: 20px;
    font-size: 12px;
    color: #a8aaba;
}

.footer-info .info-text {
    padding: 20px 0;
    font-size: 12px;
    text-align: center;
}

.footer-info .info-text .nav-bottom {
    padding: 20px 0 5px;
    font-size: 14px;
    color: #ccc;
    text-align: center;
}

.footer-info .info-text .nav-bottom a {
    padding: 0 8px;
    color: #9b9ea0;
}

.footer-info .info-text .copyright {
    padding-top: 5px;
}

.footer-info .info-text em {
    padding: 0 8px;
}

JS部分


window.onload = function(){/**/
             let timer;/**/
             let sz =new Array();/**/
            let szdiv = new Array();/**/
            
            function OpenTimer(){
               timer = setInterval(get_next,2000);/**/ 
            }
            OpenTimer();
             var cur_ul = document.getElementById("banner");/**/
             for(let i =1;i<=5;i++){/**/
                 
                 var cur_li = document.createElement("li");/**/
                 var cur_img = document.createElement("img"); /**/
                 
                 cur_img.src = "images/" + i+".jpg";/**/
                 cur_img.style.width ="300px";/**/
                 cur_img.style.height = "200px";/**/
                 cur_li.appendChild(cur_img);/**/
                
                cur_li.onmouseenter = function(){/**/
                    clearInterval(timer); /**/
                }
                
                cur_li.onmouseleave = function(){/**/
                     timer = setInterval(get_next,2000);/**/
                }
                
                 cur_ul.appendChild(cur_li);/**/
                 sz.push(cur_li);/**/
                 sz[sz.length-1].style.left = "0px";/**/
                
                
                let bottom_div = document.createElement("div");/**/
                bottom_div.style.left = 100*i+200+"px";/**/
                bottom_div.name = i-1;/**/
                szdiv.push(bottom_div);/**/
                cur_ul.appendChild(bottom_div);/**/
             }
            
            let pre_img = document.createElement("img");/**/
            pre_img.src = "images/tubiao2.gif " ;/**/
            pre_img.style.position ="absolute";/**/
            pre_img.style.left = 0;/**/
            pre_img.style.top =0;/**/
            pre_img.style.bottom =0;/**/
            pre_img.style.margin = "auto"/**/
            pre_img.style.zIndex =100;/**/
            cur_ul.appendChild(pre_img);/**/
            
            let nex_img = document.createElement("img");/**/
            nex_img.src = "images/tubiao3.gif";/**/
            nex_img.style.position ="absolute";/**/
            nex_img.style.right = 0;/**/
            nex_img.style.top =0;/**/
            nex_img.style.bottom =0;/**/
            nex_img.style.margin = "auto"/**/
            nex_img.style.zIndex =100;/**/
            cur_ul.appendChild(nex_img);/**/
            
            nex_img.onclick = function(){/**/
                clearInterval(timer);/**/
                get_next();/**/
                OpenTimer();/**/
            }
            
            pre_img.onclick = function(){/**/
                 clearInterval(timer);/**/
                get_pre();/**/
                 OpenTimer();/**/
            }
            
            let len = sz.length-1;/**/
            let IndexButtum = len -2;/**/
            setPuJu();/**/


                               
       function get_next(){/**/
           let give_up =sz[len];/**/
           sz.pop();/**/
           sz.unshift(give_up);/**/
           if(IndexButtum==0)IndexButtum=4; else IndexButtum--;/**/
           setPuJu();/**/
       }	
        
       function get_pre(){/**/
            let give_up =sz[0];/**/
            sz.shift();/**/
            sz.push(give_up);/**/
           if(++IndexButtum>4)IndexButtum=0;/**/
            setPuJu();/**/
        }
        
        function setPuJu(){/**/
           for(let i=0;i<sz.length;i++){/**/
               sz[i].style.zIndex = i;/**/
               sz[i].style.transform = "scale(1)";/**/
               szdiv[i].style.background = "#ffffff";/**/
           }
           
           sz[len-2].style.left ="0px";/**/
           sz[len-1].style.zIndex = 100;/**/
           sz[len-1].style.left = "200px";/**/
           sz[len-1].style.transform = "scale(1.3)";/**/
           sz[len-1].style.opacity = 1;/**/
           sz[len].style.left = "400px"; /**/
           szdiv[IndexButtum].style.background ="#e431fc"/**/
        }
        
        for(let i=0;i<szdiv.length;i++){/**/
            szdiv[i].onclick = function(){/**/
                clearInterval(timer);/**/
                let len = szdiv[i].name;/**/
                if(len<IndexButtum){/**/
                    let max =IndexButtum-len ;/**/
                    for(;max>0;max--)/**/
                    get_next();  
                }else if(len>IndexButtum){/**/
                    max = len-IndexButtum;/**/
                    for(;max>0;max--)/**/
                    get_pre(); 
                }
                OpenTimer();/**/
            }
            
        }
}

Pink&Sakura

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web制作的小网页

代码css和js部分需要自己创建文件夹加进去图片也需要自己新建自己的images文件夹插入效果图：HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...
复制链接

扫一扫

专栏目录