HTML 是用来描写网页的一种语言。
HTML 指的是超文本标记语言 文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
HTML 不是一种编程语言，而是一种标记语言 文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
标记语言是一套标记标签 文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
HTML 使用标记标签来描写网页文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
HTML5 是最新的 HTML 标准。文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
HTML5 是专门为承载丰厚的 web 内容而设计的，并且无需额外插件。文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
HTML5 具有新的语义、图形和多媒体元素。文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
HTML5 提供的新元素以及新的 API 简化了 web 利用程序的搭建。文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
CSS 是一种描写 HTML 文档样式的语言。文章源自微观生活（93wg.com）微观生活-https://93wg.com/2777.html
CSS 描写应当怎么显示 HTML 元素。
CSS 用于节制网页的样式以及布局。
CSS3 是最新的 CSS 标准。
CSS3 被拆分为&34;。主要包含盒子模型、列表模块、超链接方式、语言模块、背景以及边框、文字殊效、多栏布局等模块。
CSS3的新特征有不少，例如圆角效果、图形化边界、块暗影与文字暗影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图象的变形处理（旋转、缩放、歪斜、挪动）、多栏布局、媒体查询等。
1 标注效果
要实现如下效果：
HTML5:
<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。2 与文本换行相干的属性
|
使用说明 |
|
|
line-break |
用于指定怎么（或是不是）断行。除了了Firefox，其它阅读器都支撑。取值包含：auto，使用缺省的断行规则分解文本；loose，使用最疏松的断行规则分解文本，一般用于短行的情况，如报纸；normal，使用最一般的断行规则分解文本；strict，使用最严格的断行原则分解文本。 |
|
word-wrap |
允许长单词或URL地址换行到下一行。所有阅读器都支撑。取值包含：normal，只在允许的断字点换行（阅读器维持默许处理）；break-word，在长单词或 URL 地址内部进行换行。 |
|
word-break |
定义文本自动换行。Chrome以及Safari阅读器支撑不够友好。取值包含：normal：为默许值，允许在字内换行;keep-all,对于中文、韩文、日文，不允许字断开；break-all，与normal相同，允许非亚洲语言文本行的任意字内断开。 |
|
white-space |
设置怎么处理元素中的空格。所有阅读器都支撑。取值包含：normal，默许处理方式；pre，显示预先格式化的文本，当文字超越边界时不换行；nowrap， 强制在同一行内显示所有文本，合并文本间的过剩空白，直到文本收场或者遭受br对象；pre-wrap，显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时产生换行；pre-line， 维持文本的换行，不保存文字间的空白距离，当文字碰到边界时产生换行。 |
3 text-shadow
要实现的效果：
CSS3：
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: ff3,
2px -10px 6px f80,
2px -25px 18px D1D1D1;
background: 333;
}
要实现的效果：
CSS3：
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: CCC;
text-shadow: 1px 1px white,
-1px -1px demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
要实现的效果：
CSS3：
demo {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
要实现的效果：
CSS3：
ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}5 transform: rotate
要实现的效果：
CSS3以及HTML5：
<style type=&34;>
.bubble {
width: 200px; /*定义框大小，可疏忽，让动静框自由收缩*/
height: 50px;
background:hsla; /*定义背风景，必需与下面箭头背风景一致*/
padding: 12px; /*增添补白，避免动静文本跑到框外*/
position: relative; /*定义定位包括框，利便定位箭头*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*圆角*/
}
.bubble:before {
content: &34;; /*不显示任何内容*/
width: 0; /*定义箭头内容区大小*/
height: 0;
position: absolute; /*绝对定位*/
z-index:-1; /*显示在动静框下面*/
}
.bubble.bubble-left:before {
right: 90%;
top: 50%;
-webkit-transform: rotate;
-moz-transform: rotate;
transform: rotate; /*定位箭头歪斜角度*/
/*定义箭头长短、粗细*/
border-top: 20px solid transparent;
border-right: 80px solid hsla;
border-bottom: 20px solid transparent;
}
div {
margin:50px;
}
<div class=&34;>左边动静提醒框<br>class=&34;</div>6 background: repeating-linear-gradient
要实现的效果：
CSS3：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: -webkit-repeating-linear-gradient;
background: repeating-linear-gradient;
background-size: 100% 30px;
position: relative;
}
body:before {
content: &34;;
display: inline-block;
height: 100%;
width: 4px;
border-left: 4px double fff;
padding: 12px 24px;
}7 实现选项卡效果<script>
function setTab{
for{
var menu=document.getElementById;
var con=document.getElementById;
menu.className=i==cursel?&34;:&34;;
con.style.display=i==cursel?&34;:&34;;
}
}
</script>
<div id=&34;>
<div class=&34;>
<ul>
<li id=&34; class=&34; onclick=&34;>明星</li>
<li id=&34; onclick=&34;>弄笑</li>
<li id=&34; onclick=&34;>美女</li>
<li id=&34; onclick=&34;>摄影</li>
</ul>
</div>
<div class=&34;>
<div id=&34; class=&34; ><img src=&34; /></div>
<div id=&34; class=&34;><img src=&34; /></div>
<div id=&34; class=&34;><img src=&34; /></div>
<div id=&34; class=&34;><img src=&34; /></div>
</div>
</div>
</body>8 表格隔行添加背风景
CSS3：
tbody tr:nth-child {
background-color: fff;
float: left;
position: relative;
margin: 20px 10px;
border: 2px solid 34;&34;&34;box&34;images/1.jpg&34;images/2.jpg&34;images/3.jpg" /></li>
</ul>
ref
《HTML5+CSS3+JavaScript从入门到精晓（实例版）》
-End-
以上就是微观生活（93wg.com）关于“html5+css3实现特殊网页效果11例”的详细内容，希望对大家有所帮助！
评论