П.2 Исходный код страницы «Новости» 

Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

КАТЕГОРИИ:

Археология
Биология
Генетика
География
Информатика
История
Логика
Маркетинг
Математика
Менеджмент
Механика
Педагогика
Религия
Социология
Технологии
Физика
Философия
Финансы
Химия
Экология

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

П.2 Исходный код страницы «Новости»

⇐ ПредыдущаяСтр 9 из 9


<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

<head>

<title>Б.А.М. Автомойка</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<link rel="stylesheet" type="text/css" href="reset.css" />

<link rel="stylesheet" type="text/css" href="style.css" />

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

<script src="js/carouFredSel/jquery.carouFredSel-6.2.1.js" type="text/javascript"></script>

<script src="js/scripts.js" type="text/javascript"></script>

</head>

<body>

<div class="all">

<div class="header">

<a href="#"><img class="logo" src="img/logo.png" alt="logo"></a>

<div class="phone_number">

<span class="number">+7(777)</span>

<span class="number_bold">370-23-39</span>

<span class="number">+7(727)</span>

<span class="number_bold">354-04-19</span>

</div>

<div class="contacts">

<div class="section">

<a href="info@bam69.ru"><span class="mail">info@bam69.ru</span></a>

<a href="#"><span class="search">Мы на карте</span></a>

</div>

<div class="section">

<span class="address">г. Тверь Вагжанова 11 (территория таксопарка)</span>

<div class="social">

<a href="#"><img src="img/twitter.png" alt="twitter"/></a>

<a href="#"><img src="img/facebook.png" alt="facebook"/></a>

<a href="#"><img src="img/vk.png" alt="vk"/></a>

</div>

</div>

</div>

</div>

<div class="menu">

<ul>

<li><a href="#">Главная</a></li>

<li><a href="#">О компании</a></li>

<li><a href="#">Услуги и цены</a></li>

<li><a href="#">Отзывы</a></li>

<li><a href="#">Блог</a></li>

<li><a href="#">Контакты</a></li>

</ul>

</div>

<div class="wrapper">

<div class="content">

<div class="news_block">

<div class="news">

<img src="img/news_pic.jpg" alt="news_pic"/>

<h3>Купе ATS от Cadillac</h3>

<p>Горячая новинка! Продажи двухдверки начнутся в США со дня на день, а к нам её привезли для прощупывания почвы, так как решение о поставках ещё...</p>

</div>

<a href="#"><span class="button">подробнее...</span></a>

</div>

<div class="news_block">

<div class="news">

<img src="img/news_pic.jpg" alt="news_pic"/>

<h3>Купе ATS от Cadillac</h3>

<p>Горячая новинка! Продажи двухдверки начнутся в США со дня на день, а к нам её привезли для прощупывания почвы, так как решение о поставках ещё...</p>

</div>

<a href="#"><span class="button">подробнее...</span></a>

</div>

<div class="news_block">

<div class="news">

<img src="img/news_pic.jpg" alt="news_pic"/>

<h3>Купе ATS от Cadillac</h3>

<p>Горячая новинка! Продажи двухдверки начнутся в США со дня на день, а к нам её привезли для прощупывания почвы, так как решение о поставках ещё...</p>

</div>

<a href="#"><span class="button">подробнее...</span></a>

</div>

<div class="news_block">

<div class="news">

<img src="img/news_pic.jpg" alt="news_pic"/>

<h3>Купе ATS от Cadillac</h3>

<p>Горячая новинка! Продажи двухдверки начнутся в США со дня на день, а к нам её привезли для прощупывания почвы, так как решение о поставках ещё...</p>

</div>

<a href="#"><span class="button">подробнее...</span></a>

</div>

<div class="news_block">

<div class="news">

<img src="img/news_pic.jpg" alt="news_pic"/>

<h3>Купе ATS от Cadillac</h3>

<p>Горячая новинка! Продажи двухдверки начнутся в США со дня на день, а к нам её привезли для прощупывания почвы, так как решение о поставках ещё...</p>

</div>

<a href="#"><span class="button">подробнее...</span></a>

</div>

<div class="news_block">

<div class="news">

<img src="img/news_pic.jpg" alt="news_pic"/>

<h3>Купе ATS от Cadillac</h3>

<p>Горячая новинка! Продажи двухдверки начнутся в США со дня на день, а к нам её привезли для прощупывания почвы, так как решение о поставках ещё...</p>

</div>

<a href="#"><span class="button">подробнее...</span></a>

</div>

<div class="news_block">

<div class="news">

<img src="img/news_pic.jpg" alt="news_pic"/>

<h3>Купе ATS от Cadillac</h3>

<p>Горячая новинка! Продажи двухдверки начнутся в США со дня на день, а к нам её привезли для прощупывания почвы, так как решение о поставках ещё...</p>

</div>

<a href="#"><span class="button">подробнее...</span></a>

</div>

<div class="news_block">

<div class="news">

<img src="img/news_pic.jpg" alt="news_pic"/>

<h3>Купе ATS от Cadillac</h3>

<p>Горячая новинка! Продажи двухдверки начнутся в США со дня на день, а к нам её привезли для прощупывания почвы, так как решение о поставках ещё...</p>

</div>

<a href="#"><span class="button">подробнее...</span></a>

</div>

</div>

<div class="counter">

<img src="img/left2.png" alt="left2"/>

<ul>

<li>1</li>

<li class="activ">2</li>

<li>3</li>

<li>4</li>

</ul>

<img src="img/right2.png" alt="right2"/>

</div>

</div>

</div>

<div class="footer">

<div class="menu_footer">

<ul>

<li><a href="#">Главная</a></li>

<li><a href="#">О компании</a></li>

<li><a href="#">Услуги и цены</a></li>

<li><a href="#">Отзывы</a></li>

<li><a href="#">Блог</a></li>

<li><a href="#">Контакты</a></li>

</ul>

</div>

<div class="dev">

<div class="copy">

<span>Сайт разработан в студии</span>

<img src="img/logicloud.png" alt="logicloud"/>

</div>

<div class="social">

<a href="#"><img src="img/twitter.png" alt="twitter"/></a>

<a href="#"><img src="img/facebook.png" alt="facebook"/></a>

<a href="#"><img src="img/vk.png" alt="vk"/></a>

</div>

<div class="phone_number">

<span class="number">+7(777)</span>

<span class="number_bold">370-23-39</span>

<span class="number">+7(727)</span>

<span class="number_bold">354-04-19</span>

</div>

<div class="section">

<a href="info@bam69.ru"><span class="mail">info@bam69.ru</span></a>

<a href="#"><span class="search">Мы на карте</span></a>

</div>

</div>

</div>

</body>

</html>

П.3. Исходный код Style.css

body, html{

font-size: 16px;

font-family: MyFont;

width: 100%;

height: 100%;

line-height: 20px;

background-image: url(img/background.jpg);

background-size: 100%;

-o-background-size: 100%;

-moz-background-size: 100%;

-ms-background-size: 100%;

-webkit-background-size: 100%;

}

@font-face {

font-family: MyFont;

src: url(font/MyFont.otf);

}

a{

text-decoration: none;

}

a:hover{

cursor: pointer;

}

input, textarea{

font-family: MyFont;

}

.wrapper{

min-height: 300px;

height: 100%;

}

.wrapper,.header,.menu ul,.menu_footer ul,.dev{

width: 1000px;

margin: auto;

}

.prosperity,.content{

width: 1000px;

float: left;

}

.logo{

width: 150px;

float: left;

padding: 20px 30px;

}

.header.phone_number{

width: 200px;

float: left;

margin: 30px 90px 20px 90px;

}

.number,.number_bold{

font-weight: bold;

float: left;

}

.number_bold{

font-size: 28px;

margin: 3px 0 3px 5px;;

color: #185ca1;

}

.contacts{

width: 410px;

float: left;

}

.mail{

float: left;

color: #185ca1;

margin-top: 5px;

font-weight: bold;

}

.search{

background-image: url(img/parallelogram.png);

background-size: 100% 100%;

-o-background-size: 100% 100%;

-moz-background-size: 100% 100%;

-ms-background-size: 100% 100%;

-webkit-background-size: 100% 100%;

width: 90px;

float: left;

padding: 3px 105px;

display: block;

font-weight: bold;

text-transform: uppercase;

font-size: 12px;

color: #fff;

font-style: italic;

}

.header.address{

float: left;

width: 235px;

font-weight: bold;

}

.social img{

float: left;

margin-left: 15px;

}

.social{

float: left;

}

.header.contacts.section {

float: left;

margin-bottom: 15px;

}

.menu{

width: 100%;

background: #424242;

float: left;

}

menu_footer{

width: 100%;

float: left;

}

.menu li,.menu_footer li{

float: left;

width: 16.5%;

color: #fff;

padding: 20px 0;

text-align: center;

}

.menu a{

color: #fff;

}

.menu_footer a{

color: #000;

}

.slider, #carousel img{

width: 1000px;

float: left;

height: 440px;

}

.slider{

position: relative;

background: #000;

}

.bonus{

position: absolute;

z-index: 1;

color: #fff;

font-size: 32px;

font-weight: bold;

width: 315px;

line-height: 40px;

font-style: italic;

top: 200px;

left: 120px;

}

.caroufredsel_wrapper{

opacity: 0.6;

-o-background-size: 0.6;

-moz-background-size: 0.6;

-ms-background-size: 0.6;

-webkit-background-size: 0.6;

}

.detailed{

background: #185ca1;

background-image: url(img/detailed.png);

background-repeat: no-repeat;

background-position: 145px 10px;

width: 110px;

font-size: 18px;

color: #fff;

padding: 10px 50px;

}

.slider.detailed{

left: 140px;

top: 320px;

position: absolute;

z-index: 1;

}

.arrow_left,.arrow_right{

position: absolute;

z-index: 1;

}

.arrow_left{

right: 90px;

bottom: 20px;

}

.arrow_right{

right: 50px;

bottom: 20px;

}

.prosperity{

float: left;

margin: 11px 11px 0 0;

background: #ff5555;

width: 326px;

height: 90px;

}

.prosperity:nth-child(3n+3){

margin-right: 0px;

}

.prosperity img{

width: 50px;

float: left;

margin: 20px;

}

.prosperity span{

color: #fff;

width: 205px;

display: block;

float: left;

margin: 25px 25px 25px 0;

}

.info{

width: 100%;

float: left;

margin-top: 15px;

padding-bottom: 30px;

background: #fff;

}

.info.block_left{

width: 500px;

float: left;

padding: 30px 0 30px 30px;

box-sizing: border-box;

}

.info.block_right{

width: 440px;

float: left;

padding: 30px;

}

.info.block_left h2,.info.block_right h2{

color: #909090;

font-size: 42px;

margin-bottom: 40px;

}

.info.block_left h3{

color: #000;

font-size: 28px;

font-weight: bold;

line-height: 30px;

}

.info.detailed{

float: right;

margin: 30px 30px 0 0;

}

.set{

border-right: 1px solid #909090;

padding-right: 30px;

}

.comment_block{

width: 440px;

float: left;

margin-bottom: 15px;

}

.comment_block:last-of-type{

margin-bottom: 0px;

}

.comment{

width: 305px;

float: left;

padding-left: 50px;

background-image: url(img/comma.png);

background-repeat: no-repeat;

background-position: 10px 45px;

}

.comment.date{

float: left;

color: #909090;

width: 300px;

}

.comment.name{

color: #185ca1;

width: 300px;

float: left;

font-size: 24px;

margin-bottom: 10px;

}

.comment.response{

width: 390px;

float: left;

}

.footer{

width: 100%;

float: left;

padding-bottom: 20px;

border-top: 1px solid #959595;

margin-top: 20px

}

.copy{

float: left;

width: 155px;

font-size: 12px;

color: #909089;

margin-left: 5px;

}

.copy img{

width: 138px;

margin-top: 5px

}

.footer.phone_number{

width: 200px;

float: left;

margin: 0px 20px 0 45px;

}

.call{

width: 286px;

background: #ff5555;

float: right;

transform: rotate(90deg);

position: absolute;

z-index: 1;

top: 150px;

right: -173px;

cursor: pointer;

padding: 5px;

}

.call img{

float: left;

padding: 10px;

}

.tabs,.car {

width: 250px;

}

.ui-tabs-nav {

overflow: hidden;

width: 250px;l

}

.call span{

float: left;

width: 100px;

padding: 0px 30px;

color: #fff;

}

.call span:first-child{

border-bottom: 1px solid #fff;

}

.call.text{

float: left;

width: 160px;

margin: 0 20px;

}

.content{

position: relative;

}

.response_form textarea{

width: 205px;

float: left;

height: 200px;

}

.response_block{

width: 1000px;

float: left;

border: 1px solid #959595;

box-sizing: border-box;

padding: 20px;

background: #fff;

margin-top: 10px;

}

.response_block.name,.response_block.date{

color: #ff5555;

font-size: 22px;

font-weight: bold;

}

.response_block.name{

width: 500px;

float: left;

}

.response_block.date{

width: 110px;

float: right;

}

.response_block p{

margin-top: 15px;

color: #959595;

float: left;

}

.response_block:first-child{

margin-top: 20px;

}

.response_form{

width: 600px;

float: left;

background: #ff5555;

left: 100px;

margin: 30px 200px 20px 200px;

}

.response_form.header{

width: 600px;

float: left;

background: #7d2a2a;

margin-bottom: 10px;

}

.response_form span{

padding: 15px 40px;

display: block;

color: #fff;

background: #ff5555;

width: 115px;

}

.response_form.field1{

width: 240px;

margin: 5px 50px 5px 20px;

padding: 5px;

float: left;

}

.response_form.field2{

padding: 5px;

float: left;

width: 546px;

margin: 5px 20px;

}

.response_form.send{

background: #424242;

color: #fff;

padding: 10px 40px;

font-family: MyFont;

border: none;

margin: 10px 229px 20px 229px;

float: left;

}

.contacts_block{

width: 250px;

float: left;

margin-top: 50px;

}

.contacts_block span{

float: left;

width: 200px;

}

.contacts_block.heading{

font-weight: bold;

margin-top: 30px;

}

.contacts_block.heading:first-child{

margin-top: 0px;

}

.red{

color: #ff5555;

font-style: italic;

}

.map{

float: left;

width: 650px;

margin: 50px 0 50px 100px;

border: 1px solid #b84141;

box-sizing: border-box;

}

.filling{

width: 1000px;

float: left;

}

.text_block{

width: 1000px;

float: left;

padding: 30px;

box-sizing: border-box;

background: #fff;

}

.text_block h1{

font-size: 36px;

text-align: center;

margin-bottom: 30px;

color: #646464;

}

.text_block.text{

-moz-column-count: 2;

-webkit-column-count: 2;

column-count: 2;

}

.text_block p{

color: #646464;

float: left;

margin-bottom: 10px;

}

.question_answer{

float: left;

width: 1000px;

margin-bottom: 20px;

}

.question_answer:first-of-type{

margin-top: 50px;

}

.question,.answer{

float: left;

width: 1000px;

padding: 20px 150px 20px 20px;

box-sizing: border-box;

}

.question{

background: #ff5555;

background-image: url(img/question.png);

background-repeat: no-repeat;

background-position: 900px 45px;

}

.answer{

background: #ffffff;

background-image: url(img/answer.png);

background-repeat: no-repeat;

background-position: 900px 45px;

}

.question_answer span{

font-weight: bold;

font-size: 28px;

margin-bottom: 10px;

display: block;

}

.question span,.question p{

color: #fff;

}

.answer span,.answer p{

color: #000;

}

.news_block{

width: 235px;

float: left;

margin: 20px 20px 0 0;

}

.news_block:nth-of-type(4n+4){

margin-right: 0px;

}

.news{

width: 215px;

padding: 10px;

background: #fff;

}

.news img{

width: 215px;

float: left;

margin-bottom: 10px;

}

.news h3{

color: #185ca1;

font-size: 18px;

font-weight: bold;

margin-bottom: 5px;

}

.news p{

color: #424242;

}

.news_block.button{

display: block;

background: #ff5555;

width: 235px;

padding: 10px 0;

text-align: center;

}

.news_block a{

color: #fff;

}

.counter{

float: left;

padding-top: 50px;

width: 100%;

text-align: center;

}

.counter ul {

display: inline-block;

}

 

.counter img{

padding: 5px 5px 2px 5px;

display: inline-block;

}

.counter li{

display: inline-block;

padding: 5px;

}

.counter.activ{

color: #fff;

background: #ff5555;

}

table{

border-left: 3px solid #ff5555;

border-right: 3px solid #ff5555;

float: left;

width: 1000px;

background: #fff;

margin-top: 20px;

}

table caption{

text-align: center;

font-weight: bold;

color: #fff;

font-size: 20px;

text-transform: uppercase;

padding: 10px 0;

background: #ff5555;

}

th{

width: 130px;

padding: 5px;

border-right: 3px solid #ff5555;

border-bottom: 3px solid #ff5555;

text-align: center;

}

th:first-child{

width: 220px;

}

th:last-of-type{

border-right: none;

}

td{

width: 130px;

padding: 5px;

border-right: 3px solid #ff5555;

border-bottom: 3px solid #ff5555;

text-align: center;

vertical-align: middle;

}

td:first-child{

width: 220px;

}

td:last-of-type{

border-right: none;

}

.cost{

font-weight: bold;

font-size: 24px;

}

.tabs{

width: 0;

height: 295px;

background: #ff5555;

position: absolute;

z-index: 1;

overflow: hidden;

top: 28px;

right: 0px;

}

.tabs_contacts{

width: 250px;

height: 295px;

background: #ff5555;

overflow: hidden;

}

#tabs-1, #tabs-2{

width: 250px;

}

#tabs.field1{

padding: 5px;

width: 205px;

margin: 5px 15px;

}

#tabs.field1:first-of-type{

margin-top: 15px;

}

#tabs.field2{

padding: 5px;

width: 70px;

margin: 5px 5px 15px 15px;

}

#tabs.field3{

padding: 5px;

width: 108px;

margin: 5px 5px 15px 5px;

}

#tabs.send{

background: #424242;

color: #fff;

padding: 10px 40px;

font-family: MyFont;

border: none;

margin-left: 50px;

}

#tabs-1.send{

margin-top: 33px;

}

#tabs li{

padding: 10px 15px;

width: 95px;

float: left;

color: #fff;

text-align: center;

}

#tabs li a{

color: #fff;

}

.ui-state-active{

background: #7d2a2a;

}

ui-tabs-nav{

width: 250px;

overflow: hidden;

}

#tabs-2 textarea{

width: 207px;

float: left;

height: 90px;

margin: 5px 15px 10px 15px;

padding: 5px;

}

 


⇐ Предыдущая123456789

Поделиться:


Читайте также:


Техника прыжка в длину с разбега
Тактические действия в защите
История Олимпийских игр
История развития права интеллектуальной собственности


Последнее изменение этой страницы: 2017-01-20; просмотров: 61; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 52.14.150.55 (0.327 с.)