网站通用界面-适合做业务页面

2019年3月5日19:07:50 3 166
今天下午在逛某某博客的时候看到他的侧边有一列格子,无奈不是响应式的只能放侧边使用,他是采用ul>li写的,久伴是采取div>div写的,不过我弄得是响应式的,页面和侧边栏目都可以用久伴的代码

演示截图

网站通用界面-适合做业务页面

代码如下

<!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://jiub.ren/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="https://jiub.ren"><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="https://jiub.ren"><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="https://jiub.ren"><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="https://jiub.ren"><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://jiub.ren/jiuban/css/demo3.html

weinxin
微信公众号名称:IT青年时代
微信搜索IT青年时代或者扫描左边二维码进行关注,这样可以及时查看久伴博客每日内容推送
  • A+
所属分类:css
久伴

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  3   博主  0

    • avatar 响石潭 3

      简单明快

      • avatar 刘大喵 1

        收藏了

        • avatar 弥雅尔尔 4

          这值得收藏!