Next Section: CSS编码规范1755 plays

5 秒后自动播放下一节
  Watch Again

Ideal video tutorial website front-end page video tutorial

Introduction >
ChapterCourseware
Chapter1html and xhtml

HTML structure

04 minutes00 seconds

HTML syntax

09 minutes48 seconds

HTML tags

17 minutes13 seconds

HTML attributes

11 minutes29 seconds

XHTML structure

06 minutes49 seconds

XHTML type

05 minutes08 seconds

DTD analysis

06 minutes13 seconds

namespace

03 minutes46 seconds
Chapter2html5 introduction

HTML5 syntax

13 minutes02 seconds

HTML5 elements

15 minutes12 seconds

HTML5 attributes

06 minutes30 seconds

HTML5 global attributes

07 minutes57 seconds

HTML5 other features

11 minutes05 seconds

Understand HTML5 document structure

11 minutes02 seconds

HTML5 element classification

Identify articles

05 minutes10 seconds

Segment content

Design navigation information

05 minutes50 seconds

Design support information

03 minutes36 seconds

Design microformats

Add release date

Add title block

01 minutes58 seconds

Group titles

Add footnote block

Add contact information

design outline

design style

Chapter3Example application

Email type applications

03 minutes45 seconds

url type application

02 minutes46 seconds

Number type applications

Range type applications

02 minutes32 seconds

Date checker type application

search type applications

tel type application

color type applications

Chapter4New content

New autocomplete attribute

New autofocus attribute

05 minutes04 seconds

New form attribute

New form override properties

New height and width attributes

01 minutes48 seconds

New list attribute

New min, max and step attributes

New multiple attribute

New pattern attribute

New placeholder attribute

New required attribute

New datalist element

New keygen element

New output element

New autocomplete attribute

00 minutes58 seconds

New novalidate attribute

01 minutes28 seconds
Chapter5canvas drawing

Add canvas element to page

02 minutes33 seconds

How Canvas draws graphics

06 minutes14 seconds

Understanding Canvas coordinates

When not to use Canvas

If the browser does not support Canvas

Check browser support

Draw a straight line

02 minutes34 seconds

Draw a rectangle

Draw a circle

draw triangle

03 minutes08 seconds

Clear canvas

Draw a quadratic Bezier curve

Draw cubic Bezier curve

Save and restore Canvas state

Move coordinate space

Rotate coordinate space

Rotate coordinate space

Zoom graphics

matrix transformation

combination of graphics

04 minutes55 seconds

clipping path

Apply different line styles

Draw a linear gradient

Draw a radial gradient

draw patterns

Set the transparency of graphics

Create shadow

Draw filler text

Draw outline text

Measure text width

Import images into Canvas

Change image size

Create image slices

07 minutes04 seconds
Chapter6audio and video

Detect audio format support with JavaScript

04 minutes20 seconds

Detect video format support with JavaScript

03 minutes38 seconds

Understand audio elements

02 minutes28 seconds

Play audio

05 minutes22 seconds

Understanding video elements

01 minutes12 seconds

play video

06 minutes11 seconds

Audio and video related properties

Audio and video related methods

08 minutes58 seconds

Audio and video related methods

Audio and video related events

Control music playback with script

View video frames

Chapter7Web browser application

Check browser support

06 minutes32 seconds

Set and get data

Prevent data leakage

Other uses of Web Storage

02 minutes25 seconds

Web Storage event monitoring

03 minutes37 seconds

Example 1: Design web skin

Example 2: Tracking localStorage data

05 minutes48 seconds

Example 3: Design counter

Comprehensive application: real-time tracking of web application projects

08 minutes56 seconds

Using a Web SQL database

Example 1: Create a simple local database

05 minutes56 seconds

Example 2: Store local data in batches

Comprehensive application: mixed development of Web Storage and Web SQL

Practical Combat 1: Caching the Home Page

Practical combat 2: Edit content offline

Practical Combat 3: Offline Tracking

Check browser support

Create Web Workers

Communicate with Web Workers

Hands-on practice using Web Workers

Chapter8Multi-threaded application

Use multi-threading to implement background operations

Filter values ​​in the background

Multi-tasking concurrent processing

Communicate between multiple threads

Calculate Fibonacci series using threading technology

Using multithreading for drawing

Write application main page

03 minutes13 seconds

Writing Worker js

Communicate with Web Workers

04 minutes15 seconds
Chapter9Detailed explanation of CSS3 knowledge points

Overview of CSS1.0 and CSS2.0

The relationship between CSS and DIV tags

05 minutes15 seconds

CSS coding standards

07 minutes57 seconds

attribute selector

05 minutes15 seconds

RGBA transparency

multi-column layout

Multiple background images

01 minutes54 seconds

String overflow

Block shadows and rounded shadows

rounded corners

Border picture

deformation

Application scope of CSS 3

Browsers that currently support CSS 3

Case practice: Design beautiful forms

Understanding attribute selectors

Case practice

Understanding structural pseudo-class selectors

Case practice

Understand common UI pseudo-class selectors

Case practice

Other selectors

Define text-shadow property

Apply shadow effect

Comprehensive practice: designing the homepage of a hacker website

05 minutes49 seconds

overflow text

text wrap

Use RGBA color values

Use HSL color values

Use HSLA color values

Define opacity attribute

Define transparent color value

Detailed usage explanation

Case practice

01 minutes04 seconds

Detailed usage explanation

Case practice

Detailed usage explanation

Case practice: Designing elliptical graphics

Detailed usage explanation

Case practice: Designing the interface effect of Windows 7

Define background coordinates

Define background cropping area

Define background image size

Define how the background image loops

Define multiple background images

Get to know transform

04 minutes26 seconds

Rotation animation

Zoom animation

moving animation

Tilt animation

Transform animation

Case practice: Designing a graffiti wall

Custom transformation

Define complex deformations

Define transition properties

Define transition time

Define transition delay time

Define transition effects

Case practice: Designing OS Navigator

Case practice: Designing picture flipping effects

Designing Webkit Gradient

Webkit case practice

Designing Webkit Gradient

Webkit case practice

Design Gecko Gradient

Gecko case practice

Designing IE Gradient

Designing W3C Gradient

Design gift box

Design folding panels

design can

Design disc sliding animation

Design drop-down menu

Exquisitely designed buttons

Chapter10layout

Design a multi-column layout

03 minutes16 seconds

Define column width

01 minutes29 seconds

Define the number of columns

01 minutes08 seconds

Define column spacing

01 minutes07 seconds

Define column border style

02 minutes19 seconds

Define display across columns

01 minutes45 seconds

Define column height

01 minutes49 seconds

Design box layout

04 minutes53 seconds

Define adaptive width ok

04 minutes08 seconds

Define column display order

01 minutes48 seconds

Define column arrangement direction

01 minutes13 seconds

Define module size adaptation

03 minutes05 seconds

Eliminate white space

04 minutes03 seconds

Define alignment

Comprehensive practice: designing multi-column web pages

05 minutes19 seconds

Change the way the box model is composed

Adjust element size

Define outline

Define contour displacement

Define navigation order

Define the direction key control sequence

Add display content

Cancel element style

Be careful when using initial

Overflow handling

Use @font-face rules

Meet the Media Queries module

Know the @media rules

Use @media rules

Apply @media rules to your site

Add voice function

design reflection

04 minutes42 seconds
  • CancelreplySending
  • Cancelpost a noteSending