<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a:hover {
text-decoration: underline;
}
.head {
background: #101010;
height: 42px;
position: relative;
}
.head>ul {
width: 960px;
margin: 0 auto;
position: relative;
}
.head>ul>li {
line-height: 42px;
padding: 0 15px;
color: #9d9d9d;
}
.head>ul>li:hover {
color: white;
}
.head>ul>li:nth-child(1) {
font-size: 18px;
line-height: 42px;
}
.head>div {
position: absolute;
right: 20px;
top: 0;
color: #9d9d9d;
line-height: 42px;
}
.head>div:hover {
color: white;
}
.body {}
.bodyhead {
padding-top: 90px;
padding-bottom: 110px;
background: rgba(150, 0, 150, 1);
text-align: center;
}
.title {
font-size: 100px;
font-weight: 700;
line-height: 100px;
margin-top: 20px;
color: white;
}
.titletext {
color: white;
font-size: 30px;
font-weight: 200;
font-family: Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
line-height: 37.5px;
margin-bottom: 10px;
margin-top: 20px;
}
.titlebutton {
margin-top: 20px;
}
.titlebutton>p {
box-shadow: inset 0 -4px 0 #23527c;
margin-bottom: 15px;
}
.titlebutton>a {
color: hsla(0, 0%, 100%, .5);
}
.bodyheadplus {
background: #F5F5F5;
border-bottom: rgb(221, 221, 221) 1px solid;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
}
.bodyheadplus>a {
color: #555;
}
.bodyheadplus>span {
color: #AAA;
text-shadow: rgba(255, 255, 255, 1) 1px 1px 3px;
margin: 0 5px;
}
.c1 {
text-align: center;
}
.c1>h2 {
font-size: 42px;
font-weight: 500;
margin-top: 60px;
font-family: Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
}
.bodyshili {
padding: 4px;
}
h3 {
margin-top: 20px;
}
.caption{
text-align: center;
}
.caption>p{
margin-bottom: 10px;
color: #555;
font-size: 14px;
}
.bodybox>.row{
margin: 0 auto!important;
}
</style>
</head>
<body class="">
<div class="head container-fluid">
<ul class="row">
<li class="pull-left">
Bootstrap中文网
</li>
<li class="pull-left">
Bootstrap3中文文档
</li>
<li class="pull-left">
Bootstrap4中文文档
</li>
<li class="pull-left">
Less教程
</li>
<li class="pull-left">
jQuery API
</li>
<li class="pull-left">
网站实例
</li>
</ul>
<div class="pull-right">关于</div>
</div>
<div class="body">
<div class="bodyhead">
<div class="title">
<p>Bootstrap</p>
</div>
<div class="titletext">
<p>简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。</p>
</div>
<div class="titlebutton masthead-button-links">
<p class="btn btn-lg btn-primary btn-shadow">
Bootstrap3中文文档(v3.3.7)
</p>
<br />
<a href="#">
Bootstrap2中文文档(v2.3.2)
</a>
</div>
</div>
<div class="bodyheadplus">
<a href="#">Bootstrap问答社区</a>
<span>|</span>
<a href="#">新浪微博:@Bootstrap中文网</a>
</div>
<div class="bodybox container">
<div class="c1 page-header">
<h2>Bootstrap相关优质项目推荐</h2>
<p>这些项目或者是对Bootstrap进行了有益的补充,或者是基于Bootstrap开发的</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail bodyshili" style="height: 352px;">
<img class="lazy" src="https://s2.ax1x.com/2019/09/11/nw0wHH.png" width="300" height="150" />
<div class="caption">
<h3>
<a>优站精选<br><small> Bootstrap 网站实例</small></a>
</h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail bodyshili" style="height: 352px;">
<img class="lazy" src="https://s2.ax1x.com/2019/09/11/nw0wHH.png" width="300" height="150" />
<div class="caption">
<h3>
<a>优站精选<br><small> Bootstrap 网站实例</small></a>
</h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail bodyshili" style="height: 352px;">
<img class="lazy" src="https://s2.ax1x.com/2019/09/11/nw0wHH.png" width="300" height="150" />
<div class="caption">
<h3>
<a>优站精选<br><small> Bootstrap 网站实例</small></a>
</h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail bodyshili" style="height: 352px;">
<img class="lazy" src="https://s2.ax1x.com/2019/09/11/nw0wHH.png" width="300" height="150" />
<div class="caption">
<h3>
<a>优站精选<br><small> Bootstrap 网站实例</small></a>
</h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail bodyshili" style="height: 352px;">
<img class="lazy" src="https://s2.ax1x.com/2019/09/11/nw0wHH.png" width="300" height="150" />
<div class="caption">
<h3>
<a>优站精选<br><small> Bootstrap 网站实例</small></a>
</h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail bodyshili" style="height: 352px;">
<img class="lazy" src="https://s2.ax1x.com/2019/09/11/nw0wHH.png" width="300" height="150" />
<div class="caption">
<h3>
<a>优站精选<br><small> Bootstrap 网站实例</small></a>
</h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
day7
最新推荐文章于 2021-08-06 14:53:30 发布