day7

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值