全页式网站 练习代码暂存
运用Bootstrap创建了一个homework网页。
homework.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
<link href="homework.css" rel="stylesheet">
</head>
<body>
<div class="side-nav" role="navigation">
<ul class="nav-side-nav">
<li><a class="tooltip-side-nav" href="#onepage"></a></li>
<li><a class="tooltip-side-nav" href="#twopage"></a></li>
<li><a class="tooltip-side-nav" href="#threepage"></a></li>
<li><a class="tooltip-side-nav" href="#fourpage"></a></li>
<li><a class="tooltip-side-nav" href="#fivepage"></a></li>
</ul>
</div>
<div class="onepage">
<div class="onepage-bg" id="onepagebg"></div>
<div class="container">
<div class="row">
<div class="title-text">
<div class="col-md-12 headfontsize">
<h1 class="headh1content">
河海大学<br>
在这里你什么<br>都得不到
</h1>
<p style="margin-top: 50px;line-height: 33px">Just give up</p>
<p class="btn-app-store">
<a class="btn btn-success btn-lg" href="#">立即注册，开始学习</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="twopage">
<div class="twopage-text">
<h1 class="twopage-text-h1">
选择你的第一节课<img src="hhu.jpg" style="height: 100px;width: 100px">
</h1>
</div>
<div class="row">
<div class="twopage-courses col-md-4">
<a href="#">
<img src="aj-2.jpg" style="height: 400px;width: 480px">
<div class="classicon">
<h3>认真学习</h3>
<h1><strong>学习这个课程</strong></h1>
</div>
</a>
</div>
<div class="twopage-courses col-md-4">
<a href="#">
<img src="aj-2.jpg" style="height: 400px;width: 480px">
<div class="classicon">
<h3>认真学习</h3>
<h1><strong>学习这个课程</strong></h1>
</div>
</a>
</div>
<div class="twopage-courses col-md-4">
<a href="#">
<img src="aj-2.jpg" style="height: 400px;width: 480px">
<div class="classicon">
<h3>认真学习</h3>
<h1><strong>学习这个课程</strong></h1>
</div>
</a>
</div>
<div class="twopagebtn">
<a id="twopage-easy" href="#" class="btn btn-success btn-lg">如果想学习，快来加入吧</a>
</div>
</div>
</div>
<div class="threepage">
<div class="threepage-bg" id="threepagebg">
<div class="threepagecontent">
<div class="threepagetext">
<h1>为什么要学习</h1>
<p>学习不如跳舞 不如开黑 不如打球</p>
</div>
<a href="#" class="btn btn-success btn-lg threepagebtncontent">快速注册找对象</a>
</div>
</div>
</div>
<div class="fourpage">
<div class="container" style="width:70%">
<div class="coursexingqing-text">
<h1>你可能上了假大学</h1>
<p>不，就是上了假大学——河海大学</p>
</div>
<div id="carousel-example-generic" class="carousel slide" data-interval="5000" style="height:300px">
<ol class="carousel-indicators" style="margin-top: 200px">
<li data-target="#carousel-example-generic" data-slide="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="width: 300px;height: 300px;">
<img src="aj-2.jpg">
</div>
<div class="item" style="width: 300px;height: 300px;">
<img src="aj-2.jpg">
</div>
<div class="item" style="width: 300px;height: 300px;">
<img src="aj-2.jpg">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div class="fivepage">
<div class="fivepage-bg" id="fivepage">
<div class="container">
<div class="footertext">
<h1>还不快点退学</h1>
</div>
<div class="footerbtncenter">
<div class="row">
<a href="#">
<div class="col-md-4">
<img src="aj.jpg" class="footerbtn queyeicon">
</div>
</a>
<a href="#">
<div class="col-md-4">
<img src="aj.jpg" class="footerbtn queyeicon">
</div>
</a>
<a href="#">
<div class="col-md-4">
<img src="aj.jpg" class="footerbtn queyeicon">
</div>
</a>
</div>
</div>
<div class="footertextbtn">
<button type="button" class="btn btn-success btn-lg" style="font-size: 25px">
再看，再看挂你数据结构
</button>
<p class="footertextbtn-text">
学计算机，到河海，河海计算机与信息学院欢迎你
</p>
</div>
</div>
</div>
</div>
</body>
</html>homework.css:
h1,h3,p,a.button{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.side-nav{
position: fixed;
top:45%;
right: 20px;
z-index: 1;
}
.side-nav ul.side-nav-side-nav{
text-align: center;
list-style: none;
margin: 0px;
padding-left: 0px;
}
.side-nav .ul.side-nav-side-nav >li{
display: block;
line-height: 1.45em;
margin: 0px;
padding: 8px 0;
}
.side-nav .ul.side-nav-side-nav >li >a{
display: block;
width: 10px;
height: 10px;
border-radius:50% ;
background: #ffffff;
}
.onepage{
height: 750px;
}
.onepage-bg{
height: 800px;
width: 100%;
position: absolute;
background-position: center center;
background-size:cover ;
}
#onepagebg{
background-image: url("背景1.jpg");
}
.headh1content{
margin-top: 150px;
line-height: 75px;
}
.title-text{
margin-left: 50px;
}
.headfontsize h1{
font-size:50pt;
color: #ffffff;
}
.headfontsize p{
color: #ffffff;
}
.twopage{
padding: 2px 0 0 2px;
height: 750px;
background-image: url("背景2.jpg");
position: relative;
background-repeat: no-repeat;
background-size: cover;
}
.twopage-text{
width: 100%;
text-align: center;
}
.twopage-text-h1{
margin-left: 120px;
letter-spacing: 2px;
margin-top: 80px;
margin-bottom: 0px;
padding: 20px 0 0 0 ;
}
.twopage-text-h1 img{
width: 120px;
margin-top: -20px;
}
.twopage .row{
margin-right: 0px;
margin-left: 0px;
margin-top: 50px;
}
.twopage-courses{
float: left;
padding: 0 2px 2px 0;
position: relative;
overflow: hidden;
}
.twopage-courses >a{
width: 100%;
height: 100%;
float: left;
text-align: center;
position: relative;
}
.classicon h3{
margin-top: 120px;
color: #d1e973;
}
.classicon h1{
color: #fff5e1;
}
.classicon{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
}
.classicon:hover{
background: #1eb450;
opacity: 0.9;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
}
.twopagebtn{
width: 100%;
margin: 0% auto;
text-align: center;
}
.twopagebtn .btn-lg{
font-size: 25px;
}
#twopage-easy{
margin: 50px 150px 0;
margin-bottom: 100px ;
}
.threepage{
position: absolute;
width: 100%;
height: 800px;
}
.threepage-bg{
position: absolute;
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#threepagebg{
background-image: url("背景3.jpg");
}
.threepagecontent{
width: 100%;
margin: 0 auto;
text-align: center;
}
.threepagetext{
margin-top: 100px;
}
.threepage p{
margin-top: 20px;
color: #ffffff;
font-size: 20px;
line-height:32px ;
}
.threepagebtncontent{
margin-top: 450px;
font-size: 25px;
}
.fourpage{
height: 750px;
background-image: url("背景4.jpg");
margin-top: 800px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.coursexingqing-text{
color: #ffffff;
margin-top: 100px;
width: 100%;
text-align: center;
}
.coursexingqing-text p{
margin-top: 25px;
font-size: 20px;
}
.fourpage .container .carousel{
margin-top: 100px;
}
.carousel-control.left{
background-image: -webkit-linear-gradient(left,rgba(0,0,0,0)0,rgba(0,0,0,0) 100%);
background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-repeat: repeat-x;
}
.carousel-control.right{
right: 0px;
left: auto;
background-image: -webkit-linear-gradient(left,rgba(0,0,0,0)0,rgba(0,0,0,0) 100%);
background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-repeat: repeat-x;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{
left: -20%;
}
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev{
right: -20%;
}
.fivepage-bg{
height: 750px;
width: 100%;
position: absolute;
background-position: center center;
background-size: cover;
}
#fivepage{
background-image: url("背景5.jpg");
}
.footertext{
margin-top: 55px;
width: 100%;
color: #ffffff;
font-size: 20px;
text-align: center;
}
.footerbtncenter{
margin-top: 100px;
text-align: center;
}
.queyeicon{
width: 200px;
}
.queyeicon:hover{
border: 2px solid #d9edf7;
}
.footertextbtn{
margin-top: 150px;
width: 100%;
text-align: center;
}
.footerbtn-text{
margin-top: 20px;
color: #000000;
}
demo.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
<link href="demo.css" rel="stylesheet">
</head>
<body>
<div class="myheading">
<nav class="navbar navbar-inverse">
<!--黑色为inverse-->
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="hhu.jpg" style="width: 30px;height: 30px;margin-top: -5px" >
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li ><a href="#">首页</a></li>
<li ><a href="#">首页</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="mybody container">
<div class="row1">
<div class="leftmenu col-md-3 col-sm-5">
<div class="list-group">
<a href="#" class="list-group-item active">条目</a>
<a href="#" class="list-group-item">条目</a>
<a href="#" class="list-group-item">条目</a>
<a href="#" class="list-group-item">条目</a>
<a href="#" class="list-group-item">条目</a>
<a href="#" class="list-group-item">条目</a>
<a href="#" class="list-group-item">条目</a>
<a href="#" class="list-group-item">条目</a>
<a href="#" class="list-group-item">条目</a>
</div>
</div>
</div>
<div class="content col-md-9 col-sm-7">
<ol class="breadcrumb">
<li><a href="#">目录1</a></li>
<li><a href="#">目录2</a></li>
<li class="active">目录3</li>
</ol>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>2016年7月25日</td>
<td>Vodka</td>
<td><a href="#">详细</a></td>
</tr>
<tr>
<td>2016年7月25日</td>
<td>Vodka</td>
<td><a href="#">详细</a></td>
</tr>
<tr>
<td>2016年7月25日</td>
<td>Vodka</td>
<td><a href="#">详细</a></td>
</tr>
<tr>
<td>2016年7月25日</td>
<td>Vodka</td>
<td><a href="#">详细</a></td>
</tr>
<tr>
<td>2016年7月25日</td>
<td>Vodka</td>
<td><a href="#">详细</a></td>
</tr>
<tr>
<td>2016年7月25日</td>
<td>Vodka</td>
<td><a href="#">详细</a></td>
</tr>
<tr>
<td>2016年7月25日</td>
<td>Vodka</td>
<td><a href="#">详细</a></td>
</tr>
</tbody>
</table>
<nav class="pull-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="myfooter">
<p>@Vodka：https://hhu1506010220.github.io</p>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="bootstrap.min.css"></script>
<script>
$(".navbar-nav a").click(function(e){
$(this).tab("show");
})
</script>
</body>
</html>demo.css:
.myheading{
background-color:#333 ;
}
.myfooter{
padding-top: 20px;
padding-bottom: 20px;
margin-top: 50px;
color: #767676;
text-align: center;
border-top: 1px solid #e5e5e5;
}
海康威视公司氛围 287人发布
投递好未来等公司6个岗位 >