為什么一天要寫兩篇徘禁,因?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)自 機(jī)械  <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> 
<a href="#"> ![](../img/8.png) 867條評(píng)論</a> 
<a href="#"> ![](../img/9.png) 作者保留權(quán)利</a>
</div>
<hr>
</div>
</div>
</body>
</html>