码迷,mamicode.com
首页 > Web开发 > 详细

PHP全栈开发(四): HTML 学习(2. div 布局)

时间:2018-08-05 19:37:07      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:控制   有序列表   gre   学习   根据   系统   显示   使用   ack   

无序列表,有序列表,自定义列表

无序列表是ul表示,每个元素用li表示

有序列表是ol表示,每个元素用li表示

    <ul>
      <li>首页</li><li>通知</li><li>订单</li>
    </ul>

列表默认是纵向排列的,如果需要控制列表的样式,可以使用CSS来进行样式控制

 

区块元素<div>

使用区块标签来进行布局。古老的对网页进行布局的方法是使用表格,现在我们一般不采用表格来进行布局,而使用区块元素div

<body>

<div id="container" style="width:1200px; height:800px; background-color:gray;">

<div id="header" style="background-color:red;">
管理系统
</div>

<div id="menu-top" style="background-color:green;">
菜单
</div>

<div id="menu-left" style="background-color:yellow; width:100px; height:200px; float:left; ">
菜单
</div>

<div id="content" style="background-color:blue;     width:1000px; height:200px; float:left; ">
内容在这里</div>

</div>

</body>

可以看到我们先定义了一个容器div,也就是container,然后这个容器的宽度是1200px,高度是800px,背景是灰色的,如果不规定高度是话,那么会根据它里面的内容来作为高度。

这个容器里面一共有四个区块,一个是内容content,用作主要的显示,一个是头部,header,用于放网页的首标题。

一个左边的标题栏,这个标题栏的id是menu-left,这个区块的宽度是100,加上content的宽度1000,比容器container的宽度少了100,所以在content的最右边还会有一条100px的灰色边。

因为header没有规定宽度,因此它跟随的是container的宽度。

 

 

span标签是内联元素,可以用作区块元素内的文本容器。

内联元素和区块元素是两个相反的概念。

 

PHP全栈开发(四): HTML 学习(2. div 布局)

标签:控制   有序列表   gre   学习   根据   系统   显示   使用   ack   

原文地址:https://www.cnblogs.com/sparrow32/p/9426782.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!