03前端笔记_2017-07-08-11-17-091

preview
需积分: 0 0 下载量 185 浏览量 更新于2022-08-08 收藏 66KB DOCX 举报
在这些前端笔记中,我们可以看到前端网页开发的基本结构和元素,以及如何逐步改进一个页面的布局和功能。我们注意到HTML文档的结构,它包括`<!DOCTYPE html>`声明,这是告诉浏览器文档类型为HTML5。接着是`<html>`元素,它是整个文档的根元素。`<head>`部分包含了元数据,如字符编码(`<meta charset="UTF-8">`)和引用外部样式表(`<link rel="stylesheet" type="text/css" href="css/style.css">`)。`<title>`元素定义了网页的标题。 在第一版中,页面主要包含两个`<div>`元素,分别用于放置logo和标语。通过CSS选择器(`.logo`和`.slogan`)来调整它们的布局,这里使用了浮动布局,`.logo`设置为左浮动,`.slogan`设置为右浮动。 第二版中,引入了Bootstrap框架,这是一个流行的前端框架,提供了一套预设的CSS样式和JavaScript组件,以简化网页设计。我们看到添加了两个Bootstrap相关的样式表和JavaScript文件,分别是`bootstrap.min.css`和`bootstrap.min.js`。页面结构也进行了调整,添加了一个顶部导航栏`<div class="top">`,包含链接文本。同时,原有的logo和标语被封装在一个新的类`<div class="img-logo">`中,并且调整了对应的CSS样式。 第三版中,对CSS和HTML结构进一步优化。`<div class="container">`使用了Bootstrap的容器类,确保内容在不同屏幕尺寸下都有良好的响应性。`<div class="top">`的样式被详细定义,包括宽度、高度、对齐方式、边框和背景色,提供了更丰富的视觉效果。`.text`类使导航链接居右显示,符合常见的导航布局习惯。 此外,笔记中提到了CSS选择器的不同类型: 1. ID选择器:使用`#`,例如`#header`,用于唯一标识一个元素。 2. 类选择器:使用`.`,例如`.logo`,可以应用于多个元素。 3. 元素选择器:使用元素名称,例如`div`,选择所有`<div>`元素。 4. 伪类选择器:如`:hover`,用于在元素特定状态时应用样式。 5. 复合选择器:可以结合多种选择器,如`.class1.class2`选择同时具有这两种类的元素。 通过这三个版本的前端笔记,我们可以看到一个简单的网页从创建到逐步完善的进程,涉及了HTML基础结构、CSS样式控制以及使用Bootstrap框架提升用户体验和设计效率。这体现了前端开发者如何利用这些工具和技术构建可扩展、响应式和美观的网页。
Jaihwoe
  • 粉丝: 20
  • 资源: 350
上传资源 快速赚钱
voice
center-task 前往需求广场,查看用户热搜