zoukankan      html  css  js  c++  java
  • web前端之HTML中的div

    HTML <div> 元素

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

    <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

    如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

    <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

    程序演示:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>div布局</title>
     6         <style type="text/css">
     7             .contain{
     8                 width: 500px;
     9                 
    10             }
    11             .title{
    12                 margin: 0;
    13                 height: 50px;
    14                 background: gray;
    15                 font-size: 14px;
    16             }
    17             .menu{
    18                 margin: 0;
    19                 width: 200px;
    20                 height: 250px;
    21                 background: yellow;
    22                 float: left;
    23             }
    24             .content{
    25                 margin: 0;
    26                 background-color: beige;
    27                 width: 300px;
    28                 height: 250px;
    29                 float: left;
    30             }
    31             .foot{
    32                 margin: 0;
    33                 background: gray;
    34                 text-align: center;
    35                 clear: both;
    36             }
    37         </style>
    38     </head>
    39     <body>
    40         <div class="contain">
    41             <div class="title">
    42                 <h1>Main title of web page</h1>
    43             </div>
    44             <div class="menu">
    45                 <h2>menu</h2>
    46                 <ul >
    47                     
    48                     <li>HTML</li>
    49                     <li>CSS</li>
    50                     <li>JavaScript</li>
    51                 </ul>
    52             </div>
    53             <div class="content">
    54                 Content goes here
    55             </div>
    56             <div class="foot">
    57                 Copyright W3School.com.cn
    58             </div>
    59         </div>
    60     </body>
    61 </html>
  • 相关阅读:
    C#监听文件
    用bootstrapValidator来验证UEditor
    .net 在不同情况下调用带soapheader的webservice的方式
    MyBatis1
    随堂笔记2
    数学复习笔记 2018年-2019年
    药方
    随堂笔记一
    友谊藏在门背后,2
    友谊藏在门背后
  • 原文地址:https://www.cnblogs.com/ztyy04126/p/4909118.html
Copyright © 2011-2022 走看看