Introduction to HTML/CSS (part 3) презентация

Содержание

Typical components and methodics

Слайд 1Introduction to HTML / CSS

Слайд 2Typical components and methodics

Слайд 3Menu (drop down)

Слайд 5Menu (drop down)
.nav{
padding: 0;
margin: 0;
list-style: none;
}
.nav li{
float:

left;
padding: 10px;
}
.nav li:hover{
position: relative;
}
.nav ul{
position: absolute;
top: 30px;
left: -99999px;
width: 150px;
padding: 0;
margin: 0;
list-style: none;
}

.nav li:hover ul{
left: 0;
}
.nav li:hover ul ul{
left: -99999px;
}
.nav ul li:hover ul{
top: 0;
left: 150px;
}
.nav ul li{
float: none;
}

Слайд 8Tabs
/* tabs-holder start */
.tabset{
padding: 0;
list-style: none;
margin: 0 0

-1px;
text-align: center;
position: relative;
}
.tabset li{
display: inline-block;
vertical-align: top;
margin-right: -4px;
border: 1px solid #c5c5c5;
border-width: 1px 1px 0 0;
line-height: 32px;
}
.tabset li:first-child{
border-width: 1px 1px 0;
}
.tabset a{
display: block;
padding: 0 19px;
background: #f8f8f8;
}

.tabset .active a{
background: #fff;
color: #6b99b6;
padding-bottom: 1px;
}
.tabset a:hover{background: #fff;}
.tab{
border-top: 1px solid #c5c5c5;
display: none;
}
.tab.active{
display: block;
}
/* tabs-holder end */

Слайд 9Gallery

Слайд 10Gallery

previos
next










Слайд 11Gallery
.gallery-holder{
position: relative;
}
.gallery-holder .prev,
.gallery-holder .next{
position: absolute;
top:50%;
text-indent: -9999px;
overflow:

hidden;
height: 41px;
width: 43px;
margin-top: -20px;
z-index: 3;
}
.gallery-holder .prev{
left:20px;
background: url(../images/btn-prev.png) no-repeat;
}
.gallery-holder .next{
right:20px;
background: url(../images/btn-next.png) no-repeat;
}

Слайд 12Gallery
.gallery{
overflow: hidden;
width: 659px;
height: 290px;
position: relative;
z-index: 1;
}
.gallery

ul{
padding: 0;
list-style: none;
margin: 0;
width: 9999px;
}
.gallery ul li{
float: left;
width: 659px;
height: 290px;
}


slide effect

Слайд 13Gallery
.gallery{
overflow: hidden;
width: 659px;
height: 290px;
position: relative;
z-index: 1;
}
.gallery

ul{
padding: 0;
list-style: none;
margin: 0;
width: 9999px;
}
.gallery ul li{
float: left;
width: 659px;
height: 290px;
}

.gallery{
overflow: hidden;
width: 659px;
height: 290px;
position: relative;
z-index: 1;
}
.gallery ul{
padding: 0;
list-style: none;
margin: 0;
}
.gallery ul li{
position: absolute;
top:0;
left:0;
width: 659px;
height: 290px;
}
.gallery ul li.active{
z-index: 2;
}


slide effect


fade effect

Слайд 14Gallery
.paging{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
bottom:20px;
left:0;

width: 100%;
text-align: center;
z-index: 3;
height: 9px;
}
.paging li{
display: inline-block;
padding: 0 2px;
}


.paging a{
display: block;
overflow: hidden;
text-indent: -9999px;
width: 11px;
height: 9px;
background: url(../images/btn-paging.gif) no-repeat;
}
.paging a:hover,
.paging .active a{
background-position: 0 -9px;
}

Слайд 15Popup (modal)

Слайд 16Popup (modal)

Close

Modal

title

One fine body…








Слайд 17Popup (modal)

Close

Modal

title

One fine body…








.modal{
position: absolute;
top: 50px;
left: 50%;
margin-left: -300px;
width: 600px;
}

Слайд 18Slider

Слайд 19Slider

Price range:









Слайд 20Slider

Price range:









.slider{
background: #ccc;
border: 1px solid #333;
height: 10px;
position: relative;
}
.slider-range{
position: absolute;
height: 100%;
top: 0;
background: #eee;
width: 45%; /* set inline by js */
left: 15%; /* set inline by js */
}
.slider-handle{
border: 1px solid #333;
background: #e7e7e7;
position: absolute;
height: 16px;
width: 8px;
top: -3px;
left: 15%; /* set inline by js */
}

Слайд 21Table

A test table with merged cells



Average
Red eyes


height
weight




Females
1.7
0.002
43%


Males
1.9
0.003
40%





table, td, th{
border: 1px solid #000;
}

Слайд 22Table

A test table with merged cells



Average
Red eyes


height
weight




Females
1.7
0.002
43%


Males
1.9
0.003
40%





table{
border: 1px solid #000;
border-collapse: collapse;
}
td, th{
border: 1px solid #000;
}

Слайд 23Table

Слайд 24Form

Слайд 25Form


Please add comment

class="row">
























Слайд 26Form


Select Something:

name="something">


Слайд 27Form




















    • Слайд 28Form






















    • Слайд 29

    Скачать презентацию

    Похожие презентации

    ЛЕКЦИЯ 1 275
    Исследованиепроцесса образования облаков в атмосферах различных тел Солнечной системы 215
    Облачные технологии 896
    Конструювання одягу з трикотажу. (Частина 2) 320
    Оценка эффективности проектов-победителейКонкурса социальных и культурных проектов ОАО ЛУКОЙЛ 175
    Проект ГУК ВОИАЦК. Цели проекта Система открытого доступа… предоставление информационных ресурсов населению Вологодской области, в том числе жителям. 164

    Обратная связь

    Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

    Email: Нажмите что бы посмотреть 

    Что такое ThePresentation.ru?

    Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

    Для правообладателей

    Яндекс.Метрика