HTML5-------1-2项目旅游

最新推荐文章于 2022-11-17 00:22:32 发布

全栈的魅力

最新推荐文章于 2022-11-17 00:22:32 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/m0_46444569/article/details/104880456

版权

这篇博客主要介绍了HTML5项目中旅游网站页面的CSS样式设计，包括全局样式common.css和主要内容区域main.css。内容涵盖了html、body、标题、列表等元素的样式设置，如背景颜色、字体、内边距、边框、阴影、溢出隐藏等，以及一些特定模块如头部、路线列表的详细样式定义。

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

<!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"> <!--<section></section>语义化元素表示页面中的一个内容区块-->
      <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> 昆明 - 香格里拉 - 西藏 </p>
           </div>
          </div>
        <!--</li>-->
       <!--</ul>-->
      </div>
   </section>
   <!--end-->
   <!--begin-->
   <section class="container"> <!--<section></section>语义化元素表示页面中的一个内容区块-->
    <div class="plcRouteList"