-1
在这一个页面的网站我aboutus和联系人没有采取我需要的全部宽度和高度。更多的建议更welcome.how关于服务和联系页面时收缩顶部导航栏。全宽查询和缩小
/*!
* Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
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;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.about {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.services{
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.contact {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>ITspectra</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/carousel-3d.js" ></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link href="css/scrolling-nav.css" rel="stylesheet">
<style>
#wrapper {
width: 100%;
height:100%;
background-color: tan;
float:left;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color:black;
width:100%;
height:110px;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
ul.nav.navbar-nav {
margin-left: 36%;
margin-top: 22px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
@media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
<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" href="index.php"><img src="its.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="service.php">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<div id="wrapper">
<div data-carousel-3d >
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d//images/left.png" data-carousel-3d-left />
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d/images/right.png" data-carousel-3d-right />
<ul data-carousel-3d-children>
<li><img src="https://unsplash.it/640/420?image=628" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=633" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=626" /></li>
<li selected><img src="https://unsplash.it/640/420?image=629" /></li>
</ul>
</div>
</div>
<div class="container-fluid text-center">
<h3>Welcome to IT Spectra</h3><br>
<p id="ccont">IT Spectra excels in providing custom software and
mobile apps that match your specications, which is
just one of its many advantages: Extensive Team of experienced
professionals. 15+ years of IT experience.
Unique Ideas Expand skilled resources. Well within
budget and time constraints. Gain competitive advantage
in the market..</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="about">
\t <h2>About Us</h2>
<p id="fcont">IT Spectra excels in providing
custom software and mobile apps
that match your specifications,
which is just one of its many
advantages</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="services">
\t <h2>Company</h2>
<p id="fcont">Company Overview
Meet The Team
Our Awesome Partners
Our Services</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="contact">
\t <h2>Address</h2>
<p>IT SPECTRA<br/>
Flat-1A,1st Floor,<br/>
Plot No.38,James Street,<br/>
Ram Nagar-North,<br/>
Madippakkam,Chennai-91.</br>
Phone : 044 - 4957 7990<br/>
E-mail : [email protected]<br/>
Web : www.itspectra</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
减少填充。 – raven
即使我删除填充其不工作 – sudharsan