Web实验一国内旅游界面

Web实验一旅游界面的设计

一、首页代码

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>国内旅游</title>
 6     <link href="css/common.css" rel="stylesheet" type="text/css">
 7     <link href="css/main.css" rel="stylesheet" type="text/css">
 8 </head>
 9 <body>
10 <section class="qui-page">
11     <header class="qui-header">
12         <h1>国内旅游计划</h1>
13     </header>
14     <section class="container">
15         <div class="plcRouteList">
16             <a herf=""><img src="image/fengjing.jpg" width="100%"alt=""class="pic"></a>
17             <div class="bottom">
18                 <p class="face"><img src="image/touxiang.jpg "width="38" height="38"alt=""></p>
19            <h2 class="title">我的旅游行程</h2>
20             </div>
21             <p class="day">14天</p>
22             <div class="infos">
23 
24             <div>
25             <em>城市</em>
26             <p>昆明-香格里拉-西藏</p>
27         </div>
28            </div>
29         </div>
30     </section>
31     <section class="container">
32         <div class="plcRouteList">
33             <a herf=""><img src="image/fengjing.jpg" width="100%"alt=""class="pic"></a>
34             <div class="bottom">
35                 <p class="face"><img src="image/touxiang.jpg"width="38" height="38"alt=""></p>
36                 <h2 class="title">我的旅游行程</h2>
37             </div>
38             <p class="day">15天</p>
39             <div class="infos">
40                 <div>
41 
42               <em>城市</em>
43             <p>北京-常州-苏州</p>
44                 </div>
45             </div>
46         </div>
47     </section>
48 
49     <footer class="qui-footerBasic">
50         <p class="switchStyle">
51             <span>手机版</span>
52             <a href="">
53                 <span>电脑版</span>
54             </a>
55             <span><a href="">APP</a></span>
56 
57         </p>
58     </footer>
59 
60 </section>
61 <aside class="qui-asides">
62     <section class="qui-aside">
63         <nav class="qui-asideNav">
64             <ul>
65                 <li><a href="">首页</a></li>
66                 <li><a href="">目的地</a></li>
67                 <li><a href="">酒店</a></li>
68                 <li><a href="">机票</a></li>
69                 <li><a href="">时间</a></li>
70                 <li><a href="">点评</a></li>
71             </ul>
72         </nav>
73     </section>
74 </aside>
75 </body>
76 </html>

二、css样式

common.css

 1 /*旅游管理页面*/
 2 html{
 3     height:100%;
 4     overflow-x: hidden;/*表示水平方向隐藏溢出，没有滚动条*/
 5     background: #f5f5f5;
 6     color: #444;
 7     font: 14px/24px Helvetica !important;/*字体样式：字号大小14px ,行高24px,字体 Hel ,!important 字体样式为最高权值；*/
 8 
 9 }
10 body{
11     -webkit-box-sizing: border-box;
12     -moz-box-sizing: border-box;
13     box-sizing: border-box;
14     position: relative;
15     z-index: 0;
16     max- 640px;
17     min-height: 100%;
18     margin: 0 auto;
19     overflow-x: hidden;
20     box-shadow: 0 0 10px rgba(0 0 0 0.3) ;
21 }
22     div,ul,li,p{
23         margin: 0;
24         padding: 0;
25         outline: none;
26     }
27     em , strong {
28         font-style: normal;
29         font-weight:normal;
30     }
31     ul{ list-style: none;
32     }
33     h1{
34         font-size: 55px;
35         margin-top: 30px;
36         color: white;
37         text-align: center;
38     }

Main.css

  1 .qui-page{
  2      640px;
  3 
  4 }
  5 .qui-header {
  6      100%;
  7     height: 80px;
  8     overflow: hidden;
  9     background-color: #2bab79;
 10 
 11 }
 12 .container {
 13      100%;
 14     -webkit-box-sizing: border-box;
 15     -moz-box-sizing:border-box  ;
 16     box-sizing: border-box;
 17 }
 18 .plcRouteList {
 19     border-bottom:  1px solid #e6e8ea;
 20     background-color: #fff;
 21    padding-left: 5px;
 22     position: relative;
 23 }
 24 .plcRouteList  a {
 25     display: block;
 26     position: relative;
 27 }
 28 .plcRouteList  pic{
 29     display: block;
 30     min-height: 150px;
 31 }
 32 .plcRouteList  .bottom {
 33     position: absolute;
 34     left:5px;
 35     right:0;
 36     bottom:35px ;
 37     height:  50px;
 38     padding:  30px 0 0 60px;
 39     color:#fff;
 40     background-image: -webkit-linear-gradient(top ,rgba(0,0,0,0),rgba(0,0,0,0.6) ) ;
 41 
 42 
 43 }
 44 .plcRouteList  .bottom  .face {
 45     float:left;
 46     margin-left: -50px;
 47     38px;
 48     height:38px;
 49     border-radius: 50%;
 50     border: 1px solid #fff;
 51     overflow:hidden;
 52 
 53 
 54 }
 55 .plcRouteList  .bottom  .title{
 56     100%;
 57     overflow:hidden;
 58     text-overflow: ellipsis;
 59     white-space: nowrap;
 60     font-size: 18px;
 61     font-weight: bold;
 62     line-height: 22px;
 63 }
 64 .plcRouteList  .day{
 65     position: absolute;
 66     top:  10px;
 67     right: 10px;
 68      50px;
 69     height: 50px;
 70     background-color: rgba(43,171,121,0.8) ;
 71     boderder-radiu:50%;
 72     text-align: center ;
 73     font-size: 18px;
 74     line-height: 50px;
 75     color:#fff;
 76 
 77 }
 78 .plcRouteList  .infos {
 79     margin-top: 7px;
 80 }
 81 .plcRouteList .infos >div{
 82     margin-bottom: 5px;
 83     padding-left: 40px;
 84 }
 85 .plcRouteList  .infos em{
 86     float: left;
 87     margin-left:  -40px;
 88     font-size: 15px;
 89     font-weight: bold;
 90  }
 91 .plcRouteList  .infos  p{
 92     max-height: 48px;
 93     overflow: hidden;
 94 }
 95 
 96 .qui-footerBasic {
 97      100%;
 98     margin: 20px 0;
 99     text-align: center ;
100     font-size: 10px;
101     line-height: 20px;
102 
103 }
104 .qui-footerBasic .switchStyle {
105     color:#9ea3ab ;
106 
107 }
108 .qui-footerBasic  .switchStyle  span{
109     margin-left:30px ;
110 }
111 .qui-footerBasic .switchStyle a{
112     color:#444 ;
113     text-decoration:none ;
114 
115 }
116 .qui-asides {
117     position: absolute;
118     left: -150px;
119     top: 0;
120     height:400px;
121      200px;
122 }
123 .qui-aside{
124     position: fixed;
125     top:0px;
126      150px;
127     overflow-y: scroll;
128     background-color: #2d3741;
129 
130 }
131 .qui-asideNav {
132     padding:  40px 10px 1000px;
133 
134 }
135 .qui-asideNav li{
136     border-top:  1px solid #232d34;
137     background-color:#36424b ;
138 
139 }
140 .qui-asideNav a{
141     text-decoration:  none;
142     display: block;
143     padding-left:15px;
144     font-size:16px ;
145     line-height:  44px;
146     color: #ced1d5;
147 }
148 .qui-asideNav a:hover{
149     color:white;
150     background-color:#2bab79;
151 }

Imag

三、效果图

四、实验总结

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

Web实验一 国内旅游界面

Web实验一 旅游界面的设计

一、首页代码

二、css样式

common.css

Main.css

三、效果图

三、效果图

四、实验总结

Web实验一国内旅游界面

Web实验一旅游界面的设计