Страница 4 из 9
</ul>
</li>
<li> <a href=«#»> Contacts </a> </li>
</ul>
</div>
</div>
</nav>
</div>
<a name=«top»> </a>
<div class=«row»>
<div class=«col-sm-6 text-center»>
<h1> <a href="/"> </a> </h1>
<p> </p>
</div>
<div class=«col-sm-4 pull-right»>
<script>
(function () {
var cx = «»;
var gcse = document.createElement (’script’);
gcse. type = ’text/javascript’;
gcse.async = true;
gcse.src = (document.location.protocol == ’https:'? ’https:': ’http:») +
'//cse.google.com/cse. js? cx=' + cx;
var s = document.getElementsByTagName (’script’) [0];
s.parentNode.insertBefore (gcse, s);
}) ();
</script>
<gcse: searchbox-only> </gcse: searchbox-only>
</div>
<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>
Таким образом, исключим из шаблона все фоновые изображения, которые могут создавать горизонтальную прокрутку, заменим фоновые изображения на CSS градиенты.
Обернем контент и подвал в класс. 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 – >
<p>
</p>
</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> </p>
<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/>
<p>
© 2016 <strong> </strong>
<strong> [email protected] </strong>
</p>
</div>
</div>
</div>
<! – /footer-outer – >
Bootstrap Text/Typography
По умолчанию, глобальный размер шрифта Bootstrap, применяемый к тегу <body> и ко всем тегам <p>, является 14px, с высотой линии 1.428.
Кроме того, все <p> элементы имеют нижний margin-отступ, равный половине компьютерной высоте строки (10px по умолчанию).
Bootstrap заголовки <h1> – <h6> имеют следующий размер:
h1 – 36px
h2 – 30px
h3 – 24px
h4 – 18px
h5 – 14px
h6 – 12px
Для добавления вспомогательных заголовков используется тег <small>, который устанавливает размер шрифта 85%:
<h1> h1 heading <small> secondary text </small> </h1>
С помощью класса class = «lead» можно слегка увеличить размер шрифта параграфа:
<p class = «lead»> This is an example paragraph demonstrating the use of lead body copy. </p>