前導知識點
1 字體屬性合寫
選擇器:{font；font-style || font-weight || font-size || line-height || font-family};
text-shadow 設置文本陰影
選擇器{text-shadow: h-shadow v-shadow blur color;}
h-shadow水平陰影 v-shadow垂直陰影 blur模糊半徑 color陰影顏色
2 CSS3的 @font-face 規則
@font-face 用於定義服務器字體，可以讓開發者使用計算機中未安裝的字體
@font-face{ font-family: "Name"; src: " ../font/xxx.ttf"; [font-weight: weight;] [font-style: style;] }
3 多列布局
<!DOCTYPE html> <html> <head> <title>ziti</title> <meta charset="utf-8"> <style type="text/css"> p{ width: 1000px; /*設置列數*/ -webkit-column-count: 2; /*指定每列固定寬度，列的實際寬度和容器寬度有關*/ -webkit-column-width: : 250px; /*設置列與列之間的空隙*/ -webkit-column-gap: 5em; /*設置中間的分割線，與 border 類似*/ -webkit-column-rule: 5px solid silver; font-size: 17px; margin: 0 auto; } </style> </head> <body> <p> 北京傳智播客教育科技有限公司是一家專門致力於高素質軟件開發人才培養的高科技公司。它依托程序員平台 csdn ,整合了國內眾多知名軟件企業的資源, 並邀請到任跨國公司和國內大中型企業架構師,系統分析師、企業培訓師組成自己的團隊。傳智播客致力於為企業培養人才的培訓理念，以“學員自學入門教程， 通過基礎考核后進行強化培訓”為招生原則，以“針對企業需求，重視基礎理論建設，強化高端應用技能”為教學目標，以“高薪保證強大的資深教育團隊”為教學 后盾，解決所有培訓學員的后顧之憂，並解決用人企業難以招聘到合格人才的困擾。 </p> </body> </html>
4 WEB字體圖標-----font-awesome應用
http://github.com/FortAwesome/Font-Awesome
下載解壓后只需要 CSS和fonts 2個文件夾 ，將fonts中的字體文件和CSS中的 font-awesome.min.css 拷貝到項目中即可引用。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- 導入字體圖標樣式 --> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> </head> <body> <i class="fa fa-comments"></i> </body> </html>
如果需要其他圖標： http://fontawesome.io/icons 查看圖標庫。
項目實戰
效果
HTML結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="favicon.ico"> <title>Document</title> </head> <body> <section id="mobile" class="cover-section"> <div class="section-inner"> <div class="container"> <h3>One Web, Any Device</h3> <h4>萬物互聯，極致體驗</h4> <div class="description"> <p>【HTML5】全面兼容移動設備</p> <p>顛覆原生應用指日可待，傳智播客重新定義前端開發</p> </div> <div class="row list"> <div class="col-md-3 col-xs-6"> <i class="fa fa-apple"></i> <h5>原生移動APP開發</h5> </div> <div class="col-md-3 col-xs-6"> <i class="fa fa-weixin"></i> <h5>微信公共平台開發</h5> </div> <div class="col-md-3 col-xs-6"> <i class="fa fa-desktop"></i> <h5>網站開發</h5> </div> <div class="col-md-3 col-xs-6"> <i class="fa fa-laptop"></i> <h5>桌面應用開發</h5> </div> </div> </div> </section> </body> </html>
CSS 樣式
html,body{ width: 100%; height: 100%; } html{ overflow: hidden; } body{ font-family: 'Microsoft Yahei'; color: #fff; padding: 0; margin: 0; } h3,h4,h5{ margin-top: 0; margin-bottom: 0.5rem; } p{ margin-top: 0; margin-bottom: 1rem; } div{ display: block; } @font-face{ font-family: 'Pinyon Script'; src: url("../fonts/PinyonScript-Regular.ttf"); font-weight: normal; font-style: normal; } .fa{ display: inline-block; font: normal normal normal 14px / 1 FontAwesome; font-size: inherit; /*繼承*/ text-rendering: auto; /*設置文本渲染引擎工作時如何優化顯示文本。默認值：auto*/ -webkit-font-smoothing: antialiased; /*字體抗鋸齒*/ } #mobile{ background-image: url("../images/section_mobile_bg.jpg"); text-align: center; } #mobile h3{ font-size: 6rem; font-family: 'Pinyon Script'; font-weight: 600; text-shadow: 5px 5px 0.3rem #62819d; margin-bottom: 2rem; } #mobile h4{ font-size: 3rem; text-shadow: 10px 10px 0.2rem #62819d; } .cover-section{ background-size: cover; /*背景平鋪*/ background-repeat: no-repeat; background-position: center; display: table; height: 100%; width: 100%; position: relative; } .section-inner{ display: table-cell; /*此元素會作為一個表格單元格顯示（類似<td>和<th>）*/ width: 100%; vertical-align: middle; /*垂直居中*/ } #mobile .description{ margin-top: 3rem; } #mobile .description>p{ font-size: 1.5rem; } .row{ margin-left: -0.9375rem; margin-right: -0.9375rem; } .row:before, .row:after{ content: ""; display: table; } .row:after{ clear: both; } #mobile .list{ text-align: center; margin: 3rem 0 1.5rem; /*上3 左右0 下1.5*/ } #mobile .list i{ font-size: 3rem; padding: 2rem; } #mobile .list h5{ font-size: 1.3rem;font-weight: normal; } .col-xs-6,.col-md-3{ position: relative; min-height: 1px ; padding-left: 0.9375rem; padding-right: 0.9375rem; float: left; box-sizing: border-box; } .col-xs-6{ width: 50%; } .col-md-3{ float: left; width: 25%; }