好吧，这是第二篇20171018
2017-10-19 本文已影响0人
擦亮天空
为什么一天要写两篇，因为你真正是要学习的啊，不要主次不分好吧！
元素的隐藏
visibility:hidden;/*和前朋友分手了，但是心里还没把Ta忘记。（隐藏内容，保留位置）*/
display:none;/*和前朋友分手了，也记不起来了。（隐藏内容和位置）*/
display显示方式
display:none 隐藏
display:block 块级元素
display:inline 内联元素
display:inline-block 内联块级元素
display:list-item 显示为列表
display:table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格
内联块级说明：内联是不换行，不能指定大小；块级可以指定大小，能换行。有时候，需要元素处于同一行，同时还能指定大小，就需要内联-块级inline-block。
- 最后四种没用过啦
这么长时间以来做的第一个小例子。但是还是和原图有差距。图1是原图，图2是自己做的。
加油！~
综合练习图.JPG
综合练习图2.JPG
最后附上代码：
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合练习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">  最新动态</p>
<p class="shezhi">  设置</p>
</div>
<hr>
<div>
<div class="biaoti">
<p class="guanjianzi">热门回答，来自 机械  <a href="">关注话题</a></p>
<p class="guanjianzi"><a href="">人类史上令人叹为观止的极限精度制造成果有哪些？</a></p>
<p class="cha"></p>
</div>
<div class="zan">
<span>6551</span>
<p>Vincent Fu, Materials Science, PhD</p>
</div>
<div class="neirong">
<p>说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... <a href="">显示全部</a></p>
</div>
<div class="yejiao">
<a href="#">  关注问题</a> 
<a href="#">  867条评论</a> 
<a href="#">  作者保留权利</a>
</div>
<hr>
</div>
</div>
</body>
</html>
