• 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. 作业：for循环，迭代法和穷举法

                                                    for()循环 四要素:初始条件,循环条件,状态改变,循环体. 执行过程:初始条件--循环条件--循环体 ...

  2. python、anaconda、jupyter notebook、pycharm、spyder

    说明: 1.anaconda把任何东西都当做包来管理. 2.anaconda本省集成了python和conda.spyder.numpy等. 3.pip只用于python,conda可用于多种语言. ...

  3. 在mysql中生成数据库和数据表

    #创建数据库CREATE DATABASE s4day65 DEFAULT CHARSET utf8; #班级表 CREATE TABLE class (id INT NOT NULL AUTO_IN ...

  4. Spring第一课:IOC控制反转，什么是反转，什么又是控制？

    前言 学习Spring第一课,就是认识IOC控制反转,要了解它还真得花一些功夫.今天主要理解透彻它的真谛,而不仅限于表面. 上道小菜 public class BusinessService { pr ...

  5. 批量修改ACCESS表列名

    问题来源:从ODBC导入数据到ACCESS 再从ACCESS导入到SQL数据库,ACCESS会多带个DBO. 所以需要批量修改ACCESS的表名. 首先需要引用ADOX引用方法:打开ACCESS的VB ...

  6. web中间件之nginx

    web中间件之nginx https://www.jianshu.com/p/d8bd75c0fb1b   对nginx正向代理和反向代理理解特别好的一篇文章. 一.nginx nginx缺点,负载均 ...

  7. geoserver整合swagger2支持自动生成API文档

    网上各种博客都有关于swagger2集成到springmvc.springboot框架的说明,但作者在整合到geoserver中确碰到了问题,调试一番最后才解决,遂总结一下. swagger2集成只需 ...

  8. java 通过数据库名获得 该数据所有的表名以及字段名、字段类型

    package com.nf.lc.sql_meta_data; import java.sql.*; import java.util.HashMap; import java.util.Map; ...

  9. Mac下如何使用homebrew

    Homebrew简称brew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件. 常用的命令: 搜索软件:brew search 软件名,如brew search wget ...

  10. [洛谷P4388] 付公主的矩形

    18.09.09模拟赛T1. 一道数学题. 题目传送门 首先把对角线当成是某个点的移动轨迹,从左下到右上. 那么这个点每上升一个单位长度,就穿过一个格子. 每右移一个单位长度,也会穿过一个格子. 例外 ...