大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
简易旅游网，静态网页制作
页面效果
代码如下
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="index.css" </head>
<body>
<div class="header con">
<div class="photo"></div>
<div class="headerlist">
<ul>
<li><a class="active">介绍</a></li>
<li><a>天气</a></li>
<li><a class="active">地图</a></li>
<li><a>交通</a></li>
<li><a class="active">周边酒店</a></li>
<li><a class="last">周边景点</a></li>
</ul>
<div class="serch">
<input type="text" placeholder="搜索">
</div>
</div>
</div>
<div class="nav">
<ul class="con">
<li>首页</li>
<li>门票</li>
<li>旅游点评</li>
<li>景点大全</li>
<li>资讯</li>
<li>关于我们</li>
</ul>
</div>
<div class="banner"></div>
<div class="list con">
<div class="item">
<img src="../图片/OIP-C.jpg">
<p>2022年的开端</p>
</div>
<div class="item">
<img src="../图片/Default.jpg">
<p>背起行囊去远方</p>
</div>
<div class="item">
<img src="../图片/th.jpg">
<p>电影中的世外桃源</p>
</div>
</div>
<div class="footer">
<div class="con">
<ul>
<li>网站导航</li>
<li>旅游攻略</li>
<li>自由行</li>
<li>写游记</li>
<li>酒店预订</li>
<li>订火车票</li>
<li>旅游指南</li>
<li>APP下载</li>
<li>网站地图</li>
<li>联系我们</li>
<li>隐私政策</li>
<li>服务协议</li>
</ul>
<p>全球旅游服务售后热线<span>888888-888888</span></p>
</div>
</div>
</body>
</html>* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.con {
width: 966px;
margin: 0 auto;
}
.header {
height: 110px;
}
.photo {
width: 165px;
height: 110px;
background: url(../图片/logo.png);
float: left;
background-position: center;
background-size: 100% 100%;
}
.headerlist {
float: right;
}
.headerlist ul {
height: 44px;
margin-top: 10px;
line-height: 44px;
}
.headerlist li {
float: left;
}
.headerlist a {
border-right: 1px solid #b2c7ea;
padding-left: 13px;
padding-right: 13px;
font-size: 13px;
color: indigo;
}
.headerlist .last {
border: 0;
padding-right: 0;
}
.headerlist li .active {
color: pink;
}
.serch {
float: right;
width: 234px;
height: 28px;
border: 1px solid indigo;
}
.serch input {
border: 0;
outline: none;
width: 210px;
float: left;
height: 28px;
padding-left: 14px;
}
.nav {
height: 53px;
line-height: 53px;
border-top: 1px solid #edf4fc;
background-color: #274964;
color: aliceblue;
}
.nav li {
float: left;
font-size: 16px;
padding-right: 76px;
}
.banner {
height: 380px;
background: url(../图片/Sunrise.jpg) no-repeat center;
background-size: cover;
}
.list {
height: 213px;
margin-top: 51px;
margin-bottom: 35px;
}
.item {
height: 211px;
width: 305px;
border: 1px solid #cccccc;
float: left;
margin-right: 12px;
}
.item img {
width: 305px;
height: 165px;
display: block;
}
.item p {
height: 47px;
padding-left: 28px;
line-height: 47px;
color: #274964;
}
.footer {
height: 206px;
border-top: 1px solid cornsilk;
background-color: #cccccc;
}
.footer ul {
height: 84px;
padding-top: 30px;
padding-bottom: 30px;
line-height: 28px;
border-bottom: 1px solid gray;
}
.footer ul li {
width: 210px;
padding-left: 30px;
font-size: 12px;
float: left;
color: indigo;
}
.footer p {
height: 61px;
line-height: 61px;
padding-left: 30px;
font-size: 12px;
}
.footer p span {
color: indigo;
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/183837.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...