• 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. scala语言yield配合for的用法实例

    yield配合for的用法 话不多说见实例 package com.donews.reynold /** * Created by reynold on 2017/3/23. */ object Sc ...

  2. Jump Game (Medium)

    主要有两种思路: 一. 本题只需要判断能否到达最后一个数,那么可以采用贪心策略,到达某个位置i后,在直接在这个位置的基础上走nums[i]步,主要保证能一直前进,就能达到终点: 那么,什么时候才不能一 ...

  3. Coupled model

    常见的coupled models phase English paper WRF-Chem mechanism public data 一些重要的结论 干空气的状态方程 ECWMF驱动WRF 常见的 ...

  4. 吴裕雄--天生自然Android开发学习：android开发知识学习思维导图

  5. Java的同步和异步

    同步:发送一个请求,等待返回,然后再发送下一个请求 异步:发送一个请求,不等待返回,随时可以再发送下一个请求 同步可以避免出现死锁,读脏数据的发生,一般共享某一资源的时候用,如果每个人都有修改权限,同 ...

  6. win7电脑磁盘文件以分组方式展现解决方案

    问题: win7电脑磁盘文件以分组方式展现,具体如下: 解决: 右键磁盘空白处-->分组依据-->选择无:图解如下:

  7. json/xml processing model与xml和json的简要区别

    1.JavaScript Object Notation(JSON) JSON是一种轻量级数据交换格式,广泛用作通用格式,用于序列化和反序列化通过Internet相互通信的应用程序中的数据.这些应用程 ...

  8. POJ 1815 网络流之拆点(这个题还需要枚举)

    传送门:http://poj.org/problem?id=1815 题意:给N个点,已知S与T,和邻接矩阵,求拆掉那些点会减小最大流. 思路:点之间有线连接的在网络中的权值为inf,没有的就不用管, ...

  9. js编写trim()函数

    1.js中本身是没有trim函数的,不过你可以自己写一个 function trim(str) {     var newStr = str.replace(/^\s*$/g,'')     retr ...

  10. Mysql简单总结

    基于Mac OS X系统 MySQL的安装和配置 首先进入 MySQL 官网,选择免费的Community版:MySQL Community Server.MySQL 官网提供了tar.gz和dmg两 ...