CSS+DIV Web Style and Layout: From Beginners to Proficient in Book Catalogue

Video commentary: 2 hours and 38 minutes

1. 1 elaborate web page structure 2

Select semantic tag 2 for 1. 1.

1. 1.2 document type and browser mode 7

1.2 Understanding CSS 8

1.2. 1 Why do you study CSS 9?

The basic syntax of 1. 2. 2 CSS 9

1.2.3 preliminary design review 10

1.3 CSS selector 12

1.3. 1 CSS Selector 12 Overview

1.3.2 Label Selector 13

1.3.3 ID selector 14

1.3.4 class selector 16

1.3.5 Pseudo Class and Pseudo Object Selector 17

1.3.6 child selector 19

1.3.7 adjacent to selector 20

1.3.8 Attribute Selector 2 1

1.3.9 universal selector 23

1.3. 10 includes a selector 23.

1.3. 1 packet selector 25

1.3. 12 specifies selector 26.

Basic characteristics of 1.4 CSS 26

1.4. 1 cascade and particularity 26

1.4.2 Inheritance 3 1

1.5 style sheet planning, organization and maintenance 32

1.5. 1 Apply Styles to Documents 32

1.5.2 comment code 34

1.5.3 style document 37

1.5.4 Organize style sheets to simplify maintenance 37

1.6 CSS attributes and attribute values 38

1.6. 1 CSS attribute 38

1.6.2 CSS unit 44

1.6.3 suit color 46

Chapter 2 Using CSS to Set Fonts and Text Styles 48

Video commentary: 2 hours 12 minutes

2. 1 font and text style basis 49

2. 1. 1 defines the font type 49.

2. 1.2 defines the font size 5 1

2. 1.3 defines the font color 53

2. 1.4 Define font thickness 54

2. 1.5 define italic font 55

2. 1.6 Defining Underline, Strikethrough and Top Underline 56

2. 1.7 Define font case 57

2. 1.8 Defining Text Alignment 58

2. 1.9 defines vertical alignment 60.

2. 1. 10 defines kerning and line spacing 63

2. 1. 1 1 defines the line spacing of 64.

2. 1. 12 defines indentation 67

2.2 Case actual combat 68

2.2. 1 design Baidu Logo 69

Set the title style 70

2.2.3 Setting Text Style 73

2.2.4 Setting the Text Style 75

2.2.5 Setting Text Segment Style 79

2.2.6 Setting Paragraph Layout Style 82

2.2.7 Design a single-page graphic mixed typesetting style 86

Chapter 3 Using CSS to Set Picture Style 92

Video commentary: 1 hour 32 minutes

3. 1 picture style setting basis 93

3. 1. 1 Define picture border 93

3. 1.2 Define the picture size 97

3. 1.3 defines the horizontal alignment of the picture 98.

3. 1.4 defines the vertical alignment of the picture 99.

3. 1.5 Set the text wrapping effect 10 1

3.2 Case Practice 103

3.2. 1 mixed picture and text 103

3.2.2 Picture Layout 107

3.2.3 Multi-graph arrangement 1 1 1

3.2.4 Shadow map 1 14

3.2.5 fillet picture 1 16

3.2.6 Design fillet column 1 18.

Chapter 4 Using CSS to Control Background Images 124

Video commentary: 1 hour 38 minutes

4. 1 background style setting basis 125

4. 1. 1 Set the page background color 125.

4. 1.2 Set the background color occlusion page 126.

4. 1.3 Define the background picture 128.

4. 1.4 repetition of background picture 130

4. 1.5 Define the location of the background picture 13 1.

4. 1.6 fixed background picture 133

4.2 Case Practice 134

4.2. 1 Set the background color of the webpage 135.

4.2.2 Set the pattern border 136.

4.2.3 Set a permanently fixed background 143.

4.2.4 Set the cylindrical module 144.

4.2.5 Design column layout 149

4.2.6 Design sliding door menu 15 1

4.2.7 Design light box advertisement 154

4.2.8 Design blog homepage effect 157

Chapter 5 Using CSS Control List Style 163

Video commentary: 55 minutes

5. 1 List Style Setting Basis 164

5. 1. 1 Set list item symbol 164

5. 1.2 defines the picture symbol of the project 166.

5. Horizontal and vertical transformation of1.3 list 167

5.2 Case Practice 169

5.2. 1 design news column 169

5.2.2 Design navigation menu 173

5.2.3 Design multi-level menu 177

5.2.4 Application of List Typesetting 182

5.2.5 Using list to realize the effect of mixed arrangement of pictures and texts 186

Chapter 6 uses CSS 192 to design table style.

Video commentary: 45 minutes

6. 1 table style setting basis 193

6. 1. 1 Set table color 193

6. 1.2 Set table border 194

6.2 case exercise 196

6.2. 1 beautification form 197

6.2.2 Design Efficient Form 200

6.2.3 Making tables easier to use 204

Table layout 207

Chapter 7 Using CSS to Design Form Styles 2 1 1

Video commentary: 1 hour 45 minutes

7. 1 Form Style Setting Basis c2 12

7. 1. 1 Forming Basic Structure 2 12

7. 1.2 Set the basic style 2 16

7. 1.3 Define font style 22 1

7. 1.4 Define border style 222

7. 1.5 Define the background style 224

7.2 Case actual combat 228

7.2. 1 Design colorful drop-down menu style 228

7.2.2 Design Registration Form 230

Design questionnaire 235

Design feedback table 240

Chapter 8 Using CSS to Define Link Styles 246

Video commentary: 1 hour 12 minutes

8. 1 link style setting basis 247

8. 1. 1 Set link style 247

8. 1.2 Design underline style 248

8. 1.3 Setting Type Indication Style 249

8. 1.4 Define button style 25 1

8. 1.5 defines the accessed style 254.

8. 1.6 link prompt style 254

8.2 Case actual combat 256

8.2. 1 mouse style 256

Design menu style 259

8.2.3 Design Apple Navigation Menu 26 1

8.2.4 Label 266

8.2.5 Picture Browsing271

Chapter 9 Page Typesetting and DIV+CSS Layout 275

Video commentary: 2 hours and 47 minutes

9. 1 CSS box model 276

9. 1. 1 cognitive frame model 276

9. 1.2 outer space 278

9. 1.3 inner margin 28 1

9. 1.4 border 284

9. 1.5 width and height 284

9.2 Web page reconstruction 287

9.2. 1 Set the document type 287

9.2.2 Select the label 293

9.2.3 Case Study: Trying to Rebuild Zen Garden 296

9.3 Web Page Typesetting 299

9.3. 1 Basic principles of web page layout 299

9.3.2 Basic Forms of Standard Web Page Layout 300

9.3.3 Basic methods of webpage typesetting

9.4 DIV+CSS layout 305

9.4. 1 layout space 305

Layout position 307

9.4.3 Peripheral Layout 309

9.4.4 Clear floating 3 1 1

9.4.5 Layout Nesting 3 13

9.4.6 Adjust the layout spacing by 3 16.

9.5 Case Exercise 32 1

9.5. 1 two-column layout 322

9.5.2 Three-column Layout 327

Chapter 10 Using CSS to Locate and Control the Layout of Web Pages 332

Video commentary: 1 hour 53 minutes

10. 1 CSS location333

Use 10. 1 to understand position 333.

10. 1.2 static positioning 333

10. 1.3 absolute location334

10. 1.4 relative positioning 335

10. 1.5 fixed positioning 338

10.2 positioning reference 339

Reference object 339

10.2.2 Coordinate value 343

10.2.3 positioning specificity 344

10.3 positioning stack 347

10.3. 1 stacking order 347

10.3.2 Nested Cascading Order 349

10.3.3 CSS stacking box 35 1

10.3.4 CSS cascade FAQ 354

10.4 case actual combat 357

10.4. 1 album page layout 357

10.4.2 Exhibition Page Layout 36 1

Romantic page layout 366

Chapter 1 1 solves common problems in CSS design.

Video commentary: 2 hours

1 1. 1 IE conditional statement 373

11.1.1Understanding IE conditional statement 373

Basic usage of 1 1. 1.2 IE conditional statement 374

1 1. 1.3 case exercise: designing a compatible multi-level menu 376

1 1.2 CSS rendering and question 380

1 1.2. 1 Turn IE layout function on and off +0.

1 1.2.2 Layout characteristic setting method 38 1

1 1.2.3 Question 1: The inclusion box 384 cannot be automatically expanded.

1 1.2.4 Question 2: Problems related to floating layout and their solutions 387

1 1.2.5 Question 3: Problems and Treatment of Adjacent Floating Layout 389

1 1.2.6 Question 4: Problems and solutions of list layout 390.

1 1.2.7 Question 5: Problems and solutions of positioning layout 392.

1 1.3 Common browsers analyze problems and solutions 394

1 1.3. 1 compatible with IE6 browser 395.

1 1.3.2 compatible with IE5 series browsers 396.

1 1.3.3 browser 398 is compatible with IE7 version.

1 1.3.4 is compatible with standard browsers such as FF 399.

1 1.3.5 problem 1: Bug 399 of hyperlink.

1 1.3.6 Question 2: Bug 400 with content and background separated.

1 1.3.7 Question 3: IE6 Hiding from Cats Bug 402

1 1.3.8 question 4: IE6 extra characters Bug 403

1 1.4 Case Exercise 403

1 1.4. 1 3 column outline layout 403

1 1.4.2 Three-column floating layout 408

Chapter 12 Tourism Hotel Website 4 10

Video commentary: 2 hours 18 minutes

12. 1 website page effect analysis 4 1 1

12. 1. 1 effect analysis of "tourism and vacation" page 4 1 1

12.10.2 "Book Hotel" page effect analysis 4 1 1

12.2 home page planning and design 4 12

12.3 web page design and reconstruction 4 14

12. 3. 1 sketches and design drawings 4 14

12.3.2 Tangtu 4 17

12.3.3 theme reconstruction 4 19

12.4 Page Layout 422

12. 4. 1 Basic design page style 422

12.4.2 Design header layout and style 422

Design the layout and style of the search and slide areas

12.4.4 Design the layout and style of the left guide area 427

12.4.5 design content area style 428

12.4.6 Design the right column style 43 1.

Chapter 13 News Website 434

Video commentary: 1 hour 20 minutes

13. 1 website page effect analysis 435

13. 1. 1 "dialogue" page effect analysis 4335

13. 1.2 Global View Page Effect Analysis 435

13.2 home planning and design 436

13.3 web page design and reconstruction 438

Draw sketches and design drawings 438

13.3.2 cutting number 440

13.3.3 discipline reconstruction 442

13.4 Page Layout 444

Basic design style page 445

13.4.2 Design header layout and style 445

Design the layout and style of the main news area.

Design the layout and style of classified news area 450

Chapter 14 Using JavaScript to Control CSS Styles 455

Video commentary: 2 hours and 47 minutes

JavaScript basics 456

14. 1. 1 Embedding JavaScript script 456 in the webpage

14.1.2 location of JavaScript script in document 457

Resolve conflicts between JavaScript scripts and CSS styles 457

14.2 CSS script traditional control method 459

14. 2. 1 Understanding Style Object 460

14.2.2 Read and write embedded style 464

14.2.3 Reading and writing styles in style sheets 467

The actual style of visiting a web page 472

14.3 standard method for controlling CSS scripts 473

14.3. 1CSS stylesheet interface 474

14.3.2 CSSStyleRule interface 474

14.3.3 CSS style declaration interface 475

14.4 using JavaScript to control the element size 476

14.4. 1 Read the length and width pattern values of element 476.

14.4.2 uses offsetWidth and offsetHeight properties to read the size of element 479.

14.4.3 Read the element size in the complex structure 48 1

14.4.4 Read browser window size 485

Using JavaScript to locate 486

The position of 14.5. 1 in window 487.

The position of 14.5.2 relative to the parent element 489.

14.5.3 Relative position of the accommodation block 489

14.5.4 defines the offset position 490.

14.5.5 defines the relative position 490.

14.5.6 determine the cursor position

Determining the relative position of the cursor 492

Determine the position of the scroll bar 493.

Defines the position of the scroll bar 493.

14.6 Use JavaScript to set the display and hide effects 494.

Setting Show and Hide Effects 494

Set transparency 495

14.6.3 control animation duration 496

14.6.4 design slip effect 499

Chapter 15 Using CSS to Design XML Document Style502

Video commentary: 43 minutes

15. 1 XML base 503

15. 1. 1 XML document basic structure 503

15. 1.2 report 504

15. 1.3 processing instruction 504

15. 1.4 Note 505

1.5 label 505

15. 1.6 Attribute 506

15.2 Set XML document style 507

15.2. 1 CSS stylesheet 507

15.2.2 XSL stylesheet 508

15.3 CSS and XML document association 5 10

15.3. 1 directly embed CSS style 5 10.

15.3.2 Import external CSS style sheet file 5 12

15.3.3 @ Import 5 13

15.4 Case Exercise 5 13

15. 4. 1 Design poetic graphic effect 5 13

15.4.2 Design news layout effect 5 15

Chapter 16 Using CSS Filter 5 19

Video commentary: 43 hours and 0 minutes

16. 1 CSS filter overview 520

16. 1. 1 basic usage 520

16. 1.2 properly select the filter 520.

16.2 Common CSS filters 52 1

16.2. 1 channel (Alpha) 52 1

16.2.2 fuzzy)

Motion blur (motion blur) 56638+06.2.3.50106.10000000605

16.2.4 chroma) 525

Flip 527

16.2.6 glow)

16.2.7 gray)

65438+

16.2.9 mask 53 1

16.2. 10 shadow) 532

16.2. 1 1 X-ray 534

Relief (relief) 50000.00000000005

16.2. 13 wave (wave) 56661

16.3 Case Exercise 537