使用Bootstrap实现旅游网首页

页面效果

准备工作

进入bootstrap官文网，下载需要使用的文件。
https://v3.bootcss.com/getting-started/#download
选择 用于生产环境的Bootstrap下载

Tour.html








旅游网首页











图片






搜索
















黑马精选






上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899





上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899





上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899





上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899





国内游











上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899





上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899





上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899







上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899





上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899





上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)


¥ 899












传智播客



</ html>

tour.css

.paddtop {
padding-top: 20px;
}

.search-input {
float: left;
border: 2px solid #ffc900;
width: 400px;
height: 35px;
padding-left: 10px;
margin-top: 20px;
}

.search-btn {
float: left;
border: 1px solid #ffc900;
width: 90px;
height: 35px;
background-color: #ffc900;
text-align: center;
line-height: 35px;
margin-top: 20px;

}

.hmjx {
border-bottom: 2px solid #ffc900;
padding: 5px;
}

.gny {
border-bottom: 2px solid #ffc900;
padding: 5px;
padding: 20px;
}

foot_p {

background-color: #ffc900;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 16px;
}

使用的图片下载

点击下载项目中使用的图片

posted @ 2019-08-11 08:24  难得糊涂1998  阅读(1733)  评论(0)    收藏  举报