• Web实验一  旅游界面的设计

一、首页代码

 <!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 class="qui-header">

         <h1>国内旅游计划</h1>

     </header>

     <section class="container">

         <div class="plcRouteList">

             <a herf=""><img src="data:image/fengjing.jpg" width="100%"alt=""class="pic"></a>

             <div class="bottom">

                 <p class="face"><img src="data:image/touxiang.jpg "width="38" height="38"alt=""></p>

            <h2 class="title">我的旅游行程</h2>

             </div>

             <p class="day">14天</p>

             <div class="infos">

             <div>

             <em>城市</em>

             <p>昆明-香格里拉-西藏</p>

         </div>

            </div>

         </div>

     </section>

     <section class="container">

         <div class="plcRouteList">

             <a herf=""><img src="data:image/fengjing.jpg" width="100%"alt=""class="pic"></a>

             <div class="bottom">

                 <p class="face"><img src="data:image/touxiang.jpg"width="38" height="38"alt=""></p>

                 <h2 class="title">我的旅游行程</h2>

             </div>

             <p class="day">15天</p>

             <div class="infos">

                 <div>

               <em>城市</em>

             <p>北京-常州-苏州</p>

                 </div>

             </div>

         </div>

     </section>

     <footer class="qui-footerBasic">

         <p class="switchStyle">

             <span>手机版</span>

             <a href="">

                 <span>电脑版</span>

             </a>

             <span><a href="">APP</a></span>

         </p>

     </footer>

 </section>

 <aside class="qui-asides">

     <section class="qui-aside">

         <nav class="qui-asideNav">

             <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>

                 <li><a href="">点评</a></li>

             </ul>

         </nav>

     </section>

 </aside>

 </body>

 </html>

二、css样式

common.css

 /*旅游管理页面*/

 html{

     height:100%;

     overflow-x: hidden;/*表示水平方向隐藏溢出，没有滚动条*/

     background: #f5f5f5;

     color: #444;

     font: 14px/24px Helvetica !important;/*字体样式：字号大小14px ,行高24px,字体 Hel ,!important 字体样式为最高权值；*/

 }

 body{

     -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

     box-sizing: border-box;

     position: relative;

     z-index: 0;

     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;

     }

     em , strong {

         font-style: normal;

         font-weight:normal;

     }

     ul{ list-style: none;

     }

     h1{

         font-size: 55px;

         margin-top: 30px;

         color: white;

         text-align: center;

     }

Main.css

 .qui-page{

     width: 640px;

 }

 .qui-header {

     width: 100%;

     height: 80px;

     overflow: hidden;

     background-color: #2bab79;

 }

 .container {

     width: 100%;

     -webkit-box-sizing: border-box;

     -moz-box-sizing:border-box  ;

     box-sizing: border-box;

 }

 .plcRouteList {

     border-bottom:  1px solid #e6e8ea;

     background-color: #fff;

    padding-left: 5px;

     position: relative;

 }

 .plcRouteList  a {

     display: block;

     position: relative;

 }

 .plcRouteList  pic{

     display: block;

     min-height: 150px;

 }

 .plcRouteList  .bottom {

     position: absolute;

     left:5px;

     right:0;

     bottom:35px ;

     height:  50px;

     padding:  30px 0 0 60px;

     color:#fff;

     background-image: -webkit-linear-gradient(top ,rgba(0,0,0,0),rgba(0,0,0,0.6) ) ;

 }

 .plcRouteList  .bottom  .face {

     float:left;

     margin-left: -50px;

     width:38px;

     height:38px;

     border-radius: 50%;

     border: 1px solid #fff;

     overflow:hidden;

 }

 .plcRouteList  .bottom  .title{

     width:100%;

     overflow:hidden;

     text-overflow: ellipsis;

     white-space: nowrap;

     font-size: 18px;

     font-weight: bold;

     line-height: 22px;

 }

 .plcRouteList  .day{

     position: absolute;

     top:  10px;

     right: 10px;

     width: 50px;

     height: 50px;

     background-color: rgba(43,171,121,0.8) ;

     boderder-radiu:50%;

     text-align: center ;

     font-size: 18px;

     line-height: 50px;

     color:#fff;

 }

 .plcRouteList  .infos {

     margin-top: 7px;

 }

 .plcRouteList .infos >div{

     margin-bottom: 5px;

     padding-left: 40px;

 }

 .plcRouteList  .infos em{

     float: left;

     margin-left:  -40px;

     font-size: 15px;

     font-weight: bold;

  }

 .plcRouteList  .infos  p{

     max-height: 48px;

     overflow: hidden;

 }

 .qui-footerBasic {

     width: 100%;

     margin: 20px 0;

     text-align: center ;

     font-size: 10px;

     line-height: 20px;

 }

 .qui-footerBasic .switchStyle {

     color:#9ea3ab ;

 }

 .qui-footerBasic  .switchStyle  span{

     margin-left:30px ;

 }

 .qui-footerBasic .switchStyle a{

     color:#444 ;

     text-decoration:none ;

 }

 .qui-asides {

     position: absolute;

     left: -150px;

     top: 0;

     height:400px;

     width: 200px;

 }

 .qui-aside{

     position: fixed;

     top:0px;

     width: 150px;

     overflow-y: scroll;

     background-color: #2d3741;

 }

 .qui-asideNav {

     padding:  40px 10px 1000px;

 }

 .qui-asideNav li{

     border-top:  1px solid #232d34;

     background-color:#36424b ;

 }

 .qui-asideNav a{

     text-decoration:  none;

     display: block;

     padding-left:15px;

     font-size:16px ;

     line-height:  44px;

     color: #ced1d5;

 }

 .qui-asideNav a:hover{

     color:white;

     background-color:#2bab79;

 }

Imag

三、效果图

    

三、效果图

四、实验总结

css与代码对接容易出错，编写时应注意细节上的调整，css的紧密性体现在效果的细节上，如果没有出现预期的效果应多检查检查效果的css,另外养成一个好的习惯也很重要，勤写注释可以有助后期的修改。

Web实验一 国内旅游界面的更多相关文章

  1. 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

    在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控 ...

  2. App.js – 用于移动 Web App 开发的 JS 界面库

    App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

  3. 转--基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

    原文  http://www.cnblogs.com/wuhuacong/p/3317223.html 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用 在前面介绍了两篇关于我的基 ...

  4. 南邮JAVA程序设计实验1 综合图形界面程序设计

    南邮JAVA程序设计实验1  综合图形界面程序设计 实验目的: 学习和理解JAVA SWING中的容器,部件,布局管理器和部件事件处理方法.通过编写和调试程序,掌握JAVA图形界面程序设计的基本方法. ...

  5. Centos7+LVS-DR+Apache负载均衡web实验

    一.简介 1.理论已经在上一篇博客简述,不了解得可以看看 https://www.cnblogs.com/zhangxingeng/p/10497279.html 2.LVS-DR优缺点复习 关于这种 ...

  6. .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择

    下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错. 我们框架的组织机构结合实际分成了5种类型,分别为 ...

  7. java web程序 上机考试登陆界面设计实现

    今天是java web上机.做一个登陆注册的界面.要求:jsp.mysql数据库,js做一个美观的界面.功能.可以添加 更多啊.我做的界面被老师狠狠的扣了分.问题在于.当用户没有输入任何信息(没有输入 ...

  8. （转）基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

    原文地址:http://www.cnblogs.com/wuhuacong/p/3317223.html 在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中 ...

  9. 工业4.0：换热站最酷设计—— Web SCADA 工业组态软件界面

    前言 随着工业4.0的不断普及与发展,以及国民经济的飞速前进,我国的城市集中供热规模也不断扩大,科学的管理热力管网具有非常重大的经济和社会效益.目前热力系统,如换热站大都采用人工监控,人工监控不仅浪费 ...

随机推荐

  1. Oralce获取32位随机数

    SELECT SYS_GUID() from dual;

  2. 安装oracle 11g 客户端，检查过程中报物理内存不足的解决

    今早接到同事电话,说安装oracle 11g客户端的时候,在检查先决条件的时候,报错,说内存不足,但是本机的内存是2G,肯定够用:如图: 找了一圈,原来Oracle执行先决条件检查是依赖c$共享,很多 ...

  3. [LC] 92. Reverse Linked List II

    Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...

  4. JQ主页图片划动切换效果

    .wrapper { width: 726px; float: left; } #jiao_dian { width: 980px; *height: 292px; margin-top: 10px; ...

  5. 吴裕雄--天生自然HTML学习笔记：HTML <div> 和<span>

    HTML <div> 和<span> HTML 可以通过 <div> 和 <span>将元素组合起来. HTML 区块元素 大多数 HTML 元素被定义 ...

  6. 转：B树和B+树的插入、删除图文详解

    如需转载,请注明出处 http://www.cnblogs.com/nullzx/ 1. B树 1. B树的定义 B树也称B-树,它是一颗多路平衡查找树.我们描述一颗B树时需要指定它的阶数,阶数表示了 ...

  7. R的基础数据结构

  8. 对Vue为什么不支持IE8的解释之一

    在JavaScript对象中有一个Object.defineProperties(obj, props)方法 该方法主要用来给指定对象添加自定义属性 可以接收两个参数: 第一个参数 要定义或者修改属性 ...

  9. <USACO06NOV>玉米田Corn Fields

    状压emm 二进制真有趣 来自dp垃圾的欣喜 Description 农民 John 购买了一处肥沃的矩形牧场,分成M*N(1 <= M <= 12; 1 <= N <= 12 ...

  10. Django学习之路05

    Django模板层 模板层语法(两类) 变量相关:{{      }} 逻辑相关:{%  %} 给模板传值的方法 #方法1 #通过字典传值,指名道姓,例如下 return render(request ...