请用CSS 实现:一个矩形内容,有投影,有圆角,hover 状态慢慢变透明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 200px;
border-radius: 10px;
box-shadow: 0 0 10px 4px rgba(13, 1, 1, 0.3);
margin: 40px auto;
background-color: #f00;
transition: all 1s;
cursor: pointer;
}
.box:hover{
filter:alpha(opacity=0); /* IE */
opacity: 0;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
html5\CSS3 有哪些新特性、移除了那些元素?如何处理HTML5 新标签的浏览器兼容问题?如何区分HTML 和HTML5?
HTML5 现在已经不是SGML 的子集,主要是关于图像,位置,存储,地理定位等功能的增加。
* 绘画canvas 元素
用于媒介回放的video 和audio 元素
本地离线存储localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素,比如article、footer、header、nav、section
表单控件,calendar、date、time、email、url、search
CSS3 实现圆角,阴影,对文字加特效,增加了更多的CSS 选择器多背景rgba
新的技术webworker, websockt, Geolocation
- 移除的元素
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
* 是IE8/IE7/IE6 支持通过document.createElement 方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5 新标签,
浏览器支持新标签后,还需要添加标签默认的样式:
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim 框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
你怎么来实现页面设计图,你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?
- 首先划分成头部、body、脚部;。。。。。
- 实现效果图是最基本的工作,精确到2px;
- 与设计师,产品经理的沟通和项目的参与做好的页面结构,页面重构和用户体验
- 处理hack,兼容、写出优美的代码格式
- 针对服务器的优化、拥抱HTML5。
请谈一下你对网页标准和标准制定机构重要性的理解。
(无标准答案)网页标准和标准制定机构都是为了能让web 发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO 也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。
知道css 有个content 属性吗?有什么作用?有什么应用?
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
最常见的应用是利用伪类清除浮动。
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:""; //这里利用到了content 属性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;//触发ie的hasLayout属性
}
那么问题继续还有,知道css 计数器(序列数字字符自动递增)吗?如何通过css content 属性实现css 计数器?
答案:css 计数器是通过设置counter-reset 、counter-increment 两个属性、及counter()/counters()一个方法配合after / before 伪类实现。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
counter-reset: section;//counter-reset属性创建或重置一个或多个计数器。
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment: section;
content: 'Section' counter(section) ".";
}
h2:before{
counter-increment: subsection;
content: counter(section) "." counter(subsection) "";
}
</style>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h2>h22</h2>
<h2>h222</h2>
<h1>h111</h1>
<h2>h222</h2>
<h2>h222</h2>
<h1>h111</h1>
<h2>h222</h2>
<h2>h222</h2>
</body>
</html>