第33章项目实战-兼容响应式布局

33章项目实战-兼容响应式布局本章主要开始如果将前两个项目再进行重构，设计成既可以在PC在首页的热门旅游这个主要区域，有一个大标题和小标题。通过响应式来设置他们在不同//PC<div<sectionclass="center">热门旅游<p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮、旅游等各种#tour.centerh2{margin:10px0;font-size:45px;letter-spacing:2px;color:#666;}#tour.center{color:#666;margin:10px;}//查询部/*在992和1199像间的屏幕里,这里的样式才生效*/@media(min-width:992px)and(max-width:1199px){#tour.centerh2{font-size:40px;}}/*在768和991像间的屏幕里,这里的样式才生效*@media(min-width:768px)and(max-width:991px){.{-5;}}/*在480和767像间的屏幕里,这里的样式才生效*@media(min-width:480px)and(max-width:767px){.{-0;}}/*480像素的屏@media(max-width:479px){.{-6;}}二．响应在PC端，我们固定一行显示了三组旅游介绍。那么在响应式环节，我们可以设置每个介绍为1/3即可。而不同的分辨率可以是1/2或1/1。//PC端，部分修<div<strongclass="title"><曼谷-6></strong团特惠，超丰富景点，升级1晚国五，无自费，更600元/成<div<emclass="sat">满意度class="price">¥<strong>2864</strong</span>//css#tourmax-width:1263px;margin:30pxauto;text-align:}#tour.center{text-align:}#tourfigureborder:1pxsoliddisy:block;padding:4px;border-radius:4px;width:32.4%;margin:15px0.4%;text-align:left;position:relative;float:left;}#tourfigureimg{vertical-align:}#tourfigurefigcaption{color:#777;font-size:14px;padding:7px000;letter-spacing:1px;line-height:}#tour.tour_title{height:40px;overflow:}#tour.title{color:font-weight:}#padding:5px00}#tour.price{color:#f60;font-size:}#tour.pricestrong{font-size:20px;letter-spacing:}#tour.sat{color:#999;font-size:13px;font-style:normal;float:right;position:relative;right:5px;top:}#tour.type{width:90px;height:25px;line-height:text-align:border-bottom-right-radius:4px;background-color:#59b200;font-size:14px;color:#fff;letter-spacing:1px;position:absolute;top:4px;left:}//查询部/*在480和767像间的屏幕里,这里的样式才生效*/@media(min-width:480px)and(max-width:767px)