精选前端学习教程:HTML布局

开课吧开课吧锤锤2021-04-02 11:22

    网络前端高薪的诱惑,学习门槛低,不管是学生党还是工作者,都渴望凭借自己的能力,空闲的时间,去学前端。也许是一种爱好,也许是一种想从事的工作。但它真的那么简单吗?现在,初级前端的工作,已接近饱和,并处于供过于求的状态,企业更需要的是具备扎实的基础,至少具备后端技能的前端开发工程师。已不像之前所说的美工,美工了。在许多大企业中,前端开发岗位是独立的,需要专业技能。

web

    HTML布局

    网页布局对改善网站的外观非常重要。

    请慎重设计您的网页布局。

    网站布局

    大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。

    大多数网站可以使用<div>或者<table>元素来创建多列。CSS用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

      虽然我们可以使用HTMLtable标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的-表格不是布局工具。

    HTML布局-使用<div>元素

    div元素是用于分组HTML元素的块级元素。

    下面的例子使用五个div元素来创建多列布局:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

    上面的HTML代码会产生如下结果:

web

    HTML布局-使用表格

    使用HTML<table>标签是创建布局的一种简单的方式。

    大多数站点可以使用<div>或者<table>元素来创建多列。CSS用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

    即使可以使用HTML表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据-表格不是布局工具!

    下面的例子使用三行两列的表格-第一和最后一行使用colspan属性来横跨两列:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
 
</body>
</html>

    上面的HTML代码会产生以下结果:

Java

    HTML布局-有用的提示

    Tip:使用CSS最大的好处是,如果把CSS代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。如需学习更多有关CSS的知识,请访问我们的CSS教程。

    Tip:由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

    HTML布局标签

    HTML<div>标签

    文档中的一个区域将显示为蓝色:

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

    HTML<span>标签

    使用<span>元素对文本中的一部分进行着色:

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

    以上就是精选前端学习教程:HTML布局的全部内容,更多的Web教程尽在开课吧广场Web教程频道。

有用
分享