《大唐》

最新推荐文章于 2024-10-07 19:39:47 发布

hl20050330

最新推荐文章于 2024-10-07 19:39:47 发布

阅读量347

点赞数 9

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/hyw20050330/article/details/135320444

版权

《html》

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
       *{
       margin: 0px;
       padding: 0px;
       }
       ul, li{
       list-style: none;
       }
       a{
       text-decoration: none;
       color: #ffffff;
       }
       body{
       background-color: #ebedee;
       }
       .clear::after{
       content: "";
       display: block;
       height: 0;
       clear: both;
       }
       .top{
       width: 1200px;
       background-color: #8f0d17;
       margin: 0 auto;
       display: flex;
       color:#ffffff;
       text-align: center;
       align-items: center;
       }
       .top .logo{
       line-height: 50px;
       width: 200px;
       font-size: 20px;
       font-weight: bolder;
       }
       .top .menu{
       display: flex;
       width: 600px;
       font-size: 18px;
       }
       .top .menu li{
       flex-basis: 150px;
       line-height: 50px;
       border-width:0 0 0 1px;
       border-style: solid;
       border-color: #797979;
       }
       .top .menu li:last-child{
       border-width:0 1px 0 1px;
       border-style: solid;
       border-color: #797979;
       }
       .top .search {
       width: 200px;
       }
       .top .search input{
       width: 120px;
       border: 0px;
       outline: none;
       line-height: 25px;
       border-radius: 20px;
       padding: 0 5px;
       }
       .top .language{
       flex-basis: 200px;
       line-height: 50px;
       border-width:0 0 0 1px;
       border-style: solid;
       border-color: #797979;
       }

       .banner{
       margin: 0 auto;
       width: 1200px;
       height: 628px;
       background-image:url(img/banner.png);
       background-repeat: no-repeat;
       background-size: contain;
       position: relative;
       }
       .banner .content{
       width: 600px;
       position: absolute;
       top: 150px;
       left: 300px;
       color: #ffffff;
       text-align: center;
       }
       .banner .content h2{
       font-size: 120px;
       margin-bottom: 100px;
       }
       .banner .content p{
       font-size: 30px;
       font-family: FangSong_GB2312, FangSong, STFangsong;
       margin-bottom: 30px;
       }
       .banner .content .link a{
       display: inline-block;
       width: 200px;
       font-size: 18px;
       line-height: 30px;
       border-radius: 10px;
       border: 3px solid #ffffff;
       }
       .banner .content .link a:hover{
       border-color: #4e6ef2;
       }
       .activity{
       width: 1200px;
       margin: 0 auto;
       background-color: #f2f2f2;
       color: #b8a288;
       border: 1px solid;
       box-sizing: border-box;
       }
       .activity .title{
       font-size: 30px;
       text-align: center;
       padding: 5px;
       }
       .activity img{
       width: 100%;
       width: 500px;
       height: 300px;
       }
       .activity .act_l{
       padding:20px 45px;
       float: left;
       }

       .activity .act_r{
       padding:20px 50px;
       float: right;
       }
       .activity .component{
       height: 100px;
       background-color: #ffffff;
       text-align: center;
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
       }
       .activity .component p{
       display: flex;
       justify-content: center;
       }
       .activity .component img{
       width: 50px;
       height: auto;
       }
       .topic{
       width: 1200px;
       height: 500px;
       margin: 0 auto;
       background-image: url("../img/ztbg.png");
       background-repeat: no-repeat;
       background-size: cover;
       display: flex;
       align-items: center;
       color: #ffffff;
       }
       .topic h2{
       flex-basis: 50px;
       padding: 0 50px;
       font-size: 50px;

       }
       .topic ul{
       display: flex;
       flex-basis: 800px;
       justify-content: space-around;
       }
       .topic ul li{
       height: 300px;
       flex-basis: 100px;
       text-align: center;
       background-color: #c2beb9;
       }
       .topic ul li h3{
       width: 50px;
       font-size: 40px;
       margin: 0 auto;
       padding: 50px 0px;
       }
       .topic ul li span{
       display: inline-block;
       width: 20px;
       position: relative;
       left: 20px;
       }
       .footer{
       width: 1200px;
       margin: 0 auto;
       background-color: #8f0d17;
       text-align: center;
       }
       .footer .more{
       display: inline-block;
       width: 150px;
       line-height: 30px;
       border: 2px solid;
       border-radius: 5px;
       margin: 10px 0;
       }
       .footer p{
       color: white;
       font-weight: bold;
       padding: 10px 0;
       }
       </style>
   </head>
   <body>
   <div class="top">
   <div class="logo">
   印象大唐
   </div>
   <ul class="menu">
   <li>首页</li>
   <li>历史</li>
   <li>人文</li>
   <li>旅游</li>
   </ul>
   <div class="search">
   <input type="text" placeholder="搜索">
   </div>
   <div class="language">EN | 中文</div>
   </div>
   <div class="banner">
   <div class="content">
   <h2>印象大唐</h2>
   <p> 古今辉映重游盛世 </p>
   <div class="link"><a href="#">即刻探索>></a></div>
   </div>
   </div>
   <div class="activity clear">
   <div class="title">近期·活动</div>
   <div class="act_l">
   <img src="img/tgyy.jpg" alt="">
   <div class="component">
   <p>
   <img src="img/icon_l.png" alt="">
   大唐芙蓉园
   <img src="img/icon_r.png" alt="">
   </p>
   <p>古今碰撞重回盛世长安</p>
   </div>
   </div>
   <div class="act_r">
   <div class="component">
   <p>
   <img src="img/icon_l.png" alt="">
   唐宫夜宴
   <img src="img/icon_r.png" alt="">
   </p>
   <p>传统文化穿越千年的当代表达</p>
   </div>
   <img src="img/dtfry.jpg" alt="">
   </div>
   </div>
   <div class="topic">
   <h2>专题网站</h2>
   <ul>
   <li>
   <a href="">
   <h3>历史</h3>
   <span>查看详情</span>
   </a>
   </li>
   <li>
   <a href="">
   <h3>人文</h3>
   <span>查看详情</span>
   </a>
   </li>
   <li>
   <a href="">
   <h3>旅游</h3>
   <span>查看详情</span>
   </a>
   </li>
   <li>
   <a href="">
   <h3>文创</h3>
   <span>查看详情</span>
   </a>
   </li>
   </ul>
   </div>
   <div class="footer">
   <a href="" class="more">查看更多</a>
   <p>版权所有：郑州财税金融职业学院</p>
   </div>
   </body>


</html>