前端_#网页设计大作业总结随记

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
<http://blog.sina.com.cn/s/blog_4dcb11a10102vvdy.html>
*

* 下滑线的实现方案:1 text-decoration:underline;2 boder-buttom:solid
* 文本竖排的不同方案https://blog.csdn.net/sangjinchao/article/details/60139706
<https://blog.csdn.net/sangjinchao/article/details/60139706>
* 不同浏览器间差异真是不小
* 工具效率决定干活质量——入坑vscode
* @font-face嵌入外部字体www.w3help.org/zh-cn/causes/RF1001
<http://www.w3help.org/zh-cn/causes/RF1001>@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样式。

热门工具换一换

前端_#网页设计大作业 总结随记