CSS的代码:One.css

body{
    margin: 0px;
    padding: 0px;
    background-image: linear-gradient(-90deg, #e3edef 0%,#ffffff 100%);
}
/* 第一部分头部内容 */
#one {
    height: 80px;
    width: 100%;
    /* background-color: whitesmoke; */
}
#one div {
    float: left;
}
#one1 {
    float: left;
    height: 100px;
    width: 40%;
    /* background-color: whitesmoke; */
}
#one2 {
    height: 100px;
    width: 28%;
    /* background-color: whitesmoke; */
    /* background-image: url(img/train@2x.png); */
    background-size: 50%;
    padding-top: 40px;
}
#one3 {
    font-size: 18px;
    color: cornflowerblue;
    height: 100px;
    width: 31%;
    /* background-color: whitesmoke; */
    display: flex;
    justify-content: space-around;
    text-align: center;
    line-height: 100px;
    font-weight: 500;
}
input {
    margin: auto;
    height: 40px;
    width: 320px;
}
.input_img{
    border-radius: 5px;
    height: 45px;
}
#img1 {
    height: 100px;
    width: 50%;
    margin: auto;
    background-size: 100%;
}
/* <!-- 第二模块 头部导行栏  --> */
/* 头部导行栏 */
#navs {
    height: 55px;
}
.header_tab{
    margin-top: 60px;
    background-color: rgb(172, 207, 240);
}
.sticky{
    width: 80%;
    height: 55px;
    margin: auto;
}
nav {
    line-height: 55px;
    width: 100%;
    height: 55px;
    flex-direction: row;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /* position: sticky; */
}
a {
    text-align: center;
    text-decoration: none;
    color: rgb(255, 255, 255);
    width: 12.5%;
}
a:hover {
    background-color: deepskyblue;
    font-weight: 800;
    color: rgb(255, 255, 255);
    border: 1px solid red;
        border-radius: 5px;
}
nav.sticky {
    /* position: fixed; */
    background-attachment: fixed;
    background-color: rgb(19, 90, 184);
}
.fist{
    border-radius: 5px;
    background-color: rgb(42, 230, 99);
    color: black;
}
/* 第三模块 动画拼接模块 */
.pics {
    position: relative;
    width: 100%;
}
.pic1 {
    width: 100%;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: picDraw 10s ease-in-out infinite;
}
.pic3 {
    position: absolute;
    width: 100%;
    top: 0;
    animation: picDraw 10s ease-in-out infinite;
}
.three{
    width: 100%;
    height: 330px;
    /* background-color: lightblue; */
    background-image: url(img/banner10.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    /* border: 1px solid red; */
}
@keyframes picDraw {
    0% {
        height: 330px;
        opacity: 0.25;
        transform: scale(0.5);
        background-repeat: no-repeat;
        background-image: url(img/banner20200707.jpg) ;
    }
    33% {
        height: 330px;
        left: 10%;
        opacity: 0.5;
        transform: scale(0.7);
        background-image: url(img/banner12.jpg) ;
    }
    66% {
        height: 330px;
        opacity: 0.75;
        transform: scale(0.8);
        background-image: url(img/banner26.jpg) ;
    }
    99% {
        height: 330px;
        opacity: 0.9;
        transform: scale(1);
        background-image: url(img/banner20201223.jpg) ;
    }
}

One.html的文件:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12306网站项目</title>
  <link rel="stylesheet" href="css/One.css">
</head>
<body>
  <!-- 第一部分头部内容 -->
  <!-- 第一模块 为头部 -->
<div id="one" >
  <div id="one1">
    <p align="center"><img src="img/logo@2x.png" alt="" id="img1"></p>
  </div>
  <div id="one2">
    <div align="center"><input type="text" placeholder="请输入车票餐饮制度" /></div>
    <div><img  class="input_img" src="img/search.jpg"/></div>
    <!-- <img src="img/search.jpg" style="height: 40px;"/> -->
  </div>
  <div id="one3">
    <span>English</span>
    <span>|</span>
    <span>我的12306</span>
    <span>|</span>
    <span style="color: black;">登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册</span> 
  </div>
</div>
  <!-- 第二模块 导航栏  -->
  <!-- 第二模块 -->
  <div class="header_tab">
    <div id="navs" class="sticky">
      <!-- 导航栏 -->
      <nav class="sticky">
        <a href="首页" class="fist">首页&nbsp;&nbsp;&or;</a>
        <a href="车票">车票&nbsp;&nbsp;&or;</a>
        <a href="团购服务">团购服务&nbsp;&nbsp;&or;</a>
        <a href="会员服务">会员服务&nbsp;&nbsp;&or;</a>
        <a href="站车服务">站车服务&nbsp;&nbsp;&or;</a>
        <a href="高铁服务">高铁服务&nbsp;&nbsp;&or;</a>
        <a href="出行指南">出行指南&nbsp;&nbsp;&or;</a>
        <a href="信息查询">信息查询&nbsp;&nbsp;&or;</a>
      </nav>
    </div>
  </div>
  <!-- 第三模块 动画模块 -->
  <div class="three">
    <div class="pics">
      <img src="img/banner20200707.jpg" alt="" class="pic1">
      <img src="img/banner12.jpg" alt="" class="pic3">
    </div>
    </div>
<!-- 第四模块 精灵图 CSS部分 -->
<style>
  #one-nav {
    width: 200px;
    height: 80px;
    background: url(img/service@2x.png)64px -79px;
    background-repeat: no-repeat;
  }
  #two-nav {
    width: 200px;
    height: 80px;
    background: url(img/service@2x.png)64px -392px;
    background-repeat: no-repeat;
  }
  #three-nav {
    width: 200px;
    height: 87px;
    background: url(img/service@2x.png)64px -234px;
    background-repeat: no-repeat;
  }
  #four-nav {
    width: 200px;
    height: 85px;
    background: url(img/service@2x.png)64px -312px;
    background-repeat: no-repeat;
  }
  #five-nav {
    width: 200px;
    height: 85px;
    background: url(img/service@2x.png)64px -151px;
    background-repeat: no-repeat;
  }
  #six-nav {
    width: 200px;
    height: 85px;
    background: url(img/service@2x.png)64px -476px;
    background-repeat: no-repeat;
  }
  #serven-nav {
    width: 200px;
    height: 85px;
    background: url(img/service@2x.png)64px 20px;
    background-repeat: no-repeat;
  }
  /* 父 */
  #father-nav {
    width: 80%;
    height: 120px;
    float: left;
    display: flex;
    justify-content: space-around;
    margin-left: 11%;
  }
  /* 子 */
  .opuy-nav {
    width: 200px;
    /* background-color: pink; */
  }
  .lopu-nav {
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    position: relative;
    top: 99px;
  }
  .imgtab-nav{
    width: 100%;
    height: 140px;
  }
</style>
<!-- 第四模块 精灵图 Html部分 -->
<div id="father-nav">
  <div class="opuy-nav">
    <div id="one-nav">
      <p class="lopu-nav">重点旅游预约</p>
    </div>
    <!-- <p class="lopu">重点旅游预约</p> -->
  </div>
  <div class="opuy-nav">
    <div id="two-nav">
      <p class="lopu-nav" id="b">遗失物品查找</p>
    </div>
    <!-- <p class="lopu">遗失物品查找</p> -->
  </div>
  <div class="opuy-nav">
    <div id="three-nav">
      <p class="lopu-nav" id="c">开始约车服务</p>
    </div>
    <!-- <p class="lopu">开始约车服务</p> -->
  </div>
  <div class="opuy-nav">
    <div id="four-nav">
      <p class="lopu-nav" id="d">开始便民拖运</p>
    </div>
    <!-- <p class="lopu">开始便民拖运</p> -->
  </div>
  <div class="opuy-nav">
    <div id="five-nav">
      <p class="lopu-nav" id="e">进行车站引导</p>
    </div>
    <!-- <p class="lopu">进行车站引导</p> -->
  </div>
  <div class="opuy-nav">
    <div id="six-nav">
      <p class="lopu-nav" id="f">战车等待时间</p>
    </div>
    <!-- <p class="lopu">战车等待时间</p> -->
  </div>
  <div class="opuy-nav">
    <div id="serven-nav">
      <p class="lopu-nav" id="g">开始用户反馈</p>
    </div>
    <!-- <p class="lopu">开始用户反馈</p> -->
  </div>
</div>
<!-- 第五部分 -->
<style>
  #father1 {
    height: 100%;
    width: 80%;
    display: flex;
    justify-content: space-around;
    /* border: 1px solid red; */
    flex-wrap: wrap;
    margin-left: 10%;
    margin-top: 10%;
  }
  .sone {
    height: 120px;
    width: 180px;
    /* border: 2px solid red; */
    /* background-color: antiquewhite; */
    /* background-image: url("img/service04.jpg"); */
    background-repeat: no-repeat;
    background-size: 220px;
    position: relative;
    padding: 10px;
  }
  .pp {
    position: absolute;
    font-weight: 900;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    top: 150px;
    left: 0px;
  }
  .span_pp {
    position: absolute;
    font-size: 30px;
    font-weight: 900;
    color: orange;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    top: 220px;
    left: 0px;
  }
</style>
<!-- 第五部分div模块 -->
<div id="father1">
  <div class="sone">
    <img  src="img/service01.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="pp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_pp">￥2560</span>
  </div>
  <div class="sone">
    <img  src="img/service02.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="pp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_pp">￥2560</span>
  </div>
  <div class="sone">
    <img  src="img/service03.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="pp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_pp">￥2560</span>
  </div>
  <div class="sone">
    <img  src="img/service04.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="pp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_pp">￥2560</span>
  </div>
  <div class="sone">
    <img  src="img/service04.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="pp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_pp">￥2560</span>
  </div>
  <div class="sone">
    <img  src="img/service04.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="pp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_pp">￥2560</span>
  </div>
  <div class="sone">
    <img  src="img/service04.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="pp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_pp">￥2560</span>
  </div>
</div>
<!-- 第六部分代码复制第五部分的内容 -->
<style>
  #father2 {
    height: 100%;
    width: 80%;
    display: flex;
    justify-content: space-around;
    /* border: 1px solid red; */
    flex-wrap: wrap;
    margin-left: 10%;
    margin-top: 10%;
  }
  .sone1 {
    height: 120px;
    width: 180px;
    /* border: 2px solid red; */
    /* background-color: antiquewhite; */
    /* background-image: url("img/service04.jpg"); */
    background-repeat: no-repeat;
    background-size: 220px;
    position: relative;
    padding: 10px;
  }
  .ppp {
    position: absolute;
    font-weight: 900;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    top: 150px;
    left: 0px;
  }
  .span_ppp {
    position: absolute;
    font-size: 30px;
    font-weight: 900;
    color: rgb(69, 156, 255);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    top: 220px;
    left: 0px;
  }
</style>
<!-- 第五部分div模块 -->
<div id="father2">
  <div class="sone1">
    <img  src="img/service01.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="ppp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_ppp">￥2560</span>
  </div>
  <div class="sone1">
    <img  src="img/service02.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="ppp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_ppp">￥2560</span>
  </div>
  <div class="sone1">
    <img  src="img/service03.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="ppp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_ppp">￥2560</span>
  </div>
  <div class="sone1">
    <img  src="img/service04.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="ppp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_ppp">￥2560</span>
  </div>
  <div class="sone1">
    <img  src="img/service04.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="ppp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_ppp">￥2560</span>
  </div>
  <div class="sone1">
    <img  src="img/service04.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="ppp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_ppp">￥2560</span>
  </div>
  <div class="sone1">
    <img  src="img/service04.jpg" style="height: 120px;
    width: 180px;"/>
    <p class="ppp">"环西部火车站 "高品质旅游版专程车</p>
    <span class="span_ppp">￥2560</span>
  </div>
</div>
  <!--第六部分  -->
  <style>
    #img-six {
      /* background-color: #90bbe9; */
      width: 80%;
      margin-left: 10%;
      margin-top: 8%;
    }
  </style>
  <!-- 第四模块 -->
  <div id="img-six">
    <div align="center">
    <img src="img/abanner01.jpg" alt="" style="height: 240px;width:700px;padding: 15px;">
    <img src="img/abanner02.jpg" alt="" style="height: 240px;width:700px;padding: 15px;">
    <img src="img/abanner05.jpg" alt="" style="height: 240px;width:700px;padding: 15px;">
    <img src="img/abanner06.jpg" alt="" style="height: 240px;width:700px;padding: 15px;">
    </div>
  </div>
<!-- 最后一个模块 -->
<style>
  #father4 {
    height: 100px;
    width: 80%;
    margin-left: 10%;
    /* border: 1px solid red; */
    /* background-color: palevioletred; */
    display: flex;
    justify-content: space-between;
  }
  #father4 div {
    text-align: center;
    line-height: 80px;
    font-weight: 800;
    background-color: rgb(181, 203, 238);
    color: red;
    height: 74px;
    width: 33.3%;
    font-weight: 800;
    font-family: 'Times New Roman', Times, serif;
    /* border: 1px solid black; */
  }
  #father4 div:hover {
    background-color: green;
    color: white;
  }
  table{
    width: 80%;
    margin-left: 10%;
  }
  td {
    font-size: 16px;
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 25%;
    opacity: 0.6;
  }
</style>
<div id="father4">
  <!-- 我是father的盒子 -->
  <div>最新发布</div>
  <div>常看到的问题</div>
  <div>信用信息</div>
</div>
<!-- 表格 -->
<table>
  <tr>
    <td><span>*</span>&nbsp;&nbsp;&nbsp;公告</td>
    <td>2022/10/7</td>
    <td><span>*</span>&nbsp;&nbsp;&nbsp;公告</td>
    <td>2022/10/7</td>
  </tr>
  <tr>
    <td><span>*</span>&nbsp;&nbsp;&nbsp;公告</td>
    <td>2022/10/7</td>
    <td><span>*</span>&nbsp;&nbsp;&nbsp;公告</td>
    <td>2022/10/7</td>
  </tr>
  <tr>
    <td><span>*</span>&nbsp;&nbsp;&nbsp;公告</td>
    <td>2022/10/7</td>
    <td><span>*</span>&nbsp;&nbsp;&nbsp;公告</td>
    <td>2022/10/7</td>
  </tr>
  <tr>
    <td><span>*</span>&nbsp;&nbsp;&nbsp;公告</td>
    <td>2022/10/7</td>
    <td><span>*</span>&nbsp;&nbsp;&nbsp;公告</td>
    <td>2022/10/7</td>
  </tr>
</table>
</body>
</html>

在实操中成长页也是一种收获

https://blog.csdn.net/qq_56248592/article/details/127354332

Html CSS 实操一（二）

CSS的代码:One.css

One.html的文件:

热门文章

最新文章

相关课程

相关电子书