Web实训项目–网页设计（附源码）

本文介绍: 我们要使用这些知识实现一个简单的网页设计，利用HTML的a 标签做文本内容跳转以及超链接的应用，CSS设计内容样式和图片、动画、视频的大小位置格式，Ja vaSc rip t实现轮播图效果等。学习如何设计网页中的轮播图和动画效果，并掌握 a 标签文本内容跳转、超链接的应用、播放音乐与视频等操作。通过对We b 知识内容的了解，我们掌握了HTML、CSS和Ja vaSc r ip t的基本知识以及利用它们实现一些简单的应用。1、使用We b 知识实现一个简单的网页设计，利用HTML的a 标签做文本内容跳转以及超链接的应用。

1 实训基本信息

1.1 实训项目名称

网页设计

1.2 实训环境

本次实训的形式以实战讲解为主，以项目为主导。学习如何设计网页中的轮播图和动画效果，并掌握 a 标签文本内容跳转、超链接的应用、播放音乐与视频等操作。

2 实训内容简介

2.1 网页设计

通过对We b知识内容的了解，我们掌握了HTML、CSS和Ja vaSc r ip t的基本知识以及利用它们实现一些简单的应用。

接下来我们要使用这些知识实现一个简单的网页设计，利用HTML的a 标签做文本内容跳转以及超链接的应用，CSS设计内容样式和图片、动画、视频的大小位置格式，Ja vaSc r i p t实现轮播图效果等。

3 项目开发过程

3.1 网页设计

1、使用Web知识实现一个简单的网页设计，利用HTML的a 标签做文本内容跳转以及超链接的应用。

2、CSS设计内容样式和图片、动画、视频的大小位置格式。

3、JavaScri p t实现轮播图效果等。

3.2 程序源码

CSS部分：

<style&gt;
          .slide{
          width: 60%;
          margin: 0 auto;
          position: relative;
        }
          *{
          margin: 0;
          padding: 0;
          list-style: none;
          text-decoration: none;
        }
          .a{
          text-decoration: none;
        }
          .head{
          width: 100%;
          background-color: rgba(0, 0, 0, 0.8);
          text-align: center;
          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
          /* position: fixed; */
          left: 0;
          right: 0;
          top: 0;
        }
          .head img{
          width: 110px;
          height: 32px;
          padding-top: 7px;
        }
          .con{
          padding-bottom: 5px;
        }
          .con a{
          color: #a8a8a8;
          font-weight: 200px;
          font-size: 14px;
          margin: 0 52px;
        }
          .aa{
          background-color:wheat;
          height: 1200px;
          top: 0px;
        }
          .iconfont-shipin{
          color: crimson;
          width: 20px;
          height: 20px;
        }
          .txt1{
          margin-left :130px;
          width: 1010px;
          text-align: center;
          text-indent: 4em;
          color:rgb(100,100,100)
        }
          body{
          /* 视口 */
          perspective: 1000px;
        }
        /* 关键帧动画 可一直执行 */
        @keyframes gjzhen{
            0%{
                transform: rotateX(-10deg) rotateY(0deg);
            }
            50%{
                transform: rotateX(10deg) rotateY(180deg);
            } 
            100%{
                transform: rotateX(-10deg) rotateY(360deg);
            }
        }
        .wrap{
            width: 100px;
            height: 100px;
            /* margin: 150px auto; */
            margin-top: 60px;
            margin-left: 615px;
            position: relative;
            /* 添加3d效果，使li标签具有3d效果 */
            transform-style: preserve-3d;
            /* 翻转整个容器 */
            transform: rotateX(-10deg);
            /* 添加关键帧动画 */
            animation: gjzhen 7s infinite linear;
        }
        .wrap li{
            width: 133px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            /* border: 1px solid red; */
            border-radius: 10%;
        }
        .wrap li>img{
            width: 100%;
            height: 100%;
            border-radius: 10%;
            vertical-align: top;
            -webkit-box-reflect: below 10px linear-gradient(to top, red ,
            transparent 50%);
        }
        .wrap li:nth-child(1){
            transform: translateZ(300px);
        }
        .wrap li:nth-child(2){
            transform: rotateY(-60deg) translateZ(300px);
        }
        .wrap li:nth-child(3){
            transform: rotateY(-120deg) translateZ(300px);
        }
        .wrap li:nth-child(4){
            transform: rotateY(-180deg) translateZ(300px);
        }
        .wrap li:nth-child(5){
            transform: rotateY(-240deg) translateZ(300px);
        }
        .wrap li:nth-child(6){
            transform: rotateY(-300deg) translateZ(300px);
        }
        .wrap li:nth-child(7){
            transform: rotateY(-360deg) translateZ(300px);
        }
        .border{
        width: 1510px;
        margin: 30px auto;
        border: 1px solid rgb(100,100,100);
        position: relative;
        left: -100px;
        }
        .models{
        position: absolute;
        width: 1000px;
        left: 350px;
        top: 1210px;
        }
        .model{
        display:block;
        width: 240px;
        text-align: center;
        float: left;
        margin: 20px;
        }
        .img{
        position: relative;
        }
        .img .mark{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color:rgba(0, 0,0, 0.6);
        color: antiquewhite;
        font-size: 14px;
        opacity: 0;
        margin-top: 20px;
        transition: all 0.5s;
        }
        .model img{
        width: 100%;
        }
        .img h2{
        font-size: 30px;
        margin-top: 30px;
        }
        .model .txt{
        padding: 7px 0;
        background-color: rgba(red, 0, 0, 0.6);
        color: #aaa;
        border-radius: 0 0 10px 10px;
        box-shadow: 1px 1px 2px rgba(0, 0,0 , 0.6);
        }
        .img img, .img .mark{
        border-radius: 10px 10px 0 0;
        box-shadow: 1px 1px 2px rgba(0, 0,0 , 0.6);
        }
        /* 悬浮状态 */
        .model:hover .mark{
        opacity: 1;
        }
        .tb{
        width:1010px;
        margin: 0 auto;
        margin-left: 200px;
        margin-top: 240px;
        }
        .tb img{
        width:50px;
        margin-top: 1000;
        font-size: 0px;
        margin: 20px;
        }
        .aaa{
        position:absolute;
        top:550px;
        left:100px;
        }
        .wb1{
        width:48%;
        float: left;
        margin-bottom: 15px;
        padding: 0 7px;
        margin-top: -22px;
        border-left:1px solid #666;
        }
        .wb{
        position: relative;
        width: 100%;
        background-color:#666;
        top:1040px;
        }
        .wb .imgs{
        width: 50%;
        padding: 0 7px;
        margin-top:10px;
        float: left;
        }
        .wb .imgs img{
        width: 40px;
        float: right;
        }
        .wb1 img{
        width: 65px;
        height: 35px;
        }
        .wb1 p{
        display: block;
        font-size: 14px;
        color: #666;
        text-shadow: 1px 1px 1px white;
        margin-bottom: 5px;  
        } 
        .hh{
        position: relative;
        height: 300px;
        width: 100%;
        background-color: rgba(200, 200, 200, 0.6);
        top:1010px;
        }
        .video{
          border-radius: 10%;
          /* text-align: center; */
          width: 360px;
          height: 200px;
          margin-left: 246px;
        }
     </style>

HTML部分：

<body>
<!-- 第一部分 -->
  <a name="首页"></a>
  <div class="head">
    <img src="./图片/Title.png" alt="" class="logo">
    <div class="con">
           <a href="#首页"class="a">首页</a>
           <a href="#内容"class="a">内容</a>
           <a href="#视频"class="a">视频</a>
           <a href="#联系"class="a">联系</a> 
       </div>
   </div>
<!-- 第二部分 -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./图片/1.jpg" alt="图片加载错误">
            <div class="carousel-caption">
             <p class="txt">图片1</p>
            </div>
          </div>
          <div class="item">
            <img src="./图片/2.jpg" alt="图片加载错误">
            <div class="carousel-caption">
                <p class="txt">图片2</p>
            </div>
          </div>
          <div class="item">
            <img src="./图片/3.jpg" alt="图片加载错误">
            <div class="carousel-caption">
                <p class="txt">图片3</p>
            </div>
          </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span></a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span></a>
      </div>
<!-- 第三部分 -->
<div class="aaa">
  <div class="border"></div>
<a name="简介"></a>
<p class="txt1"><a href="https://baike.baidu.com/item/%E5%95%86%E4%B8%98%E5%8F%A4%E5%9F%8E/2486591?fr=aladdin">商丘古城</a>
  是国家历史文化名城、全国重点文物保护单位、国家AAAA级旅游景区、国家水利风景区，位于
  <a href="https://baike.baidu.com/item/%E7%9D%A2%E9%98%B3%E5%8C%BA/2366870">河南省商丘市睢阳区</a>。
  它是世界上唯一一座集八卦城、水中城、城摞城三位一体的大型古城遗址，曾获评“中国华侨国际文化交流基地”。</p>
  <div class="border"></div>
  <a name="内容"></a>
  <ul class="wrap">
    <li><img src="./图片/4.jpeg"></li>
    <li><img src="./图片/5.jpeg"></li>
    <li><img src="./图片/6.jpeg"></li>
    <li><img src="./图片/7.jpg"></li>
    <li><img src="./图片/8.jpeg"></li>
    <li><img src="./图片/9.jpeg"></li>
</ul>
 <!-- 第四部分 -->
  <div class="tb">
      <img src="./图片/Symbol.jpg">
      <img src="./图片/Symbol.jpg">
      <img src="./图片/Symbol.jpg">
      <img src="./图片/Symbol.jpg">
      <img src="./图片/Symbol.jpg">
      <img src="./图片/Symbol.jpg">
      <img src="./图片/Symbol.jpg">
      <img src="./图片/Symbol.jpg">
      <img src="./图片/Symbol.jpg">
      <img src="./图片/Symbol.jpg">
  </div>
  <div class="border"></div>
</div>
 <!-- 第五部分 -->
      <div class="models">
        <a href="#" class="model"> 
            <div class="img">
                <img src="./图片/1.jpg">
                <div class="mark">
                <h2>应天书院</h2>
                <p>应天书院</p>
                </div>
              </div>
            <div class="txt">应天书院</div>
        </a>
        <a href="#" class="model"> 
            <div class="img">
                <img src="./图片/2.jpg">
                <div class="mark">
                <h2>古南城门</h2>
                <p>古南城门</p>
                </div>
              </div>
            <div class="txt">古南城门</div>
        </a>
        <a href="#" class="model"> 
            <div class="img">
                <img src="./图片/3.jpg">
                <div class="mark">
                <h2>防御城墙</h2>
                <p>防御城墙</p>
                </div>
              </div>
            <div class="txt">防御城墙</div>
        </a>
        <a name="视频">
        <video class="video" src="./商丘古城--夜景.mp4" controls></video>
        </a>
    </div>
<!-- 第六部分 -->
 <div class="wb">
  <div class="imgs">
    <img src="./图片/Title.png">
    <img src="./图片/Title.png">
    <img src="./图片/Title.png">
  </div>
<div class="border"></div>
<a name="联系"></a>
<div class="wb1">
  <img src="./图片/Title.png">
    <p>商丘古城</p>
    <p>河南省商丘市睢阳区</p>
    <p>TEL : 010-123456789</p>
    <p>QQ : 123456</p>
    <p>Email : shangqiugucheng@foxmail.com</p>
    <p>weibo : @shangqiuStudio</p>
</div>
</div>
<div class="hh"></div>
</body>

Java script部分：

<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" 
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" 
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    $('.carousel').carousel({
  interval: 2000
})
</script>