构建移动版旅游网站页面（大专）_孙诗宇ya~的博客-程序员宅基地

构建移动版旅游网站页面（大专）

效果如下：
在这里插入图片描述

在这里插入图片描述
资源分享：
网址：https://pan.baidu.com/s/1hnGeeaBam0FHwZTwqJZ31g
密码：1234

代码形式：
在这里插入图片描述
代码如下：
html：
1.html：

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
  <meta charset="utf-8" />
  <title>国内旅游</title>
  <!--链入对网页某类型元素的通用设置样式表-->
  <link href="css/common.css" rel="stylesheet" type="text/css" />
  <!--链入对某个元素的特定设置的样式表-->
  <link href="css/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="images/fengjing.jpg" width="100%" alt="" class="pic" />
      <div class="bottom ">
       <p class="face"><img src="images/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">
     <a href="#"> <img src="images/华东.jpg" width="100%" alt="" class="pic" />
      <div class="bottom ">
       <p class="face"><img src="images/touxiang.jpg" width="38" height="38" alt="" /></p>
       <h2 class="title">我的旅游行程</h2>
      </div>
      <p class="day">15天</p>
     </a>
     <div class="infos">
      <div>
       <em>城市</em>
       <!--<em>标签表示其中的文本为强调的内容，这段文字显示为斜体。当然我们可以在样式表里清除其字体样式，重新设置其他字体样式-->
       <p> 北京 - 常州 - 苏州 </p>
      </div>
     </div>
    </div>
   </section>
   <!--footer-->
   <footer class="qui-footerBasic">
    <!--<footer></footer>表示整个页面或页面中一个内容区块的脚注。-->
    <p class="switchStyle"><span>手机版</span><a href="#"><span>电脑版</span> </a><span><a href="#">APP</a></span></p>
   </footer>
   <!--footer end-->
  </section>
  <!--右半边end-->
  <!--侧边栏导航-->
  <aside class="qui-asides">
   <!--语义化元素<aside></aside>表示article元素内容之外的、与article元素内容相关的辅助信息。-->
   <section class="qui-aside">
    <nav class="qui-asideNav">
     <!--语义化元素<nav></nav>表示页面中导航链接的部分-->
     <ul>
      <li><a href="#"><span>首页</span></a></li>
      <li><a href="#"><span>目的地</span></a></li>
      <li><a href="#"><span>酒店</span></a></li>
      <li><a href="#"><span>机票</span></a></li>
      <li><a href="#"><span>时间</span></a></li>
      <li><a href="#"><span>点评</span></a></li>
     </ul>
    </nav>
   </section>
  </aside>
  <!--侧边栏导航 end-->
 </body>
</html>

css：
common：

html{
    
 height: 100%;
 overflow-x: hidden;
 /*表示水平方向隐藏溢出,没有滚动条*/
 background:#f5f5f5;
 color: #444;
 font:14px/24px Helvetica !important;
 /*字体样式为;字号大小为14px 行高24px 字体为helvetice
 !important设置该元素的样式具有最高权值*/
 }
body{
    
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 /*为元素指定的任何内边距和边框都将以设定的宽度和高度内进行绘制*/
    position: relative;
 z-index: 0;
 width: 100%;
 max-width: 640px;
 min-height: 100%;
 margin: 0 auto;/*水平居中*/
 overflow-x:hidden;
 box-shadow: 0 0 10px rgba(0,0,0,0.3);
 /**/
 }
 div,ul,li,p{
    
  margin: 0;
  padding: 0;
  outline: none;
  /*当元素获得焦点的时候,焦点框为0*/
 }
 em,strong{
    
  font-style: normal;
  font-weight: normal;
 }
 ul{
    
  list-style: none;
 }
 h1{
    
  font-size: 55px;
  margin-top: 30px;
  color: white;
  text-align: center;
 }

images：
华东.jpg:
在这里插入图片描述

touxiang.jpg:
在这里插入图片描述
fengjing.jpg:
(写不下了，main.css的文件在百度云里，免费下)

本文链接：https://blog.csdn.net/Huskylove/article/details/115731111

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

九、排序（未完）-程序员宅基地

目录排序概论排序所用顺序表结构数组两元素交换冒泡排序————O(n^2^)简单选择排序——O(n^2^)直接插入排序——O(n^2^)希尔排序————O(n^1.3^)堆排序—————O(nlogn)归并排序————O(nlogn)快速排序————O(nlogn)排序概论【排序】：n个记录的序列为{r1,r2,…,rn}，其相应的关键字分别为{k1,k2,…,kn}，需确定1,2,…,n的一...

非root权限升级(修改当前用户)Linux gcc版本_普通用户升级gcc gxx5.5-程序员宅基地

这几天回学校进实验室开始搬砖（回炉重炼），提前开始研究生生涯。。。。。。。。实验室大家都是只能跑服务器上的GPU，还没有优秀到老师单独配一台炼丹炉的水平，所以加油吧骚年。。1.下载所有的依赖包不要一下子被吓到，其实不多就总共5个包，包括gcc安装包在内不同的gcc版本对其他四个包的依赖版本不一样，所以需要先下载gcc 安装包，然后查看需要的依赖包的对应版本，再安装gcc..._普通用户升级gcc gxx5.5

4-8 求二叉树高度 (20分)_4-8求二叉树高度-程序员宅基地

本题要求给定二叉树的高度。函数接口定义：int GetHeight( BinTree BT );其中BinTree结构定义如下：typedef struct TNode *Position; typedef Position BinTree; struct TNode{ ElementType Data; BinTree Left; BinTree Right;_4-8求二叉树高度

Redisson框架实现Redis分布式锁的实现原理_leasetime redis-程序员宅基地

一、前言先看一段Redisson框架调用RLock lock = redisson.getLock("myLock");lock.lock();//.......业务代码lock.unlock();Redisson支持redis单实例、redis哨兵、redis cluster、redis master-slave等各种部署架构二、Redisson实现redis分布式锁的底层原理..._leasetime redis

matlab function-程序员宅基地

新建function后，显示如下function [outputArg1,outputArg2] = untitled2(inputArg1,inputArg2) % outputArg为返回值，inputArg为参数outputArg1 = inputArg1; %写时删除此行outputArg2 = inputArg2; %写时删除此行end...

Linux环境下打包Android App_linux 源码环境中把一个apk生成aar-程序员宅基地

SDK在Mac或者Windows环境中安装很方便，在Android studio中打开SDK Manager即可下载，但是Linux中比较麻烦。藏经阁_linux 源码环境中把一个apk生成aar