HTML5结构标签、border-radius、box-shadow与text-shadow

来源：互联网发布：淘宝装修导航颜色代码编辑：程序博客网时间：2024/05/29 09:39

一. border-radius 使用

border-radius用来设置圆角。语法：border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radius 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。其遵循相对原则。

二.box-shadow与text-shadow #

box-shadow和text-shadow分别为块和文字设置阴影；语法：text-shadow/box-shadow: x-shadow y-shadow blur color;

x为x方向的阴影，y为y方向的阴影，blur为其阴影的模糊值，color为阴影颜色。

三.HTML5的结构标签

header标签和footer标签。
- header主要用于设置页面的头部，也可设置文档的头部等…；footer用来设置页面的底部，也可用于文档的脚部等…
- 例如：<body><header></header><div id='main'></div><footer></footer><body>
section标签。
- 此标签用于章节、页眉、页脚或文档中的其他部分。例如：<section><h1>这是内容<h1></section>
nav标签。
- 标签定义导航部分。例如：<nav><a>首页</a><a>军事</a><a>国内</a></nav>
  4.* article标签。*
- 为特殊的section标签。它代表独立的完整的相关内容块，可以包含文章的标题块。例如：<article><a href="http://www.apple.com">Safari 5 released</a><br />7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac......</article>
aside标签。
- 标签为与主内容相关，可以为广告、侧边栏，引用等。例如：<p>这是内容.</p><aside><h4>标题r</h4>广告区</aside>
menu标签。
- 定义菜单列表，例如<menu><input type='text'></menu>
figure标签。
- 标签规定独立的内容，如图像、代码、照片等，内容与主内容相关，但不影响文档流。如<figure><p>黄浦江上的的卢浦大桥</p><img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure>
dialog标签。
- 对话标签。如<dialog><dt>老师</dt><dd>2+2 等于？</dd><dt>学生</dt><dd>4</dd><老师</dt><dd>答对了！</dd></dialog>。要与dt标签合用。
meter标签。
- 用于定于度量衡。例如：<meter value="9" min="0" max="10">/</meter><br><meter value="0.6">60%</meter>。value为其进度值，min为最小值，max为最大值。
progress标签。
- 定义进度条<progress max=10 min=0 value=4></progress>。和meter一样。
datalist标签。
- 与input合用该标签，定义选项列表。例如<input id="myCar" list="cars" /><datalist id="cars"><option value="BMW"><option value="Ford"><option value="Volvo"></datalist>。输入文字时，会主动提示option的内容。

0 0