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)与单调的页面相比,这样采用多种盒子进行的设计,使得页面更美观。更能吸引读者去阅读。

相关文章
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
95 3
|
14天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
96 44
|
9天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
22 1
|
12天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
15天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
29 2
WK
|
15天前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
17 0
|
16天前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
13 0
|
30天前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
1月前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
36 2

热门文章

最新文章