首页

基于HTML与CSS网页设计

详细阅读
  • 基于HTML与CSS编写样式规则

    之前的范例中,样式规则声明都是编写在网页头部中的标签内部,在这里声明的样式规则称为内部样式表,或叫内嵌样式表,它们将对整个页面全局有效。实际上,样式规则声明还可以写在需要这个样式的特定的标签内部,或者写在HTML 网页文档之外。CSS 层叠样式表的代码体现为多条样式规则,样式规则除对样式进行定义之外,还说明此规则的适用范围。样式规则由选择器和大括号内的一组样式定义构成。...

    2023-10-19 理论教育

    详细阅读
  • HTML与CSS网页设计中的背景设置

    使用与背景相关的CSS 属性,可以设置一个区域的背景颜色、背景图像。与背景相关的CSS 属性见表6.1。表6.1常用的CSS 样式属性_背景例6.1:代码运行结果如图6.1 所示。图6.1例6.1 的运行结果_背景说明网页元素的背景显示时,背景图像优先于背景颜色。...

    2023-10-19 理论教育

    详细阅读
  • HTML与CSS网页设计:输入标签

    图3.5例3.2 的运行结果说明代码中两个标签分别创建了一个文本框和一个提交按钮。标签的type 属性用于设置标签创建哪种类型的表单元素,这个属性的默认值为text 即文本框。表3.1标签的type 属性除type 属性用于设置标签的类型之外,还支持其他一些属性,用于设置其名称,初始值、图像地址、选中与否的状态等。表3.2标签的属性...

    2023-10-19 理论教育

    详细阅读
  • 创建和编辑网页元素的基本指南

    图9.16“代码”视图可单击视图切换工具栏中的按钮,点击右边的三角形按钮,选择设计,如图9.17 所示。图9.18“拆分”视图以下简单介绍常见页面元素操作:在文档的视图中,回车即可产生新的段落

    。在面板中,提供一系列按钮,用于向网页中添加常见的页面元素,如图9.19所示。图9.21“Dreamweaver”对话框单击后,将会把图像复制到站点中图像,将插入到文档中,并位于之前光标所在插入点的位置,如图9.22 所示。图9.24“属性”面板...

    2023-10-19 理论教育

    详细阅读
  • WEB概述:互联网发展与WWW技术应用

    近二十年来,随着互联网在全世界的普及,WEB 技术得到了迅速发展并被广泛地应用。WEB,又称为WWW,英文全称为World Wide Web,中文一般翻译为“万维网”。他于1991 年在欧洲粒子物理实验室内部建立了万维网的雏形。1993 年,万维网对公众免费开放。万维网联盟,又称W3C 理事会。这个组织的作用是使计算机能够在万维网上使不同形式的信息之间更有效的储存和通信,它们的工作主要是制定WEB 技术领域的各种技术标准和规范。...

    2023-10-19 理论教育

    详细阅读
  • 基于HTML与CSS设计的两列式布局

    接下来声明名为#divNav 和#divContent 的样式规则,为两个 div 设置样式。图8.17两列式布局可以理解,由于div 是块级元素,每个块级元素独占一行,所以两个div 从上到下依次显示。图8.18使用浮动在实际应用的两栏布局中,一般要求左栏固定宽度,右栏宽度根据浏览器窗口的宽度自适应。结合之前的案例一,可以这样设计:在这两个div 的外围再包裹一个div,由后者负责实现在body 中的水平居中,它里面的两个div 仍然使用目前的做法实现分栏。...

    2023-10-19 理论教育

    详细阅读
  • 其他杂项的CSS样式属性及运行结果|HTML与CSS网页设计

    表6.6常用的CSS 样式属性_其他杂项例6.6:代码运行结果如图6.6 所示。图6.6例6.6 的运行结果说明鼠标移动到

    上方时,光标显示为移动状。图6.9表格2.在HTML 中使用无序列表显示文章列表,在其中编写CSS 样式代码。图6.11横向导航菜单提示图6.11 所示导航效果,是采用列表布局,其参考代码如下:鼠标移上超级链接时其背景图片发生改变,使用background-position 属性来设置背景图片的位置。...

    2023-10-19 理论教育

    详细阅读
  • HTML与CSS网页设计:伪类选择器

    伪类用于向其他选择器指定适用范围内的特定元素或特定状态制定样式。用得比较多的场景是使用锚伪类为页面中的超链接制定在不同状态下不同的外观。例5.5:清除浏览器历史记录后运行此示例,结果如图5.5 所示。图5.6例5.5 的运行结果_锚伪类hover说明此时浏览者的鼠标位于样式规则声明链接的表面上方,这个链接处于hover 状态。它处于visited 状态,颜色变为灰色。这4 个锚伪类应按上述顺序依次编写。...

    2023-10-19 理论教育

    详细阅读
  • HTML和CSS网页设计:超链接和表单目标框架与窗口

    图4.11例4.8 的运行结果_超链接的默认目标为当前框架之所以会这样,是因为超链接的默认目标为当前框架或当前窗口。有时我们希望超链接指向的页面在指定的某个框架内显示,或在新的浏览器窗口中显示。图4.12例4.8 的运行结果_为超链接指定目标框架为超链接标签的target 赋值指定目标框架或目标窗口时,其值除了可以指定为事先命名的框架名称之外,还可以指定为几个浏览器能识别的关键字,这些关键字表示某些特定的框架或窗口。...

    2023-10-19 理论教育

    详细阅读
  • 常用的CSS样式属性_对齐方式及运行结果

    表7.7常用的CSS 样式属性_对齐方式其中text-align 属性已经在上一章介绍过。以下代码演示了垂直对齐方式。例7.10:代码运行结果如图7.13 所示。图7.13例7.10 的运行结果_垂直对齐说明为vertical-align 属性赋值为super、sub,可以实现文字的上标、下标格式。这种形式在购物网站是非常多见的,使用CSS 样式实现购物网物品展示效果,如图7.15 所示。图7.16圆角矩形样式提示圆角矩形样式可以使用图片来实现,分为有圆角图片和无圆角图片,其设计的原理源于九宫格技术。...

    2023-10-19 理论教育

    详细阅读
  • HTML与CSS网页设计:框架集与框架示例

    图4.1框架集框架示例_猫扑大杂烩浏览者在浏览器窗口中所看到的画面,实际上是由多个页面一起形成的。图4.2框架集框架示例_华声论坛窗口左侧的导航区内显示众多版块分类的链接,它们可将用户导航到某个版块的帖子列表页面;窗口右侧的内容区则显示最热帖子或编辑推荐帖子等论坛的全局信息。当需要将多个网页组织到同一个窗口中同时显示时,需要使用框架集和框架。...

    2023-10-19 理论教育

    详细阅读
  • HTMLCSS网页设计:上下文选择器

    上下文选择器又称为派生选择器,用于根据上下文关系来确定某个标签是否使用上下文选择器的样式规则。例5.7:代码运行结果如图5.10 所示。图5.10例5.7 的运行结果_上下文选择器注意样式表中有两条上下文选择器的样式规则。.myp span 选择器名称说明由class 属性为myp 的段落与这种段落内部的span文字块形成上下文关系,符合这种上下文关系的span 文字块将使用此选择器的样式规则。...

    2023-10-19 理论教育

    详细阅读
  • 盒状模型概述-基于HTML与CSS网页设计

    图7.2CSS2.0 盒模型层次3D 示意图此外,盒子还有块级盒子和内联盒子之分。图7.3块级元素转变为内联元素说明以上代码中的div、p、ul、li 等元素都是块级元素,默认使用块级盒状模型。图7.4块级元素转变为内联元素说明将两个段落、三个列表项目、后两个div 块的display 属性为inline 后,它们将使用内联盒状模型,不再换行,而是从左往右依次排列,与其他内联元素共用一行。以下分别介绍其他和盒状模型相关的CSS 属性。...

    2023-10-19 理论教育

    详细阅读
  • 三行三列式布局-基于HTML与CSS网页设计

    综合上述内容,可实现更复杂的三行三列式布局,如图8.23 所示。图8.23三行三列式布局与前一个案例中的三列式布局相比,现在增加了顶部独立的行和底部的页脚行。图8.25向左浮动注意divMain 包含的三个div 的宽度总和并不足以充满布局容器的宽度,这是因为我们打算在三个div 之间留一点间隙。图8.26设置左右两边的外边距最后我们人为地为这些div 设置高度模拟最终效果。图8.28竖排的层2.在HTML 中显示三行三列的表格,使用层给表格添加背景图片。...

    2023-10-19 理论教育

    详细阅读
  • 基于HTML与CSS,轻松学习网页设计

    HTML是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种标记语言。HTML 语言由蒂姆·伯纳斯·李给出原始定义,IETF用简化的SGML语法进行进一步发展,后来成为国际标准,目前由万维网联盟维护。使用XML 的严格规则的XHTML是W3C 计划中的HTML 的接替者。注意W3C 目前的建议是使用XHTML 1.1、XHTML 1.0 或HTML 4.01 进行网络出版。HTML 语法的核心是由W3C 定义的一些标记。图1.1例1.1 的运行结果说明HTML 文件中的第一个标签是 。这个标签告诉浏览器,这是 HTML 文件的结束点。...

    2023-10-19 理论教育

    详细阅读