HTML5 seventh day notes-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 seventh day notes

黄舟

Dec 28, 2016 pm 05:19 PM

html5

HTML5’s new tag H5 attaches great importance to semantics

Header (equivalent to div, which defaults to the effect of div in browsers that are not compatible with H5)

The block-level element has no width after it is floated, and you need to add width to it.

background:none;Clear the background image;

Positioning:

position(position):

static:static

fixed: Fixed positioning (changed relative to the browser) does not retain its own position

relative: Relative positioning (changed relative to itself) retains its own position, generally used together with absolute positioning.

absolute: Absolute positioning (changed relative to the parent element) does not retain its position,

left:20px/50%

top: 20px/50%

bottom:20px/50%

right:20px/50%

When an element is absolutely positioned, relative positioning must be set for its parent element.

When there are positioned relationship elements, there is a cascading relationship.

z-index: Set the cascading relationship

z-index:-0 1 2 3 ...99999 (the larger the value, the more it will be displayed on the upper layer)

Display mode of elements

display:block;/inline;/inline-block;/none

display:block The default display mode of block-level elements

display:inline The default display of inline elements Mode

display:inline-block The default display mode of inline block-level elements

display:none hides the label. Does not take up space

visibility:hidden Hide takes up space

Navigation drop-down menu production

Drop-down menu

<nav class="nav">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a>
<div>
<p>本地</p>
<p>国内</p>
<p>国际</p>
<p>政府</p>
</div> 
</li>
<li><a href="#">娱乐</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">头条</a></li>
</ul> 
</nav>
li div{
display: none;
position: absolute;
background:darkgreen;
}
li:hover div{
display: block;
}
.nav ul{
position: relative;
}

Copy after login

The above is HTML5 The content of the notes on the seventh day, for more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn