欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html、css基礎(chǔ)注意點(前端必看篇)

  發(fā)布時間：2016-07-27 11:10:56   作者：佚名   我要評論
下面小編就為大家?guī)硪黄猦tml、css基礎(chǔ)注意點(前端必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

之前第一次接觸html，一直使用table進行布局，十分麻煩還相當(dāng)丑陋，造成當(dāng)初并沒有多大的興趣，直到半年前開始接觸到了使用div+css編寫頁面，才對它有了興趣。作為一個菜鳥記錄自己的點滴教訓(xùn)與收獲，主要還是給自己看的，也希望對以后想要學(xué)習(xí)的同學(xué)有所幫助，同時也還請各位前輩多多指出不足。

1      減少無意義標(biāo)簽的使用

簡單的舉個例子：

 

對于這個頂部的結(jié)構(gòu)，

錯誤：通欄>版心>左邊+(右邊>ul>li*9>a)

正確：通欄>版心>左邊+(ul>li*9>a)

對于右邊的部分，不需要使用一個div包裹ul，明明一個ul就可以實現(xiàn)何必使用多余的div標(biāo)簽進行嵌套呢。所以在編寫過程中明明可以用一個標(biāo)簽解決的，不要使用無意義的標(biāo)簽多層嵌套。

2      關(guān)于命名

以前學(xué)習(xí)java，因為英語不好，喜歡用拼音命名，這樣做不好，雖然一開始學(xué)習(xí)就知道，但是并不是很注意。在身邊人的提醒下，尤其自己也感覺用拼音的不便性，糾正，以后要更注意命名。英語不好沒關(guān)系，這不是還有有道和度娘嗎？

再有就是標(biāo)簽發(fā)生嵌套時候的命名。一般同一層級的標(biāo)簽的命名問題不是很大，只需要使用一個單詞就可以。但是當(dāng)發(fā)生嵌套的時候就需要使用“-”進行連接，不然很容易自己分不清哪個標(biāo)簽是哪個。比如以上那個頂部通欄可以使用top命名整個，右邊部分可以叫top-right，后面可能還會有top-right-detail-link如果太長就可以縮寫為top-r-d-link，還是太長甚至可以縮寫為trd-link，注意是太長才縮寫，短的話為了保證意思的理解不用縮寫，另外最后一個單詞為了理解也最好不要縮寫。

3      特殊符號的使用

上面那個下拉箭頭是使用菱形符號◇制作的，使用了兩個標(biāo)簽進行嵌套書寫，

<i><s>◇</s></i>

s標(biāo)簽使用position控制需要顯示部分的位置，i標(biāo)簽控制窗口大小，同時隱藏溢出。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. i {   
  2.     width: 15px;   
  3.     height: 8px;   
  4.     position: relative;    
  5.     overflow: hidden;   
  6. }   
  7. i s {   
  8.     font: 400 14px/14px consolas;   
  9.     position: absolute;   
  10.     top: -6px;   
  11. }  

以上是通行的做法，作為菜鳥，在不考慮兼容的情況下，感覺使用一個標(biāo)簽就可以解決，對于字符使用行高控制垂直位置，用寬高限制顯示區(qū)域。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>測試</title>  
  6.     <style>  
  7.         i {   
  8.             display: inline-block;   
  9.             height: 50px;   
  10.             width: 100px;   
  11.             overflow: hidden;   
  12.             font: 400 100px/0px SimSun;    
  13.         }   
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <i>◇</i>  
  18. </body>  
  19. </html>  

這是效果：  

目前只是測試了在谷歌，火狐下的效果，沒有問題，有什么不妥之處還請指出。

4      相鄰行內(nèi)塊元素之間的距離

上面的導(dǎo)航如果使用轉(zhuǎn)化為行內(nèi)塊元素，那么相鄰兩個元素之間就會有幾像素的距離，可能粗看看不出來，但是放大以后可以看見，解決這個問題的唯一辦法就只能使用浮動。

5      數(shù)值的連寫：

在css中有一些屬性的值可以連寫。比如padding、border-radius。前者為上、右、下、左，后者四個方向為左上、右上、右下、左下。它們都是順時針方向排列的，只是起點不同。如果將四個方向看作a、b、c、d。那么當(dāng)后面書寫連續(xù)的2個數(shù)值時代表的是：ac、bd；3個數(shù)值代表a、bd、c；4個數(shù)值不用說代表的就是a、b、c、d了。

6      清除浮動

清除浮動的方法有4種，最普遍的是使用偽元素。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .clearfix:before, .clearfix:after {   
  2.     content: "";   
  3.     display: table;   
  4. }   
  5. .clearfix:after {   
  6.     clear: both;   
  7. }   
  8. .clearfix {   
  9.     *zoom: 1; /*IE/7/6*/  /*兼容IE6下的寫法*/  
  10. }  

7      設(shè)置高度

上面講到浮動突然想到關(guān)于的板塊高度的問題，一般來說盡量不要使用一個固定的高度把一個板塊寫死，不要寫死！不要寫死！不要寫死！重要的事情說3遍。寫死了怎么做響應(yīng)式？

8      元素的margin,padding

對于所有元素margin和padding的水平方向（左右）都是起作用的，只有行內(nèi)元素的垂直方向（上下）是不起支撐作用的。需要注意的是padding可以將元素邊框撐大，但是并不會將元素擠離原來的垂直位置。

 

 

9     相對定位與絕對定位的使用

定位總共有四種：絕對定位、相對定位、固定定位、靜態(tài)定位。后兩種定位，沒有什么好說的，就是前面的兩種定位，需要注意的是相對定位會占據(jù)原來文檔流的位置，而絕對定位則不占據(jù)原來的文檔流位置，所以在需要使用定位的時候，需要按照實際情況，具體情況具體分析，考慮到底是使用相對定位還是使用絕對定位。舉個栗子：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. * { margin: 0; padding: 0; color: #fff; font-size: 20px; }   
  2.         .nav { height: 30px; background-color: pink; border-bottom: 4px solid red; }   
  3.         .w { width: 100px; margin: 0 100px; position: relative; height: 30px; z-index: 1; }   
  4.         .nav-list { height: 30px; background-color: red; }   
  5.         .left { width: 100%; height: 400px; background-color: peru; position: absolute; }   
  6.         .b { margin-left: 210px; width: 100px; height: 100px; background-color: lightblue; position: relative; }  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="nav">  
  2.     <div class="w">  
  3.         <div class="nav-list">list</div>  
  4.         <div class="nav-list">list</div>  
  5.         <div class="nav-list">list</div>  
  6.         <div class="nav-list">list</div>  
  7.         <div class="nav-list">list</div>  
  8.     </div>  
  9. </div>  
  10. <div class="left">left</div>  
  11. <div class="b">b</div>  

 

List屬于上面部分，left為底層的廣告，b是下面板塊的內(nèi)容，如果完全使用相對定位和絕對定位解決問題，那么left為了不影響下面的板塊應(yīng)該使用absolute，這樣的話超過上面部分的list就會被遮蓋，所以要給list的父盒子設(shè)置一定的層級，照道理來說需要使用relative去占據(jù)上面部分的位置，因為他依舊屬于上面的部分。這樣的話需要給b也設(shè)置relative，為了不被遮擋還需要設(shè)置左外邊距。

10  使用定位居中元素

塊級元素的水平居中可以使用margin：0 auto；使用定位解決的辦法是：設(shè)置定位后設(shè)置left（top）為50%，再使用margin-left回退自己身位的一半。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. height: 20px;   
  2. width: 50px;   
  3. position: absolute;   
  4. left: 50%;   
  5. margin-left: -25px;  

11  背景和圖片

經(jīng)常被問到應(yīng)該什么情況下使用img插入圖片，什么時候用背景。簡單得講我認(rèn)為，一般的網(wǎng)站里的圖標(biāo)都用背景，具體涉及到某件產(chǎn)品那么使用img圖片。

以上這篇html、css基礎(chǔ)注意點(前端必看篇)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/qing9442/archive/2016/07/26/5709413.html

相關(guān)文章

  • html/css基礎(chǔ)篇——html代碼編寫過程中的幾個警惕點(必看)

    下面小編就為大家?guī)硪黄猦tml/css基礎(chǔ)篇——html代碼編寫過程中的幾個警惕點(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-27

  • HTML CSS樣式基礎(chǔ)(必看篇)

    下面小編就為大家?guī)硪黄狧TML CSS樣式基礎(chǔ)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-23

  • HTML基礎(chǔ)總結(jié)推薦(段落)

    下面小編就為大家?guī)硪黄狧TML基礎(chǔ)總結(jié)推薦(段落)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-13

  • HTML基礎(chǔ)知識——css樣式表,樣式屬性,格式與布局詳解

    下面小編就為大家?guī)硪黄狧TML基礎(chǔ)知識——css樣式表,樣式屬性,格式與布局詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-11

  • HTML基礎(chǔ)知識——設(shè)置超鏈接的樣式簡單實例

    下面小編就為大家?guī)硪黄狧TML基礎(chǔ)知識——設(shè)置超鏈接的樣式簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-11

  • HTML基礎(chǔ)必看——全面了解css樣式表

    下面小編就為大家?guī)硪黄狧TML基礎(chǔ)必看——全面了解css樣式表。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-11

  • HTML基礎(chǔ)必看---表單,圖片熱點,網(wǎng)頁劃區(qū)和拼接詳解

    下面小編就為大家?guī)硪黄狧TML基礎(chǔ)必看---表單,圖片熱點,網(wǎng)頁劃區(qū)和拼接詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-10

  • HTML基礎(chǔ)重點_一般標(biāo)簽、常用標(biāo)簽和表格

    下面小編就為大家?guī)硪黄狧TML基礎(chǔ)重點_一般標(biāo)簽、常用標(biāo)簽和表格。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-09

  • 淺談HTML（css基礎(chǔ)樣式）

    下面小編就為大家?guī)硪黄獪\談HTML（css基礎(chǔ)樣式）。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-27

  • 前端開發(fā)每天必學(xué)之HTML入門介紹

    這篇文章主要介紹了前端開發(fā)每天必學(xué)之HTML入門基礎(chǔ)知識，介紹了學(xué)習(xí)web前端開發(fā)需要掌握的基礎(chǔ)技術(shù)，感興趣的小伙伴們可以參考一下
    2016-06-21

最新評論