[mark_a]今天下午在逛某某博客的时候看到他的侧边有一列格子,无奈不是响应式的只能放侧边使用,他是采用ul>li写的,久伴是采取div>div写的,不过我弄得是响应式的,页面和侧边栏目都可以用久伴的代码[/mark_a]
演示截图
代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://jiubx.com/jiuban/css/bootstrap.css"> <title>我的业务-久伴制作</title> </head> <body> <div class="container"> <!--第一大行--> <div class="row" style="margin-top: 30px;"> <!--内第一行--> <div class="row" style="text-align: center; "> <div class="col-md-6 col-xs-6 bk " > <h3>网站建设</br><small>提供品牌官网解决方案</small></h3> <div class="bkn" ><a href="http://42.193.49.154"><button class="btn btn-default ">了解详情</button></a></div> </div> <div class="col-md-6 col-xs-6 bka "> <h3>模板制作</br><small>仿站/效果图转模板</small></h3> <div class="bkn" ><a href="http://42.193.49.154"><button class="btn btn-default ">了解详情</button></a></div> </div> </div> <!--内第二行--> <div class="row" style="text-align: center;"> <div class="col-md-6 col-xs-6 bkb "> <h3>QQ,微信号出售</br><small>出售各种QQ,微信靓号</small></h3> <div class="bkn" ><a href="http://42.193.49.154"><button class="btn btn-default ">了解详情</button></a></div> </div> <div class="col-md-6 col-xs-6 bkc "> <h3>手机靓号出售</br><small>出售全国各地手机靓号</small></h3> <div class="bkn" ><a href="http://42.193.49.154"><button class="btn btn-default ">了解详情</button></a></div> </div> </div> <!--内第三行--> <div class="row" style="text-align: center;" > <div class="col-md-12 col-xs-12 bkb"> <h3>交易流程</br><small>业务咨询 | 提交需求 | 开始实施 | 确认 | 售后服务</small></h3> </div> </div> </div> </div> </body> </html>
在线效果
在线演示地址:https://jiubx.com/jiuban/css/demo3.html
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论

这值得收藏!
收藏了
简单明快