HTML学习——HTML布局

HTML布局可对网页的整体结构进行规划

操作方法

  • 01

    新建Notepad并打开

  • 02

    使用 <div> 元素的 HTML 布局

  • 03

    页眉 #header { background-color:black; color:white; text-align:center; padding:6px; }

  • 04

    左侧导航条 #nav { line-height:50px; backgrund-color:gray; height:300px; width:100px; float:left; padding:8px; }

  • 05

    右侧正文 #section { width:350px; float:left; padding:5px; }

  • 06

    页脚 #footer { background-color:black; color:white; clear:both; text-align:centet; padding:5px; }

  • 07

    另存为HTML格式到桌面

  • 08

    打开HTML桌面生成的网页

(0)

相关推荐

  • CSS布局html内联元素定位

    学习CSS布局要区分好块状元素和内联元素,例如css布局常用的属性代码 margin: auto; 对内联元素是无效的,需要用display:block;转为块状元素 操作方法 01 块元素(bloc ...

  • 名门口袋学院2攻略,教你怎么布局规划图,怎么赚钱?

    名门口袋学院2是一个模拟学校生活的一个游戏 你将要担当一个非常重要的角色,管理整座学校 游戏在第二版本,增加了不同的场景,和音乐,游戏整体上升。 游戏介绍 梦想学校管理游戏。设计走廊和教室,将其建设成 ...

  • Freepiano电脑弹钢琴键盘布局(附freepiano下载)

    想要使用电脑弹钢琴当然要明确的了解音符在各个键盘的布局,今天以FreePiano为例,一起来了解一下键盘布局,它可是高度可定制的键盘哦~记不住任你自定义! Freepiano教程 Freepiano电 ...

  • WPS2012文字段落布局的使用技巧

    在平时的工作学习中,我们常常会用到文档排版问题。今天主要介绍WPS2012中段落布局的使用方法,读者看了文章后可以跟我一起做。 操作步骤 1、打开WPS文字,插入文章之后,点击段落模版上方的段落布局按 ...

  • 美图秀秀3.0新版发布 布局更优速度更流畅

    一款软件的受欢迎程度,总是和其合理的功能布局、优秀的操作体验分不开的。“美图秀秀”作为一款流行的图片处理软件,在其全新发布的3.0版软件中,就将这种理念发挥得淋漓尽致!美图秀秀3.0新版在处理2000 ...

  • 几种常见的商务ppt版面布局

    很多人都没有进行过有关平面设计的学习,但是也能做好ppt,就是因为大多都用到了模板,自己做多了看多了就自然而然的会做ppt了。这里给大家介绍几种商务ppt版面的布局。 1上下布局:一般是从上到下的顺序 ...

  • WPS巧用段落布局进行排版

    在工作与学习中,编辑完一篇文章后,通常我们会对这篇文章进行排版,主要是从段落.字体等入手.下面呢,小编就为大家详细介绍下WPS文字中为文章进行段落布局的方法,相信大家都会学到不少知识. 操作步骤: 1 ...

  • FrontPage简明教程:网页布局

    通常网页的布局使用到的是FrontPage中的表格和框架菜单栏里的命令. 表格(TABLE)是将页面中的内容以表格的形式排列,常用于单一页面内图片与文字的安排,是最常用的布局命令. 图3.1 框架(F ...

  • focusky动画演示大师怎么使用布局模板?

    focusky动画演示大师对于我们来说是一款比较不错的幻灯片制作工具,对于我们使用者来说,如果有一个比较好的模版,那么我们在制作幻灯片的过程当中将非常的方便,这里focusky动画演示大师也给我们提供 ...