整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          css html謝謝筆記,適合初級前端攻城獅

          、html部分

          1.取消iPhone自動識別數字為撥打號碼

          <meta name = "format-detection" content = "telephone=no">

          2.移動開發、響應式布局

          <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes"/>

          二、css部分

          1.字母強制大寫

          text-transform: uppercase;

          2.解決iPhone中overflow:scroll;滑動速度慢或者卡的問題

          -webkit-overflow-scrolling: touch;

          3.防止復制,兼容主流瀏覽器

          -moz-user-select : none;

          -webkit-user-select: none;

          4.固定背景圖片

          background-attachment: fixed;

          5.去除iphone input默認樣式

          input {

          -webkit-appearance:none;

          }

          -webkit-appearance 可用于渲染input風格,多用于移動端,有兼容性問題,請自行百度

          6.設置表格的邊框合并為一個單一的邊框

          border-collapse:collapse;

          7.添加(顯示)IOS下滾動條

          .box::-webkit-scrollbar{

          -webkit-appearance: none;

          width: 14px;

          height: 14px;

          }

          .box::-webkit-scrollbar-thumb{

          border-radius: 8px;

          border: 3px solid #fff;

          background-color: rgba(0, 0, 0, .3);

          }

          8.文字超出部分省略號隱藏

          .box{

          width: 200px;

          /** 單行顯示隱藏 **/

          overflow: hidden;

          text-overflow: ellipsis;

          white-space: nowrap;

          /** 多行顯示隱藏 **/

          word-break: break-all;

          text-overflow: ellipsis;

          display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/

          -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/

          -webkit-line-clamp: 3; /** 顯示的行數 **/

          overflow: hidden; /** 隱藏超出的內容 **/

          }

          9.設置表格布局(我都不知道為什么我的筆記.txt里面會有這個...)

          table{

          table-layout:fixed;

          }

          10.如果想鼠標移動上去時顯示被隱藏的文本內容,可以設置 

          .box:hover {

          text-overflow:inherit;

          overflow:visible;

          }

          11.css實現選中checkbox,文字內容顏色變化

          <style> .tgl-light + .tgl-btn { 
           background: #f0f0f0; border-radius: 2em; padding: 2px; -webkit-transition: all .4s ease; transition: all .4s ease;
           } 
           .tgl-light + .tgl-btn:after { 
           border-radius: 50%; background: #fff; -webkit-transition: all .2s ease; transition: all .2s ease; 
           } 
           .tgl-light:checked + .tgl-btn { 
           background: #9FD6AE; 
           } 
          </style> 
          <div class='tg-list-item'> 
           <input class='tgl tgl-light' id='cb1' type='checkbox'> 
           <label class='tgl-btn' for='cb1'>11111111111</label> 
          </div>
          

          想要學習或者了解web前端編程的小伙伴,可以私信小編【學習】web前端海量知識分享,歡迎初學和進階中的小伙伴。

          、列表說明:列表是在頁面上有很多列同時存在的信息,分為無序列表和有序列表。

          1、無序列表概念:用來放置一些對于順序無關緊要的內容,例如下面的新聞內容。

          2、有序列表概念:有序列表用于存放內容不能錯亂的信息,比如下面的阿里云內容。

          3、自定義列表:自定義列表用于正文之外的框框欄欄之類的。

          二、列表樣式:

          列表樣式2

          列表樣式3

          三、無序列表 <ul> </ul> 和 <li> </li>標簽

          列表標簽是用 ul 表示,但是不是單獨使用的,需要和 li 標簽配合使用,并且列表標簽也有屬性,用法:

          <ul type="disc"> ,屬性有多個值:

          disc :小圓點,默認屬性

          circle :小圓圈

          square :實心方塊

          none :不要任何符號

          源碼:↓

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <!--網頁抬頭-->

          <title>Title</title>

          </head>

          <body>

          <!--列表與列表屬性-->

          <ul type="disc">

          <li>這是列表a</li>

          <li>這是列表b</li>

          <li>這是列表c</li>

          </ul>

          </body>

          、標簽的分類:雙標簽和單標簽

          雙標簽:就是成對出現的,類似于這種 <html> </html>

          單標簽:就是可以單個使用的,類似于 <br> 換行標簽 或 <hr>水平線標簽。

          二、標簽屬性的作用:

          標簽的屬性是用來定義文字或字符的 顏色、寬高、粗細、大小、等,這個是標簽屬性的作用。


          三、標簽屬性的特性:

          1、每一個標簽都有自己的屬性,單標簽和雙標簽都有。

          2、一個標簽可以有多個屬性。

          3、每個屬性都有對應的值,值要用單或雙引號引起來。

          4、多個屬性之間使用空格隔開。

          5、屬性沒有順序之分。

          6、字體屬性值,必須是系統可以識別的字體,一般為系統自帶字體。

          7、HTML5 中 font 屬性已經棄用。

          源代碼:↓

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <!--網頁抬頭-->

          <title>中央氣象局</title>

          </head>

          <body>

          <!--水平線的寬度是500像素,這個width就是標簽屬性-->

          <hr width="500">

          <!--下面這個是多個標簽屬性,多個屬性之間用空格隔開-->

          <font color="red" face="黑體" size="7">標簽屬性</font>

          </body>

          </html>


          主站蜘蛛池模板: 国模吧一区二区三区精品视频| 亚洲天堂一区在线| 伊人久久大香线蕉av一区| 精品一区二区三区免费毛片爱| 国产伦一区二区三区高清| 久久久久人妻精品一区| 国产乱码一区二区三区爽爽爽| 一区二区三区日本视频| 日本中文字幕在线视频一区| 伊人久久一区二区三区无码| 91午夜精品亚洲一区二区三区| 国产成人精品视频一区二区不卡| 久久国产精品免费一区| 国产成人欧美一区二区三区| 精品国产一区二区三区四区 | 久久久久久免费一区二区三区| 一区二区三区中文| 午夜一区二区免费视频| 久久毛片一区二区| 精品免费国产一区二区三区| 日韩一区二区在线播放| 亚洲影视一区二区| 91精品国产一区| 国产成人精品日本亚洲专一区| 国精产品一区一区三区有限在线| 天天躁日日躁狠狠躁一区| 日亚毛片免费乱码不卡一区 | 男人的天堂av亚洲一区2区| 色婷婷一区二区三区四区成人网| 色偷偷久久一区二区三区| 国产激情无码一区二区app| 中文字幕人妻丝袜乱一区三区| 一区二区免费视频| 久久久91精品国产一区二区| 日韩高清国产一区在线| 鲁丝丝国产一区二区| 国产福利在线观看一区二区| 天堂不卡一区二区视频在线观看| 春暖花开亚洲性无区一区二区| 国产在线精品观看一区| 国产在线精品观看一区|