0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>BUNNY'S WEBSITE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/chiru.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<style>
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
padding-top: 100px;
text-align: center;
background: #fff;
}
.services-section {
height: 100%;
padding-top: 100px;
text-align: center;
background: #eff5f5;
}
.contact-section {
height: 100%;
padding-top: 100px;
text-align: center;
background: #eee;
}
.footer-section {
padding-top: 100px;
text-align: center;
background: #fff;
}
</style>
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-
target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Seminar
Support</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling --
>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about
link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#intro">Home</a>
</li>
<li>
<a class="page-scroll"
href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#Topics">Topics</a>
</li>
<li>
<a class="page-scroll"
href="#contact">ContactUs</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user">
</span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in">
</span> Login</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container text-center">
<h1>Let’s Make The Best Presentation</h1>
<p>make a better presentation | know latest topics | know tips</p>
<button type="button" class="btn btn-primary">Get Started</button>
<a href="#">Learn more</a><br/>
<img src="E:\html\Project\fonts\sslogo.png" alt="Cinque Terre" width="270"
height="200">
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="lecture text-center">
<span class="process-icon ilecture"> </span>
<h2>Lecture</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<p>
<button type="button" class="btn"> Read More </button>
</div>
</div>
<div class="col-sm-3">
<div class="Tip’s text-center">
<span class="process-icon iTip’s"> </span>
<h2>Tip’s</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<p>
<button type="button" class="btn"> Read More </button>
</div>
</div>
<div class="col-sm-3">
<div class="Ppt’s text-center">
<span class="process-icon iPpt’s"> </span>
<h2>Ppt’s</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<p>
<button type="button" class="btn"> Read More </button>
</div>
</div>
<div class="col-sm-3">
<div class="Topic’s text-center">
<span class="process-icon iTopic’s"> </span>
<h2>Topic’s</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<p>
<button type="button" class="btn"> Read More </button>
</div>
</div>
</div>
</section>
<!-- lecture tips ppts topics -->
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2 class="section-heading">Contact Us</h2>
<h3 class="section-subheading text-muted">We are always
ready to help you</h3>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6">
'
<div class="form-group">
<input type="text" class="form-control"
placeholder="Your Name *" id="name" required data-validation-required-
message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control"
placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control"
placeholder="Your Phone *" id="phone" required data-validation-required-
message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control"
placeholder="Your Message *" id="message" required data-validation-required-
message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-12 text-center">
<div id="success"></div>
<button type="submit" class="btn btn-xl">Send
Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer id="footer" class="footer-section">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<ul class="footer-links list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">AboutUs</a></li>
<li><a href="#">Topics</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">ContactUs</a></li>
</ul>
<div>
<button type="button" href="#" class="btn btn-primary twitter"><span
class="social-sprite twitter"> </span>Follow us on Twitter</button>
<button type="button" href="#" class="btn btn-primary facebook"><span
class="social-sprite twitter"> </span>Like us on Facebook</button>
</div>
<small> © <a href="#">Seminar Support</a> 2016</small>
</div>
</div>
</footer>
</body>
</html>
請重新格式化您的問題。我不會讀這個。 –
代碼格式非常糟糕，如果您還可以提供屏幕截圖，這將會很有幫助。 –
我在特定div區塊中提供的內容超出了該區塊，並進入了移動視圖中的下一個區塊。因此，我試圖增加CSS的高度百分比，然後在桌面視圖中，該div塊的剩餘空間將爲空。任何人都可以幫助我解決這個問題，請。 – user559392