html与css部分
-
{background-image: url(图片地址);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;}
图片自动适应div大小css background-size:contain;
css中设置背景图片 不重复 拉伸填充块空间
-
css需要初始化 样式表初始化方案:
-
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} a{color:#2d374b;text-decoration:none} a:hover{color:#cd0200;text-decoration:underline} em{font-style:normal} li{list-style:none} img{border:0;vertical-align:middle} table{border-collapse:collapse;border-spacing:0} p{word-wrap:break-word}
-
float导航栏居中的实现 在要居中的对象外层套div 的盒子 http://blog.sina.com.cn/s/blog_4dcb11a10102vvdy.html
-
-
下滑线的实现方案:1 text-decoration:underline;2 boder-buttom:solid
-
不同浏览器间差异真是不小
-
工具效率决定干活质量——入坑vscode
-
@font-face嵌入外部字体
@font-face{
font-family:Didot;
src:url(xxxx\xxx.tff);
}
-
text-shadow制作文字阴影 效果多样可叠加
-
完成上方float部分的分栏后要通过clear:both清除浮动
-
background-color :rgba模式,加入了alpha通道,可调透明度,取值范围0-1
-
position:absolute 绝对定位,实现时间条在左侧的固定
-
z-index,图层顺序,越高越上层
-
border-radius 设置圆角边框
-
css绘制三角形
.content_item_icon_arrow
{
position
:
absolute
;
left
:
-15px
;
top
:
20px
;
height
:
0px
;
border-color
:
transparent
azure
transparent
transparent
;
border-width
:
10px
10px
10px
0px
;
/*0px的边框方向即三角形朝向*/
border-style
:
solid
;
}
-
通过设置等长的width,height,border-radius来绘制圆形
-
overflow时隐藏滚动条 chrome safari适用 .element::-webkit-scrollbar {display:none}
-
css3中的filter滤镜属性很强悍,可以做出不少有意思的东西出来
-
css3新增audio标签,通过js使用pause()等方法对音频进行操控
-
关于z-index:给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:relative(定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed)样式。不要给想控制“上、下”的元素设置z-index,而是对他们的父容器设置z-index样式。