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

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;
}

Tabs

Tabs

Web Design

Photography

Graphics

Tabs
/* 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 */

Слайд 9

Gallery

Слайд 10

Gallery

previos
next

alt="" />

Слайд 11

Gallery
.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;
}

Слайд 12

Gallery
.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

Слайд 13

Gallery
.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

Слайд 14

Gallery
.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;
}

Слайд 15

Popup (modal)

Слайд 16

Popup (modal)

Modal title

One fine body…

Слайд 17

Popup (modal)

Modal title

One fine body…

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

Слайд 18

Slider

Слайд 19

Slider

Price range:

handle-min">

Слайд 20

Slider

Price range:

handle-min">

.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 */
}

Слайд 21

Table

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;
}

A test table with merged cells
	Average	Red eyes
Females	1.7	0.002	43%
Males	1.9	0.003	40%

Слайд 22

Table

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;
}

A test table with merged cells
	Average	Red eyes
Females	1.7	0.002	43%
Males	1.9	0.003	40%

Слайд 23

Table

Слайд 24

Form

Слайд 25

Form

Please add comment

First Name

type="text" name="first-name" maxlength="50" size="30">

Last Name

Email Address

Telephone Number

Comments

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

Содержание

Typical components and methodics

Menu (drop down)

Menu (drop down) About Publishers Custom

Menu (drop down).nav{ padding: 0; margin: 0; list-style: none;}.nav li{ float: left; padding:

Tabs

Tabs Web Design Photography Graphics

Tabs/* tabs-holder start */.tabset{ padding: 0; list-style: none; margin: 0 0 -1px; text-align:

Gallery

Gallery previos next

Gallery.gallery-holder{ position: relative;}.gallery-holder .prev,.gallery-holder .next{ position: absolute; top:50%; text-indent: -9999px; overflow: hidden; height:

Gallery.gallery{ overflow: hidden; width: 659px; height: 290px; position: relative; z-index: 1;}.gallery ul{ padding:

Gallery.gallery{ overflow: hidden; width: 659px; height: 290px; position: relative; z-index: 1;}.gallery ul{ padding:

Gallery.paging{ padding: 0; margin: 0; list-style: none; position: absolute; bottom:20px; left:0; width: 100%;

Popup (modal)

Popup (modal) Close Modal title One fine body…

Modal title

Popup (modal) Close Modal title One fine body…

Modal title

Slider

Slider Price range: handle-min">

Table A test table with merged cells AverageRed eyes height weight Females 1.7 0.002 43% Males 1.9 0.003 40% table, td, th{ border: 1px solid #000;}

Table A test table with merged cells AverageRed 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;}

Table

Form

Form Please add comment First Name

Form Select Something: Google Bing value="Yahoo">Yahoo

Form Oranges Pears Peaches

Form Red

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

Menu (drop down)

About

Publishers

Custom

Menu (drop down)
.nav{
padding: 0;
margin: 0;
list-style: none;
}
.nav li{
float: left;
padding:

Tabs

Web Design

Photography

Graphics

Tabs
/* tabs-holder start */
.tabset{
padding: 0;
list-style: none;
margin: 0 0 -1px;
text-align:

Gallery

previos
next

Gallery
.gallery-holder{
position: relative;
}
.gallery-holder .prev,
.gallery-holder .next{
position: absolute;
top:50%;
text-indent: -9999px;
overflow: hidden;
height:

Gallery
.gallery{
overflow: hidden;
width: 659px;
height: 290px;
position: relative;
z-index: 1;
}
.gallery ul{
padding:

Gallery
.gallery{
overflow: hidden;
width: 659px;
height: 290px;
position: relative;
z-index: 1;
}
.gallery ul{
padding:

Gallery
.paging{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
bottom:20px;
left:0;
width: 100%;

Popup (modal)

Modal title

One fine body…

Popup (modal)

Modal title

One fine body…

Slider

Price range:

handle-min">

Table

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;
}

Table

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;
}

Form

Please add comment

First Name

Form

Select Something:

Form

Oranges

Pears

Peaches

Form

Red