HTML-div笔记-2018.07.07

div

关于div的简单布局

<body>  
          <div>
         </div>
</body>

  1. div中如果没有填充内容不会显示出来,只有填充内容了才会被体现
  2. div 可以设置属性,用style设置 背景颜色(background),宽度(width),高度(height)等基本的属性。
  3. 当学会盒子模型反过来想就会觉得很简单了,可以更丰富的进行div的布局以及内容的排版等等。
    4.在div布局中,不同的浏览器会默认显示页面的边框,导致网页上浏览的内容会多出来一些边框,所以可以设置margin(外边距)和padding(内边距)为0,这样页面就会填充整个浏览器。
<style>
     *{     
           margin: 0;
       padding: 0;  
}
</style>

<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8">          
        <style type="text/css"> 
            h1{
                color: red;
            }
                        
            .to{
                background-color: greenyellow;
                height: 100px;
                width: 100%;
            }
                        
            .main{
                background-color: gray;
                height: 600px;
                width: 70%;
                float: left;                
            }                       
            
            .right{
                background-color: yellow;
                height: 600px;
                width: 30%;
                float: left;                    
            }
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>

        <div class="to">
            <h1 align="center"> 向右 </h1>
        </div>

        <div class="main">
            main
        </div>

        <div class="right">
            right
        </div>
    </body>

</html>

显示如图:

简单的div布局效果

小白解释:
这篇笔记是学完这一周之后再补充自己复习的笔记,所以会结合一些去写,实际div的操作还有很多功能。新手练习可以直接在div后面进行操作,哈哈哈 我还是新手!!!

<body>
      <div style=" background-color: red; width:100px; height:100px">
      </div>
</body>

学习体验:

互联网学习资料:
IT小白教程1-w3cschool
IT小白教程2-RUNOOB.COM

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

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,698评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,415评论 1 45
  • 好久没有拍照了,一大早来到我向往已久的这片银杏林。 准备好相机三角架,冒着严寒走下车,选好自己认为还不错的角度...
    我是芳教主阅读 1,315评论 0 0
  • 颜青【厦门千叶集贸易有限公司】 【日精进打卡第22天】 【知~学习】 《六项精进》大纲2遍共52遍 《大学》开篇2...
    千叶集青阅读 1,400评论 0 0
  • 人生,是一条始终跋涉的路,有风雨,有阳光,有泥泞。心田,是一个广宽的天空,当你心里装着四序的时辰,能力在花开花落中...
    conceptgut阅读 2,844评论 0 0

友情链接更多精彩内容