自己制作的html显示不出,如何制作属于自己的网页

最新推荐文章于 2022-08-19 21:41:22 发布

WRovo

最新推荐文章于 2022-08-19 21:41:22 发布

阅读量943

点赞数

文章标签：自己制作的html显示不出

这篇教程教你如何使用Dreamweaver(DW)快速创建个人网页。首先，新建HTML文件并理解基本框架。接着，学习布局技巧，如使用div、p、a、img等标签进行内容组织。通过div进行主体布局，并利用浮动(float)和外边距(margin)调整元素位置。同时，了解如何添加链接和图片。最后，查看实际网页效果并熟悉底部信息的构建。这将帮助初学者迈出网页制作的第一步。

摘要由CSDN通过智能技术生成

相信大家在浏览网页时，每每看到一个不错的网页，都会眼前一亮。有的甚至想自己动手试着做一个自己的页面，但往往又发现自己没有接触，无从下手。这里就叫你如何快速制作属于自己的网页。【一些基本的东西我就不详细解释了】需要说明的是下面所有的代码采用到的样式(即class=""引号中的内容都是样式名，这些样式名有着不同的样式，此外的取名是随意的，只是我是这么取名的，具体的可以百度css样式)

第一，打开DW,点击--新建html，弹出提示框，默认选项值，点击确定。即可进入下图所显示的界面。此时编辑器已经为你提供好了一个页面的框架：头部-躯体。第一行是文档类型的声明，这里暂不讲解，可参看第二张图。

之间的内容也不做讲解，因为这块信息不直接显示在浏览器窗口中，暂且与咱们无关。

第二，布局。所有的网页内容都是用一块块内容组合起来的，这就意味着需要考虑哪一块放什么内容。用来布局的代码有div，用来展现内容的则有p(段落)、a(链接)、img(图片)等，这也是用的最多。http://www.5haoxue.net/zhuanti/2014qxhd/以这个网页为例，主体布局都是用div实现的。页面用到的代码标签有div/a/p/dl/dt/dd/ul/li。首先你需要明白，基本上所有网页标签代码都是成对出现一个开始一个结尾：就如这样：

......下面就是网页的主体结构。

现在看图片，在body区域中有这样一个标签在它里面包含着

接下来，我们再看躯干部分。躯干部分代码(截取部分)如下：

这个为最外层的盒子，通俗地讲就是快递最外层的包装袋。这一块是导航，引导用户

建筑丨一级建造师物业管理师造价工程师安全工程师招标师考试房地产估价师 >>进入课程中心

底下就是正文区域了，这里我又用了盒子来包装：

第一层盒子来设置背景，背景是一张图片在content1中设置了，设置方法同上一个步骤当中提到的，效果会在下面图显示出来，

第二层盒子用来包括正文的内容，设置了宽度w990(width:990px)以及用m0{margin:0 auto}来是内容处于网页中间以下的三个dl则用来布局内容，fl 、fr两个样式分别为float：left和float：rght，表示向左或向右浮动，你过你不理解浮动，你可以想象树叶漂浮在水面上左右浮动，浮动边界就是盒子的边。mt=margin-top;即外边距，比如已经有一个盒子，现在我在距离盒子右边20cm的地方再放一个盒子，此时我们可以看做相对于新放下的盒子第一个的有外边距为20cm。mt20意味着顶部边距为20像素。则定义了超链接，就像在Word里面添加超链接，实际上出来的是就是这样一个标签。href后面则是添加超链接地址。

对图片的说明解释[七夕特价] 好学教育2014年物业管理师60分VIP保过方案全科联报，名师、高清，随时学习。底下将dd当成了盒子，在里面又套了一个盒子，oh{overflow：hidden}表示对已超出范围部分内容的处理为隐藏。好比如说本来我盒子只有1米高，现在放了1.2米的小孩，势必小孩子要站直就会有一部分显示在盒子外面了。

￥ 2056

原价：￥2670
7.7折

下面的dl结构同第一个不同的是边距的大小和浮动的方向的差异。不在赘述。