记一次前端页面制作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.nav-pills>li.active,
.nav-pills>li.active>a,
.nav-pills>li.active:focus,
.nav-pills>li.active:hover {
color: #fff;
background-color: #4370ec
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #4370ec
}
.nav>li>a {
color: #333;
font-size: 18px;
font-weight: 800;
}
.nav>li>p {
font-size: 15px;
padding: 10px 15px;
}
.nav>li>a>label {
float: right;
font-size: 25px;
font-weight: 100;
}
.thumbnail {
background-color: #f3f3f3;
width: 100%;
}
.thumbnail:focus,
.thumbnail:hover {
background-color: #fff;
}
.botton_block {
display: block;
}
.botton_none {
display: none;
}
.line-limit-length {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
display: inline-block;
width: 40px;
height: 40px;
background-color: #eee;
}
</style>
<script type="text/javascript">
$(function($) {
/**
* 替換文本和按鈕
*/
$(".thumbnail").on("mouseenter", botton_change);
$(".thumbnail").on("mouseleave", botton_change);
/**
* 切換顯示標籤
*/
$(".target").on("click", function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
});
/**
* 光標懸停/離開時切換顯示
*/
function botton_change() {
var none = $(this).find(".botton_none");
var block = $(this).find(".botton_block");
$(none).addClass("botton_block");
$(none).removeClass("botton_none");
$(block).addClass("botton_none");
$(block).removeClass("botton_block");
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="span2">
<ul class="nav nav-pills nav-stacked">
<li class="active target"><a href="#">生產應用類<label>></label></a>
<p class="line-limit-length">請輸入文本請輸入文本請輸入文本請輸入文本請輸入文本請輸入文本</p>
</li>
<li class="target"><a href="#">生產服務類<label>></label></a>
<p class="line-limit-length">請輸入文本</p>
</li>
<li class="target"><a href="#">生產報表類<label>></label></a>
<p class="line-limit-length">請輸入文本</p>
</li>
<li class="target"><a href="#">自動化系統<label>></label></a>
<p class="line-limit-length">請輸入文本</p>
</li>
<li class="target"><a href="#">工业手机App<label>></label></a>
<p class="line-limit-length">請輸入文本</p>
</li>
<li class="target"><a href="#">IOT各系统<label>></label></a>
<p class="line-limit-length">請輸入文本</p>
</li>
<li class="target"><a href="#">内部管理类<label>></label></a>
<p class="line-limit-length">請輸入文本</p>
</li>
<li class="target"><a href="#">查看全部系統</a>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div class="col-md-4">
<div class="thumbnail" align="center">
<img src="./imgs/baidu.png" style="max-width:100%;" />
<div class="caption">
<h3>缩略图标签</h3>
<div class="botton_block" style="height: 40px;">
<p class="line-limit-length">一些示例文本。一些示例文本。</p>
</div>
<div class="botton_none" style="height: 40px;">
<a href="#" class="btn btn-primary btn-none" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" align="center">
<img src="./imgs/baidu.png" style="max-width:100%;" />
<div class="caption">
<h3>缩略图标签</h3>
<div class="botton_block" style="height: 40px;">
<p class="line-limit-length">一些示例文本。一些示例文本。</p>
</div>
<div class="botton_none" style="height: 40px;">
<a href="#" class="btn btn-primary btn-none" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" align="center">
<img src="./imgs/baidu.png" style="max-width:100%;" />
<div class="caption">
<h3>缩略图标签</h3>
<div class="botton_block" style="height: 40px;">
<p class="line-limit-length">一些示例文本。一些示例文本。</p>
</div>
<div class="botton_none" style="height: 40px;">
<a href="#" class="btn btn-primary btn-none" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" align="center">
<img src="./imgs/baidu.png" style="max-width:100%;" />
<div class="caption">
<h3>缩略图标签</h3>
<div class="botton_block" style="height: 40px;">
<p class="line-limit-length"> 一些示例文本。一些示例文本。</p> </div> <div class="botton_none" style="height: 40px;">
<a href="#" class="btn btn-primary btn-none" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" align="center">
<img src="./imgs/baidu.png" style="max-width:100%;" />
<div class="caption">
<h3>缩略图标签</h3>
<div class="botton_block" style="height: 40px;">
<p class="line-limit-length">一些示例文本。一些示例文本。</p>
</div>
<div class="botton_none" style="height: 40px;">
<a href="#" class="btn btn-primary btn-none" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" align="center">
<img src="./imgs/baidu.png" style="max-width:100%;" />
<div class="caption">
<h3>缩略图标签</h3>
<div class="botton_block" style="height: 40px;">
<p class="line-limit-length">一些示例文本。一些示例文本。</p>
</div>
<div class="botton_none" style="height: 40px;">
<a href="#" class="btn btn-primary btn-none" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" align="center">
<img src="./imgs/baidu.png" style="max-width:100%;" />
<div class="caption">
<h3>缩略图标签</h3>
<div class="botton_block" style="height: 40px;">
<p class="line-limit-length">一些示例文本。一些示例文本。</p>
</div>
<div class="botton_none" style="height: 40px;">
<a href="#" class="btn btn-primary btn-none" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" align="center">
<img src="./imgs/baidu.png" style="max-width:100%;" />
<div class="caption">
<h3>缩略图标签</h3>
<div class="botton_block" style="height: 40px;">
<p class="line-limit-length">一些示例文本。一些示例文本。</p>
</div>
<div class="botton_none" style="height: 40px;">
<a href="#" class="btn btn-primary btn-none" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" align="center">
<img src="./imgs/baidu.png" style="max-width:100%;" />
<div class="caption">
<h3>缩略图标签</h3>
<div class="botton_block" style="height: 40px;">
<p class="line-limit-length">一些示例文本。一些示例文本。</p>
</div>
<div class="botton_none" style="height: 40px;">
<a href="#" class="btn btn-primary btn-none" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</div>
</div>
</div>
</div>
<div align="center" class="col-md-3">
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
</div>
<div align="center" class="col-md-6">
</div>
<div align="center" class="col-md-3">
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</body>
</html>