Study Notes for HTML5 and CSS3 basic tutorials-Three Day, threedays

Study Notes for HTML5 and CSS3 basic tutorials-Three Day, threedays
Chapter 2

1. box-sizing: border-box (include padding and border in width and height)

2. clear: display the elements behind the floating element.

3. z-index is only valid for absolute, fixed, and relative positioning elements.

4. vertical-aligh is only used for intra-row elements.

Baseline/middle/sub/super/text-top/text-bottom/top/bottom/percentage/value

Chapter 2

1. <link media = "only/not screen/print/

And (min-width/max-width/resolution: value) "href ="/>

2. <meta name = "viewport" content = "width = device-width, initial-scale = 1"/>

Chapter 2

1,

 body{font-family:’ pt_sansregular’;}@font-face{ font-family: 'pt_sansregular';src: url('PTS55F-webfont.eot');src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),url('PTS55F-webfont.woff') format('woff'),url('PTS55F-webfont.ttf') format('truetype');font-weight: normal;font-style: normal;}

 

Chapter 2

 

1. gradient background

1) by default, the linear gradient is gradient from top to bottom, so you do not need to specify to bottom in the attribute values.

Background: aqua; // The background: linear-gradient (to top right, blue, green); background: linear-gradient (90deg, blue, green); (starting point: online)

 

2) radial gradient

/* Default */background: red; background: radial-gradient (yellow, red); background: radial-gradient (at top, yellow, red); background: radial-gradient (closest-side at 70px 60px, yellow, lime, red); background: radial-gradient (30px 30px at 65% 70%, yellow, lime, red)

 

 

2. Set opacity for the element

• Opacity: value

3. content generation results

: Before AND: after. more: after {content :"»";}

 

4. Use sprite to splice Images

Sprite is the background image generated by using content. Set it to display: block; To set the height and width that match the Icon size.

. Icon: before {background-image: url(sprite.png); content: ""; // adjust display: block; // height: 16px;/* icon height */position: absolute; width: 16px;/* icon width */} a [href $ = ". xls "]: before {background-position:-17px 0;} a [href $ = ". docx "]: before {background-position:-34px 0 ;}

 

Chapter 2

1. custom tag

ul{   list-style: none;   margin-left: 0;padding-left: 0;}li{   background: url(../img/done_square.png) no-repeat 0 .1em;   padding-left: 15px;   line-height: 24px;}

 

2. Select the start Number of the list.

1) Add start = "n" to the first value of the entire list encoding ol"

2) modify the code of a list in the ordered list to affect the subsequent list. add value = "n" to li"

3. Control the mark position

List-style-position = "inside/outside (default )"

4. drop-down navigation

HTML:

<nav role="navigation">         <ul class="nav">            <li><a href="/">Home</a></li>            <li><a href="#">Products</a>                <ul class="subnav">                   <li><a href="#">Phones</a></li>                   <li><a href="#">Accessories</a></li>                </ul>            </li>            <li><a href="#">Support</a>                <ul class="subnav">                   <li><a href="#">Community Forum</a></li>                   <li><a href="#">Contact Us</a></li>                   <li><a href="#">How-to Guides</a></li>                </ul>            </li>            <li><a href="#">About Us</a></li>         </ul>         <!-- end .nav -->      </nav>

 

CSS:

/* Default sub-menu status */. nav. subnav {left:-999em;/* remove the sub-menu from the screen */position: absolute; z-index: 1000;} a, a: hover {text-decoration: none ;} ul {list-style: none; margin-left: 0; padding-left: 0 ;}. nav {background: # fff ;}. nav> li {float: left; padding-right: 10px ;}. nav ul {background: # fff; z-index: 1000; border-bottom: 1px solid # fff ;}. nav ul li {border-bottom: 1px solid gray; line-height: 24px; padding: 2px 5px ;} /* The Sub-menu status when the mouse stays over the parent element li */. nav li: hover. subnav {left: auto;/* bring the sub-menu back to its natural state */}