好吧,這是第二篇20171018

為什么一天要寫兩篇徘禁,因?yàn)槟阏嬲且獙W(xué)習(xí)的啊,不要主次不分好吧髓堪!

元素的隱藏

visibility:hidden;/*和前朋友分手了送朱,但是心里還沒(méi)把Ta忘記。(隱藏內(nèi)容干旁,保留位置)*/
display:none;/*和前朋友分手了驶沼,也記不起來(lái)了。(隱藏內(nèi)容和位置)*/

display顯示方式

display:none           隱藏
display:block          塊級(jí)元素
display:inline         內(nèi)聯(lián)元素
display:inline-block   內(nèi)聯(lián)塊級(jí)元素
display:list-item      顯示為列表
display:table          顯示為表格
inline-table           顯示為前后無(wú)換行的表格
table-cell             顯示為單元格

內(nèi)聯(lián)塊級(jí)說(shuō)明:內(nèi)聯(lián)是不換行争群,不能指定大谢亓;塊級(jí)可以指定大小换薄,能換行玉雾。有時(shí)候,需要元素處于同一行轻要,同時(shí)還能指定大小复旬,就需要內(nèi)聯(lián)-塊級(jí)inline-block。

  • 最后四種沒(méi)用過(guò)啦

這么長(zhǎng)時(shí)間以來(lái)做的第一個(gè)小例子冲泥。但是還是和原圖有差距驹碍。圖1是原圖,圖2是自己做的凡恍。

加油志秃!~

綜合練習(xí)圖.JPG
綜合練習(xí)圖2.JPG

最后附上代碼:

<!DOCTYPE>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>綜合練習(xí)1</title>
   <link type="text/css" rel="stylesheet" href="zonghe.css">
  <style>
body{
    
    width: 800px;
    height: 600px;
}
a{
    text-decoration: none;
    color: rgb(24, 116, 245);
}

.shezhi{
    position: absolute;
    top: -7px;
    left:758px;
}
.sunshu{
    float: left;
}
.guanjianzi{
    position: relative;
    left: 17px;
    top: 5px;
    line-height: 5px;
}
.cha{
    position: relative;
    left: 790px;
    top: -40px; 
}
.zan img{
    border-radius: 3px;
}
.zan span{
    font-size: 14px;
    position: absolute;
    left:10px;
    top: 130px;
    z-index: 1;
}
.zan p{
    position: relative;
    left: 55px;
    top: -40px;
}
.neirong img{
    padding-left: 55px;
}
.neirong p{
    float: right;
    width: 470px;
    height: 112px;
    margin: 5px;
    padding-right: 20px;
}
.yejiao{
    
    padding: 20px 55px;
}
.yejiao a{
    color: grey; 
    word-spacing: 10px;
}
  </style>
</head>
<body>
    <div>
        <div>
        <p class="zuixin"> ![](../img/1.png) 最新動(dòng)態(tài)</p>
        <p class="shezhi"> ![](../img/2.png) 設(shè)置</p>
    </div>
        <hr>
        <div>
            <div class="biaoti">
               
                ![](../img/4.png)
                <p class="guanjianzi">熱門回答,來(lái)自&nbsp機(jī)械&nbsp <a href="">關(guān)注話題</a></p>
                <p class="guanjianzi"><a href="">人類史上令人嘆為觀止的極限精度制造成果有哪些嚼酝?</a></p>
                <p class="cha">![](../img/3.png)</p>
                
            </div>
            <div class="zan">
                ![](../img/5.png)
                <span>6551</span>
                <p>Vincent Fu, Materials Science, PhD</p>
            </div>
            <div class="neirong">
                ![](../img/6.png)
                
                <p>說(shuō)到精度浮还,就不得不提在材料學(xué)中最重要的一個(gè)方面:表征。要想研究一種材料性能革半,握在手里把玩是遠(yuǎn)遠(yuǎn)不夠的碑定,就算你拿出放大鏡離近看,也只能看到表面的一些坑坑洼洼又官,而為了知曉一種材料的纖維結(jié)構(gòu)延刘,科學(xué)家至少要下到納米級(jí)(放大千倍),如果要獲得更深... <a href="">顯示全部</a></p>
            </div>
            <div class="yejiao">
                <a href="#"> ![](../img/7.png) 關(guān)注問(wèn)題</a>&nbsp
                <a href="#"> ![](../img/8.png) 867條評(píng)論</a>&nbsp
                <a href="#"> ![](../img/9.png) 作者保留權(quán)利</a>
            </div>
            <hr>
        </div>
    </div>
</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末六敬,一起剝皮案震驚了整個(gè)濱河市碘赖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖普泡,帶你破解...
    沈念sama閱讀 217,084評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件播掷,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡撼班,警方通過(guò)查閱死者的電腦和手機(jī)歧匈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)砰嘁,“玉大人件炉,你說(shuō)我怎么就攤上這事“妫” “怎么了斟冕?”我有些...
    開(kāi)封第一講書人閱讀 163,450評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)缅阳。 經(jīng)常有香客問(wèn)我磕蛇,道長(zhǎng),這世上最難降的妖魔是什么十办? 我笑而不...
    開(kāi)封第一講書人閱讀 58,322評(píng)論 1 293
  • 正文 為了忘掉前任秀撇,我火速辦了婚禮,結(jié)果婚禮上向族,老公的妹妹穿的比我還像新娘捌袜。我一直安慰自己,他們只是感情好炸枣,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評(píng)論 6 390
  • 文/花漫 我一把揭開(kāi)白布虏等。 她就那樣靜靜地躺著,像睡著了一般适肠。 火紅的嫁衣襯著肌膚如雪霍衫。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 51,274評(píng)論 1 300
  • 那天侯养,我揣著相機(jī)與錄音敦跌,去河邊找鬼。 笑死逛揩,一個(gè)胖子當(dāng)著我的面吹牛柠傍,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播辩稽,決...
    沈念sama閱讀 40,126評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼惧笛,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了逞泄?” 一聲冷哼從身側(cè)響起患整,我...
    開(kāi)封第一講書人閱讀 38,980評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拜效,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后各谚,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體紧憾,經(jīng)...
    沈念sama閱讀 45,414評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評(píng)論 3 334
  • 正文 我和宋清朗相戀三年昌渤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了赴穗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,773評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡膀息,死狀恐怖望抽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情履婉,我是刑警寧澤,帶...
    沈念sama閱讀 35,470評(píng)論 5 344
  • 正文 年R本政府宣布斟览,位于F島的核電站毁腿,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏苛茂。R本人自食惡果不足惜已烤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望妓羊。 院中可真熱鬧胯究,春花似錦、人聲如沸躁绸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,713評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)净刮。三九已至剥哑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間淹父,已是汗流浹背株婴。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,852評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留暑认,地道東北人困介。 一個(gè)月前我還...
    沈念sama閱讀 47,865評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像蘸际,于是被迫代替她去往敵國(guó)和親座哩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評(píng)論 2 354

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案粮彤? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評(píng)論 1 92
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,552評(píng)論 32 459
  • ?前端面試題匯總 一八回、HTML和CSS 21 你做的頁(yè)面在哪些流覽器測(cè)試過(guò)酷愧?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,220評(píng)論 0 8
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,833評(píng)論 0 6
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素缠诅;行內(nèi)(內(nèi)聯(lián)溶浴、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,002評(píng)論 1 4