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

Содержание

Слайд 1Introduction to HTML / CSS

Слайд 2

Слайд 31
HTML5 Features
New Doctype


Слайд 4
1
2

HTML5 Features
New Doctype


Inputs

Слайд 5
1
2

HTML5 Features
New Doctype


Inputs




input type:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Слайд 6

1
2

HTML5 Features
New Doctype


Inputs




input type:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

3

Local

Storage

Слайд 7

1
2

HTML5 Features
New Doctype


Inputs




input type:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

3

Local

Storage

"localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage."

Слайд 8


1
2

4
HTML5 Features
New Doctype


Inputs




input type:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

3

Local

Storage

"localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage."

Semantic tags

Слайд 95
HTML5 Features
Audio Support

Слайд 10HTML5 Features
Audio Support



Download this file.


5

Слайд 11
5
6

HTML5 Features
Audio Support
Video Support


/>
Download this file.


Слайд 12
5
6

HTML5 Features
Audio Support
Video Support


/>
Download this file.


Your browser is old. Download this video instead.




Слайд 13

5
6

HTML5 Features
Audio Support
Video Support


/>
Download this file.


7

Data Attribute

Your browser is old. Download this video instead.





Слайд 14HTML5 Features
Data Attribute:

Don't Touch Me



h1 { position: relative; }
h1:hover { color: transparent; }

h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}




Слайд 16http://css3generator.com/

Слайд 17New Features in CSS 3
[attr^=val] value starting with val
[attr$=val] value ending

with the suffix val
[attr*=val] value containing the substring val

Слайд 18New Features in CSS 3
[attr^=val] value starting with val
[attr$=val] value ending

with the suffix val
[attr*=val] value containing the substring val

.box-rounded{
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

Слайд 19New Features in CSS 3
[attr^=val] value starting with val
[attr$=val] value ending

with the suffix val
[attr*=val] value containing the substring val

.box-rounded{
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

.box-border{
border-image:url(border-image.png) 100 100 round;
border:30px solid transparent;
}

Слайд 20New Features in CSS 3
[attr^=val] value starting with val
[attr$=val] value ending

with the suffix val
[attr*=val] value containing the substring val

.box-rounded{
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

.box-border{
border-image:url(border-image.png) 100 100 round;
border:30px solid transparent;
}

.shady-block{
-webkit-box-shadow: 5px 10px 5px 7px #444444;
box-shadow: 5px 10px 5px 7px #444444;
}

Слайд 21New Features in CSS 3
.shady-text{
text-shadow: 2px 3px 3px #0a0a0a;
}


Слайд 22New Features in CSS 3
.shady-text{
text-shadow: 2px 3px 3px #0a0a0a;
}


Слайд 23New Features in CSS 3
.shady-text{
text-shadow: 2px 3px 3px #0a0a0a;
}


.bg-transparent{
background-color:

rgba(33, 44, 55, 0.7);
color: rgba(33, 44, 55, 0.7);
}


Слайд 24New Features in CSS 3
.shady-text{
text-shadow: 2px 3px 3px #0a0a0a;
}


.bg-transparent{
background-color:

rgba(33, 44, 55, 0.7);
color: rgba(33, 44, 55, 0.7);
}


Слайд 25New Features in CSS 3
.shady-text{
text-shadow: 2px 3px 3px #0a0a0a;
}


.bg-transparent{
background-color:

rgba(33, 44, 55, 0.7);
color: rgba(33, 44, 55, 0.7);
}


.columns{
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}

Слайд 26New Features in CSS 3
.shady-text{
text-shadow: 2px 3px 3px #0a0a0a;
}


.bg-transparent{
background-color:

rgba(33, 44, 55, 0.7);
color: rgba(33, 44, 55, 0.7);
}


.columns{
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}

Слайд 27New Features in CSS 3
.shady-text{
text-shadow: 2px 3px 3px #0a0a0a;
}


.bg-transparent{
background-color:

rgba(33, 44, 55, 0.7);
color: rgba(33, 44, 55, 0.7);
}


.columns{
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}

Слайд 28New Features in CSS 3
.shady-text{
text-shadow: 2px 3px 3px #0a0a0a;
}


.bg-transparent{
background-color:

rgba(33, 44, 55, 0.7);
color: rgba(33, 44, 55, 0.7);
}


.columns{
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}

Слайд 30Twitter Bootstrap

Слайд 31










Save time

Customizable

Consistency

Docs talk!

Bootstrap allows for immediate quality work, which makes it

great for facilitating efficient, outcome-oriented design communication.

Reasons to Use Twitter Bootstrap

Слайд 32Browser and device support

Слайд 33Browser and device support
Bootstrap is released under the MIT license.
It requires

you to include the license and copyright notice in your works.


Слайд 34bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│

└── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

Precompiled Bootstrap

Слайд 35




initial-scale=1">
Bootstrap Template







Hello, world!









Basic template

Слайд 36
HTML5 doctype
Global settings

Слайд 37


HTML5 doctype
Mobile first
Global settings

Слайд 38






3
HTML5 doctype
Mobile first
Normalize.css
Global settings

Слайд 39









3
4
HTML5 doctype
Mobile first
Normalize.css
Global settings

Containers

Слайд 40














3
4
HTML5 doctype
Mobile first
Normalize.css


...



class="container-fluid">
...

Global settings


Containers

Слайд 41














3
4
HTML5 doctype
Mobile first
Normalize.css


...



class="container-fluid">
...

Global settings


Containers


LESS

Слайд 42Grid system (12 columns)

Слайд 43Grid system (12 columns)

Слайд 44Grid system (12 columns)
/* Small devices (tablets, 768px and up) */
@media

(min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Слайд 45Example: Mobile, tablet, desktop

Слайд 46Example: Mobile, tablet, desktop

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4



.col-xs-6 .col-sm-4

.col-xs-6 .col-sm-4



.col-xs-6 .col-sm-4



Слайд 47Offsetting columns

Слайд 48Offsetting columns

.col-md-4
.col-md-4 .col-md-offset-4


class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3



.col-md-6 .col-md-offset-3



Слайд 49Glyphicons

Слайд 50Glyphicons

Star


Слайд 51Glyphicons

Star


Слайд 52Components
Dropdowns
Button groups
Button dropdowns
Input groups
Navs
Navbar
Breadcrumbs
Pagination
Labels
Badges
Jumbotron
Page header
Thumbnails
Alerts
Progress bars
Media object
List group
Panels
Responsive embed
Wells


Слайд 53Java Script solutions
Transitions
Modal
Dropdown
Scrollspy
Tab
Tooltip
Popover
Alert
Button
Collapse
Carousel

Слайд 54Java Script solutions
Transitions
Modal
Dropdown
Scrollspy
Tab
Tooltip
Popover
Alert
Button
Collapse
Carousel
Plugins can be included individually (using Bootstrap's individual *.js

files), or all at once (using bootstrap.js or the minified bootstrap.min.js).

Слайд 55Just bootstrap it and go!

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

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

срс биотехнолоия 326
Проект Откуда хлеб пришёл 259
Формирование у учащихся навыков беглого чтения.Автор Малышева Н.В., учитель начальных классов МОУ СОШ п. Пятидорожное 228
Горлачев Никита Алексеевич 246
sovety roditelyam pervoklassnikov sobranie kachkovskaya - kopiya 232
Диадок— система внешнего юридически значимого электронного документооборота 269

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

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

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

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

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

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

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