豆品区域：
继续之前的操作，section，container，clearfix，常规操作，接着分左栏区域，右栏区域以及主区域，左栏里又有标题，右栏里有两个标题，标题之间有插有一个广告图片，广告图片下方又有一行文字，这行文字我们用a元素将其包裹，主区域里还是标题＋item-list
HTML代码如下：
<div class="section">
<div class="container clearfix doupin-area">
<div class="aside-left">
<div class="title">
<h2>
<a href="">豆品</a>
</h2>
</div>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">热门活动</h3>
</div>
<div class="adv">
<a href="">
<img src="./imgs/热点右边栏.jpg" alt="">
</a>
</div>
<div>
<a href="">我的豆瓣收藏夹里有什么</a>
</div>
<div class="section-title">
<h3 class="title">官方小组</h3>
<span class="link">
<!-- ( -->
<a href="">
更多
</a>
</span>
</div>
</div>
<div class="main">
<div class="section-title">
<h3 class="title">热卖商品</h3>
<span class="link">
<!-- ( -->
<a href="">
更多
</a>
</span>
</div>
<ul class="item-list">
<li>
<div class="img">
<a href="">
<img src="./imgs/豆品.jpg" alt="">
</a>
</div>
<div class="words clearfix">
<a class="float-left" href="">豆瓣冻顶乌龙茶</a>
<span class="float-right">￥59.00</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="./imgs/豆品.jpg" alt="">
</a>
</div>
<div class="words clearfix">
<a class="float-left" href="">豆瓣冻顶乌龙茶</a>
<span class="float-right">￥59.00</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="./imgs/豆品.jpg" alt="">
</a>
</div>
<div class="words clearfix">
<a class="float-left" href="">豆瓣冻顶乌龙茶</a>
<span class="float-right">￥59.00</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="./imgs/豆品.jpg" alt="">
</a>
</div>
<div class="words clearfix">
<a class="float-left" href="">豆瓣冻顶乌龙茶</a>
<span class="float-right">￥59.00</span>
</div>
</li>
</ul>
</div>
</div>广告图片部分之前在热点区域里已经做过，样式也在通用样式里
.adv img {
width: 100%;
/* 去掉白边 */
display: block;
}接着是常规改变a元素颜色，包括鼠标移入和选中时文字颜色，以及item-list区域li的宽度margin，和words颜色大小等
doupin-area .aisde-left .title a{
color: #1f9432;
}
.doupin-area .aisde-left .title a:hover,.doupin-area .aisde-left .title a:active{
color: #fff;
}
.doupin-area .aside-right{
font-size: 14px;
}
.doupin-area .main .item-list li{
width: 240px;
margin-right: 20px;
font-size: 16px;
margin-bottom: 30px;
}
.doupin-area .main .item-list li .words{
margin-top: 10px;
}
.doupin-area .main .item-list li .words span{
color:#E55457 ;
}
同城区域：
同城还是一样的套路，section，container，aside-left，aside-right，main。
<div class="section">
<div class="container clearfix city-area">
<div class="aside-left">
<div class="title">
<h2>
<a href="">同城</a>
</h2>
</div>
<ul class="left-menu">
<li><a class="new" href="">近期活动</a></li>
<li><a href="">主办方</a></li>
<li><a href="">舞台剧</a></li>
<li><a href="">书评</a></li>
<li><a href="">Quas.</a></li>
<li><a href="">Mollitia.</a></li>
<li><a href="">Quibusdam?</a></li>
<li><a href="">Amet.</a></li>
<li><a href="">Doloribus?</a></li>
<li><a href="">Architecto.</a></li>
<li><a href="">Atque.</a></li>
</ul>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">活动标签</h3>
</div>
<div class="group">
<div class="group-name">
<a href="">兴趣</a>
</div>
<div class="aside-right">
<ul class="right-menu-list clearfix">
<li><a href="">旅行</a></li>
<li><a href="">摄影</a></li>
<li><a href="">影视</a></li>
<li><a href="">Lorem.</a></li>
<li><a href="">Sint.</a></li>
<li><a href="">Dolores.</a></li>
<li><a href="">Provident.</a></li>
<li><a href="">Esse.</a></li>
<li><a href="">Libero.</a></li>
<li><a href="">Excepturi.</a></li>
<li><a href="">Veritatis.</a></li>
<li><a href="">Molestiae.</a></li>
<li><a href="">Itaque!</a></li>
<li><a href="">Mollitia!</a></li>
<li><a href="">Praesentium?</a></li>
<li><a href="">Officia?</a></li>
<li><a href="">Explicabo!</a></li>
<li><a href="">Ab?</a></li>
<li><a href="">Optio.</a></li>
<li><a href="">Voluptates!</a></li>
<li><a href="">Omnis.</a></li>
<li><a href="">Ullam!</a></li>
<li><a href="">Cum?</a></li>
</ul>
</div>
</div>
<div class="group">
<div class="group-name">
<a href="">兴趣</a>
</div>
<div class="aside-right">
<ul class="right-menu-list clearfix">
<li><a href="">旅行</a></li>
<li><a href="">摄影</a></li>
<li><a href="">影视</a></li>
<li><a href="">Lorem.</a></li>
<li><a href="">Sint.</a></li>
<li><a href="">Dolores.</a></li>
<li><a href="">Provident.</a></li>
<li><a href="">Esse.</a></li>
<li><a href="">Libero.</a></li>
<li><a href="">Excepturi.</a></li>
<li><a href="">Veritatis.</a></li>
<li><a href="">Molestiae.</a></li>
<li><a href="">Itaque!</a></li>
<li><a href="">Mollitia!</a></li>
<li><a href="">Praesentium?</a></li>
<li><a href="">Officia?</a></li>
<li><a href="">Explicabo!</a></li>
<li><a href="">Ab?</a></li>
<li><a href="">Optio.</a></li>
<li><a href="">Voluptates!</a></li>
<li><a href="">Omnis.</a></li>
<li><a href="">Ullam!</a></li>
<li><a href="">Cum?</a></li>
</ul>
</div>
</div>
<div class="group">
<div class="group-name">
<a href="">兴趣</a>
</div>
<div class="aside-right">
<ul class="right-menu-list clearfix">
<li><a href="">旅行</a></li>
<li><a href="">摄影</a></li>
<li><a href="">影视</a></li>
<li><a href="">Lorem.</a></li>
<li><a href="">Sint.</a></li>
<li><a href="">Dolores.</a></li>
<li><a href="">Provident.</a></li>
<li><a href="">Esse.</a></li>
<li><a href="">Libero.</a></li>
<li><a href="">Excepturi.</a></li>
<li><a href="">Veritatis.</a></li>
<li><a href="">Molestiae.</a></li>
<li><a href="">Itaque!</a></li>
<li><a href="">Mollitia!</a></li>
<li><a href="">Praesentium?</a></li>
<li><a href="">Officia?</a></li>
<li><a href="">Explicabo!</a></li>
<li><a href="">Ab?</a></li>
<li><a href="">Optio.</a></li>
<li><a href="">Voluptates!</a></li>
<li><a href="">Omnis.</a></li>
<li><a href="">Ullam!</a></li>
<li><a href="">Cum?</a></li>
</ul>
</div>
</div>
<div class="group">
<div class="group-name">
<a href="">兴趣</a>
</div>
<div class="aside-right">
<ul class="right-menu-list clearfix">
<li><a href="">旅行</a></li>
<li><a href="">摄影</a></li>
<li><a href="">影视</a></li>
<li><a href="">Lorem.</a></li>
<li><a href="">Sint.</a></li>
<li><a href="">Dolores.</a></li>
<li><a href="">Provident.</a></li>
<li><a href="">Esse.</a></li>
<li><a href="">Libero.</a></li>
<li><a href="">Excepturi.</a></li>
<li><a href="">Veritatis.</a></li>
<li><a href="">Molestiae.</a></li>
<li><a href="">Itaque!</a></li>
<li><a href="">Mollitia!</a></li>
<li><a href="">Praesentium?</a></li>
<li><a href="">Officia?</a></li>
<li><a href="">Explicabo!</a></li>
<li><a href="">Ab?</a></li>
<li><a href="">Optio.</a></li>
<li><a href="">Voluptates!</a></li>
<li><a href="">Omnis.</a></li>
<li><a href="">Ullam!</a></li>
<li><a href="">Cum?</a></li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="section-title">
<h3 class="title">成都本周热门活动</h3>
<span class="link">
<!-- ( -->
<a href="">
更多
</a>
</span>
</div>
<ul class="item-list">
<li>
<div class="img">
<a href=""><img src="./imgs/同城.jpg" alt=""></a>
</div>
<div class="words">
<a href="">伍佰&China Blue ROCK STAR 2023巡回演唱会-西安站
</a>
<span>12月1日 周五 - 12月2日 周六
西安奥体中心体育馆 杏渭路...</span>
<span>40人关注</span>
</div>
</li>
<li class="clearfix">
<div class="img">
<a href=""><img src="./imgs/同城.jpg" alt=""></a>
</div>
<div class="words">
<a href="">伍佰&China Blue ROCK STAR 2023巡回演唱会-西安站
</a>
<span>12月1日 周五 - 12月2日 周六
西安奥体中心体育馆 杏渭路...</span>
<span>40人关注</span>
</div>
</li>
<li>
<div class="img">
<a href=""><img src="./imgs/同城.jpg" alt=""></a>
</div>
<div class="words">
<a href="">伍佰&China Blue ROCK STAR 2023巡回演唱会-西安站
</a>
<span>12月1日 周五 - 12月2日 周六
西安奥体中心体育馆 杏渭路...</span>
<span>40人关注</span>
</div>
</li>
<li>
<div class="img">
<a href=""><img src="./imgs/同城.jpg" alt=""></a>
</div>
<div class="words">
<a href="">伍佰&China Blue ROCK STAR 2023巡回演唱会-西安站
</a>
<span>12月1日 周五 - 12月2日 周六
西安奥体中心体育馆 杏渭路...</span>
<span>40人关注</span>
</div>
</li>
</ul>
</div>
</div>
</div>右区域菜单之前也是做过的，将其样式弄成通用样式即可。在这里我再说一说主区域里图片与文字的位置关系吧，这里是文字环绕图片，给文字添加overflow：hidden，使其创建BFC，避开浮动盒子即可，设置图片的margin-right来设置图片与文字之间的距离
/*右栏菜单通用样式*/
.menu-adv{
margin-top: 20px;
font-size: 12px;
}
.group .group-name a{
color: #333;
}
.group .group-name a::after{
content: "»";
}
.group .right-menu-list li{
margin-right: 10px;
}
.city-area a{
color: #643;
}
.city-area a:hover,.city-area a:active{
color: #fff;
}
.city-area .aside-left .title a{
color: #ec5303;
}
.city-area .aside-left .title a:hover,.city-area .aside-left .title a:active{
color: #fff;
}
.city-area .item-list li{
width: 248px;
margin-right: 20px;
margin-bottom: 60px;
}
.city-area .item-list li:nth-child(2n){
margin: 0;
}
.city-area .item-list li .img{
float: left;
margin-right: 10px;
}
.city-area .item-list li .words{
float:left;
overflow: hidden;
}
.city-area .item-list li .words a{
font-size: 13px;
}
.city-area .item-list li .words span{
display: block;
font-size: 12px;
color: #666;
line-height: 1.7;
} 
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
