Что такое 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
  • Количество просмотров: 113
  • Количество скачиваний: 0
- Предыдущая Партизанское движение в годы Отечественной войны 1812 года
Следующая - Я в автокресле, а ты?

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

здравствуй, театр! проект (подготовительная группа) здравствуй, театр! проект (подготовительная группа) 177
Радуга творчества материал по теме Радуга творчества материал по теме 134
Задачи Задачи 187
Основы развития саморегуляции дошкольника презентация Основы развития саморегуляции дошкольника презентация 124
Проект Детский журнал Клепа презентация к уроку Проект Детский журнал Клепа презентация к уроку 140
Чистописание Чистописание 101
Презентация к сценарию мероприятия 3 сентября: МИТИНГ ПАМЯТИ ЖЕРТВ ТЕРРОРИЗМА ко дню солидарности в борьбе с терроризмом Презентация к сценарию мероприятия 3 сентября: МИТИНГ ПАМЯТИ ЖЕРТВ ТЕРРОРИЗМА ко дню солидарности в борьбе с терроризмом 113
Марина Ивановна Цветаева Марина Ивановна Цветаева 90
Проект:Моя любимая мама (вторая младшая группа) проект (младшая группа) Проект:Моя любимая мама (вторая младшая группа) проект (младшая группа) 106
ИБРЕСИНСКОЕ РАЙПО ИБРЕСИНСКОЕ РАЙПО 165
Портфолио Багаутдинова Светлана презентация к уроку (младшая группа) Портфолио Багаутдинова Светлана презентация к уроку (младшая группа) 140
Консультация для родителей Готовность ребёнка к школе консультация Консультация для родителей Готовность ребёнка к школе консультация 98
Использование эффекта параллакс для повышения качества распознавания образов Использование эффекта параллакс для повышения качества распознавания образов 106
Сертификаты и дипломы об участии Сертификаты и дипломы об участии 100
внеклассное мероприятие 70-летие Победы материал по теме внеклассное мероприятие 70-летие Победы материал по теме 99
ДОКЛАДстудента 4 курсагруппы АТР-11 Галицкого Игоряна тему: История автомобильной марки МЕРСЕДЕС ДОКЛАДстудента 4 курсагруппы АТР-11 Галицкого Игоряна тему: История автомобильной марки МЕРСЕДЕС 103
Музыкально-дидактическая игра для детей старшего дошкольного возраста К нам опять пришла весна методическая разработка (подготовительная группа) Музыкально-дидактическая игра для детей старшего дошкольного возраста К нам опять пришла весна методическая разработка (подготовительная группа) 124
Презентация по психологии на тему: Девиантное поведение подростков Презентация по психологии на тему: Девиантное поведение подростков 145
Идеология Идеология 126
Использование ИКТ Профессии презентация урока для интерактивной доски (средняя группа) Использование ИКТ Профессии презентация урока для интерактивной доски (средняя группа) 126
Приборы и системы контроля работы авиадвигателей. Авиационные тахометры Приборы и системы контроля работы авиадвигателей. Авиационные тахометры 120
Ұйымдардағы құжаттармен жұмыс жасауды ұйымдастыру Ұйымдардағы құжаттармен жұмыс жасауды ұйымдастыру 229
осень в детском саду презентация к уроку (средняя группа) осень в детском саду презентация к уроку (средняя группа) 97
Презентация опытаработы по теме Личностно-ориентированный подход в системе профессионального образования Презентация опытаработы по теме Личностно-ориентированный подход в системе профессионального образования 98
Размер предприятия в отрасли : понятие , определяющие факторы Размер предприятия в отрасли : понятие , определяющие факторы 134
Выступлене Проектирование и анализ современного урока в начальной школе презентация к уроку по теме Выступлене Проектирование и анализ современного урока в начальной школе презентация к уроку по теме 97
Виды аутсорсинга Виды аутсорсинга 177
Ресурсы медицинского учреждения Ресурсы медицинского учреждения 108
moskva-1 moskva-1 111
Презентация Удивительный мир игры презентация Презентация Удивительный мир игры презентация 109