• 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. Qt 线程池QThreadPool类、QRunnable类

    QThreadPool类 用来管理 QThreads.此类中的所有函数都是线程安全的. 主要属性: 1.activeThreadCount: 此属性表示线程池中的活动线程数,通过activeThrea ...

  2. C语言返回值

    C语言函数在结束的时候可以用一个数字表示运行的结果,这个数字就叫做函数的返回值. 主函数应该有一个返回值.如果这个返回值是0就表示程序希望计算机认为它正常结束,如果不是0就表示程序希望计算机认为它是出 ...

  3. deeplearning.ai 构建机器学习项目 Week 2 机器学习策略 II

    1. 误差分析(Error analysis) 误差分析的目的是找到不同误差源的比重,从而指引我们接下来往哪个方向努力改进.NG建议手工统计随机100个错误的误差源,比如对于猫分类器,错误的照片可能是 ...

  4. python掉包侠与深浅拷贝

    今日所得 包 logging模块 hashlib模块 openpyxl模块 深浅拷贝 包 在学习模块的时候我们了解过模块的四种表现形式,其中的一种就是包. 什么是包? 它是一系列模块文件的结合体,表示 ...

  5. JDBC原理之层次结构

    目录 JDBC的层次结构 前言 Collection角色 Statement角色 ResultSet角色 JDBC工作的基本流程 JDBC的层次结构 前言 JDBC API提供了以下接口和类: Dri ...

  6. 【AUTO Uninstaller - 使用教程】Autodesk系列软件终极完美修复卸载工具【转载】

    小伙伴是不是遇到 CAD/3dmax/maya/Revit/Inventor 安装失败或者安装不了的问题了呢?AUTODESK系列软件着实令人头疼,CAD/3dmax/maya/Revit/Inven ...

  7. 从Surface 3发布 看微软快速转向的根由

    3发布 看微软快速转向的根由" title="从Surface 3发布 看微软快速转向的根由"> 平地一声惊雷起,微软突然送惊喜!在毫无征兆的情况下,微软突然发布一 ...

  8. HTML5图片预览 放大

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 维生素D补充过多会中毒

    虽然我们的物质生活越来越丰富,各种食材几乎一年四季都能够吃到,然而却越来越多的人选择进行补充各种维生素,但是你知道吗?维生素不是我们想象中多吃无害的,补充过多也会要人命,特别是最近非常流行补充的一种维 ...

  10. Python---1基础介绍

    因公司有自动化测试需求,开始自学python,跟着廖雪峰老师的教程,一边学习,一遍记笔记,将学习过程中,遇到的大大小小奇奇怪怪的问题,记录与此. 一.安装 Python是跨平台的,它可以运行在Wind ...