03前端笔记_2017-07-08-11-17-091
需积分: 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
最新资源
- 机械设计液晶面板AOI检测机sw18可编辑全套设计资料100%好用.zip
- 基于扰动观察法 电导增量法的光伏电池最大功率点跟踪仿真模型 (PLECS平台搭建)
- 毕业论文设计 基于单片机的八路扫描式抢答器详细项目实例
- 基于springboot的健身房管理系统源码(java毕业设计完整源码).zip
- 基于SpringBoot的健身房管理系统源码(java毕业设计完整源码+LW).zip
- 4-上市银行常用数据整理(2000-2022年).zip
- mysql数据库JDBC驱动程序.zip
- 机械设计一次性帽子生产设备sw18全套设计资料100%好用.zip
- 基于java的车库智能管理平台开题报告.docx
- 三菱Q PLC案例程序,三菱Q系列程序 QD75MH总线伺服本案例是液晶电视导光板加工,此案例采用三菱Q系列PLC 有QD75MH定位模块SSNET总线伺服,QJ61BT11N 远程主站和远程IO
- 基于java的出租车管理系统开题报告.docx
- 基于SpringBoot的口腔诊所系统的设计与实现源码(java毕业设计完整源码).zip
- 基于java的穿戴搭配系统的开题报告.docx
- Java+Servlet+JSP+Bootstrap+Mysql学生信息管理系统源码+说明(高分项目)
- 基于SpringBoot的哈利波特书影音互动科普网站源码(java毕业设计完整源码+LW).zip
- 基于springboot的图书管理系统源码(java毕业设计完整源码+LW).zip