松江网站关键词优化,网站的管理页面,建一个网站需要多少时间表,数据分析网站解释CSS Hack 一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。 IE浏览器Hack一般又分为三种#xff0c;条件Hack、属性级Hack、选择符Hack#xff08;详细参考CSS文档#xff1a;css文档#xff09;。例如#xff1a; // 1、条件Hack
!--[if IE]
sty… 解释CSS Hack 一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。 IE浏览器Hack一般又分为三种条件Hack、属性级Hack、选择符Hack详细参考CSS文档css文档。例如 // 1、条件Hack
!--[if IE]
style
.test{color:red;}
/style
![endif]--
// 2、属性Hack
.test{
color:#0909; /* For IE8 */
*color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE6 and earlier */
}
// 3、选择符Hack
* html .test{color:#090;} /* For IE6 and earlier */
* html .test{color:#ff0;} /* For IE7 */ 简要描述CSS中 content属性的作用 content属性与before及after伪元素配合使用用来插入生成的内容可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号并可以结合计数器为页面元素插入编号
body{
counter-reset:chapter
}
h1:before{
content第 counter chapter章
}
h1{
counter-increment:chapter
}
h1/h1
h1/h1
h1/h1
使用 content属性并结合 :before选择器和计数器 counter可以在每个h1元素前插入新的内容。 CSS的float和absolute属性的异同 共同点对内联元素设置float和absolute属性可以让元素脱离文档流并且可以设置其宽高。 不同点float仍会占据位置absolute会覆盖文档流中的其他元素 假如你有5个不同的CSS文件加载进页面最好方式是 用一个大的css文件代替这5个css文件 如何使用DIVCSS实现3栏布局左右固定200px,中间自适应 html
div classcontainer
div classmain
h2有课前端网/h2
/div
div classleft左边内容/divdiv classright 右边内容/div
/dv
CSS.container div {height200px}
.container{ padding0 200px}
.main,.left,.right{position:relativefloat:left}
.left.right{width200px}
.main{ width100%background:yellow}
.left {background:bluemargin-left-100%left-200px}
.right {background:greenmargin-left-200pxleft200px} 解释CSS Sprite ,以及如何在页面或网站中使用它 CSS Sprite其实就是把网页中一些背景图片整合到一张图片文件中再利用CSS的“ background- image“ background- repeat”“ background- position”的组合进行背景定位 background- position可以用数字精确地定位出背景图片的位置。 注意在高级浏览器中可以基于图片的bose64编码存储将图片与其他类型的文件打包 简述CSS中content的作用 content属性与before及after伪元素配合使用用来插入生成的内容可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号并可以结合计数器为页面元素插入编号。比如查看如下代码。
body{
counter-reset:chapter
}
h1:before{
content第 counter chapter章
}
h1{
counter-increment:chapter
}
h1/h1
h1/h1
h1/h1
使用 content属性并结合 :before选择器和计数器 counter可以在每个h1元素前插入新的内容 CSS如何定义高度很小的容器 因为有一个默认的行高所以在IE6下无法定义小高度的容器。 两种解决方案分别是 overflow:hidden或font-size容器高度px 如何在图片下方设置几像素的空白间隙 定义img为 display:block或定义父容器为font-size0 如何解决IE6双倍 margin的Bug 使用 display:inline 简述css如何让a标签不可点击 1、设置颜色为灰色 2、停用事件响应 3、设置鼠标样式为默认样式 - 选择用的箭头样式
a href# stylepointer-events: none;cursor: default;color:gray;点击/a
a href#点击/a CSS如何使英文单词发生词内断行 word-wrap:break-word 简述Animation与 Transition的异同 Animation功能通过定义多个关键帧实现更为复杂的动画效
Transition只能用指定属性的开始值和结束值两个属性值之间使用平滑过渡的方式实现动画效果不能实现比较复杂的动画效果。 简述Animation属性值有哪些 两个必要属性如下。 animation-name即动画名称。 animation- duration即动画持续时间。 其他属性值如下。 animation- play-state即播放状态 running表示播放 paused表示暂停可以用来控制动画暂停。 animation- timing- function即动画运动形式。 animation- delay即动画延迟时间。 mation-iteration- count即重复次数。 animation-direction即播放前重置 alternate动画直接从上一次停止的位置开始执行 缺点如下: 1在动画控制上不够灵活 2兼容性不好。 3部分动画功能无法实现 如何把元素从左侧移动50像素从顶端移动100像素 div{transform:translate50px,100px} CSS如何把一个元素旋转30° div{transform:rotate30deg} 如何解决通过 transform进行skew变形、 rotate旋转会出现锯齿现象的问题 -webkit-transform:rotate-4deg skew10deg translateZ0 transform:rotate-4deg skew10deg translateZ0; outline:lpx solid rgba255 255 255 0; 如何利用CSS3制作淡入淡出的动画效果 -webkit-keyframes fadeIn {
from {
opacity0/*初始状态透明度为0*/
}
to { opacity1/*结尾状态透明度为1*/
}
}
-webkit-keyframes fadeout {
from { opacity1/*初始状态透明度为1*/
}
to{
opacity0/*结尾状态透明度为0*/
}
}
2为div增加如下动画代码。div{
-webkit- animation-name:fadeIn/*动画名称*/
- webkit- animation-duration3s/*动画持续时间*/
- webkit- animation-iteration- count1/*动画次数*/
- webkit- animation- delay0s/*延迟时间*/ 简述CSS3中 transition属性值及含义 ransition属性是一个简写属性用于设置以下4个过渡属性。 transition- property哪个属性需要实现过渡 transition- duration完成过渡效果需要多少秒/毫秒 transition- timing- function速度效果的运动曲线如 linear、ease-in、ease、ease-out、 ease-in-out, cube-bezier。 transition- delay规定过渡开始前的延迟时间。 简述CSS中background-clip和 background- origin的区别 background-clip规定背景包括背景颜色和背景图片的绘制区域它有3种属性分别是 border-box、 padding-box、 content-box。 border-box即背景从边框开始绘制。 padding-box即背景在边框内部绘制。 content-box即背景从内容部分绘制。 background- origin规定背景图片的定位区域。 CSS如何实现自适应布局 1可以使用媒体查询做响应式页面。 3使用弹性盒模型 简述三栏布局方式两边固定中间自适应 1. margin 负值法左右两栏均左浮动左右两栏采用负的 margin 值。 中间栏被宽度为 100%的浮动元素包起来 2. 自身浮动法左栏左浮动右栏右浮动中间栏放最后 3. 绝对定位法左右两栏采用绝对定位分别固定于页面的左右两侧 中间的主体栏用左右 margin 值撑开距离。 4.flex 左右固定宽 中间 flex1 5.网格布局 6. table 布局 简述css怎么禁止选中文字 user-selectnone |text| all | element
none文本不能被选择 text可以选择文本
all当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素那么被选择的部分将是以该子元素向上回溯的最高祖先元素。 lement可以选择文本但选择范围受元素边界的约束 简述css怎样设置一半背景 background-repeat:no-repeat
background-size:50% 100% 简述css如何取消链接下划线 {text-decoration:none;} 简述css如何将背景图居中 background-position:center 简述css怎样实现鼠标悬浮改变图片 图片元素:hover{background:url(鼠标悬浮后显示图片的路径);} 简述css中:not用法是什么 :not”是选择器的一种如果希望某个样式不作用到选择器上可以使用:not(选择器语法格式为“ 元素:not(元素id){属性:属性值;} 简述css3怎样控制旋转时间 利用animation属性和“keyframes”规则给元素定义一个旋转动画
利用“animation-duration”属性设置控制元素的旋转时间语法为“元素{animation-duration:time;}”
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
meta http-equivX-UA-Compatible contentieedge
titleDocument/title
style
.div1{
width:100px;
height:100px;
background-color:pink;
animation:fadenum;
animation-duration:10s;
}
keyframes fadenum{
100%{transform:rotate(360deg);}
}
.div2{
width:100px;
height:100px;
background-color:pink;
animation:fadenum1;
animation-duration:5s;
}
keyframes fadenum1{
100%{transform:rotate(360deg);}
}
/style
/head
body
div classdiv1/divbrbr
div classdiv2/div
/body
/html
