Web开发及人机交互导论 实验三 CSS+DIV基础

简介: Web开发及人机交互导论 实验三 CSS+DIV基础

一、实验目的


1.掌握CSS基本概念、CSS类型及4种CSS样式定义的方法。

2.理解DIV的概念。

3.掌握DIV的属性设置方法。

4.学会使用CSS+DIV进行页面布局设计。


二、实验环境


Windows10系统下的H Builder X


三、实验步骤


项目1:CSS四种样式的引用

37c564cd43bd43928ec0874ccdd5ec91.png


四种样式表的引用,分别为:

(1)行内样式表引用

(2)内部样式表引用

(3)链入外部样式表引用

(4)导入外部样式表引用

下面将通过这四种引用,实现如样例图示所示的网页设计。


(1)行内样式表引用

行内样式表即通过标记的style属性来进行直接设置,行内样式表优先级最高,代码块如下:

6e50b5b99a6f460194b49337fb353576.png


显示效果如下图:

6bef499c40394a1a9eb845b7bbeb5a89.png


此时,即将格式直接写入到div中因此有最高的优先级,即如果与其他样式发生冲突,默认会选用内嵌样式表的内容。


(2)内部样式表引用

内部样式表是在HTML的head标记中通过style标记来定义的,本实验中讲通过浅蓝色背景部分和深绿色部分进行展示:

①浅蓝色背景:

通过对<body>标签中<background>属性进行修改,可以实现对背景颜色的定义,具体代码实现如下:


4bcd25dba3194334bc0bef00ecff696b.png

②深绿色部分:

这部分与①不同,不直接对<div>标签进行定义,而通过对class的定义间接进行定义,具体代码实现如下:


e0b549dd0d9f452b9d148b23ecdcfb7a.png


其中,上方的代码在<style>标签中完成了对背景颜色和两个class的定义,分别设置了背景的颜色、两个class的颜色和相应的大小。

显示效果如下图:


4e6ab0b7a32d4ead83389c94b53e84d4.png

(3)链入外部样式表引用

顾名思义,链入外部样式即独立于html文件之外的css文件。链入样式表通过link标记的href 属性加载外部样式表文件,样式表文件名必须带后缀. css,否则不能加载,同时对type、rel属性进行设置。格式为:<link type=“text/css” rel=“stylesheet” href=“css1.css”/>。其中,“href”等号后为要链入的css文件的相对路径。只有保证路径的正确,才能成功链入相应的css文件,这是必不可少的。

①编写css文件:

想要链入css文件,则必须先定义一个css文件。因此,我们新建一个css文件,并进行层和段落样式的定义,具体代码如下:



fae38ee8ba1b4d90a2e7384c36062564.png


②将写好的css文件链入:

在链入并创建的过程中,自动补全会显示出已经成功定义的内容,观察已经定义的“div3”就可以发现已经才css1.css(刚才编写的css文件)中定义,表示已经成功链入写好的css文件。

b1dadff261c14cdc9421eb735d8a221f.png


具体代码如下:


20de53b2d96442839f0475e8948a6dc8.png

显示效果如下:

6ca61239d4fc41c5a153b81b6a24d8c3.png

(4)导入外部样式表引用。

导入外部样式表与(3)相类似,一样也需要提前准备一个css文件。但不同之处在于可以使用其他网站上面的css样式进行导入。在导入时,要使用@import url(“”)。其中双引号内的为本地css文件的相对地址或者提供css样式网页的网址。

①编写css文件:

想要导入css文件,则必须先定义一个css文件或使用网页的css样式。在此,我们新建一个本地css文件,并对文本框,图片以及区块的背景进行class定义,具体代码如下:


a9acf1962dae4ea6b58efddd86cab22a.png


②导入css文件:

这里必须要注意,import必须在第一行,否则将出现错误。

将css导入,并配置其他元素后即可实现样例所要求的。具体代码如下:


ba50d561efef46328bf47e4b7f42f94a.png


显示效果如下:


ec0f6a83a8534983b5b27f698dc8352c.png

项目一全部代码如下:

主页面:

de378b4c616f460ba7dac4a5ed93f93b.png两个css文件:



ffc6595003b34e8f8d2a9a8ec5772b2e.png


e9aa654a598044a6ade8be8c27241ac4.png

总显示效果:

869e8bcffe0f42959fa031684c92146f.png


项目2:CSS+DIV页面布局设计

547a1b24961c41d3ae6964a461dfb137.png


(1)margin属性


a6c0d48368f64ae2b7f321b8dbb30535.png


通过对网络上页面的分析,我们可以得出,margin实际上是两个盒子之间的内容,其定义方式为margin: “a” “b” “c” “d”,其中,abcd分别表示按顺时针顺序的上右下左四个方向的距离。样例里,每一部分处理方式都相同,下面就以实现头部信息区和导航信息区作实例进行演示,具体代码实现如下:

29d31b46040446018c52ef0922dab389.png


我们注意到由于图例的示范中,在头部信息区与导航信息区之间存在空隔,因此我们要定义两个行内样式表,并在两个行内样式表中进行定义并实现相应的功能。具体显示效果如下:


bc748ef943da4fdc94224520b95dee05.png

(2)float属性

由于四个样式图例中均含有左右分部的部分。如效果一第三行、效果二的第二行里的蓝色和浅蓝色的排列。这里就需要用到float属性,其定义方式为float: a; 其中a里填需要悬浮到的位置(left、right或none)。下面通过对效果二的第二行的实现来进一步演示:


b1d61d96205d43d29b640d015001e5c1.png

338055a90559412a8939706c13724ff6.png


显示效果:


25647600cae74ab5aa9434eb99bfe4f2.png

(3)padding属性

padding属性是对文本内容和文本框之间间隔的属性,在这四种效果中,第四种效果需要用到该属性。padding的格式与margin基本一样,四个参数表示相应与顺时针上右下左四个方向的距离。具体实现如下:

b5ff223938e24cfbbfc6330179e4b1f0.png

显示结果如下:


585af64e495a4bbf86d4aa1cfce7780b.png

在对每部分元素的定义时,采用了引入本地css文件的形式,css文件内容如下:

8e5bc86992f8450ea3f843266838b194.png

不难发现,这种在css文件中进行定义,而不是在主页面文件中直接定义的方法可以使对各个元素格式的定义更清晰,大大提高代码的可读性。


四、结果与分析


(1)在四种引入方式中,实现的优先级为 行内样式表>内部样式表>链入外部样式表>导入外部样式表。

(2)可以采用不同的clear元素,产生不同的页面效果。

(3)在定义部分形状的大小时如果不采用多少像素,而采用百分之多少去定义,页面的缩放将不会影响具体的比例。

(4)可以在自动代码补全的下拉菜单中观察,否已经成功导(链)入相应的css文件,并且可以在该下拉菜单中查看到是在哪个css文件中定义了该元素。


五、心得体会


(1)在编写页面时如果使用导入外部css文件进行格式编辑,将提高代码的可读性,也能是代码更美观,让对格式的修改更简单清晰。

(2)使用padding和margin这类元素时要注意四个参数的值,要养成一边微调一边观察的习惯。

(3)对格式等定义不清楚,在实验过程中,由于不清楚定义边框的格式,反复调试很长时间才得到解决。

(4)与单调的页面相比,这样采用多种盒子进行的设计,使得页面更美观。更能吸引读者去阅读。

相关文章
|
5天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
19 7
|
2天前
|
JavaScript 前端开发 UED
WebSocket在Python Web开发中的革新应用:解锁实时通信的新可能
【7月更文挑战第16天】WebSocket是实现Web实时通信的协议,与HTTP不同,它提供持久双向连接,允许服务器主动推送数据。Python有多种库如websockets和Flask-SocketIO支持WebSocket开发。使用Flask-SocketIO的简单示例包括定义路由、监听消息事件,并在HTML中用JavaScript建立连接。WebSocket提高了实时性、减少了服务器压力,广泛应用于聊天、游戏等场景。
11 1
|
5天前
|
API 数据库 开发者
逆袭之路!Django/Flask助你成为Web开发界的璀璨新星!
【7月更文挑战第13天】在Python Web开发中,Django和Flask各具优势。Django适合快速构建大型项目,如在线书店,其ORM和内置功能让复杂应用轻松上手。Flask则以其轻量和灵活性见长,适用于个人博客等小型应用。选择框架应根据项目需求和个人偏好,两者都能助开发者在Web开发领域大放异彩。
17 2
|
6天前
|
安全 大数据 编译器
PHP 8: 探索新特性及其对现代Web开发的影响
在这篇文章中,我们将深入探讨PHP 8的最新特性,包括JIT编译器、联合类型、匹配表达式等,并分析这些更新如何影响现代Web开发。通过具体示例和代码片段,本文旨在为开发者提供一个清晰的指南,以便更好地利用PHP 8的新功能优化和加速他们的应用程序。
12 2
|
3天前
|
算法 安全 编译器
PHP 8的新特性及其对现代Web开发的影响
在数字时代的浪潮中,PHP作为一门历史悠久的服务器端脚本语言,一直在不断地进化以适应新的编程挑战。本文将深入探讨PHP 8的最新特性,包括JIT编译器、联合类型、命名参数、匹配表达式等,并分析这些新特性如何优化代码、提升性能和增强安全性。通过实际案例,我们还将展示PHP 8如何影响现代Web开发的实践,以及开发者如何利用这些新工具来构建更快、更可靠、更易于维护的应用。
|
4天前
|
XML 前端开发 API
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
【7月更文挑战第14天】Web开发中,AJAX作为异步通信先驱,与新兴的Fetch API一起革新交互体验。Fetch基于Promise,简化了请求处理。Python后端,如Flask,提供稳定支撑。这三者的融合,推动Web应用达到新高度,实现高效、实时交互。通过示例展示,我们看到从发送请求到更新UI的流畅过程,以及Python如何轻松返回JSON数据。这种组合揭示了现代Web开发的潜力和魅力。
11 0
|
4天前
|
开发者 C++ Python
从零到一,Django/Flask带你走进Web开发的梦幻世界!
【7月更文挑战第14天】在Python Web开发中,Django和Flask各具特色。Django是全能框架,提供ORM、模板、认证等全套解决方案,适合快速建站和新手入门;Flask则轻量灵活,适合原型开发和定制化需求。两者都有活跃社区和丰富扩展,Django学习曲线平缓,Flask更需自定义配置。选择适合自己的框架,开启编程新篇章。
9 0
|
设计模式 Web App开发 存储
移动 Web 开发的10个优秀 JavaScript 框架
选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。最重要的是,它让开人员在开发过程中得心应手。
368 0
移动 Web 开发的10个优秀 JavaScript 框架
|
Web App开发 移动开发 JavaScript
【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架
  选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。
1953 0
|
6天前
|
编译器 测试技术 PHP
深入理解PHP 7的新特性及其对现代Web开发的影响
【7月更文挑战第12天】本文将探讨PHP 7版本中引入的关键改进和新增功能,以及这些变化如何优化了性能、提升了代码的可维护性,并促进了现代Web开发的最佳实践。通过具体示例,我们将深入了解这些新特性在日常开发中的应用,以及它们为开发者带来的实际益处。
14 2