第四篇20171020

白天睡了一天,下午六点才出去吃饭。感觉腰都伸不直了。

晚上把第一天布局又重新弄了下。感觉上要好点了。

这一次的体会:

1 - 选择器要熟练掌握啊,可以大大提高完成的速度。
今天犯错误的地方是:.class1>p这个选择器叫子代选择器,就是说选择了class1类下的所有p 标签。
2 - 加深了对选择器的印象。
3 - 对素材的认识。要对素材有一定的了解,多少像素,这样才好定位么。
4 - 动手前要多看多分析呀,那个地方应该用什么标签、css。(其实这也间接体现了对html、css了解更多了点,要不也不会想到不是。加油!)
晚上也许还会有第五篇也不一定,毕竟白天睡的时间比较长了。还有刚到的香梨陪伴_

上对比图吧。原图,第一次,第二次。顺序来。

原图.JPG
第一次.JPG
第二次.png
<!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;
    color: black;
    font-size: 14px;
}
a{
    text-decoration: none;
    color: rgb(24, 116, 245);
}
.header{
    height: 50px;
    border-bottom: 1px solid black;
    padding: 3px;
}
.new{
    float: left;
}
.setting{
    float: right;
}
.biaoti{
    width: 800px;
    height: 60px;
}
.biaoti div{
    width: 40;
    margin: 10px;
    float: left;
}
.guanjianci{
    float: left;
    width: 720;
    margin: 5px;
    padding: 1px;
}
.guanbi{
    float: right;
}
.zan{
    margin: 5px 5px 10px 6px;
    padding: 3px;
}
.img{
    position: absolute;
}
.span{
    position: absolute;
    padding: 2px;
    z-index: 1;
}
.zan p{
    display: inline;
    margin: 0 35px;
    padding: 20px;
}
.neirong{
    height: 150px;
}
.neirong img{
    display: block;
    float: left;
    margin: 0 30px 0 60px;
}
.neirong p{
    width: 400px;
    float: left;
    margin: 0px;
}
.footer{
    margin: 0 60px;
}
.footer a{
    color: rgb(186, 186, 186);
}

   </style>
</head>
<body>
    <div>
        <div class="header">
            <p class="new"> ![](../img/1.png) 最新动态</p>
            <p class="setting"> ![](../img/2.png) 设置</p>
         </div>
        <div>
            <div class="biaoti">
                <div>![](../img/4.png)</div>
                <p class="guanjianci">热门回答,来自&nbsp机械&nbsp <a href="">关注话题</a><br>
                    <a href="">人类史上令人叹为观止的极限精度制造成果有哪些?</a>
                    </p>
                <p class="guanbi">![](../img/3.png)</p>
            </div>
            <div class="zan">
                <div class="img">![](../img/5.png)</div>
                <div class="span"><span>6551</span></div>
                <p>Vincent Fu, Materials Science, PhD</p>
            </div>
            <div class="neirong">
                ![](../img/6.png)
                
                <p>说到精度,就不得不提在材料学中最重要的一个方面:表征。要想研究一种材料性能,握在手里把玩是远远不够的,就算你拿出放大镜离近看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深... <a href="">显示全部</a></p>
            </div>
            <div class="footer">
                <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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,022评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,547评论 4 61
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,809评论 32 459
  • 一些疑问的解答 dalvik系统中全量替换,Application是怎么加载的? art系统中Appplicati...
    Allenlll阅读 400评论 0 0
  • 写给后端程序员的HTTP缓存原理介绍 - 全栈开发者 http://www.admin10000.com/doc...
    葡萄喃喃呓语阅读 157评论 0 0

友情链接更多精彩内容