用BootStrap框架编写旅游网页 |
您所在的位置：网站首页 › 关于旅游景点网页排版 › 用BootStrap框架编写旅游网页 |
用BootStrap框架编写旅游网页
|
利用BootStrap编写一个简单的旅游网页
我决定了每周写一篇博客，分享自己所学的知识，这周是个简单的旅游网页制作。 这是效果图： 利用BootStrap组件的前提是需要先导入BootStrap的js插件，去BootStrap官网可下载。 下面直接放源码： index.html 小葵花旅游网 搜索 首页 机票 酒店 火车票 汽车票 特价线路 门票 周边游 租车 攻略 墨西哥 土耳其 北海道 Previous Next 今日推荐 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888 国内游 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888 上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机) ¥888index.css * { padding: 0px; margin: 0px; } a:link { color: black; text-decoration: none; } a:hover { color: orange; text-decoration: none; } .padd-top { padding-top: 10px; } .search_input { /* 宽400，高36，左浮动，边框2，颜色#ffc900，左内边距10，外轮廓outline设置为0*/ width: 400px; height: 36px; float: left; border: 2px solid #ffc900; padding-left: 10px; outline: 0px; } .search_button { /*点击按钮，是一个链接：左浮动，宽90，高36，背景色#ffc900，行高36，文本居中*/ float: left; width: 90px; height: 36px; background-color: #ffc900; text-align: center; line-height: 36px; } .jx_top { /*外上边距15px, 底部边框2px 实线 #ffc900做为下面的线， 宽度100%，高度35px，行高35px，外下边距5px。图标文件：icon_5.jpg*/ margin-top: 15px; border-bottom: 2px solid #ffc900; width: 100%; height: 35px; line-height: 35px; margin-bottom: 5px; } .company { /*字体大小12，背景色#ffc900，文字居中对齐，高度与行高为40px*/ font-size: 12px; background-color: #ffc900; text-align: center; height: 40px; line-height: 40px; } .search{ margin-left:500px; margin-top:20px; margin-bottom:20px; }总结：制作中的巧妙之处有：1、用BootStrap的组件很快的实现轮播效果和导航栏。 2、用container容器很好的解决了图片布局问题。因为网页中中间部分的布局是一张大图片加三张小图片，而row属性一行有12列，怎么能更好的划分这四张图片呢？，这里就聪明的把大图片占四列，其他三张占8列，再在这8列的基础上每张图片占四列，就把这问题OK掉了。 这是源码哈：https://download.csdn.net/download/weixin_42490117/11505119 |
编写这个旅游网页利用BootStrap框架可以分为头部，正文，底部 3个部分。再在每个部分一一实现相应的功能。 1、头部主要要实现两个功能：搜索框和导航条。导航条利用BootStrap组件实现。 2、正文部分：’BootStrap栅格系统实现。 3、底部：添加张图片即可（我这里做得很简单哈）。 源码链接在底部：想要的话自行下载！【本文地址】
今日新闻 |
推荐新闻 |