整合營銷服務商

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

          免費咨詢熱線:

          HTML實戰一:初始化css代碼,為什么以及怎么做?

          前的文章我們介紹了很多關于html以及css的基礎內容,從本篇文章開始我們要進行實戰訓練,我們實戰第一篇文章要介紹的就是初始化我們的css代碼;

          1)為什么要初始化css代碼

          首先是因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

          其次初始化CSS樣式可以提高編碼質量,保持代碼的統一性,如果不初始化整個頁面做完很糟糕,重復的CSS樣式很多。去掉標簽的默認樣式如:margin,padding,其他瀏覽器默認解析字體大小,字體設置。

          我們這里寫一個ul標簽以及a標簽,來看一下默認在網頁中的顯示效果;

          從上圖我們可以看出a標簽以及ul標簽都有默認的樣式效果,而且ul距離左側有一段的空隙,如果我們不定義初始化效果的話每次都要進行單獨的修改,這樣會增加代碼的重復度。

          2)我們要怎么去做?

          1、最簡單的初始化css代碼的方式是使用通配符(*),重置所有的初始樣式。具體的css代碼如下所示:

          但是我們不建議這么書寫:因為 *(星號)代表通配符表示了所有的標簽,編寫代碼的時候也非常快,但是這樣寫有一個弊端,就是在網站比較大時,CSS樣式文件也很大,這樣寫時,它會把所有的標簽都初始化一遍,這樣會加大網站運行的負荷,會讓網站加載的時候需要很長一段時間。

          2、初始化代碼雖然個人習慣各有差異,但是大同小異,我們可以借鑒大公司的代碼來直接使用即可。下面給大家列舉下騰訊和淘寶的初始化代碼僅供參考,后期可以根據個人習慣進行刪減即可。

          淘寶的初始化代碼如下所示:

          騰訊的初始化代碼如下所示:

          好了,本篇文章就給大家說到這里,大家自己下來可以自己模擬一下,找到適合自己使用的初始化代碼。

          每日金句:你20歲時偷過的“懶”,就是你30歲時會掉進去的“坑”。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。

          篇文章我們說了初始化css的創建,本篇文章我們來說一下如何創建一個初始化html的基本模版以及初始化文件的創建。

          1)初始化html文件的創建

          我們在對一個網頁進行切圖編碼之前,我們需要創建這么幾個目錄文件, 便于存放我們的代碼;

          css文件目錄:該目錄的作用是用于存放我們的網頁css文件,一般我們分為2個文件,一個是用于存放我們上篇文章說到的初始化代碼的base.css,還有一個是用于存放我們自己編寫的網頁代碼的style.css文件;

          images文件目錄:該目錄的作用是用于存放我們網頁的切圖文件,網頁中的背景圖片以及元素圖標等都可以存放到此文件夾中;

          js文件目錄:該目錄的作用是存放我們編寫的網頁javascript代碼(關于javascript代碼我們將在以后的文章中進行詳解),js代碼的作用是實現網頁中的基本動態展示效果,比如選項卡切換,banner輪播圖切換等效果;

          另外還有一個文件就是我們的網頁html文件,首頁我們一般命名為index.html,一般放于跟目錄下邊。標準的目錄文件就如下圖所示:

          備注:如果你的電腦看不到.html這個后綴的話, 在文件夾左上角找到組織-文件夾和搜索選項;

          然后點擊查看-找到隱藏已知文件類型的擴展名-將前邊的對勾去掉即可;

          2)標準html模版的創建

          文件創建完成之后我們就要創建標準的index.html的網頁模版,一個網頁模版一般是由主體html、頭部head、內容body組成,其中head區域主要存放網頁標題、關鍵詞、頁面描述以及css和js代碼的引用;而body區域主要存放我們以后對頁面的編碼內容;

          具體的標準模版顯示效果就如下圖所示:

          好了,本篇文章就給大家說到這里,大家自己下來可以創建屬于自己的通用初始化文件模版,以后開發的時候直接復制使用即可。

          每日金句:不要生氣要爭氣,不要看破要突破,不要嫉妒要欣賞,不要拖延要積極,不要心動要行動。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。

          大有學問#

          什么是CSS初始化?

          CSS初始化是指重設瀏覽器的樣式且每個網頁都必須進行初始化。

          以下內容均屬于CSS樣式。可以在html文件的style中設置,也可單獨另立css文件外鏈到html文件中。

          1.清除所有標簽的內外邊距清零

          * {
              margin: 0;
              padding: 0;
          }

          2.li標簽:去除樣式符號

          li {
              list-style: none;
          }

          3.圖片標簽:取消圖片底側有空白縫隙問題

          img {
              vertical-align: middle;
          }

          5.超鏈接文本標簽:字體顏色和下劃線去除

          a {
              color: black;
              text-decoration: none;
          }

          6.清除浮動

          .clearF {
              clear: both;
          }

          這些目前我所用到的初始化設置,后續實戰開發時可按個人習慣增減。

          到現在才是對CSS有了一些初步的認識。

          之后學習HTML5和CSS3新特性,更要好好的夯實基礎。

          就如同蓋樓需要先打地基,地基打的好且穩,高樓才能穩。

          再次忠告自身,切勿好高騖遠,切勿眼高手低。

          腳踏實地,走好每一步路,敲好每一行代碼。

          寶劍鋒從磨礪出,梅花香自苦寒來。

          拜~


          主站蜘蛛池模板: 免费在线观看一区| 老熟妇仑乱视频一区二区| 无码精品人妻一区二区三区漫画| 美日韩一区二区三区| 韩国福利影视一区二区三区| 日韩精品一区在线| 亚洲国产av一区二区三区丶| 无码中文字幕一区二区三区| 精品一区二区三区中文| 99久久精品费精品国产一区二区 | 亚洲午夜日韩高清一区| 综合人妻久久一区二区精品 | 国产一区二区三区播放心情潘金莲 | 色婷婷一区二区三区四区成人网 | 亚洲福利视频一区二区| 日韩AV无码一区二区三区不卡| 男人免费视频一区二区在线观看 | 夜夜嗨AV一区二区三区| 国产另类ts人妖一区二区三区| 精品一区二区三区无码免费视频| 国产内射999视频一区| 国产精品特级毛片一区二区三区| 国产精品视频一区麻豆| 一本久久精品一区二区| 中文字幕在线视频一区| 无码中文字幕乱码一区| 无码一区二区波多野结衣播放搜索| 91精品乱码一区二区三区| 无码丰满熟妇一区二区| 国产精品第一区揄拍无码| 日本美女一区二区三区| 日本精品高清一区二区| 乱子伦一区二区三区| 亚洲熟妇AV一区二区三区浪潮| 日韩欧美一区二区三区免费观看| 国产精品美女一区二区三区 | 杨幂AV污网站在线一区二区| 乱子伦一区二区三区| 色综合视频一区中文字幕| 日韩在线一区二区三区视频| 国产在线第一区二区三区|