SOURCE

console 命令行工具 X clear

                    
>
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>
    </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;
}

本项目引用的自定义外部资源