web应用开发：css构建移动版旅游网站界面

最新推荐文章于 2023-12-24 15:37:22 发布

星辞归野

最新推荐文章于 2023-12-24 15:37:22 发布

阅读量2.7k

点赞数 7

分类专栏： web应用开发

本文链接：https://blog.csdn.net/weixin_43916678/article/details/104525553

版权

本文详细介绍了如何使用HTML和CSS构建一个移动版的旅游网站界面。通过使用< aside>、< nav>、< header>、< section>和< footer>等标签进行布局，创建了侧边栏导航菜单和页面主要内容区域。每个旅游信息部分包含图片和文字描述，底部的< footer>部分则提供了额外的文字和链接信息。实践过程中涉及到了样式设置和图片资源的使用。

摘要由CSDN通过智能技术生成

要求：

侧边栏使用< aside>标签嵌套< nav>标签来实现，在< nav>标签中嵌套< ul>列表实现导航菜单。
页面右侧部分从上至下依次使用< header>标签、< section>标签和< footer>来实现，并且这些标签全部嵌套在一个< section>中。
< header>标签中文字使用< h1>标签，并设置样式。
两个旅游信息的< section>中分别嵌套两个< div>标签，用来设置旅游图片和文字信息在节目中中的位置。
< footer>标签使用< p>、< span>、< a>链接来添加一些文字和链接信息。

新建travel.html文件
代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>国内旅游</title>
    <!--链入对网页某类元素的通用设置样式-->
    <link href="common.css" rel="stylesheet" type="text/css">
    <!--链入对某个元素的特定设置样式-->
    <link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--右半边-->
<section class="qui-page">
    <!--header-->
    <header class="qui-header">
        <h1>国内旅游计划</h1>
    </header>
    <!--/header-->
    <!--begin-->
    <section class="container"> <!--表面页面中的一个内容区块-->
        <div class="plcRouteList">
            <a href="#">
                <img src="fengjing.jpg"width="100%" alt="" class="pic"/>
                <div class="bottom">
                    <p class="face">
                        <img src="touxiang.jpg" width="38" height="38" alt=""/>
                    </p>
                    <h2 class="title">我的旅游行程</h2>
                </div>
                <p class="day">14天</p>
            </a>
            <div class="infos"></div>
            <em>城市</em> <!--<em>标签表示其中文本为强调的内容-->
            <p>昆明 - 香格里拉 - 西藏