前端_#網頁設計大作業 總結隨記

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