前端
关注
分享
扫一扫
文章平均质量分 95
尐╋猪
在校学生
展开
-
网页布局，高度塌陷，以及解决办法BFC，clear，伪元素after，clearfix
《个人学习笔记十七》博客题目《个人学习笔记十七》网页布局高度塌陷解决办法BFCclear伪元素afterclearfix网页布局网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。（借鉴于css网页布局|菜鸟教程）举例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2021-01-15 15:21:56 · 346 阅读 · 0 评论 -
个人学习成果训练——网页的一小部分（萌新可以看看，代码中有注释，帮助很大，有点基础就可以看懂）内容（超链接图片排列、导航条、侧边导航条、网易新闻）
《个人学习笔记十六》文章目录《个人学习笔记十六》超链接图片排列练习：方法一：方法二：导航条练习：侧边导航练习：网易新闻练习：补充：超链接图片排列练习：方法一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-11-22 19:55:38 · 2365 阅读 · 11 评论 -
网页默认样式、重置样式表
《个人学习笔记十五》这里写目录标题《个人学习笔记十五》默认样式重置样式表默认样式通常情况下啊，浏览器都会为元素设置一些默认的样式默认样式的存在会影响到页面的布局通常情况下编写网页时必须要去除浏览器的默认样式重置样式表重置样式表，专门用来对浏览器的样式进行重置推荐两个好用的重置样式表reset.css 直接去除浏览器的默认样式normalize.css 对默认样式进行了统一reset.css代码如下：html { -ms-text-size-adjust: 100%;原创 2020-11-12 20:59:09 · 622 阅读 · 0 评论 -
文档流、盒子模型、内边距、外边距、盒子模型水平方向的布局、盒子模型垂直方向的布局、盒子模型外边距的折叠、行内元素的盒模型（萌新必看，大佬随便）
《个人学习笔记十四》文档流（normal flow）网页是一个多层的结构，一层摞着一层通过css可以分别为每一层来设计样式作为用户来讲只能看到最顶上一层这些层中，最底下的一层是文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列对于我们来说文档流主要有两个状态在文档流中不在文档流中（脱离文档流）元素在文档流中有什么特点：块元素块元素会在页面独占一行（自上而下垂直排列）默认宽度是父元素的全度（会把父元素撑满）默认高度是呗内容撑开的（子元素）行内元素原创 2020-11-07 19:00:21 · 2676 阅读 · 6 评论 -
css基础知识最后补充：继承、选择器的权重、像素和百分比、em和rem、RGB值、HSL值以及HSLA值（萌新必看，大佬随便）
《个人学习笔记十三》继承样式的继承，我们为一个元素设置的样式同时也会应用到后代元素上。继承是发生在祖先后代之间的。继承的设计是为了方便我们的开发。利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上。这样只需要设置一次即可，可让所有的元素都具有该样式注意：并不是所有的样式都会被继承 如 背景、布局相关的，等这些样式都不会被继承。选择器的权重样式的冲突当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器原创 2020-11-01 21:11:08 · 2563 阅读 · 11 评论 -
CSS经典练习题-餐厅练习
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档餐厅选择器题目目录前言二、参考答案以及解释第 1关：Type Selector第2关：Type Selector第3关：ID Selector第4关：Descendant Selector第5关：Combine the Descendant & ID Selectors第6关：Class Selector第7关：Combine the Class Selector第8关：子元素选择器+交集选择器总结前言CSS经典案例：餐厅练习原创 2020-10-20 21:58:36 · 6472 阅读 · 2 评论 -
属性选择器、伪类选择器、伪类选择器在超链接中的应用&伪元素
《个人学习笔记十二》原创 2020-10-19 18:42:32 · 560 阅读 · 0 评论 -
通配选择器、交集并集选择器、关系选择器（萌新必看）
《个人学习笔记十一》通配选择器作用：选中页面中的所有元素语法：*{}参考代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-10-18 22:30:43 · 464 阅读 · 0 评论 -
CSS中的三大基础选择器以及优先级（萌新必看）
《个人学习笔记 十》三大选择器是哪三个？id选择器、类选择器、标签选择器优先级id选择器>类选择器>标签选择器标签选择器：标签选择器又称元素选择器作用：根据标签名来选中指定的元素语法：标签名{}例子：p{} h1{} div{}示范代码：<!DOCTYPE html><html lang="en"><head> <meta charset="U原创 2020-10-18 16:58:09 · 2370 阅读 · 0 评论 -
HTML基础知识补充
《个人学习笔记九》块元素与行内元素块元素（block element）在网页中一般通过块元素对页面进行布局行内元素（inline element）主要用于包裹文字一般情况下在块元素内放行内元素，不会在行内元素内放块元素注意块元素内基本什么都能放p元素内不能放任何的块元素浏览器在解析网页时，会自动对网页中不规范的内容进行修正比如：标签写在根元素的外部p元素中镶嵌了块元素根元素中出现了除head和body以外的子元素前端三剑客查询、使用、学习网站：W3shool原创 2020-10-18 16:02:30 · 155 阅读 · 0 评论 -
音频、视频&Flash文件（萌新必看）
《个人学习笔记七》embed标记使用embed标记，可以播放的文件类型有MiNi、Mav、AIFF、SWF、AV、MP3、MOV、AVI等语法说明width 、height：整型值单位为像素，设置宽度和高度会出现播放界面，否则不会出现播放界面。一些高版本浏览器不设置宽度和高度也会出现播放界面。如果播放音频作为背景音乐时，必须同时将宽度和高度设置为0。src:设置媒体文件的路径。autostart：逻辑值。true为自动播放；false为不能自动播放。loop：逻辑值。规定音频或视频文件能原创 2020-10-18 11:54:06 · 1331 阅读 · 3 评论 -
图像以及图像各种设置&滚动文字（萌新必看）
《个人学习笔记七》img标记图像标签用于向当前页面中引入一个外部图片使用img标签来引入外部图片，img标签是一个自定义标签img这种元素属于替换元素（款和行内元素之间，具有两种元素的特点）属性说明alt规定图像的替换文本src规定显示图像的URLname规定图像的名称height定义图像的高度width设置图像的高度align规定如何根据周围的文本来排列图像，分水平垂直两个方向border定义图像周围的边框hspace原创 2020-10-17 23:08:24 · 313 阅读 · 0 评论 -
超链接语法介绍、路径&部分应用（萌新必看）
《个人学笔记六》超链接的语法超链接，即超级链接，就是指按内容链接。超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。在超文本文档中，超链接用标记语言的标签指出。超链接是Web页面区别于其他媒体的重要特征之一，网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象，且超链接的数量是不受限制的。文本超链接是分配目标URL的字或短语，图片超链接是为整个图片分配默认超链接，也可以为图片分配一个或多个热点。（借鉴于百度原创 2020-10-17 15:36:09 · 6441 阅读 · 5 评论 -
字体font标记&段落与排版标记（萌新必看）
《个人学习笔记五》字体font标记在不指定任何样式的情况下，IE浏览器会把字体显示为3号、黑色、宋体。因此设计网页时，根据需要更改不同段落的字体。HTML5中可以试用CSS中的字体属性代替。1.基本语法< font face="" size="" color="" >…< /font>2.属性说明font标记的属性、值及其说明属性值说明size+1~+7 ， 1~7 ， -1~-7正数字越大字号越大，负数字越大字越小colorrgb（r原创 2020-10-17 13:42:58 · 5629 阅读 · 2 评论 -
格式化文本标记
《个人练习笔记四》文本修饰标记文本修饰标记各类浏览器均支持，各类页面开发工具中仍然有这类标记。标记说明< b>你好！< /b>定义加粗< i>你好！< /i>定义斜体< u>你好！< /u>定义下划线< del>你好!</ del>定义删除线< sup>你好！</ sup>定义上标< sub>你好!</ s原创 2020-10-16 22:06:26 · 2240 阅读 · 4 评论 -
标题字标记&空格与特殊符号
《个人练习笔记三》标题字标记标题字标记由h1~h6共六种标记组成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></hea原创 2020-10-16 20:56:00 · 2436 阅读 · 0 评论 -
前端HTML mate
个人学习笔记二metameta主要用于设置网页中的一些元数据，元数据不是给用户看的charset 指定网页的的字符集name 指定的数据的名称content 指定的数据内容keywords表示网站的关键字，可以同时指定多个关键字，关键字之间使用,隔开（英文逗号）description用于指定网站的描述实例演示打开浏览器搜索关键字“网上购物”打开京东官方网站，然后右击选择检查查看网页源码在里面可以找到由此可知京东的关键字有网上购物，网上商城，原创 2020-10-15 17:16:04 · 1179 阅读 · 5 评论 -
前端三剑客（入门）
《个人学习笔记一》Wed标准三剑客：HTML CSS JavaScriptHTMLHTML（Hypertext Markup Language）是超文本标记语言。它是一种标记语言，而不是编程语言。HTML是Web页面的结构。HTML使用标记来描述网页。网页的内容包括标题、副标题、段落、无序列表、定义列表、表格、单表等。HTML文档是用来描述网页，由HTML标记和纯文本构成的文本文件。Web浏览器可以读取HTNL文档，并以网页的形式显示出它们。CSSCSS的作用级联样式表（Cascading S原创 2020-10-15 16:34:11 · 1596 阅读 · 5 评论