整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

html5+css3实现特殊网页效果11例

TML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

CSS 用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

CSS3 被拆分为"模块"。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

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: #fff;
    text-shadow: black 0.1em 0.1em 0.2em;
}

要实现的效果：

CSS3：

p {
    text-align: center;
    font:bold 60px helvetica, arial, sans-serif;
    color: red;
    text-shadow: 0 0 4px white, 
        0 -5px 4px #ff3, 
        2px -10px 6px #fd3, 
        -2px -15px 11px #f80, 
        2px -25px 18px #f20;
}

要实现的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: -1px -1px white,  
        1px 1px #333;
}

要实现的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: 1px 1px white,  
        -1px -1px #333;
}

4 border的transparent属性

要实现的效果：

CSS3：

#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-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 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：

#demo {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

}

5 transform: rotate

要实现的效果：

CSS3和HTML5：

<style type="text/css">
.bubble {
    width: 200px; /*定义框大小，可忽略，让消息框自由收缩*/
    height: 50px;
    background:hsla(93,96%,62%,1); /*定义背景色，必须与下面箭头背景色一致*/
    padding: 12px;  /*增加补白，防止消息文本跑到框外*/
    position: relative; /*定义定位包含框，方便定位箭头*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;   /*圆角*/
}
.bubble:before { 
    content: "";   /*不显示任何内容*/
    width: 0;  /*定义箭头内容区大小*/
    height: 0;
    position: absolute;  /*绝对定位*/
    z-index:-1;  /*显示在消息框下面*/
}
.bubble.bubble-left:before {
    right: 90%;
    top: 50%;
    
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    transform: rotate(-25deg);  /*定位箭头倾斜角度*/
    /*定义箭头长短、粗细*/
    border-top: 20px  solid transparent;
    border-right: 80px  solid hsla(93,96%,62%,1);
    border-bottom: 20px  solid transparent;

}

div {
    margin:50px;
}

<div class="bubble bubble-left">左侧消息提示框<br>class="bubble bubble-left"</div>

6 background: repeating-linear-gradient

要实现的效果：

CSS3：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
    background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
    background-size: 100% 30px;
    position: relative;
}
body:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}

需要实现的效果：

CSS3：

.box {
    background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
    color: #fff;
    padding: 12px 24px;
}

7 实现选项卡效果

<script>
function setTab(cursel,n){
	    for(i=1;i<=n;i++){
	        	var menu=document.getElementById("tab_"+i);
	        	var con=document.getElementById("con_"+i);
	        	menu.className=i==cursel?"hover":"";
	        	con.style.display=i==cursel?"block":"none";
	    }
}
</script>

<div id="tab">
    <div class="Menubox">
        <ul>
            <li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
            <li id="tab_2" onclick="setTab(2,4)">搞笑</li>
            <li id="tab_3" onclick="setTab(3,4)">美女</li>
            <li id="tab_4" onclick="setTab(4,4)">摄影</li>
        </ul>
    </div>
    <div class="Contentbox">
        <div id="con_1" class="hover" ><img src="images/1.png" /></div>
        <div id="con_2" class="hide"><img src="images/2.png" /></div>
        <div id="con_3" class="hide"><img src="images/3.png" /></div>
        <div id="con_4" class="hide"><img src="images/4.png" /></div>
    </div>
</div>
</body>

8 表格隔行添加背景色

CSS3：

tbody tr:nth-child(2n) {
    background-color: #f5fafe;
}

9 border-radius

圆角表格的CSS3：

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

10 border-spacing

单线表格的CSS3：

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

11 box-shadow

设计图片翘边阴影效果：

CSS3：

.box {
    width: 980px;
    clear: both;
    overflow: hidden;
    height: auto;
    margin: 20px auto;
}
.box li {
    background: #fff;
    float: left;
    position: relative;
    margin: 20px 10px;
    border: 2px solid #efefef;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    left: 21px;
    background: transparent;  /*透明背景*/
    z-index: -2;   /*显示在照片的下面*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);  /*添加阴影*/
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(-12deg) rotate(-6deg);   /*变形并旋转阴影，让其翘起*/
    -webkit-transform: skew(-12deg) rotate(-6deg);
    -moz-transform: skew(-12deg) rotate(-6deg);
    -os-transform: skew(-12deg) rotate(-6deg);
    -o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左侧添加翘边阴影*/
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    right: 21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(12deg) rotate(6deg);
    -webkit-transform: skew(12deg) rotate(6deg);
    -moz-transform: skew(12deg) rotate(6deg);
    -os-transform: skew(12deg) rotate(6deg);
    -o-transform: skew(12deg) rotate(6deg);
}

<ul class="box">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
</ul>

ref

《HTML5+CSS3+JavaScript从入门到精通（实例版）》

-End-

言

Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。

用户权限

想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的？

Notification.permission 该属性用于表明当前通知显示的授权状态，可能的值包括：

  • default ：不知道用户的选择，默认。granted ：用户允许。denied ：用户拒绝。
if(Notification.permission === 'granted'){
 console.log('用户允许通知');
}else if(Notification.permission === 'denied'){
 console.log('用户拒绝通知');
}else{
 console.log('用户还没选择，去向用户申请权限吧');
}

请求权限

当用户还没选择的时候，我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。

以前基于回调的语法已经弃用（当然在现在的浏览器中还是能用的），最新的规范已将此方法更新为基于 promise 的语法：

Notification.requestPermission().then(function(permission) {
 if(permission === 'granted'){
 console.log('用户允许通知');
 }else if(permission === 'denied'){
 console.log('用户拒绝通知');
 }
});

推送通知

获取用户授权之后，就可以推送通知了。

var notification = new Notification(title, options)

参数如下：

  • title：通知的标题options：通知的设置选项（可选）。
  • body：通知的内容。tag：代表通知的一个识别标签，相同tag时只会打开同一个通知窗口。
  • icon：要在通知中显示的图标的URL。
  • image：要在通知中显示的图像的URL。
  • data：想要和通知关联的任务类型的数据。
  • requireInteraction：通知保持有效不自动关闭，默认为false。

还有一些其他的参数，因为用不了或者没什么用这里就没必要说了。

var n = new Notification('状态更新提醒',{
 body: '你的朋友圈有3条新状态，快去查看吧',
 tag: 'linxin',
 icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
 requireInteraction: true
})

通知消息的效果图如下：

关闭通知

从上面的参数可以看出，并没有一个参数用来配置显示时长的。我想要它 3s 后自动关闭的话，这时可以调用 close() 方法来关闭通知。

var n = new Notification('状态更新提醒',{
 body: '你的朋友圈有3条新状态，快去查看吧'
})

setTimeout(function() {
 n.close();
}, 3000);

事件

Notification 接口的 onclick属性指定一个事件侦听器来接收 click 事件。当点击通知窗口时会触发相应事件，比如打开一个网址，引导用户回到自己的网站去。

var n = new Notification('状态更新提醒',{
 body: '你的朋友圈有3条新状态，快去查看吧',
 data: {
 url: 'http://blog.gdfengshuo.com'
 }
})
n.onclick = function(){
 window.open(n.data.url, '_blank'); // 打开网址
 n.close(); // 并且关闭通知
}

应用场景

前面说那么多，其实就是为了用。那么到底哪些地方可以用到呢？

现在网站的消息提醒，大多数都是在消息中心显示个消息数量，然后发邮件告诉用户，这流程完全没有错。不过像我这种用户，觉得别人点个赞，收藏一下都要发个邮件提醒我，老是要去删邮件（强迫症），我是觉得挺烦的甚至关闭了邮件提醒。

当然这里并不是说要用 Notification，毕竟它和邮件的功能完全不一样。

我觉得比较适合的是新闻网站。用户浏览新闻时，可以推送给用户实时新闻。以腾讯体育为例，它就使用了 Notification API。在页面中引入了一个 notification2017_v0118.js，有兴趣可以看看别人是怎么成熟的使用的。

一进入页面，就获取授权，同时自己页面有个浮动框提示你允许授权。如果允许之后，就开始给你推送通知了。不过它在关闭标签卡的时候，通知也会被关闭，那是因为监听了页面 beforeunload 事件。

function addOnBeforeUnload(e) {
 FERD_NavNotice.notification.close();
}
if(window.attachEvent){
 window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
 window.addEventListener('beforeunload', addOnBeforeUnload, false);
}

兼容

说到兼容，自然是倒下一大片，而且各浏览器的表现也会有点差异。移动端的几乎全倒，PC端的还好大多都能支持，除了IE。所以使用前，需要先检查一下浏览器是否支持 Notification。

TML称为超文本标记语言，是一种标识性的语言。在前端开发中离不开HTML，支持不同数据格式的文件镶入，前端工程师在面试过程中涉及到一些基础知识，常见的前端HTML5面试题有哪些呢？

本文，千锋武汉Web前端培训小编分享一些HTML5面试题及答案。准备参加web前端面试的小伙伴们来看一看吧，希望能够对大家有所帮助！

1、 什么是 HTML5？

HTML5是HTML(超文本标记语言)的最新版本。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。WHATWG(Web超文本应用技术工作组)另一次W3C个人聚会认为，W3C没有认真考虑当前方言的现实改进需求，它已经开始处理HTML-HTML5的新确定。因此，HTML5是HTML 4.01和XHTML 1.0的另一种改编，它集中于Web应用程序设计者的必要性上，并且还倾向于在当前细节中发现的问题。

具体而言，HTML5包含许多新的句法特征。新元素，如<section>, <article>, <header>和<nav>，是文档语义实质的重要组成部分。它们还包含<section>, <article>, <header>和<canvas>标记，以及SVG内容的集成。这些组件旨在简化合并和处理网络上的交互式媒体和图形内容，而无需诉诸限制性模块和API。少数成分和性状已被排出。一些组件，例如，<video>, <audio>和<menu>已经被更改、重新定义或标准化。API和DOM不再被重新考虑，而是HTML5规范的基本部分。

2、什么是<!DOCTYPE >？是否需要在HTML5中使用？

<!DOCTYPE>是关于页面写入了什么版本的HTML的指令。<!DOCTYPE>标记没有结束标记，它不区分大小写。<!DOCTYPE>声明必须是HTML5文档中的第一行，在标记之前。如HTML 4.01，全部<!DOCTYPE>声明需要引用文档类型定义(DTD)，因为HTML 4.01是基于标准通用标记语言(SGML)的。而HTML5并不基于SGML，因此不需要对文档类型定义(DTD)的引用。

3、HTML5有哪些的新特性？

HTML5中最有趣的新特性：

* 二维画图中的<canvas>元素

* 媒体播放的<video> 和<audio>元素

* 支持本地存储

* 新的内容特定元素，如<section>，<article>，<footer>，<header>，<nav>，<menu>

4、HTML5的优势有哪些？

一些网络研究的前5名似乎提供了以下HTML5特性;

* 相关性

* 标记/代码简洁

* 语义清晰

* 简明的表单和网络应用程序

* 缓存式离线应用程序

5、Canvas是什么？怎样写Canvas？

Canvas是HTML5的一个元素，它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。

<canvas id="myFirstCanvas" width="100" height="100"> </canvas>

6、HTML5地理定位是什么？如何使用？

HTML5 地理定位用于定位用户的位置HTML5 地理定位API用于获取用户的地理位置。由于这会侵犯用户隐私，除非用户批准，否则该位置不可用。使用 getCurrentPosition() 方法获取用户的位置。下面的示例是返回用户位置的纬度和经度的简单地理定位示例：

<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude +"Longitude: " + position.coords.longitude; } </script>

7、使用HTML5需要遵守哪些规则？

* 新的特性应该基于HTML、CSS、DOM和JavaScript

* 减少对外部插件的需求(如Flash)

* 更好的错误处理

* 更多的替换脚本的标记

* HTML5应与设备无关

* 开发过程必须可视化

8、HTML5中的Session storage存储对象是什么？如何创建和访问？

Session storage 存储对象存储一个会话的数据。当用户关闭浏览器窗口时，数据将被删除。如下所示，我们可以在这里创建“blogName”作为会话并访问Session storage<script type="text/javascript"> sessionStorage.blogName="OnlineInterviewQuestions"; document.write(sessionStorage.name); </script>

9、Html5应用程序缓存和Html浏览器缓存有什么区别？

新的HTML5规范允许浏览器在连接客户端时预取一些或全部网站资产，如HTML文件、图像、CSS、JavaScript等。对于获取此内容，用户以前没有必要访问此内容。换句话说，应用程序缓存可以预取完全未被访问的页面，从而在常规浏览器缓存中不可用。预取文件可以加速站点的性能，尽管您最初使用带宽下载这些文件。

10、简要描述下最新的HTML5标准中的API是什么？

下面是HTML 5标准提供的新API列表。* Canvas ：Canvas 由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域，这与其他常见的2DAPI类似，因此允许动态生成图形。Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。

* 定时媒体回放

* 离线存储数据库

* 文档编辑

* 拖放

* 跨文档消息传递

* 浏览器历史管理

* MIME类型和协议处理程序注册

11、LocalStorage本地存储在HTML5中有什么用途？

LocalStores 本地存储就是一个轻量级的sqllite数据库。可以在客户端本地存储数据，用于在断开网络连接的情况下读取本地缓存cookies，LocalStores可以将数据长期保存在客户端，直至人工清除为止，接下来演示下实例：

1、使用localStorage对象保存数据：

localStorage.setItem(key , value)

2、使用localStorage获取保存的数据：

localStorage.getItem(key)

3、清除localStorage保存的数据：

localStorage.removeItem(key)

4、清除全部localStorage对象保存的数据：

localStorage.clear( )

12、你能列出HTML5中新的输入类型属性吗？

search：用于搜索域，比如站点搜索或 Google 搜索，域显示为常规的文本域。

url ：用于应该包含 URL 地址的输入域在提交表单时，会自动验证 url 域的值。

email：用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值。

datetime：选取时间、日、月、年(UTC 时间)

date：选取日、月、年

month：选取月、年

week：选取周和年

time：选取时间(小时和分钟)

datetime-local：选取时间、日、月、年(本地时间)

number：用于应该包含数值的输入域，您还能够设定对所接受的数字的限定。

range：用于应该包含一定范围内数字值的输入域，类型显示为滑动条。

以上千锋武汉Web前端培训小编仅介绍了部分Web前端HTML面试题及答案，如果想要在众多竞争者中脱颖而出，除了专业技能还需要掌握一些求职面试的技巧，在面试过程中争取更多的主动权。关注“武汉千锋”微信公众号，会定期为大家分享最新Web前端面试题、发展趋势、学习资料，助力大家学好Web前端。

如果你也想快速学好Web前端，可以来千锋武汉Web前端培训，更可以申请两周免费试听课程，让你亲身实地感受高品质面授教学。

千锋武汉Web前端培训课程以实战项目驱动教学，结合时下流行技术，加入大数据可视化内容，同时深化了PHP+MySQL开发内容，精准匹配企业线下及未来需求，除了培养学员的开发技术，着力培养学员的大前端视角与全栈思维，深度贯穿前端后端开发，紧贴主流企业一线需求，助力千锋学员毕业即高薪就业。


在线咨询
上一篇：写个网页更简单了！让AI根据手绘原型生成HTML - 教程+代码
下一篇：如何解决HTML页面白屏问题

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 民乐县 坊子区 三江侗族自治县 彭泽县 叶城县 抚宁县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服