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

html与css部分

1. {

   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 
• 文本竖排的不同方案 https://blog.csdn.net/sangjinchao/article/details/60139706
• 不同浏览器间差异真是不小
• 工具效率决定干活质量——入坑vscode
• @font-face嵌入外部字体

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样式。