CSS

CSS概述:

Cascading Style Sheets:層疊樣式表
作用:
用來美化我們的HTML頁面的
HTML 決定網(wǎng)頁的骨架
CSS 化妝
CSS的簡(jiǎn)單語法:
在一個(gè)style標(biāo)簽中乍狐,去編寫CSS 內(nèi)容割坠,最好將style標(biāo)簽寫在這個(gè)head標(biāo)簽中

<style>
      選擇器{
          屬性名稱:屬性的值;
          屬性名稱2:屬性的值2夯接;
}
<\style>
CSS選擇器:幫助我們找到我們要修飾的標(biāo)簽或者元素

元素選擇:

元素的名稱{
          屬性名稱:屬性的值;
          屬性名稱:屬性的值炭庙;    
}
ID選擇器:
以#號(hào)開頭
#ID的名稱{
          屬性名稱:屬性的值先嬉;
          屬性名稱:屬性的值;
}
類選擇器:

以 . 開頭
.類的名稱{
屬性名稱:屬性的值光督;
屬性名稱:屬性的值阳距;
}

類和ID選擇器的異同點(diǎn)

同:都可以應(yīng)用于任何元素
異:1. ID選擇器在文檔中只能使用一次,類選擇器可以使用多次

  1. 可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)使用多個(gè)樣式
子選擇器

用于選擇指定標(biāo)簽元素的第一代子元素
例如: .food>li{border:1px solid red;} 這行代碼會(huì)使class名為food下的子元素li加入紅色實(shí)線邊框

后代選擇器

加入空格用來指定標(biāo)簽元素下的后輩元素
.first span{color:red;}

子選擇器與后代選擇器的區(qū)別

子選擇器僅指它的直接后代或者說是第一代后代结借,而后代選擇器是作用于所有子后代元素 后代選擇器通過空格來進(jìn)行選擇 而子選擇器是通過 > 來選擇

特殊性

為同一個(gè)元素設(shè)置了不同的樣式筐摘,瀏覽器會(huì)根據(jù)權(quán)值來判斷使用哪種樣式。使用權(quán)值高的船老。

權(quán)值規(guī)則:標(biāo)簽的權(quán)值為1咖熟;類選擇符權(quán)值為10; ID選擇符的權(quán)值最高是100努隙,還有一個(gè)比較特殊的權(quán)值--繼承球恤,有些文獻(xiàn)顯示它只有0.1

層疊

在HTML中對(duì)于同一個(gè)元素有多個(gè)CSS樣式存在,而且有相同的權(quán)重荸镊,會(huì)根據(jù)這些CSS樣式的前后順序來決定咽斧,處于最后面的樣式將被應(yīng)用(后面的會(huì)覆蓋前面的樣式)
內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)> 嵌入樣式表(當(dāng)前文件中)> 外部樣式表(外部文件中)

CSS的引入方式:
        外部樣式:通過link標(biāo)簽引入一個(gè)外部的CSS文件
        內(nèi)部樣式:直接再style標(biāo)簽內(nèi)編寫CSS代碼
        行內(nèi)樣式:直接在標(biāo)簽中添加一個(gè)style屬性堪置,編寫CSS樣式
CSS首頁優(yōu)化(LOGO部分)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            .logo{
                float: left;
                width: 33%;
                /*border-width: 1px;
                border-style: solid;
                border-color: red;*/
                height: 60px;
                line-height: 60px;
        /*      border: 1px solid red;*/
            }
            
            
            .amenu{
                color: white;
                text-decoration: none;
                height: 50px;
                line-height: 50px;
            }
            
            .product{
                float: left; text-align: center; width: 16%; height: 240px;
            }
            
        </style>
    </head>
    <body>
        <!--
            1. 創(chuàng)一個(gè)最外層div
            2. 第一部份: LOGO部分: 嵌套三個(gè)div
            3. 第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接
            4. 第三部分: 輪播圖 
            5. 第四部分: 
            6. 第五部分: 直接放一張圖片
            7. 第六部分: 抄第四部分的
            8. 第七部分: 放置一張圖片
            9. 第八部分: 放一堆超鏈接
        -->
        <div>
            <!--2. 第一部份: LOGO部分: 嵌套三個(gè)div-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png"/>
                </div>
                <div class="logo">
                    <img src="../img/header.png"/>
                </div>
                <div class="logo">
                    <a href="#">登錄</a>
                    <a href="#">注冊(cè)</a>
                    <a href="#">購物車</a>
                </div>
            </div>
            
                
            <!--清除浮動(dòng)-->
            <div style="clear: both;"></div>
            
            
            <!--3. 第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接-->
            <div style="background-color: black; height: 50px;">
                <a href="#" class="amenu">首頁</a>
                <a href="#" class="amenu">手機(jī)數(shù)碼</a>
                <a href="#" class="amenu">電腦辦公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香煙酒水</a>
            </div>
            
                
            <!--4. 第三部分: 輪播圖--> 
            <div>
                <img src="../img/1.jpg" width="100%"/>
            </div>
            <!--5. 第四部分:--> 
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
                
                <!--左側(cè)廣告圖-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右側(cè)商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    
                </div>
            </div>
            
            <!--6. 第五部分: 直接放一張圖片-->
            <div>
                <img src="../products/hao/ad.jpg" width="100%"/>
            </div>
            <!--7. 第六部分: 抄第四部分的-->
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
                
                <!--左側(cè)廣告圖-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右側(cè)商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    
                </div>
            </div>
            
            <!--8. 第七部分: 放置一張圖片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第八部分: 放一堆超鏈接-->
            <div style="text-align: center;">
                        
                    <a href="#">關(guān)于我們</a>
                    <a href="#">聯(lián)系我們</a>
                    <a href="#">招賢納士</a>
                    <a href="#">法律聲明</a>
                    <a href="#">友情鏈接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服務(wù)聲明</a>
                    <a href="#">廣告聲明</a>
                    
                    <br />
                    
                    Copyright ? 2005-2016 傳智商城 版權(quán)所有
            </div>
        </div>
    </body>
</html>
CSS的盒子模型

萬物皆盒子
內(nèi)邊距:

padding-top:
padding-right:
padding-bottom:
padding-left:

padding: 10px;  上下左右都是10px
padding: 10px 20px;    上下都是10px  左右是20px
padding: 10px 20px 30px;  上  10px  右  20px   下   30px    左   20px
padding: 10px  20px  30px  40px;  上右下左,順時(shí)針方向

外邊距:

margin-top:
margin-right:
margin-bottom:
margin-left:

CSS絕對(duì)定位:
position: absulte
top:控制距離頂部的位置
left:控制距離左邊的位置

步驟分析:
1.總共5部分
2.第一部分是LOGO部分
3.第二部分是導(dǎo)航菜單
4.第三部分是注冊(cè)部分
5.第四部分是FOOTER圖片
6.第五部分是一堆超鏈接

代碼實(shí)現(xiàn):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <link rel="stylesheet" type="text/css" href="../css/main.css"/>
    </head>
    <body>
        <!--
            1. 總共是5部分
            2. 第一部分是LOGO部分
            3. 第二部分是導(dǎo)航菜單
            4. 第三部分是注冊(cè)部分
            5. 第四部分是FOOTER圖片
            6. 第五部分是一堆超鏈接
        -->
        <div>
            
            <!--2. 第一部分是LOGO部分-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png" />
                </div>
                <div class="logo">
                    <img src="../img/header.png" />
                </div>
                <div class="logo">
                    <a href="#">登錄</a>
                    <a href="#">注冊(cè)</a>
                    <a href="#">購物車</a>
                </div>
            </div>
            
            <!--清除浮動(dòng)-->
            <div style="clear: both;"></div>
            <!--3. 第二部分是導(dǎo)航菜單-->
            <div style="background-color: black; height: 50px;">
                <a href="#" class="amenu">首頁</a>
                <a href="#" class="amenu">手機(jī)數(shù)碼</a>
                <a href="#" class="amenu">電腦辦公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香煙酒水</a>
            </div>
            <!--4. 第三部分是注冊(cè)部分-->
            <div style="background: url(../image/regist_bg.jpg);height: 500px;">
                
                <div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
                    <table width="60%" align="center">
                        <tr>
                            <td colspan="2"><font color="blue" size="6">會(huì)員注冊(cè)</font>USER REGISTER</td>
                            
                        </tr>
                        <tr>
                            <td>用戶名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>密碼:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>確認(rèn)密碼:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>email:</td>
                            <td><input type="email"/></td>
                        </tr>
                        <tr>
                            <td>姓名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>性別:</td>
                            <td><input type="radio" name="sex"/> 男
                            <input type="radio" name="sex"/> 女
                            <input type="radio" name="sex"/> 妖
                            </td>
                        </tr>
                        <tr>
                            <td>出生日期:</td>
                            <td><input type="date"/></td>
                        </tr>
                        <tr>
                            <td>驗(yàn)證碼:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="submit" value="注冊(cè)"/></td>
                        </tr>
                    </table>
                </div>
                
            </div>
            
            <!--5. 第四部分是FOOTER圖片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第四部分: 放一堆超鏈接-->
            <div style="text-align: center;">
                        
                    <a href="#">關(guān)于我們</a>
                    <a href="#">聯(lián)系我們</a>
                    <a href="#">招賢納士</a>
                    <a href="#">法律聲明</a>
                    <a href="#">友情鏈接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服務(wù)聲明</a>
                    <a href="#">廣告聲明</a>
                    
                    <br />
                    
                    
            </div>
            
        </div>
    </body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末张惹,一起剝皮案震驚了整個(gè)濱河市舀锨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌宛逗,老刑警劉巖坎匿,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異雷激,居然都是意外死亡替蔬,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門屎暇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來承桥,“玉大人,你說我怎么就攤上這事根悼⌒滓欤” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵挤巡,是天一觀的道長(zhǎng)剩彬。 經(jīng)常有香客問我,道長(zhǎng)矿卑,這世上最難降的妖魔是什么喉恋? 我笑而不...
    開封第一講書人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮粪摘,結(jié)果婚禮上瀑晒,老公的妹妹穿的比我還像新娘。我一直安慰自己徘意,他們只是感情好苔悦,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著椎咧,像睡著了一般玖详。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上勤讽,一...
    開封第一講書人閱讀 49,730評(píng)論 1 289
  • 那天蟋座,我揣著相機(jī)與錄音,去河邊找鬼脚牍。 笑死向臀,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的诸狭。 我是一名探鬼主播券膀,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼君纫,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了芹彬?” 一聲冷哼從身側(cè)響起蓄髓,我...
    開封第一講書人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎舒帮,沒想到半個(gè)月后会喝,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡玩郊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年肢执,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片译红。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蔚万,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出临庇,到底是詐尸還是另有隱情,我是刑警寧澤昵慌,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布假夺,位于F島的核電站,受9級(jí)特大地震影響斋攀,放射性物質(zhì)發(fā)生泄漏已卷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一淳蔼、第九天 我趴在偏房一處隱蔽的房頂上張望侧蘸。 院中可真熱鬧,春花似錦鹉梨、人聲如沸讳癌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晌坤。三九已至,卻和暖如春旦袋,著一層夾襖步出監(jiān)牢的瞬間骤菠,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工疤孕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留商乎,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓祭阀,卻偏偏與公主長(zhǎng)得像鹉戚,于是被迫代替她去往敵國(guó)和親鲜戒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348