<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css"/>
<style type="text/css">
.header{
background: pink;
height: 100px;
}
.navStyle{
background: lightblue;
}
.navStyle a{
color: white;
font-size: 16px;
}
.formMargin{
margin-top: 20px ;
margin-bottom: 20px ;
}
.divStyle{
background: lightgrey;
border-right:2px solid white;
}
.contentHeight{
height: 798px;
}
.footerStyle{
height: 100px;
background: #C12E2A;
}
.footerRowStyle{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row header">
<div class="col-md-2 col-md-offset-2">
<h1>WELCOME.COM</h1>
</div>
</div>
<div class="row navStyle">
<div class="col-md-8 col-md-offset-2">
<ul class="nav nav-justified">
<li><a href="">JAVA</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Jquery</a></li>
</ul>
</div>
</div>
<div class="row formMargin">
<div class="col-md-8 col-md-offset-3">
<form class="form-inline">
<div class="form-group">
<label>name</label>
<input type="text" class="form-control" placeholder="name"/>
</div>
<div class="form-group">
<label>password</label>
<input type="password" class="form-control" placeholder="password"/>
</div>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox"/>Remember me
</label>
</div>
<div class="form-group">
<button class="btn btn-info">Sign up</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 divStyle">
<div class="list-group">
<a class="list-group-item active">
JAVA
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
<div class="list-group">
<a class="list-group-item active">
JavaScript
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
<div class="list-group">
<a class="list-group-item active">
CSS
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
<div class="list-group">
<a class="list-group-item active">
Jquery
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
<div class="col-md-10 divStyle contentHeight">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<table class="table table-bordered table-hover">
<tr>
<th>属性</th>
<th>属性值</th>
<th>描述</th>
</tr>
<tr>
<td>background</td>
<td>colorName</td>
<td>背景色</td>
</tr>
<tr>
<td>background</td>
<td>colorName</td>
<td>背景色</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid footerStyle">
<div class="row footerRowStyle">
<div class="col-md-7 col-md-offset-3">
<ul class="list-inline">
<h4>友情链接</h4>
<li><a href="">上海尚学堂</a></li>
<li><a href="">百度</a></li>
<li><a href="">饿了么</a></li>
<li><a href="">美团外卖</a></li>
<li><a href="">饿了么</a></li>
<li><a href="">饿了么</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
使用bootstrap写的简单页面
猜你喜欢
转载自www.cnblogs.com/yxmgg/p/9131448.html
今日推荐
周排行