PC端固定布局[10]

2017年10月23日08:10:57 发表评论

本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。

一.机票预定

机票预定页面,具体如下:

PC端固定布局[10]

二.代码详解

//全部代码

<form action="###">
<h2>机票预定</h2>
<div class="type">
<p>航程类型 <mark>单程</mark> 往返</p>
</div>
<div class="form left">
<p>
<label for="from_city">出发城市</label>
<input type="text" name="from_city" id="from_city"
placeholder="城市名">
</p>
<p>
<label for="to_city">返回城市</label>
<input type="text" name="to_city" id="to_city"
placeholder="城市名">
</p>
</div>
<div class="form right">
<p>
<label for="from_date">出发时间</label>
<input type="text" name="from_date" id="from_date"
placeholder="时间/日期">
</p>
<p>
<label for="to_date">返回时间</label>
<input type="text" name="to_date" id="to_date"
placeholder="时间/日期">
</p>
</div>
<div class="form button">
<p>
<button type="submit" class="submit">订票</button>
</p>
</div>
</form>
<div class="new">
<h2>最新机票</h2>
<ul>
<li>热门城市:</li>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>重庆</li>
<li>成都</li>
<li>杭州</li>
<li>南京</li>
</ul>
<table>
<thead>
<tr>
<th>路线</th>
<th>日期</th>
<th>价格</th>
<th>税费</th>
<th>餐食</th>
<th>航班</th>
<th>预定</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td class="price">¥745</td>
<td>¥50</td>
<td>有</td>
<td>春秋航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-上海</td>
<td>10-15</td>
<td class="price">¥479</td>
<td>¥45</td>
<td>无</td>
<td>南方航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-深圳</td>
<td>10-15</td>
<td class="price">¥561</td>
<td>¥52</td>
<td>有</td>
<td>西部航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-杭州</td>
<td>10-15</td>
<td class="price">¥378</td>
<td>¥36</td>
<td>无</td>
<td>天津航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-广州</td>
<td>10-15</td>
<td class="price">¥612</td>
<td>¥44</td>
<td>有</td>
<td>首都航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-重庆</td>
<td>10-15</td>
<td class="price">¥428</td>
<td>¥62</td>
<td>有</td>
<td>东方航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-昆明</td>
<td>10-15</td>
<td class="price">¥509</td>
<td>¥35</td>
<td>无</td>
<td>厦门航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-厦门</td>
<td>10-15</td>
<td class="price">¥893</td>
<td>¥73</td>
<td>有</td>
<td>深圳航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-长沙</td>
<td>10-15</td>
<td class="price">¥663</td>
<td>¥46</td>
<td>无</td>
<td>四川航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
</tbody>
<tfoot>
<td colspan="7"><a href="###" class="more2">加载更多航
班...</a></td>
</tfoot>
</table>
</div>

//CSS 部分

#container .ticket {
    color: #666;
}
#container .ticket h2 {
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    font-weight: normal;
    border-bottom: 1px dashed #999;
    padding: 0 0 15px 0;
}
#container .ticket .type {
    font-size: 20px;
    margin: 20px 0 10px 0;
}
#container .ticket .type mark {
    color: #fff;
    background-color: #458B00;
    padding: 5px 8px;
    border-radius: 4px;
    margin: 0 10px 0 16px;
}
#container .ticket .form {
    font-size: 20px;
}
#container .ticket .form p {
    line-height: 3;
}
#container .ticket .form input {
    width: 250px;
    height: 30px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    padding: 5px;
    font-size: 18px;
    color: #666;
    margin: 0 0 0 16px;
}
#container .ticket .left {
    width: 43%;
    display: inline-block;
}
#container .ticket .right {
    width: 43%;
    display: inline-block;
}
#container .ticket .button {
    width: 9%;
    display: inline-block;
}
#container .ticket .submit {
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 90px;
    border-radius: 4px;
    background-color: #f60;
    color: #fff;
    font-size: 20px;
    text-align: center;
    border: none;
    cursor: pointer;
    position: relative;
    top: -28px;
}
#container .ticket .new {
    margin: 20px 0 0 0;
    font-size: 20px;
}
#container .ticket .new ul {
    margin: 20px 0 0 0;
}
#container .ticket .new li {
    display: inline-block;
    padding: 5px 10px;
}
#container .ticket .new li:first-child {
    padding-left: 0;
}
#container .ticket .new li:nth-child(2) {
    background-color: #458B00;
    border-radius: 4px;
    color: #fff;
}
#container .ticket table {
    width: 100%;
    border-collapse:collapse;
    margin: 20px 0 0 0;
    border: 1px solid #ddd;
}
#container .ticket table th {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
    font-weight: normal;
}
#container .ticket table td {
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
#container .ticket table tr:nth-child(2n) {
    background-color: #fafafa;
}
#container .ticket table tr:hover {
    background-color: #eee;
}
#container .ticket .price {
    color: #f60;
}
#container .ticket .more2 {
    text-align: center;
    font-size: 18px;
    margin: 0 auto;
    cursor: pointer;
    display: block;
    color: #666;
}
#container .ticket .reserve {
    display: inline-block;
    width: 80px;
    height: 35px;
    line-height: 35px;
    border-radius: 4px;
    background-color: #f60;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

注:本章为第50课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: