"03前端笔记第一版：包含Bootstrap框架的页面样式"

需积分: 0 23 浏览量更新于2024-01-05 收藏 66KB DOCX 举报

本文描述了一个前端页面的第一版实现。该页面包含了一个头部样式，并使用了Bootstrap框架。页面的HTML代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div> <div class="container"> <div class="logo"><img src="img/logo.png" /></div> <div class="slogan"><img src="img/slogan.png" /></div> </div> </div> </body> </html> ``` 该页面的头部样式如下： ```css /*头部样式*/ ``` 该页面使用了选择器来选择元素进行样式设置。其中包括了ID选择器。从上面的代码可以看出，该页面是一个基本的HTML页面结构，其中包含了一个容器元素<div class="container">，并在其中嵌套了两个子元素<div class="logo">和<div class="slogan">。logo和slogan分别通过<img>标签来显示图片。同时，页面还引入了一个外部样式表文件style.css，该文件可以通过<link>标签来引用，并且位于一个名为"css"的文件夹中。该页面使用了Bootstrap框架来进行布局和样式设置。Bootstrap是一个前端的框架，可以帮助开发人员快速构建响应式的网页。总而言之，该前端页面的第一版实现了基本的HTML页面结构和样式设置，并使用了Bootstrap框架来进行布局和样式设置。通过这个页面的搭建，开发人员可以进一步进行功能和内容的开发。

* 3、元素选择器元素名{}

* 4、伪类选择器

* 5、复合选择器

* */

body{

margin 0;/*外边距*/

padding: 0;/*内边距*/

}

.img-logo{

margin-top: 10px;/*内顶部边距*/

}

.logo{

float: left;/*左对齐*/

}

.slogan{

float: right;/*右对齐*/

}

.container{

width: 100%;

}

.top{

width: 100%;

height: 30px;/*高度*/

text-align: center;/*内部文字居中对齐*/

line-height: 30px;/*行高*/

border-bottom: 1px #ededed solid;/*底部边框，实线*/

background-color: #fafafa;

}

.text{

float: right;

}

2、HTML

标题标签：<H1>——<H6>，依次变小

段落：<p></p>

换行：<br>

分割线：<hr>

剩余21页未读，继续阅读

Jaihwoe

粉丝: 20
资源: 350

"03前端笔记第一版：包含Bootstrap框架的页面样式"

前端笔记

前端开发笔记

前端笔记_7月7日1

前端笔记_2017-07-081

ant前端面试复习笔记_Front-End-Interview-Notebook.zip

若依开源前端项目代码分析及笔记记录_ruoyi-ui-analysis.zip

mipi_application-note_RFFE_v1-00-00

IFE_Tasks-and-notes:百度前端技术学院的课程及笔记

前端学习笔记-ES6-ES11

interview-answe::globe_showing_Europe-Africa:【前端复习笔记】【100本最棒前端开发图书】针对小白的程序员训练 （右侧来个 star 吧 :rose:）

最新资源

interview-answe::globe_showing_Europe-Africa:【前端复习笔记】【100本最棒前端开发图书】针对小白的程序员训练（右侧来个 star 吧 :rose:）