好吧，这是第二篇20171018

作者: 擦亮天空 | 来源:发表于2017-10-19 01:01 被阅读0次

好吧，这是第二篇20171018
数1四组W2英语复盘日志汇总
思维导图练习3
这是第二篇
职业习惯养成记：及时反馈
野蛮人的文艺情怀～评老炮儿
20171018
20171018
20171018
20171018

为什么一天要写两篇，因为你真正是要学习的啊，不要主次不分好吧！

元素的隐藏

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"> ![](../img/1.png) 最新动态</p>
        <p class="shezhi"> ![](../img/2.png) 设置</p>
    </div>
        <hr>
        <div>
            <div class="biaoti">
               
                ![](../img/4.png)
                <p class="guanjianzi">热门回答，来自&nbsp机械&nbsp <a href="">关注话题</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>说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... <a href="">显示全部</a></p>
            </div>
            <div class="yejiao">
                <a href="#"> ![](../img/7.png) 关注问题</a>&nbsp
                <a href="#"> ![](../img/8.png) 867条评论</a>&nbsp
                <a href="#"> ![](../img/9.png) 作者保留权利</a>
            </div>
            <hr>
        </div>
    </div>
</body>
</html>