相信大家在浏览网页时,每每看到一个不错的网页,都会眼前一亮。有的甚至想自己动手试着做一个自己的页面,但往往又发现自己没有接触,无从下手。这里就叫你如何快速制作属于自己的网页。【一些基本的东西我就不详细解释了】需要说明的是下面所有的代码采用到的样式(即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结构同第一个 不同的是边距的大小和浮动的方向的差异。不在赘述。

来看看效果:提示对于相同部分的内容可直接粘贴代码即可。

最后就是底部信息。可以看到基本上所有的页面底部都会有一个版权信息、免责声明等等内容。这个比较简单。

举报/反馈

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

  1. excel服务器条形码不显示,excel怎么制作条形码教程 excel条形码显示不出怎么办...

    现在很多excel用户都会在excel表格中制作条形码,很多刚开始学习excel软件的用户不太了解,那么下面小编就为大家带来excel 制作条形码的详细教程,不懂制作的朋友可以抽点时间学习下. exc ...

  2. Android 8.0 App图标适配(问题:图标显示机器人或显示不出)

    转载:http://blog.csdn.net/u011329095/article/details/79424613 最近,应用要上线,然后看到客户8.0手机上的APP图标显示不出,百度查询,是Ap ...

  3. 《Splunk智能运维实战》——3.11 制作折线图显示项目浏览量和购买量随时间的变化...

    本节书摘来自华章计算机<Splunk智能运维实战>一书中的第3章,第3.11节,作者 [美]乔史·戴昆(Josh Diakun),保罗R.约翰逊(Paul R. Johnson),德莱克· ...

  4. element UI 选择器 踩的坑 获取到了value 显示不出对应的 value

    获取到了value 显示不出对应的 value 样式图 代码 获取到的数据 这里直接绑定了,但是默认转换出来的是数字 ,所以最后值没有显示出来 这里 v-model绑定的值改成字符串的0 绑定的val ...

  5. linux 程序输出 logo,Linux下制作logo并显示到开发板上

    我用的是OK6410开发板,自带的两个内核(2.6.32和3.0.1都测试通过) 首先讲一下制作logo的方法: Linux Logo制作工具 : LogoMaker.tgz 4.7MB http:/ ...

  6. 计算机的u盘显示桌面,U盘图示在我的电脑显示不出?

    U盘图示在我的电脑显示不出?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! U盘图示在我的电脑显示不出? 试一下在开始- ...

  7. 使用jquery的blockui插件显示弹出层

    使用jquery的blockui插件显示弹出层 Posted on 2011-04-14 16:34 孤独者 阅读(9975) 评论(0) 编辑 收藏 在做网站的开发过程中,可能需要使用弹出层,使用j ...

  8. Druid monitor中SQL监控显示不出数据(已解决)

    Druid monitor中SQL监控显示不出数据(已解决) 检查方法一: 查看Druid monitor中的数据源是否可访问 如下图则数据源可访问: 这时检查application.yaml中的配置 ...

  9. TIA博途中如何通过Prodiag功能制作报警并显示在HMI上?

    TIA博途中如何通过Prodiag功能制作报警并显示在HMI上? 环境搭建: TIA PORTAL V16及以上版本博途软件 具体步骤可参考如下: 打开博途软件新建一个项目,如下图所示,添加PLC和H ...

最新文章

  1. 关于亿级账户数据迁移,你应该试试这种方法...
  2. 一键还原奥运版_福田奥铃CTS超越版和江淮全能卡车,哪款实力更强?
  3. dos下批量卸载apk文件
  4. 生成word_Word如何生成目录?3个步骤轻松掌握!
  5. OSChina 周二乱弹 ——胸大的烦恼!
  6. maven junit空指针_Maven相关笔试面试题目
  7. Winform常用控件的使用(一)
  8. Python爬取百思不得姐的视频+视频的切割+给视频添加水印
  9. Laya Tween循环
  10. mathlab saveas figures into a pdf, eps
  11. Java一维数组和二维数组的长度
  12. java语言保留结构和联合_Java 语言中取消了联合概念,保留了结构概念。( )_学小易找答案...
  13. uniapp使用Dplayer.js实现视频播放
  14. adress标签的使用
  15. iphone7 备忘录同步 win10 自带便笺(Sticky Notes)
  16. linux电脑mac地址修改不了怎么办,linux下修改MAC地址问题解决方法
  17. 推荐个NodeJS的入门教程 — Node入门/nodebeginner
  18. html网页设计期末大作业——生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业
  19. 变频器LED显示灯闪烁_西门子S71200 PLC通过PROFINET,控制G120变频器的启停和输出频率...
  20. 二分法、三分法的详解

热门文章

  1. vis.js 头部日期实现国际化
  2. 30岁以后搞Android已经没有前途?含BATJM大厂
  3. 开学季·东莞理工学院
  4. 10种不同类型的移动UI设计模式
  5. CCF BDCI 剧本角色情感识别:多目标学习开源方案
  6. 经济管理 第1章 经济与管理概述
  7. 英语老师不想让你知道的一些网站 , 想学英语的就进
  8. 基于虚拟机的黑群晖NAS+基于虚拟局域网的远程访问
  9. 【教学类-09-02】20221022《动物棋10*10 S形迷宫》(数字续写和骰子游戏)(大班主题《动物花花衣》)
  10. 国家大力推广电子发票,部分企业会计不太想收电子发票?