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