html_day2 div+css

1.CSS的作用
HTML:它是整個(gè)網(wǎng)站的骨架镊尺。
CSS:它是對(duì)整個(gè)網(wǎng)站骨架的內(nèi)容進(jìn)行美化修飾
2.CSS的引入方式

  • CSS的引入方式分為三種
第一種行內(nèi)引入
<div style="color:red;font-size: 100px;"> 
Java
</div>
第二種:內(nèi)部引入方式
<style type="text/css">
div{
color:red;
font-size: 100px;
}
</style>
第三種方式:外部引入
將css寫在獨(dú)立的css文件中后德,然后在html頁面的head部分引用
<link rel="stylesheet" type="text/css" href="css文件路徑" />
  • 如果<style type=”text/css”></style>可不寫
  • 優(yōu)先級(jí)問題:
    誰離需要修飾的元素近茂嗓,誰的樣式生效仅财,其它的被覆蓋掉棚饵。(就近原則)
  • CSS 基本選擇器有三種(元素選擇器拍摇、類選擇器亮钦、id 選擇器)
ID 選擇器  #id 屬性名Id 保證唯一。
元素選擇器  元素名{}
類選擇器  .類名{}
  • CSS 的浮動(dòng)
    浮動(dòng)的框可以向左或向右移動(dòng)充活,直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹狗淅颉S捎诟?dòng)框不在文檔的普通流中,所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣混卵。
  • 清除浮動(dòng)解決辦法(當(dāng)同一級(jí)別時(shí)一個(gè)有浮動(dòng)一個(gè)沒浮動(dòng)):
在前面定義一個(gè) div(<div id=”three”></div>)
定義 CSS 樣式:
#three{
clear:both;
}
  • CSS 中如何讓塊級(jí)元素成為內(nèi)聯(lián)元素 CSS 中的 display 屬性(inline)進(jìn)行設(shè)置
去掉超鏈接的下劃線:
a{
text-decoration: none;
}
讓div 居中
margin:0px auto;
讓塊級(jí)元素成為內(nèi)聯(lián)元素
display:inline;
塊級(jí)元素內(nèi)容居中
text-align:center;
  • 其他選擇器
    可以使用層級(jí)選擇器設(shè)置列表的樣式
    元素名 子元素名{}
    屬性選擇器語法:
    元素名[屬性名=”屬性值”]{
    屬性名 1:屬性值 1;
    屬性名 2:屬性值 2;
    屬性名 3:屬性值 3;
    }
<style>
input[type="text"]{
background-color: red;
}
input[type="password"]{
background-color: blue;
}
</style>
</head>
<body>
用戶名:<input type="text"  name="username"/><br />
密碼:<input type="password" name="password" /> </body></html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>商品首頁</title>
        <style>
            #father {
                border: 1px solid red;
                width: 1300px;
                height: 2100px;
                margin: auto;
            }
                     -------------------------此處消除同級(jí)級(jí)浮動(dòng)影響
            /*#logo {
                border: 1px solid green;
                width: 100%;
                height: 50px;
            }*/
                #clear
                {
                    clear: both;
                }
            .top {
                border: 1px solid black;
                width: 431px;
                height: 48px;
                float: left;
            }

            #menu {
                border: 1px solid green;
                width: 100%;
                height: 50px;
                background-color: black;
            }

            ul li {
                display: inline;
                color: white;
            }

            #product {
                border: 1px solid black;
                width: 100%;
                height: 511px;
            }

            #product_top {
                border: 1px solid red;
                width: 100%;
                height: 45px;
                padding-t: 8px;
            }

            #product_bottom {
                border: 1px solid greenyellow;
                width: 1300px;
                height: 464px;
            }

            #prduct_bottom_left {
                border: 1px solid red;
                width: 200px;
                height: 100%;
                float: left;
            }

            #prduct_bottom_right {
                border: 1px solid red;
                width: 1095px;
                height: 100%;
                float: left;
            }

            #big {
                border: 1px solid black;
                width: 544px;
                height: 49%;
                float: left;
            }

            .small {
                border: 1px solid black;
                width: 180px;
                height: 49%;
                float: left;
                text-align: center;
            }
            #bottom
            {
                text-align: center;
            }
            a
            {
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <!--father-->
        <div id="father">

            <!--logo-->
            <div id="logo">
                <div class="top">
                    ![](../img/logo2.png)
                </div>

                <div class="top">
                    ![](../img/header.png)
                </div>

                <div class="top" style="padding-top:20px ;height: 28px;">

                    <a href="#">登錄</a>
                    <a href="#">注冊(cè)</a>
                    <a href="#">購物車</a>
                </div>

            </div>
            <div id="clear"></div>
            <!--導(dǎo)航-->
            <div id="menu">
                <ul>
                    <a href="#">
                        <li>首頁</li>
                    </a>   
                    <a href="#">
                        <li>手機(jī)數(shù)碼</li>
                    </a>   
                    <a href="#">
                        <li>家用電器</li>
                    </a>   
                    <a href="#">
                        <li>鞋靴箱包</li>
                    </a>   
                    <a href="#">
                        <li>奢侈品</li>
                    </a>
                </ul>

            </div>
            <!--輪播圖-->
            <div id="">
                ![](../img/1.jpg)

            </div>
            <!--最新商品-->
            <div id="product">
                <div id="product_top">
                    <span style="font-size: 25px; ">最新商品</span>   
                    ![](../img/title2.jpg)

                </div>
                <div id="product_bottom">
                    <div id="prduct_bottom_left">
                        ![](../img/big01.jpg)

                    </div>
                    <div id="prduct_bottom_right">
                        <div id="big">
                            ![](../img/middle01.jpg)
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>

                    </div>

                </div>

            </div>
            <!--廣告圖片-->
            <div id="">
                ![](../img/ad.jpg)
            </div>
            <!--熱門商品-->
            <div id="">

                <div id="product_top">
                    <span style="font-size: 25px; ">最熱商品</span>   
                    ![](../img/title2.jpg)

                </div>
                <div id="product_bottom">
                    <div id="prduct_bottom_left">
                        ![](../img/big01.jpg)

                    </div>
                    <div id="prduct_bottom_right">
                        <div id="big">
                            ![](../img/middle01.jpg)
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>
                        <div class="small">
                            ![](../img/small03.jpg)
                            <a href="#" style="color: gray;">
                                <p>電燉鍋</p>
                            </a>
                            <a href="#" style="color: red;">
                                <p>¥499</p>
                            </a>
                        </div>

                    </div>

                </div>

            </div>
            <!--廣告圖片-->
            <div id="">
                ![](../img/footer.jpg)

            </div>
            <!--友情鏈接-->
            <div id="bottom">
                <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>
                <p>
                    Copyright ? 2005-2016 商城 版權(quán)所有
                </p>
            </div>
        </div>
    </body>

</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末映穗,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子幕随,更是在濱河造成了極大的恐慌蚁滋,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,907評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件合陵,死亡現(xiàn)場(chǎng)離奇詭異枢赔,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)拥知,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門踏拜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人低剔,你說我怎么就攤上這事速梗。” “怎么了襟齿?”我有些...
    開封第一講書人閱讀 164,298評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵姻锁,是天一觀的道長。 經(jīng)常有香客問我猜欺,道長位隶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,586評(píng)論 1 293
  • 正文 為了忘掉前任开皿,我火速辦了婚禮涧黄,結(jié)果婚禮上篮昧,老公的妹妹穿的比我還像新娘。我一直安慰自己笋妥,他們只是感情好懊昨,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著春宣,像睡著了一般酵颁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上月帝,一...
    開封第一講書人閱讀 51,488評(píng)論 1 302
  • 那天躏惋,我揣著相機(jī)與錄音,去河邊找鬼嫁赏。 笑死其掂,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的潦蝇。 我是一名探鬼主播款熬,決...
    沈念sama閱讀 40,275評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼攘乒!你這毒婦竟也來了贤牛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,176評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤则酝,失蹤者是張志新(化名)和其女友劉穎殉簸,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沽讹,經(jīng)...
    沈念sama閱讀 45,619評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡般卑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了爽雄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蝠检。...
    茶點(diǎn)故事閱讀 39,932評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖挚瘟,靈堂內(nèi)的尸體忽然破棺而出叹谁,到底是詐尸還是另有隱情,我是刑警寧澤乘盖,帶...
    沈念sama閱讀 35,655評(píng)論 5 346
  • 正文 年R本政府宣布焰檩,位于F島的核電站,受9級(jí)特大地震影響订框,放射性物質(zhì)發(fā)生泄漏析苫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望衩侥。 院中可真熱鬧浪腐,春花似錦、人聲如沸顿乒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽璧榄。三九已至,卻和暖如春吧雹,著一層夾襖步出監(jiān)牢的瞬間骨杂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評(píng)論 1 269
  • 我被黑心中介騙來泰國打工雄卷, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留搓蚪,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,095評(píng)論 3 370
  • 正文 我出身青樓丁鹉,卻偏偏與公主長得像妒潭,于是被迫代替她去往敵國和親冰寻。 傳聞我的和親對(duì)象是個(gè)殘疾皇子柑贞,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,753評(píng)論 1 92
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,055評(píng)論 0 1
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表拐袜,主要用...
    寥寥十一閱讀 1,833評(píng)論 0 6
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,553評(píng)論 32 459
  • 已經(jīng)忘了是從什么時(shí)候開始喜歡上黑白插畫的冯凹。也許是從關(guān)注博主“設(shè)計(jì)青年”開始谎亩,也許是從一次插畫展開始。 進(jìn)大學(xué)以后宇姚,...
    啊貓學(xué)姐閱讀 280評(píng)論 3 2