0
0

web前端简易网页制作

简易旅游网，静态网页制作

页面效果

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="index.css" </head>
  11.     <body>
  12.         <div class="header con">
  13.             <div class="photo"></div>
  14.             <div class="headerlist">
  15.                 <ul>
  16.                     <li><a class="active">介绍</a></li>
  17.                     <li><a>天气</a></li>
  18.                     <li><a class="active">地图</a></li>
  19.                     <li><a>交通</a></li>
  20.                     <li><a class="active">周边酒店</a></li>
  21.                     <li><a class="last">周边景点</a></li>
  22.                 </ul>
  23.                 <div class="serch">
  24.                     <input type="text" placeholder="搜索">
  25.                 </div>
  26.             </div>
  27.         </div>
  28.         <div class="nav">
  29.             <ul class="con">
  30.                 <li>首页</li>
  31.                 <li>门票</li>
  32.                 <li>旅游点评</li>
  33.                 <li>景点大全</li>
  34.                 <li>资讯</li>
  35.                 <li>关于我们</li>
  36.             </ul>
  37.         </div>
  38.         <div class="banner"></div>
  39.         <div class="list con">
  40.             <div class="item">
  41.                 <img src="../图片/OIP-C.jpg">
  42.                 <p>2022年的开端</p>
  43.             </div>
  44.             <div class="item">
  45.                 <img src="../图片/Default.jpg">
  46.                 <p>背起行囊去远方</p>
  47.             </div>
  48.             <div class="item">
  49.                 <img src="../图片/th.jpg">
  50.                 <p>电影中的世外桃源</p>
  51.             </div>
  52.         </div>
  53.         <div class="footer">
  54.             <div class="con">
  55.                 <ul>
  56.                     <li>网站导航</li>
  57.                     <li>旅游攻略</li>
  58.                     <li>自由行</li>
  59.                     <li>写游记</li>
  60.                     <li>酒店预订</li>
  61.                     <li>订火车票</li>
  62.                     <li>旅游指南</li>
  63.                     <li>APP下载</li>
  64.                     <li>网站地图</li>
  65.                     <li>联系我们</li>
  66.                     <li>隐私政策</li>
  67.                     <li>服务协议</li>
  68.                 </ul>
  69.                 <p>全球旅游服务售后热线<span>888888-888888</span></p>
  70.             </div>
  71.         </div>
  72.     </body>
  74. </html>
  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4. }
  6. ul {
  7.     list-style: none;
  8. }
  10. .con {
  11.     width: 966px;
  12.     margin: 0 auto;
  13. }
  15. .header {
  16.     height: 110px;
  17. }
  19. .photo {
  20.     width: 165px;
  21.     height: 110px;
  22.     background: url(../图片/logo.png);
  23.     float: left;
  24.     background-position: center;
  25.     background-size: 100% 100%;
  26. }
  28. .headerlist {
  29.     float: right;
  30. }
  32. .headerlist ul {
  33.     height: 44px;
  34.     margin-top: 10px;
  35.     line-height: 44px;
  36. }
  38. .headerlist li {
  39.     float: left;
  40. }
  42. .headerlist a {
  43.     border-right: 1px solid #b2c7ea;
  44.     padding-left: 13px;
  45.     padding-right: 13px;
  46.     font-size: 13px;
  47.     color: indigo;
  48. }
  50. .headerlist .last {
  51.     border: 0;
  52.     padding-right: 0;
  53. }
  55. .headerlist li .active {
  56.     color: pink;
  57. }
  59. .serch {
  60.     float: right;
  61.     width: 234px;
  62.     height: 28px;
  63.     border: 1px solid indigo;
  64. }
  66. .serch input {
  67.     border: 0;
  68.     outline: none;
  69.     width: 210px;
  70.     float: left;
  71.     height: 28px;
  72.     padding-left: 14px;
  73. }
  75. .nav {
  76.     height: 53px;
  77.     line-height: 53px;
  78.     border-top: 1px solid #edf4fc;
  79.     background-color: #274964;
  80.     color: aliceblue;
  81. }
  83. .nav li {
  84.     float: left;
  85.     font-size: 16px;
  86.     padding-right: 76px;
  87. }
  89. .banner {
  90.     height: 380px;
  91.     background: url(../图片/Sunrise.jpg) no-repeat center;
  92.     background-size: cover;
  93. }
  95. .list {
  96.     height: 213px;
  97.     margin-top: 51px;
  98.     margin-bottom: 35px;
  99. }
  101. .item {
  102.     height: 211px;
  103.     width: 305px;
  104.     border: 1px solid #cccccc;
  105.     float: left;
  106.     margin-right: 12px;
  107. }
  109. .item img {
  110.     width: 305px;
  111.     height: 165px;
  112.     display: block;
  113. }
  115. .item p {
  116.     height: 47px;
  117.     padding-left: 28px;
  118.     line-height: 47px;
  119.     color: #274964;
  120. }
  122. .footer {
  123.     height: 206px;
  124.     border-top: 1px solid cornsilk;
  125.     background-color: #cccccc;
  126. }
  128. .footer ul {
  129.     height: 84px;
  130.     padding-top: 30px;
  131.     padding-bottom: 30px;
  132.     line-height: 28px;
  133.     border-bottom: 1px solid gray;
  134. }
  136. .footer ul li {
  137.     width: 210px;
  138.     padding-left: 30px;
  139.     font-size: 12px;
  140.     float: left;
  141.     color: indigo;
  142. }
  144. .footer p {
  145.     height: 61px;
  146.     line-height: 61px;
  147.     padding-left: 30px;
  148.     font-size: 12px;
  149. }
  151. .footer p span {
  152.     color: indigo;
  153. }
标签： html5 css
本文转载自: https://blog.csdn.net/ZYN_8620/article/details/123996684
版权归原作者 九月暮 所有， 如有侵权，请联系我们删除。
登录后发布评论

“web前端简易网页制作”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。