正文

携程旅行html怎么做

技术帮
技术帮 V管理员 /103阅读/0评论
0724

携程旅行html怎么做

携程旅行html怎么做

说到旅行,相信很多人都会想到携程旅行，这个为我们提供便捷出行服务的平台，你有没有想过自己动手制作一个携程旅行的HTML页面呢？我就来教大家如何制作一个简单的携程旅行HTML页面，一起感受编程的乐趣吧！

我们需要准备好制作HTML页面的相关软件,比如Dreamweaver、Sublime Text等，选择一款自己顺手的编辑器即可，我们就正式开始制作啦！

搭建基本结构

一个HTML页面通常由三个部分组成：头部（header）、主体（body）和底部（footer），我们先来搭建一下基本结构。

创建一个新的HTML文件,输入以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>携程旅行</title>
</head>
<body>
</body>
</html>

这里,我们定义了文档类型、HTML语言、字符编码和页面标题。

添加头部内容

我们要在头部添加导航栏、Logo和搜索框等内容。

  1. 修改标签内的代码，添加样式表链接：
<link rel="stylesheet" type="text/css" href="css/style.css">

这里,我们需要创建一个名为“style.css”的CSS文件，用于存放样式代码。

  1. 在标签内添加以下代码：
<header>
    <div class="logo">
        <img src="images/logo.png" alt="携程旅行">
    </div>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">酒店</a></li>
            <li><a href="#">机票</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">攻略</a></li>
        </ul>
    </nav>
    <div class="search">
        <input type="text" placeholder="请输入目的地或关键词">
        <button>搜索</button>
    </div>
</header>

这里,我们添加了Logo、导航栏和搜索框，需要注意的是，我们要为图片添加一个“alt”属性，以便在图片无法加载时显示文字描述。

添加主体内容

主体部分,我们可以添加一些热门推荐、旅行攻略等内容。

  1. 在标签内添加以下代码：
<main>
    <section class="recommend">
        <h2>热门推荐</h2>
        <div class="item">
            <img src="images/recommend1.jpg" alt="推荐1">
            <p>推荐1描述</p>
        </div>
        <div class="item">
            <img src="images/recommend2.jpg" alt="推荐2">
            <p>推荐2描述</p>
        </div>
        <!-- 更多推荐 -->
    </section>
    <section class="strategy">
        <h2>旅行攻略</h2>
        <article>
            <h3>攻略1标题</h3>
            <p>攻略1内容</p>
        </article>
        <article>
            <h3>攻略2标题</h3>
            <p>攻略2内容</p>
        </article>
        <!-- 更多攻略 -->
    </section>
</main>

这里,我们添加了两个部分：热门推荐和旅行攻略，可以根据实际需求添加更多内容。

添加底部内容

我们来添加底部内容,包括版权信息、联系方式等。

  1. 在标签内添加以下代码：
<footer>
    <p>版权所有 &copy; 2022 携程旅行</p>
    <p>联系方式：xxx-xxxxxxx</p>
</footer>

添加CSS样式

我们需要为页面添加CSS样式,让页面看起来更美观，打开“style.css”文件，输入以下代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
header {
    background-color: #333;
    padding: 10px 0;
}
logo img {
    width: 120px;
    height: auto;
    margin: 0 auto;
}
nav ul {
    list-style: none;
    text-align: center;
}
nav ul li {
    display: inline-block;
    margin: 0 10px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
}
search {
    text-align: center;
    margin-top: 10px;
}
search input {
    padding: 5px 10px;
    font-size: 14px;
}
search button {
    padding: 5px 10px;
    font-size: 14px;
    background-color: #ff7f50;
    color: #fff;
    border: none;
    cursor: pointer;
}
main {
    padding: 20px;
}
recommend, .strategy {
    margin-bottom: 20px;
}
recommend h2, .strategy h2 {
    font-size: 24px;
    color: #333;
}
item {
    display: inline-block;
    margin-right: 10px;
}
item img {
    width: 300px;
    height: auto;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

代码就是一个简单的携程旅行HTML页面的制作过程,这只是一个基础版本，你还可以根据自己的需求进行拓展和优化，在这个过程中，你会发现自己对HTML和CSS有了更深入的了解，也为以后制作更复杂的网页打下基础，赶紧行动起来，一起感受编程的乐趣吧！