console
<!DOCTYPE html>
<html>
<head>
<title>test...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://unpkg.com/ionicons@4.5.10-1/dist/css/ionicons.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js">
</script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar_wow" ">
<div class="container ">
<a class="navbar-brand " href="# " title="首页 ">
<img src="https://www.w3cschool.cn/attachments/image/20180524/1527144620597215.png " alt="logo " style="width:40px; ">
</a>
<button class="navbar-toggler ml-auto " type="button " data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link " href="# ">最新</a>
</li>
<li class="nav-item active ">
<a class="nav-link " href="# ">最热</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">111</a>
</li>
<li class="nav-item ">
<a class="nav-link disabled " href="# ">Disabled</a>
</li>
</ul>
<form class="navbar-form ml-auto" role="search ">
<div class="input-group " style="margin: 5px auto; " id="searchgroup">
<input type="text " class="form-control " placeholder="输入模型的名称 " id="model_name " name="model_name ">
<div class="input-group-append ">
<span class="input-group-text ">
<i class="icon ion-md-search "></i>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
<div class="clearfix"></div>
<div class="container">
<nav class="breadcrumb justify-content-end">
<a class="breadcrumb-item " href="#">首页</a>
<a class="breadcrumb-item" href="#">官方</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
<h6 class="photo_title">标题标题1213</h6>
</div>
<div class="clearfix"></div>
<div class="container ">
<div class="row model_desc">
<div class="col-md-3 col-sm-12">
<img style="max-width: 100%" src="https://static.runoob.com/images/mix/img_avatar.png">
</div>
<div class="col-md-9 col-sm-12">
<h5></h5>
<p>model: <a class="tags" href="#">asdf</a></p>
<p>描述：花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 </p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="container">
<div class="row model_desc">
<div class="col">
<p>机构：<a class="tags" href="#">秀人网</a></p>
<p>期刊：No.2311</p>
<p>模特：<a class="tags" href="#">王雨纯</a></p>
<p>时间：2016-01-15</p>
<p>数量：15张</p>
<p>说明：花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 花木成畦手自栽 </p>
</div>
</div>
</div>
<div class="mainbody ">
<div class="container photos">
<h6 style="border-bottom:1px solid #cccccc;padding: 3px;">最新</h6>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card" style="">
<div>
<div class="triangle-topleft">
<i class="icon ion-md-ribbon gold"></i></div>
<a href='#'> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"></a>
<span class="img_num">90P</span>
</div>
<div class="card-body">
<p class="card-text">机构：<a href="#" class="tags">a中文</a></p>
<p class="card-text">模特：<a href="#" class="tags">a1111aaa</a><a href="#">a1111111aaa</a></p>
<p class="card-text">标签：<a href="#" class="tags">aaaa</a><a href="#" class="tags">a中文</a><a href="#" class="tags">a中文</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 photo">
<div class="card" style="">
<div>
<div class="triangle-topleft">
<i class="icon ion-md-ribbon coral"></i></div>
<a href='#'> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"></a>
<span class="img_num">90P</span>
</div>
<div class="card-body">
<p class="card-text">机构：<a href="#" class="tags">a中文</a></p>
<p class="card-text">模特：<a href="#" class="tags">a1111aaa</a><a href="#">a1111111aaa</a></p>
<p class="card-text">标签：<a href="#" class="tags">aaaa</a><a href="#" class="tags">a中文</a><a href="#" class="tags">a中文</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card" style="">
<div>
<div class="triangle-topleft">
<i class="icon ion-md-ribbon silver"></i></div>
<a href='#'> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"></a>
<span class="img_num">90P</span>
</div>
<div class="card-body">
<p class="card-text">机构：<a href="#" class="tags">a中文</a></p>
<p class="card-text">模特：<a href="#" class="tags">a1111aaa</a></p>
<p class="card-text">标签：<a href="#" class="tags">aaaa</a><a href="#" class="tags">a中文</a><a href="#" class="tags">a中文</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card" style="">
<div>
<a href='#'> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"></a>
<span class="img_num">90P</span>
</div>
<div class="card-body">
<p class="card-text">机构：<a href="#" class="tags">a中文</a></p>
<p class="card-text">模特：<a href="#" class="tags">a1111aaa</a></p>
<p class="card-text">标签：<a href="#" class="tags">aaaa</a><a href="#" class="tags">a中文</a><a href="#" class="tags">a中文</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card" style="">
<div>
<a href='#'> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"></a>
<span class="img_num">90P</span>
</div>
<div class="card-body">
<p class="card-text">机构：<a href="#" class="tags">a中文</a></p>
<p class="card-text">模特：<a href="#" class="tags">a1111aaa</a></p>
<p class="card-text">标签：<a href="#" class="tags">aaaa</a><a href="#" class="tags">a中文</a><a href="#" class="tags">a中文</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card" style="">
<div>
<a href='#'> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"></a>
<span class="img_num">90P</span>
</div>
<div class="card-body">
<p class="card-text">机构：<a href="#" class="tags">a中文</a></p>
<p class="card-text">模特：<a href="#" class="tags">a1111aaa</a></p>
<p class="card-text">标签：<a href="#" class="tags">aaaa</a><a href="#" class="tags">a中文</a><a href="#" class="tags">a中文</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card" style="">
<div>
<a href='#'> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"></a>
<span class="img_num">90P</span>
</div>
<div class="card-body">
<p class="card-text">机构：<a href="#" class="tags">a中文</a></p>
<p class="card-text">模特：<a href="#" class="tags">a1111aaa</a></p>
<p class="card-text">标签：<a href="#" class="tags">aaaa</a><a href="#" class="tags">a中文</a><a href="#" class="tags">a中文</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card" style="">
<div>
<a href='#'> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"></a>
<span class="img_num">90P</span>
</div>
<div class="card-body">
<p class="card-text">机构：<a href="#" class="tags">a中文</a></p>
<p class="card-text">模特：<a href="#" class="tags">a1111aaa</a></p>
<p class="card-text">标签：<a href="#" class="tags">aaaa</a><a href="#" class="tags">a中文</a><a href="#" class="tags">a中文</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card" style="">
<div>
<a href='#'> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"></a>
<span class="img_num">90P</span>
</div>
<div class="card-body">
<p class="card-text">机构：<a href="#" class="tags">a中文</a></p>
<p class="card-text">模特：<a href="#" class="tags">a1111aaa</a></p>
<p class="card-text">标签：<a href="#" class="tags">aaaa</a><a href="#" class="tags">a中文</a><a href="#" class="tags">a中文</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container">
<div class="col-12 text-center">
asdfsf<br/>adsf
</div>
</div>
</footer>
</body>
</html>
body{
background-color: #ffe8fa;
}
.navbar_wow{
background-color: #9c8597!important;
}
div.photos{
font-size: 14px;
}
div.photos img{
padding: 3px
}
div.photos img:hover{
padding: 5px
}
div.photos .img_num{
position: relative;
right: 10px;
background-color: rgba(0,0,0,0.2);
top: -32px;
zoom: 1;
float: right;
text-align: center;
color: #FFFFFF;
padding: 5px;
line-height: 12px;
margin-bottom: -30px;
}
div.photos p{
margin-bottom: 0px;
line-height:25px;
font-size:12px;
height:25px;
overflow:hidden;
padding: 0 5px;
font-family: "微软雅黑";
}
div.photos .photo{
margin-bottom: 5px
}
div.photos .card-body{
padding: 5px;
}
a.tags{
border: 1px solid #9c8597;
background-color: rgba(173, 89, 147, 0.5);
color: white;
margin-right: 2px;
padding: 0 2px;
text-decoration:none;
}
a.tags:hover{
text-decoration:none;
color: blueviolet;
}
div#searchgroup input{
border: 0px;
background-color: rgba(251, 194, 233, 0.3);
}
div#searchgroup span{
border: 0px;
background-color: rgba(173, 89, 147, 0.5);
cursor: pointer;
}
.triangle-topleft {
width: 0;
height: 0;
border-top: 30px solid rgba(173, 89, 146, 0.8);
border-right: 30px solid transparent;
position: absolute;
}
.triangle-topleft i.icon{
position: relative;
top: -30px;
left: 3px;
}
.triangle-topleft i.gold{
color: gold;
}
.triangle-topleft i.coral{
color: coral;
}
.triangle-topleft i.silver{
color: silver;
}
.footer{
margin-top: 10px;
background-color: #9c8597!important;
font-size: 12px;
height: 40px;
line-height: 20px;
}
div.model_desc{
margin: 5px 0px;
}
.breadcrumb{
margin-top: 10px;
font-size: 12px;
background-color: rgba(173, 89, 147, 0.5);
}
.photo_title{
position: relative;
top: -45px;
margin-left: 5px;
margin-bottom: -30px;
}