Bootstrap: Быстрое создание современных сайтов
Шрифт:
<style>
.gsc-search-button {
display: none;
}
.gsib_a {
height:40px;
}
.gsc-input-box {
height: 40px;
}
</style>
<div style=«height:15px; background: black;" class=«col-sm-12»>
</div>
</div>
</div>
Уберем боковую панель и свой файл CSS, вместо него добавим CSS стили:
<style>
body {
font-size:18px;
font-famile: Georgia;
color: #000;
margin: 0;
padding: 0;
background: gray;
}
.header {
/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+4,fdffff+7,fdffff+7,e1ffff+17,e6f8fd+28,c8eefb+47,bee4f8+68,b1d8f5+100 */
background: #e1ffff; /* Old browsers */
background: -moz-linear-gradient (top, #e1ffff 0%, #e1ffff 4%, #fdffff 7%, #fdffff 7%, #e1ffff 17%, #e6f8fd 28%, #c8eefb 47%, #bee4f8 68%, #b1d8f5 100%); /* FF3.6—15 */
background: -webkit-linear-gradient (top, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* Chrome10—25,Safari5.1—6 */
background: linear-gradient (to bottom, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#e1ffff’, endColorstr=«#b1d8f5», GradientType=0); /* IE6—9 */
}
.inverse-dropdown {
background-color: black;
}
.inverse-dropdown li a {
color: white;
}
.inverse-dropdown li a: hover {
color: black;
}
.content {
background: lightgrey;
}
.footer {
/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+86,207cca+93,7db9e8+100 */
background: #1e5799; /* Old browsers */
background: -moz-radial-gradient (center, ellipse cover, #1e5799 0%, #2989d8 86%, #207cca 93%, #7db9e8 100%); /* FF3.6—15 */
background: -webkit-radial-gradient (center, ellipse cover, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* Chrome10—25,Safari5.1—6 */
background: radial-gradient (ellipse at center, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#1e5799», endColorstr=«#7db9e8», GradientType=1); /* IE6—9 fallback on horizontal gradient */
}
.navigation {
margin: 10px 20px; padding-bottom: 10px;
width: 560px;
}
.navigation a: link,
.navigation a: visited {
float: left;
display: block;
margin: 10px 10px 0 0;
padding: 5px 7px;
text-transform: lowercase;
text-decoration: none;
font-weight: bold;
color: #fff;
background: #2C76A6;
border-width: 1px;
border-style: solid;
border-color: #86BBDF #245F86 #245F86 #86BBDF;
}
.navigation a: hover {
background: #FF3399;
border-width: 1px;
border-style: solid;
border-color: #FF75BA #EA0075 #EA0075 #FF75BA;
}
</style>
Таким
Обернем контент и подвал в класс. container и используем Bootstrap Grid System.
<! – content-outer – >
<div class=«container content»>
<div class=«row»>
<div class=«col-sm-11 col-md-offset-1»>
<span class=«pull-right»>
<img src="/file/theme/add.jpg» alt=«» width=200/>
</span>
<div style=«padding-top:50px;»>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle. js»> </script>
<! – adds – >
</script>
</div>
</div>
</div>
<div class=«row»>
<div class=«col-sm-10»>
<! – content – >
</div>
</div>
</div>
<! – /content-out – >
<! – footer-outer – >
<div class=«container footer»>
<p style=«position: fixed; bottom: 12px; right: 5px; opacity: 1; cursor: pointer;"> <a href=«#top» style=«color: white;"> Top </a>
<div class=«row»>
<div class=«col-*-* text-center»>
<script type=«text/javascript» src="//yandex.st/share/share. js» charset=«utf-8»> </script>
</div>
<div class=«row» style=«color: darkblue;»>
<div class=«col-*-* text-center»>
<br/>
© 2016 <strong> </strong>
<strong> [email protected] </strong>
</div>
</div>
</div>
<! – /footer-outer – >