🎉
不定期分享源码，关注不丢失哦
文章目录
- 一、作品介绍
- 二、作品演示
- 三、代码目录
- 四、网站代码
- HTML部分代码
- 五、源码获取
一、作品介绍
🏷️本套采用HTML+CSS，未使用Javacsript代码，共有5个页面。
二、作品演示
三、代码目录
四、网站代码
HTML部分代码
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>酒店</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="main-bg">
<img src="./img/banner.jpg" alt="">
</div>
<div class="header cl">
<div class="logo fl">
<a href="index.html"><img src="./img/logo.png" alt=""></a>
</div>
<ul class="nav cl fr">
<li class="fl"><a href="index.html">首页</a></li>
<li class="fl"><a href="kefang.html">酒店客房</a></li>
<li class="fl"><a href="sheshi.html">酒店设施</a></li>
<li class="fl"><a href="jieshao.html">酒店介绍</a></li>
<li class="fl"><a href="zixun.html">在线留言</a></li>
</ul>
</div>
<div class="h400"></div>
<div class="base">
<div class="p-list cl">
<div class="p-img">
<img src="./img/s1.jpg" alt="">
</div>
<div class="p-img">
<img src="./img/s2.jpg" alt="">
</div>
<div class="p-img">
<img src="./img/s3.jpg" alt="">
</div>
</div>
</div>
<div class="base">
<div class="s-title">
<div class="s-title-en">SERVIVE</div>
<div class="s-title-cn">你可以享受以下服务</div>
<div class="s-title-line">-</div>
</div>
<div class="s-list cl">
<div class="s-item">
<div class="s-img">
<img src="./img/ss1.jpg" alt="">
</div>
<div class="s-text">
客房
</div>
</div>
<div class="s-item">
<div class="s-img">
<img src="./img/ss2.jpg" alt="">
</div>
<div class="s-text">
会议及宴会
</div>
</div>
<div class="s-item">
<div class="s-img">
<img src="./img/ss3.jpg" alt="">
</div>
<div class="s-text">
餐厅及酒吧
</div>
</div>
</div>
</div>
<div class="base">
<div class="i-list cl">
<div class="i-item">
<div class="i-img">
<img src="./img/i1.jpg" alt="">
</div>
<div class="i-text">
免费WIFI
</div>
</div>
<div class="i-item">
<div class="i-img">
<img src="./img/i2.jpg" alt="">
</div>
<div class="i-text">
免费停车
</div>
</div>
<div class="i-item">
<div class="i-img">
<img src="./img/i3.jpg" alt="">
</div>
<div class="i-text">
支付方式多样
</div>
</div>
<div class="i-item">
<div class="i-img">
<img src="./img/i4.jpg" alt="">
</div>
<div class="i-text">
免费早餐
</div>
</div>
</div>
</div>
<div class="footer">
<ul class="cl base">
<li>
<div class="f-title">地址</div>
<div class="f-line">—</div>
<div class="f-text">XXX省XXX市</div>
<div class="f-text">XXX省XXX市</div>
</li>
<li>
<div class="f-title">联系我们</div>
<div class="f-line">—</div>
<div class="f-text"><b>T</b>.020-000000</div>
<div class="f-text"><b>Q</b>.130000000</div>
<div class="f-text"><b>E</b>.xxx@.co.m</div>
</li>
<li>
<div class="f-title">预订酒店</div>
<div class="f-line">—</div>
<div class="f-link">
<a href="#">马上去预定 >></a>
</div>
</li>
<li>
<div class="f-title">关注我们</div>
<div class="f-line">—</div>
<div class="f-text f-text-big">
<span class="bb">HOTEL</span> <span class="gg">DESIGN</span>
</div>
</li>
</ul>
<div class="copyright base">
©2021 - 我的网站 版权所有
</div>
</div>
</body>
</html>
五、源码获取
🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.想要获取本文源码，点击前往吧
