Web实验一 国内旅游界面
程序员文章站
2022-06-24 23:29:28
Web实验一 旅游界面的设计 一、首页代码 1 2 3 4 5 国内旅游 6
-
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-width: 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 width: 640px;
3
4 }
5 .qui-header {
6 width: 100%;
7 height: 80px;
8 overflow: hidden;
9 background-color: #2bab79;
10
11 }
12 .container {
13 width: 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 width:38px;
48 height:38px;
49 border-radius: 50%;
50 border: 1px solid #fff;
51 overflow:hidden;
52
53
54 }
55 .plcroutelist .bottom .title{
56 width: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 width: 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 width: 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 width: 200px;
122 }
123 .qui-aside{
124 position: fixed;
125 top:0px;
126 width: 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,另外养成一个好的习惯也很重要，勤写注释可以有助后期的修改。
下一篇： 17.python面向对象
推荐阅读
-
一步一步实现web程序信息管理系统之一----登陆界面实现
-
第一个登录界面web应用
-
Web界面配置Tomcat连接池－－－我得一点个人心得 TomcatWeb配置管理JDBCSQL Server
-
Web实验一 国内旅游界面
-
怎么用dreamweaver做一个可以换肤的界面_html/css_WEB-ITnose
-
响应式Web开发实验一代码及实验结果
-
使用Axure RP原型设计实践03,制作一个登录界面的原型_html/css_WEB-ITnose
-
用Html写一个简单的登陆界面_html/css_WEB-ITnose
-
使用Axure RP原型设计实践03,制作一个登录界面的原型_html/css_WEB-ITnose
-
Web程序后台管理系统的一些界面