console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0px;
}
a {
color: #000;
}
a:hover{text-decoration:none;}
body {
background: rgb(247, 247, 247);
}
.order {
height: 60px;
line-height: 60px;
text-align: center;
margin: 30px auto 50px auto;
}
.order .line {
display: inline-block;
width: 40%;
border-top: 1px solid #ccc ;
background:rgb(231, 0, 18);
}
.order .txt {
vertical-align: -10px;
font-size:30px;
color:rgb(231, 0, 18);
}
.head {
width: 100%;
padding: 0 10%;
}
.head p {
width: 70%;
float: left;
margin-top: 20px;
color: rgb(231, 0, 18);
font-size: 20px;
}
.head>a {
margin-top: 23px;
margin-left: 1%;
display: inline-block;
}
.head .btn-group {
width: 15%;
float: right;
margin-top: 15px;
}
.navmain {
width: 100%;
padding: 0 11%;
background: rgb(199, 199, 199);
margin-bottom: 25px;
}
.navmain li {
padding: 0 20px;
}
.navmain li:first-child {
background: rgb(231, 0, 18);
}
.navmain li:first-child a {
color: rgba(255, 255, 255, 1);
}
.navmain a {
color: rgb(255, 255, 255);
}
.navmain li:hover a {
color: rgba(0, 0, 0, 1);
}
.part1 {
width: 80%;
padding: 0 0 20px 0;
}
.info1 {
border-bottom: solid 1px rgba(128, 128, 128, 0.5);
margin-bottom: 20px;
padding-bottom: 10px;
}
.info1 .info2 {
width: 100%;
margin: 20 auto;
}
.info2 li {
margin-top: 15px;
font-size: 16px;
}
.info2 span{color:rgb(128,128,128);float:right;}
.carousel-inner img {
margin: 0 auto;
}
.market {
width: 80%;
padding: 0 0 20px 0;
margin: 0 auto;
}
.pic>img {
width: 100%;
height: 200px;
border-radius: 10px;
}
.pic {
height: 350px;
overflow: hidden;
float: left;
background: rgb(255, 255, 255);
margin-bottom: 20px;
box-shadow:1px 1px 2px darkgray;
border-radius: 10px;
}
.text {
height: 20px;
background: rgba(0, 0, 0, 0.2);
transition: all 1s;
margin-top: -50px;
position: relative;
z-index: 1;
}
.text>h3 {
height: 32px;
line-height: 32px;
color: #fff;
font-size: 14px;
text-align: center;
}
.text>p {
font-size: 14px;
text-indent: 1em;
overflow: hidden;
}
.pic:hover img {
transform: scale(1.05);
transition: all 0.5s;
}
.more {
width: 50%;
margin: 20px auto 10px auto;
}
.servicebox {
width: 150px;
height: 150px;
border: solid 1px rgba(128, 128, 128, 0.5);
margin:0 50px 10px 0;
text-align: center;
box-shadow:1px 1px 2px darkgray;
}
.servicebox:hover i{color:rgb(190, 26, 23) ; transition: all 0.5s;}
.servicebox i{
font-size: 45px;
margin: 40px auto 0 0;
color: rgb(207, 83, 79);
}
.servicebox p{
margin: 8px auto;
color: rgba(0, 0, 0, 0.9);
font-size: 16px;
}
.bottom {
width: 100%;
margin-top: 60px;
background: rgb(201, 48, 44);
padding: 50px 0;
}
@media screen and (max-width:900px) {
.service a{margin-left:50px;}
.servicebox {margin:0 auto;}
}
</style>
</head>
<body>
<div class="container head">
<img class="pull-left" src="img/logo.png" alt="">
<p>社区服务网站</p>
<a href="">登录</a>
<a href="register.html">注册</a>
<div class="btn-group">
<a class="btn btn-danger" href="person.html" role="button">地区</a>
</div>
</div>
<div class="container navmain">
<div>
<ul class="nav navbar-nav ">
<li class="disabled"><a href="#">首页</a></li>
<li><a href="information.html">新闻资讯</a></li>
<li><a href="market.html">社区市场</a></li>
<li><a href="#">社区活动</a></li>
<li><a href="#">便民服务</a></li>
</ul>
</div>
</div>
<div class="container part1">
<div class="col-sm-12 col-md-6 carousel1">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/Carousel01.png" alt="First slide">
</div>
<div class="item">
<img src="img/Carousel01.png" alt="Second slide">
</div>
<div class="item">
<img src="img/Carousel01.png" alt="Third slide">
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev"> </a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>
</div>
<div class="col-sm-12 col-md-6 information">
<div class="info1">
<a href="#"><h3 class="text-primary">让“十四五”规划经得起实践和历史检验</h3></a>
<p>党的十九届五中全会闭幕次日,李克强总理主持召开国务院“十四五”规划《纲要草案》编制工作领导小组会议。</p>
</div>
<div class="info2">
<ul>
<li><a href="#">习近平主持召开中央全面深化改革委员会第十六次会议</a><span>[01-24]</span></li>
<li><a href="#">习近平主持召开中央全面深化改革委员会第十六次会议</a><span>[01-24]</span></li>
<li><a href="#">习近平主持召开中央全面深化改革委员会第十六次会议</a><span>[01-24]</span></li>
</ul>
</div>
</div>
</div>
<div class="order">
<span class="line"></span>
<span class="txt">业务办理</span>
<span class="line"></span>
</div>
<div class="container market">
<a href="https://google.com">
<div class="col-md-6 col-lg-3">
<div class="pic">
<img src="img/market1.jpeg" />
<div class="text">
<h3>华为手机 9成新</h3>
<p>用户姓名 <i class="fa fa-map-marker text-info ">凌水街道</i></p>
<p>转让今天刚刚到手的全新64G华为 手机带一年屏保险 诚心要的联系我 外地勿扰</p>
</div>
</div>
</div>
</a>
<a href="https://google.com">
<div class="col-md-6 col-lg-3">
<div class="pic">
<img src="img/market1.jpeg" />
<div class="text">
<h3>华为手机 9成新</h3>
<p>用户姓名 <i class="fa fa-map-marker text-info ">凌水街道</i></p>
<p>转让今天刚刚到手的全新64G华为 手机带一年屏保险 诚心要的联系我 外地勿扰</p>
</div>
</div>
</div>
</a>
<a href="https://google.com">
<div class="col-md-6 col-lg-3">
<div class="pic">
<img src="img/market1.jpeg" />
<div class="text">
<h3>华为手机 9成新</h3>
<p>用户姓名 <i class="fa fa-map-marker text-info ">凌水街道</i></p>
<p>转让今天刚刚到手的全新64G华为 手机带一年屏保险 诚心要的联系我 外地勿扰</p>
</div>
</div>
</div>
</a>
<a href="https://google.com">
<div class="col-md-6 col-lg-3">
<div class="pic">
<img src="img/market1.jpeg" />
<div class="text">
<h3>华为手机 9成新</h3>
<p>用户姓名 <i class="fa fa-map-marker text-info ">凌水街道</i></p>
<p>转让今天刚刚到手的全新64G华为 手机带一年屏保险 诚心要的联系我 外地勿扰</p>
</div>
</div>
</div>
</a>
<div class="col-lg-12">
<a class="btn btn-danger btn-lg btn-block more" href="market.html" role="button">查看更多</a>
</div>
</div>
<div class="container service">
<div class="order">
<span class="line"></span>
<span class="txt">便民服务</span>
<span class="line"></span>
</div>
<a href="#">
<div class="col-md-4 col-lg-2">
<div class="servicebox">
<i class="fa fa-map-marker "></i>
<p>家政服务</p>
</div>
</div>
</a>
<a href="#">
<div class="col-md-4 col-lg-2">
<div class="servicebox">
<i class="fa fa-map-marker "></i>
<p>车辆服务</p>
</div>
</div>
</a>
<a href="#">
<div class="col-md-4 col-lg-2">
<div class="servicebox">
<i class="fa fa-map-marker "></i>
<p>教育科研</p>
</div>
</div>
</a>
<a href="#">
<div class="col-md-4 col-lg-2">
<div class="servicebox">
<i class="fa fa-map-marker "></i>
<p>社会保障</p>
</div>
</div>
</a>
<a href="#">
<div class="col-md-4 col-lg-2">
<div class="servicebox">
<i class="fa fa-map-marker "></i>
<p>交通出行</p>
</div>
</div>
</a>
<a href="#">
<div class="col-md-4 col-lg-2">
<div class="servicebox">
<i class="fa fa-map-marker "></i>
<p>房屋登记</p>
</div>
</div>
</a>
</div>
<div class="container bottom"></div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>