瓢城旅行社网页界面设计（HTML+CSS）
2024-04-06 07:52:45
瓢城旅行社网页界面设计（HTML+CSS）
目录
瓢城旅行社网页界面设计（HTML+CSS）
效果展示：
一、布局分析
二、部分代码
1、导航栏的导航设计
2 、搜索栏的实现
3 、首页内容的实现
4 、旅游资讯内容左上角打折信息的实现
效果展示：
一、布局分析
本次界面设计主要分为五个界面，主要以div盒子设计为主。五个界面布局主要分为两类（首页布局为一类 如图1，其余四个页面布局相似所以归为一类 如图2），图中一个矩形代表一个盒子。
二、部分代码
1、导航栏的导航设计
为了实现当前页面的导航背景色为黑色以及当鼠标放在任何一个导航其背景色也变成黑色实现。
效果如下：
<!--html的代码内容通过设置id的鼠标悬浮变色的元素-->
<div class="bar"><div class="bar_name" id="bar_name_one" style="background: black"><a href="index.html" target="_parent">首页</a></div><div class="bar_name_right" id="bar_name_two"><a href="tourist_information.html" target="_parent">旅游咨询</a></div><div class="bar_name_right" id="bar_name_three"><a href="order.html" target="_parent">机票订购</a></div><div class="bar_name_right" id="bar_name_four"><a href="view.html" target="_parent">风景欣赏</a></div><div class="bar_name_right" id="bar_name_five"><a href="company_profile.html" target="_parent">公司简介</a></div></div><!--css的代码内容-->
#bar_name_one:hover{background: black;
}#bar_name_two:hover{background: black;
}
#bar_name_three:hover{background: black;
}
#bar_name_four:hover{background: black;
}
#bar_name_five:hover{background: black;
}2 、搜索栏的实现
通过三个盒子来实现外面包装一个大的盒子里面设置两个盒子通过浮动完成效果.
效果图:
<!--html的代码-->
<div class="search"><div class="search_left"><span style="padding: 5px 10px 0px 10px;font-size: 28px;color:#757575;display: block">请输入旅游景点或城市</span></div><div class="search_right"><span style="font-size: 25px; padding: 8px 20px;display: block;color: #666666">搜索</span></div>
</div><!--css的代码-->
.search{float: left;width: 600px;height: 60px;margin: 280px 20px 280px 650px;border-radius:10px;border: 2px solid gray;background: #2f2724;
}
.search_left{clear: both;float: left;width: 480px;height: 48px;margin: 4px;border: 2px solid #eeeeee;background: #eeeeee;border-radius: 10px;
}
.search_right{float: left;width: 90px;height: 48px;margin: 4px;border: 2px solid #eeeeee;background: #eeeeee;border-radius: 10px;
}3 、首页内容的实现
效果如下:
<!--html的代码-->
<div class="box"><div class="box_picture"><div class="box_picture_text"><span style="text-align: center;margin: 5px">国内长线</span></div></div><span>< 曼谷-芭提雅6日游></span><span style="color: #777777"> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费劵</span><br><span style="color: #ff6600;display: block;float: left">￥ <span style="font-weight: bold;font-size: 20px;">2 8 6 4</span> 起</span><span style="display: block;float: right;font-size: 15px;color: #999999;margin: 5px">满意度 77%</span>
</div><!--css的代码-->
.box{width: 390px;height: 320px;margin: 10px 20px 10px 320px;border: 2px solid gainsboro;float: left;
}
.box_picture{width: 380px;height: 230px;margin: 5px 5px 10px 5px;background-image: url("../image/tour1.jpg");float: left;
}
.box_picture_text{width: 80px;height: 20px;background: #59b200;float: left;color: white;
}4 、旅游资讯内容左上角打折信息的实现
为了是左上角的三角形,那么就要通过盒子来实现,我们可以把盒子看成是两个三角形组成,一个三角形让其拥有颜色一个三角形采用透明属性来是实现如 图3,
其文字采用css的transform来实现翻转效果。
效果如下:
<!--三角形的实现-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.box{width: 0;height: 0;border-style: solid;border-width: 40px;border-color:#fff4d9 #fff4d9 transparent transparent;}</style>
</head>
<body>
<div class="box">
<!-- <span style="display: block;font-size: 20px;float: left">Hallo</span>-->
</div>
<!--1.宽度高度必须设置为0
2.边框必须有线性和宽度
3.边框颜色-->
</body>
</html><!--html的代码-->
<div class="box_picture"><div class="box_picture_text"><span style="text-align: center;margin: 5px">国内长线</span></div></div><div class="box_picture_right"><span style="margin: 20px 0px 10px 20px;display: block;float: left;font-size: 20px">曼谷-芭提雅6日游</span><div class="triangle"><span style="color:#ff7c68;display: block; transform: rotate(46deg);margin: 10px 0px 0px 12px">4.7折</span></div><div class="boxs"><div class="box_left"><div class="box_picture_right_left"><span style="font-size: 14px;color: #666666">包团特惠，超丰富景点，升级1晚国五,无自费，赠送600元成人卷...</span></div><div class="box_picture_right_left_bottom"><span style="display: block;float: left;margin: 2px 0px 0px 0px">1. </span><div class="buttons"><span style="margin: 0px 0px 0px 2px;float: left;display: block">交通</span></div><span style="font-size: 10px;"> ：春秋航空，杭州出发，无需转机</span><span style="clear: both;display: block;float: left;margin: 2px 0px 0px 0px">2. </span><div class="buttons"><span style="margin: 0px 0px 0px 2px;float: left;display: block">团期</span></div><span style="font-size: 10px;"> ：11/01、11/03、11/08...</span></div></div><div class="box_right"><span style="color: #ff6600;">￥<span style="font-size: 25px;font-weight: bold">2864</span> <span style="font-size: 10px;color: #999999;text-decoration:line-through"> ￥3980</span></span><div class="bottons_one"><span style="margin: 7px 0px 0px 0px;display: block">立即抢购</span></div></div></div><span> 本团游由瓢城旅行社赞助提供，截止于<span style="color: #458b00;font-weight: bold">2015-10-10</span></span></div><!--css的代码段-->
.box_picture{width: 380px;height: 230px;margin: 5px 0px 10px 100px;background-image: url("../image/tour1.jpg");float: left;
}
.box_picture_text{width: 80px;height: 20px;background: #59b200;float: left;color: white;
}
.box_picture_right{float: left;width:516px;height: 226px;border: 2px solid #eeeeee;margin: 5px 0px 10px 0px ;color: #333333;
}
.triangle{width: 51px;height: 52px;float: right;background-image: url("../image/sanjiao.png");
}
.boxs{width: 516px;height: 150px;/*background: #eeeeee;*/margin: 50px 0px 0px 0px;
}
.box_left{clear: left;width: 260px;height: 140px;/*background: #0000ee;*/float: left;
}
.box_right{width: 180px;height: 140px;/*background: #00f0f0;*/float: left;
}
.box_picture_right_left{width: 220px;height: 60px;clear: both;float:left;margin: 0px 0px 0px 20px;/*background: red;*/
}
.box_picture_right_left_bottom{width: 250px;height: 80px;clear: left;/*background: #00f0f0;*/
}
.buttons{width: 40px;height: 20px;border:1px solid #458b00;border-radius:4px;float: left;color: #458b00;
}
.bottons_one{width: 115px;height: 35px;border-radius:4px;border:1px solid #ff6600;color: white;text-align: center;margin: 20px 0px 0px 0px;background: #ff6600;
}瓢城旅行社网页界面设计（HTML+CSS）相关推荐
- 分享32套精美的免费 PSD 网页界面设计素材
网页界面设计是一件很花时间和精力的工作,如果有现成的界面设计模板可以使用,那将会有事半功倍的效果.网上的设计素材资源玲琅满目,要找到精美的素材也不是那么容易的.因此,这篇文章精心挑选32套精美的 PS ...
- 浅析网页界面设计——首页设计
杨科宇曾发表过一篇文章<浅析网页界面设计--首页设计>,文中为我们分享了如何进行首页的界面设计.现转载于此,供大家借鉴学习.全文如下: 首页设计,需开宗明义突出主题 开宗明义,无论是对于一 ...
- 网站建设在网页界面设计中该如何做到简约
网站建设在网页界面设计中该如何做到简约是关于网站建设在网页界面设计中该如何做到简约的文章,同信长春网站公司帮您了解网站建设在网页界面设计中该如何做到简约的方面的知识. 提供的服务或产品,是供年轻人或孩 ...
- 第五页 网页界面设计系列教程——文字的编排设计
以语言进行信息传达时,语气.语调以及面部表情.姿态手势是语言的辅助和补充,而在界面设计中,文字的字体.规格及其编排形式,就相当于文字的辅助信息传达手段. 宋体字型结构方中有圆,刚柔相济,既典雅庄重,又 ...
- web网页打印设计的CSS样式
大多数Web设计师对打印控制还不是很熟悉,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 为打印机而不是屏幕设计的样式 1 2 3 4 5 /* 样式将只应用于打印 */ @media ...
- 福州华威集团旗下华威客运票务网页界面设计
最近刚刚完成的网页设计(整体网页规划.网页设计等):希望大家多多提出修改意见. 转载于:https://www.cnblogs.com/kaixinniu/archive/2008/08/11/126 ...
- html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
- 如何在网页界面设计中正确的留出空白空间
合理的在网页留下空白,可以有效提升人们的阅读体验,所谓留白,有时也称作负空间,两者是同一个概念.尽管这个术语尤其指留"白",但它所指的区域并不一定要是白色的.它只是网页布局中环绕各 ...
- html5+css3案例——仿瓢城旅行网
一.主页 二.机票订购页面 三.index.html <!DOCTYPE html> <html> <head><title>瓢城旅行网</tit ...
最新文章
- web高性能开发系列随笔
- fixture详细介绍-作为参数传入,error和failed区别
- 0x01.基本算法 — 位运算
- Spring Boot 性能优化
- Thymeleaf的Spring数据
- ppt护理文书流程图_护理文书书品管圈ppt
- Entity Framework 4.0 的一个bug ：DefaultValue问题
- leetcode917
- 传智168期JavaEE就业班 day05-XML 约束与解析
- 如何使用CSS为文本或图像提供透明背景？
- 宽带路由器-mac地址克隆
- 高德地图--根据地理位置获取经纬度
- Javascript中文乱码Js中文乱码
- Add Juniper SRX Cluster into JunOS Space 16.1 Security Director
- 利用逆矩阵解线性方程组_经典Jacobi方法用于求解矩阵特征值
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
- Linux的du 和 df 的区别
- 64位操作系统安装——Linux（Ubuntu 16.04）+Windows7+iNode
- （附源码）Spring Boot 框架整合 OAuth2 实现单点登录 SSO 详细完整源码教程！
- L1-051 打折 （5 分）