学习 HTML 和 CSS

20 Dec 2023 - tianyw0

要学习的几个方面

  1. 布局:布局指的是网页中各个元素的排列方式和结构。在 CSS 中,您可以使用 Flexbox 或者 Grid 布局来创建不同的布局结构,比如多列布局、居中布局等。

  2. 静态效果:静态效果是指网页中元素的静态外观,比如背景颜色、边框样式、阴影效果等。这些效果可以通过 CSS 样式来实现,为网页增添视觉吸引力。

  3. 动画:动画效果可以为网页增添交互性和生动性。在 CSS 中,您可以使用关键帧动画(Keyframes)来创建元素的动画效果,比如旋转、淡入淡出等。

  4. 过渡:过渡效果可以使元素的状态变化更加平滑。通过 CSS 的过渡属性,您可以定义元素在状态改变时的过渡效果,比如颜色渐变、尺寸变化等。

  5. 响应式设计:响应式设计是指网页能够根据不同设备的屏幕尺寸和方向进行布局和样式的调整,以提供更好的用户体验。在 CSS 中,您可以使用媒体查询(Media Queries)来实现响应式设计,以适配不同的设备和屏幕尺寸。

自适应布局和响应式布局

Devv

响应式设计和自适应设计在网页开发中有一些核心区别。

响应式设计是指网页能够根据不同设备的屏幕尺寸和方向进行布局和样式的调整,以提供更好的用户体验。响应式设计使用 CSS 媒体查询(Media Queries)来根据屏幕尺寸和特性应用不同的样式。例如,一个响应式设计的网页可能会在大屏幕上显示为多列布局,而在小屏幕上则会变为单列布局,以适应不同的设备。

自适应设计是指网页能够根据访问设备的特性和环境进行自动调整,以提供最佳的显示效果。自适应设计通常是为特定的设备或屏幕尺寸进行优化。例如,一个自适应设计的网页可能会为 iPhone 设备单独提供优化的布局和样式,以确保在该设备上有最佳的显示效果。

举个例子,假设有一个网站,对于响应式设计,它可能会在大屏幕上显示为三列布局,中等屏幕上显示为两列布局,小屏幕上显示为单列布局。而对于自适应设计,它可能会为 iPhone 设备提供特定的布局和样式,以确保在 iPhone 上有最佳的显示效果。

总的来说,响应式设计更加灵活,可以适应各种不同尺寸和类型的设备,而自适应设计更专注于特定设备或屏幕尺寸的优化。

其实最开始在设计网页时要有页面上的“内容元素”和“信息架构”

在网页设计中,页面上的信息元素通常被称为 “内容元素”。这些内容元素包括文本、图像、视频、表格等在网页上呈现信息的各种元素。在设计网页时,合理布局和设计这些内容元素对于提供良好的用户体验至关重要。

页面上的信息元素在网页设计中通常被称为”信息架构”。信息架构是指对网站或应用程序中的信息进行组织、结构化和标记,以便用户能够轻松地找到所需的信息。信息架构的设计涉及到页面上的内容元素、导航结构、标签和分类等方面,旨在提供清晰、易于理解的用户界面。