CH13 天气预报查询的设计与实现.ppt

13.4.1整体布局设计本项目的主要内容分为三个板块：切换城市、天气状况、实况气象数据。其界面结构设计效果如图所示。13.4.1整体布局设计上图中的三个板块内容具体解释如下：切换城市：使用div元素完成，主要包含下拉菜单元素，用户可以自行切换城市。图标与天气状况：使用div元素完成，主要包含当前城市的天气图标、气温以及天气状况描述（例如晴、多云、雷阵雨等）实况气候数据：使用table元素完成，主要包含体感温度、相对湿度、降水量、气压、能见度和风力共计6种实时气象数据，在table中形成四行三列表格内容。13.4.1整体布局设计在HTML5中使用div元素将这三个版块嵌套在内部，相关代码如下：1. body2. !--标题--3. h3jQueryAJAX天气预报查询的设计与实现/h34. !--水平线--5. hr6. !--天气查询版块--7. divid=content8. !--1切换城市--9. divid=location10. 切换城市（下拉菜单）11. /div12. 13. !--2天气描述区域--14. divid=weather15. 图标气温天气状况16. /div17. 18. !--3实况数据--19. tableid=now20. !--3-1第一行（数据）--21. trid=line0122. td1-1/td23. td1-2/td24. td1-3/td25. /tr26. !--3-2第二行（单位名称）--27. trid=line0228. td2-1/tdtd2-2/tdtd2-3/td29. /tr30. !--3-3第三行（数据）--31. trid=line0332. td3-1/td33. td3-2/td34. td3-3/td35. /tr36. !--3-4第四行（单位名称）--37. trid=line0438. td4-1/tdtd4-2/tdtd4-3/td39. /tr40. /table41. /div42. /body13.4.1整体布局设计本示例使用CSS外部样式表规定页面样式。在本地css文件夹中创建weather.css文件，并在head首尾标签中声明对CSS文件的引用。相关HTML5代码片段如下：在CSS外部样式表中首先为页面设置整体样式，相关CSS代码片段如下：1. head2. metacharset=utf-83. titlejQueryAJAX天气预报查询的设计与实现/title4. linkrel=stylesheethref=css/weather.css5. /head1. /*公共样式*/2. body{3. text-align:center;/*文本居中*/4. background:silver;/*背景颜色灰色*/5. }13.4.1整体布局设计接下来在CSS外部样式表中为div元素设置统一样式，相关CSS代码片段如下：然后继续为id=content的div元素设置样式，相关CSS代码片段如下：其中box-shadow属性可以实现边框投影效果，4个参数分别代表水平方向的偏移（向右偏移15像素）、垂直方向的偏移（向下偏移15像素）、阴影宽度（10像素）和阴影颜色（黑色），均可自定义成其他值。该属性属于CSS3新特性中的一种，在这里仅为美化页面作简单使用。1. div{2. padding:10px20px;/*内边距上下10px左右20px*/3. bo