Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

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

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

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

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

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

Содержание

1HTML5 FeaturesNew Doctype
Introduction to HTML / CSS 1HTML5 FeaturesNew Doctype 12HTML5 FeaturesNew DoctypeInputs 12HTML5 FeaturesNew DoctypeInputsinput type:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek 12HTML5 FeaturesNew DoctypeInputsinput type:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek3Local Storage 12HTML5 FeaturesNew DoctypeInputsinput type:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek3Local Storage 124HTML5 FeaturesNew DoctypeInputsinput type:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek3Local Storage 5HTML5 FeaturesAudio Support HTML5 FeaturesAudio Support Download this file.5 56HTML5 FeaturesAudio SupportVideo Support Download this file. 56HTML5 FeaturesAudio SupportVideo Support Download this file. 56HTML5 FeaturesAudio SupportVideo Support Download this file.7Data Attribute HTML5 FeaturesData Attribute: Don't Touch Me h1 { position: relative; }h1:hover { http://css3generator.com/ New Features in CSS 3[attr^=val] value starting with val[attr$=val] value ending with New Features in CSS 3[attr^=val] value starting with val[attr$=val] value ending with New Features in CSS 3[attr^=val] value starting with val[attr$=val] value ending with New Features in CSS 3[attr^=val] value starting with val[attr$=val] value ending with New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;} New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;} New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color: rgba(33, New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color: rgba(33, New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color: rgba(33, New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color: rgba(33, New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color: rgba(33, New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color: rgba(33, Twitter Bootstrap Save timeCustomizableConsistencyDocs talk!Bootstrap allows for immediate quality work, which makes it great Browser and device support Browser and device supportBootstrap is released under the MIT license.It requires you bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ Bootstrap Template Hello, world!Basic template HTML5 doctypeGlobal settings HTML5 doctypeMobile firstGlobal settings 3HTML5 doctypeMobile firstNormalize.cssGlobal settings 34HTML5 doctypeMobile firstNormalize.cssGlobal settingsContainers 34HTML5 doctypeMobile firstNormalize.css ... ...Global settingsContainers 34HTML5 doctypeMobile firstNormalize.css ... ...Global settingsContainersLESS Grid system (12 columns) Grid system (12 columns) Grid system (12 columns)/* Small devices (tablets, 768px and up) */@media (min-width: Example: Mobile, tablet, desktop Example: 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 Offsetting columns Offsetting columns .col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3 Glyphicons Glyphicons Star Glyphicons Star ComponentsDropdownsButton groupsButton dropdownsInput groupsNavsNavbarBreadcrumbsPaginationLabelsBadgesJumbotronPage headerThumbnailsAlertsProgress barsMedia objectList groupPanelsResponsive embedWells Java Script solutionsTransitionsModalDropdownScrollspyTabTooltipPopoverAlertButtonCollapseCarousel Java Script solutionsTransitionsModalDropdownScrollspyTabTooltipPopoverAlertButtonCollapseCarouselPlugins can be included individually (using Bootstrap's individual *.js files), Just bootstrap it and go!
Слайды презентации

Слайд 2

Слайд 3 1
HTML5 Features
New Doctype


1HTML5 FeaturesNew Doctype

Слайд 4
1
2

HTML5 Features
New Doctype


Inputs

12HTML5 FeaturesNew DoctypeInputs

Слайд 5
1
2

HTML5 Features
New Doctype


Inputs

12HTML5 FeaturesNew DoctypeInputsinput type:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek

text" required="required">



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

Слайд 6

1
2

HTML5 Features
New Doctype


Inputs

12HTML5 FeaturesNew DoctypeInputsinput type:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek3Local Storage

text" required="required">



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

12HTML5 FeaturesNew DoctypeInputsinput type:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek3Local Storage

text" required="required">



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

124HTML5 FeaturesNew DoctypeInputsinput type:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek3Local Storage

text" required="required">



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

Слайд 9 5
HTML5 Features
Audio Support

5HTML5 FeaturesAudio Support

Слайд 10 HTML5 Features
Audio Support


HTML5 FeaturesAudio Support Download this file.5


Download this file.


5

Слайд 11
5
6

HTML5 Features
Audio Support
Video Support

56HTML5 FeaturesAudio SupportVideo Support Download this file.

/>

Download this file.


Слайд 12
5
6

HTML5 Features
Audio Support
Video Support

56HTML5 FeaturesAudio SupportVideo Support Download this file. Your browser

/>

Download this file.





Your browser is old. Download this video instead.




Слайд 13

5
6

HTML5 Features
Audio Support
Video Support

56HTML5 FeaturesAudio SupportVideo Support Download this file.7Data Attribute Your

/>

Download this file.


7

Data Attribute

preload>


Your browser is old. Download this video instead.





Слайд 14 HTML5 Features
Data Attribute:

HTML5 FeaturesData Attribute: Don't Touch Me h1 { position: relative; }h1:hover

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




Слайд 15

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

http://css3generator.com/

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

New Features in CSS 3[attr^=val] value starting with val[attr$=val] value ending

val
[attr$=val] value ending with the suffix val
[attr*=val] value containing

the substring val

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

New Features in CSS 3[attr^=val] value starting with val[attr$=val] value ending

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

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

New Features in CSS 3[attr^=val] value starting with val[attr$=val] value ending

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

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

New Features in CSS 3[attr^=val] value starting with val[attr$=val] value ending

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

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

New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}

3px #0a0a0a;
}


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

New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}

3px #0a0a0a;
}


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

New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color:

3px #0a0a0a;
}


.bg-transparent{
background-color: rgba(33, 44, 55, 0.7);
color: rgba(33,

44, 55, 0.7);
}


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

New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color:

3px #0a0a0a;
}


.bg-transparent{
background-color: rgba(33, 44, 55, 0.7);
color: rgba(33,

44, 55, 0.7);
}


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

New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color:

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

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

New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color:

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

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

New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color:

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

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

New Features in CSS 3.shady-text{ text-shadow: 2px 3px 3px #0a0a0a;}.bg-transparent{ background-color:

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

Слайд 29

Слайд 30 Twitter Bootstrap

Twitter Bootstrap

Слайд 31










Save time

Customizable

Consistency

Docs talk!

Bootstrap allows for immediate quality work,

Save timeCustomizableConsistencyDocs talk!Bootstrap allows for immediate quality work, which makes it

which makes it great for facilitating efficient, outcome-oriented design

communication.

Reasons to Use Twitter Bootstrap

Слайд 32 Browser and device support

Browser and device support

Слайд 33 Browser and device support
Bootstrap is released under the

Browser and device supportBootstrap is released under the MIT license.It requires

MIT license.
It requires you to include the license and

copyright notice in your works.


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

bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ └── bootstrap-theme.min.css├── js/│

├── 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




Bootstrap Template Hello, world!Basic template


Bootstrap Template







Hello, world!









Basic template

Слайд 36
HTML5 doctype
Global settings

HTML5 doctypeGlobal settings

Слайд 37


HTML5 doctype
Mobile first
Global settings

HTML5 doctypeMobile firstGlobal settings

Слайд 38






3
HTML5 doctype
Mobile first
Normalize.css
Global settings

3HTML5 doctypeMobile firstNormalize.cssGlobal settings

Слайд 39









3
4
HTML5 doctype
Mobile first
Normalize.css
Global settings

Containers

34HTML5 doctypeMobile firstNormalize.cssGlobal settingsContainers

Слайд 40














3
4
HTML5 doctype
Mobile first
Normalize.css


...


34HTML5 doctypeMobile firstNormalize.css ... ...Global settingsContainers

full width -->

...

Global settings

Containers

Слайд 41














3
4
HTML5 doctype
Mobile first
Normalize.css


...


34HTML5 doctypeMobile firstNormalize.css ... ...Global settingsContainersLESS

full width -->

...

Global settings

Containers

LESS

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

Grid system (12 columns)

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

Grid system (12 columns)

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

Grid system (12 columns)/* Small devices (tablets, 768px and up) */@media

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) { ... }

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

Example: Mobile, tablet, desktop

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

Example: 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

col-md-8">.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4


class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4

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



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



Слайд 47 Offsetting columns

Offsetting columns

Слайд 48 Offsetting columns

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

Offsetting columns .col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3

.col-md-offset-4


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

.col-md-offset-3



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



Слайд 49 Glyphicons

Glyphicons

Слайд 50 Glyphicons

Glyphicons Star

aria-hidden="true"> Star


Слайд 51 Glyphicons

Glyphicons Star

aria-hidden="true"> Star


Слайд 52 Components
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

ComponentsDropdownsButton groupsButton dropdownsInput groupsNavsNavbarBreadcrumbsPaginationLabelsBadgesJumbotronPage headerThumbnailsAlertsProgress barsMedia objectList groupPanelsResponsive embedWells

embed
Wells


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

Java Script solutionsTransitionsModalDropdownScrollspyTabTooltipPopoverAlertButtonCollapseCarousel

Слайд 54 Java Script solutions
Transitions
Modal
Dropdown
Scrollspy
Tab
Tooltip
Popover
Alert
Button
Collapse
Carousel
Plugins can be included individually (using

Java Script solutionsTransitionsModalDropdownScrollspyTabTooltipPopoverAlertButtonCollapseCarouselPlugins can be included individually (using Bootstrap's individual *.js

Bootstrap's individual *.js files), or all at once (using

bootstrap.js or the minified bootstrap.min.js).
  • Имя файла: introduction-to-html-css-part-6.pptx
  • Количество просмотров: 101
  • Количество скачиваний: 0
- Предыдущая Партизанское движение в годы Отечественной войны 1812 года
Следующая - Я в автокресле, а ты?

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

9.1 Фотоархив материал 9.1 Фотоархив материал 27
Hug (n, v) Hug (n, v) 90
Стандартизация и метрология в моей будущей профессии Стандартизация и метрология в моей будущей профессии 97
Презентация кружка 5-7 класс Презентация кружка 5-7 класс 138
Содержание Содержание 94
Дидактическая игра Волшебный коврик презентация к уроку (младшая группа) Дидактическая игра Волшебный коврик презентация к уроку (младшая группа) 105
Металлическая галантерея. Предметы туалета. Металлическая галантерея. Предметы туалета. 113
ЛЕКЦИЯ 7. БИОХИМИЧЕСКОЕ ИССЛЕДОВАНИЕ ФУНКЦИИ ЖЕЛУДОЧНО-КИШЕЧНОГО ТРАКТА ЛЕКЦИЯ 7. БИОХИМИЧЕСКОЕ ИССЛЕДОВАНИЕ ФУНКЦИИ ЖЕЛУДОЧНО-КИШЕЧНОГО ТРАКТА 118
Data visualization Data visualization 89
Основные школы исламского права Основные школы исламского права 132
УМК ПНШ УМК ПНШ 123
Мы с детьми ещё в старшей группе Мы с детьми ещё в старшей группе 93
Презентация Добродетель и порок презентация к уроку (4 класс) по теме Презентация Добродетель и порок презентация к уроку (4 класс) по теме 111
Нарушения кислотно-основного состояния Нарушения кислотно-основного состояния 86
База отдыха и релакса Созвездие База отдыха и релакса Созвездие 85
Career explorations Career explorations 90
Давайте вместе землю украшать презентация Давайте вместе землю украшать презентация 98
Адаптация ребенка к детскому саду презентация к уроку (младшая группа) Адаптация ребенка к детскому саду презентация к уроку (младшая группа) 84
Консультация для педагогов Профилактика и коррекция неконструктивного поведения детей дошкольного возраста. консультация Консультация для педагогов Профилактика и коррекция неконструктивного поведения детей дошкольного возраста. консультация 102
Как подружились шумовые инструменты презентация для детей презентация к уроку (средняя группа) Как подружились шумовые инструменты презентация для детей презентация к уроку (средняя группа) 125
Лето, ах лето презентация Лето, ах лето презентация 39
Семинар для воспитателей Введения ФГОС в городе Москве презентация Семинар для воспитателей Введения ФГОС в городе Москве презентация 72
Приёмы рефлексии учащихся на уроках в начальной школе презентация к уроку (1, 2, 3, 4 класс) Приёмы рефлексии учащихся на уроках в начальной школе презентация к уроку (1, 2, 3, 4 класс) 117
Фото отчет Древонасаждение презентация к уроку (средняя группа) Фото отчет Древонасаждение презентация к уроку (средняя группа) 75
30 ноября – день домашних животных 30 ноября – день домашних животных 110
Занятие 3: Ретаргетинг и аналитика Занятие 3: Ретаргетинг и аналитика 87
Проект по переработке отходов животноводства Проект по переработке отходов животноводства 115
2 2 75
Интеллект-карты в ДОУ презентация к уроку (средняя группа) Интеллект-карты в ДОУ презентация к уроку (средняя группа) 104
Презентация : Универсальные учебные действия презентация к уроку по теме Презентация : Универсальные учебные действия презентация к уроку по теме 107