![](https://img-blog.csdnimg.cn/0fae5ab0b2d9496aa6e629b8dc4878ba.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML/CSS
文章平均质量分 90
从零开始,基础一步一步扎牢。
1900's 88 keys
陆上的人喜欢寻根究底,虚度很多的光阴。
冬天忧虑夏天的迟来,夏天担心冬天的将至。
不停到处去追求一个遥不可及、四季如夏的地方——我并不羡慕。
展开
-
HTML标签(三)
目录常用标签div标签语义化布局header标签nav标签main标签section标签article标签aside标签footer标签details标签和summary标签map + area 标签picture + source 标签多媒体标签video标签audio标签track 元素WebVTT 格式source 标签iframe标签常用标签div标签<div>标签定义 HTML 文档中的一个分隔区块或者一个区域部分。无意义的空间块,后期通过CSS加工给内容提供背景等。语义化布原创 2021-10-06 00:33:42 · 210 阅读 · 0 评论 -
HTML标签(二)
目录常用标签列表标签无序列表有序列表属性常用标签列表标签无序列表<ul>标签用于定义无序列表。 <ul> <li>水浒传</li> <li>西游记</li> <li>红楼梦</li> <li>三国演义</li> </ul>有序列表<ol>标签用于定义有序列表。属性属性值原创 2021-10-04 00:32:07 · 571 阅读 · 0 评论 -
WEB网页初述
目录一、网页发展历史二、网页概述1、认识网页2、网页名称解释3、Web标准三、HTML、CSS、JavaScript1、HTML2、CSS3、JavaScript四、浏览器1、常见浏览器2、浏览器内核五、第一个程序一、网页发展历史不管干什么,**前人的丰功伟绩(历史)**总要了解下~毕竟,作为生命周期如此短暂的人类,在有限的生命中为后人作出伟大的贡献,总值得被怀念和尊敬。历史部分:1、Web发展史(传送门)2、HTML发展史(传送门)3、CSS发展史(传送门)引用小甲鱼老师的原创 2021-09-27 20:32:56 · 162 阅读 · 0 评论 -
CSS3著名的精灵技术-又名:【“雪碧”图玩法】
CSS3著名的精灵技术-又名:【“雪碧”图玩法】雪碧图就是零零碎碎的许多图,放在一张图中,保存到缓存区,提高加载效率。例如:在这个上面的任意小图标,如果我们想要使用其中一个小图标,只要量出尺寸大小,输入指定位置即可。可以借助Photoshop、尺子、画图等工具,由于我Photoshop软件使用的比较多,下面就以Photoshop 演示。以其中的第四排黄色哭脸为例第一步先计算出想要区域的大小通过上面矩形选择能计算出图片大小为100*100接下来计算该哭脸图在大图中的位置坐标就行了。确定原创 2021-11-02 22:23:22 · 113 阅读 · 0 评论 -
CSS传统布局所用的元素
目录CSS布局常见元素displayCSS布局常见元素displaydisplay 属性规定元素应该生成的框的类型。每个HTML元素都有属于自己的默认display属性值。可以通过display去更改HTML 行内元素(inline element) 和 HTML 行内元素(inline element) 的默认值。 在我之前的HTML文档介绍中有解释两者的区别。display:inline;通过该属性值可以让块级元素以行内元素显示。display:block;通过该属性值可以让行内元原创 2021-10-12 02:30:00 · 177 阅读 · 0 评论 -
你不知道的margin:auto居中原理
目录auto值对布局的影响当margin-left、margin-right、width其中margin-left、margin-right为特定值,width为auto当width 为特定值,margin-left 和 margin-right 为 automargin-left 或 margin-right 任意一个为特定值,其余为 auto三个属性均为 auto通过对外边距的学习,前端攻城狮都会用margin:auto;或者margin: 0 auto;来对页面块级元素居中布局。本文会对其原理解释。原创 2021-10-16 02:30:00 · 4382 阅读 · 0 评论 -
弹性盒布局常用元素(下)
弹性盒布局常用元素垂轴上的对齐方式align-contentalign-content属性很容易和align-items属性混淆。align-content属性在有多行弹性元素的时候(即换行flex-wrap:wrap;),效果才比较明显。align-content也有align-items相同的属性值:stretch默认值centerflex-startflex-endspace-betweenspace-aroundalign-content和 align-items属性的区别原创 2021-10-22 21:04:32 · 75 阅读 · 0 评论 -
HTML标签(一)
目录一、HTML优势1、兼容2、合理3、易用二、HTML基本结构三、标签1、标签,属性,元素的概念2、HTML标签的形式3、HTML分类HTML 块级元素(block element)HTML 行内元素(inline element)4、常用标签标题标签段落标签显示文本标签水平线标签meta标签1、利用 meta 元素指定网页编码2、实现网页尺寸 “自适应”3、搜索引擎优化文本格式化标签换行标签特殊字符HTML 预留字符图像标签路径:文件储存位置一、HTML优势HTML5作为HTML的最新版本,是HTM原创 2021-09-27 23:38:12 · 308 阅读 · 0 评论 -
CSS基本语法和选择器的使用
目录CSS的使用方法内联样式(Lnline Style)内部样式表(Lnternal Style Sheet)外部样式表(External Style Sheet)CSS的选择器使用基本选择器通用选择器元素选择器类选择器ID 选择器复合选择器交集选择器并集选择器后代选择器子元素选择器相邻兄弟选择器通用兄弟选择器伪元素选择器::first-line::first-letter::before::after::selection伪类选择器动态伪类选择器:link:visited:hover:activeUI伪类原创 2021-10-08 00:18:42 · 466 阅读 · 0 评论 -
动画效果和加载(Loading)动画的实现
多个图标动画特效目录多个图标动画特效首先通过@font-face加载字体文件。加载(Loading)动画 - 0.0“拖尾”Loading动画 - 1.0三点唤醒Loading动画 - 2.0多点Loading特效【终极版】 - 3.0首先通过@font-face加载字体文件。话不多说,先看效果思路清晰,先写六个div<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-11-01 22:34:51 · 1399 阅读 · 0 评论 -
背景设置和CSS盒子模型
目录color属性背景设置backgroundbackground-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-attachmentbackgroundCSS盒子模型盒子模型的特性borderborder-styleborder-widthborder colorborder简写border-radiusmarginmargin-top、margin-right、margin-botto原创 2021-10-10 00:05:59 · 343 阅读 · 0 评论 -
CSS3的滤镜技术
CSS3的滤镜技术在CSS3中提供了一中强大的滤镜技术,有了这项技术,对Photoshop软件的使用需求,就少了很多。虽然CSS3的滤镜技术还是离Photoshop软件强大的系统有一定差距,但是也给开发人员提供了太多的使用空间。常用的滤镜函数模糊效果:blur(number)模糊效果:blur(number),number越大图像越模糊图像的亮度:brightness(number)设置图像的亮度:brightness(number),number越大图像越亮,number不能取负值。可以是原创 2021-11-03 19:43:58 · 99 阅读 · 0 评论 -
CSS传统布局的入门总结
目录双飞之图文混排格子布局多列布局(多项等高布局)自适应两列布局浮动法postion定位法三列布局float实现三列布局postion实现三列布局margin负值法双飞翼布局圣杯布局双飞之图文混排<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"&g原创 2021-10-25 20:13:28 · 213 阅读 · 0 评论 -
margin塌陷现象及解决方法——BFC(面试常问)
目录margin塌陷现象同级的元素塌陷父级和子级的元素margin塌陷解决办法BFC(Block formatting context)演示代码解决同级的元素塌陷代码解决父级和子级的元素margin塌陷BFC相关拓展一下:容纳浮动元素阻止文本环绕margin塌陷现象当纵向相邻的两个或多个块元素,如果同时设置了外边距的时候,那么外边距会发生塌陷,也称之为边界折叠。如果两个相邻元素设置的外边距一样的时候,外边距将会完全重叠。如果两个相邻元素设置的外边距不一样的时候,那么浏览器将会以最大的那个外边距为准。官方原创 2021-10-14 03:45:00 · 865 阅读 · 0 评论 -
弹性盒布局常用元素(上)
目录弹性盒布局常用元素设置方式flex-directionflex-wraprow:row-reverse:column:column-reverse:弹性元素主轴上的对齐方式(justify-content)flex-start:flex-end:center:space-between:space-around:space-evenly:弹性元素垂轴上的对齐属性(align-items)stretch(默认值)centerflex-startflex-endbaselinealign-self属性弹性原创 2021-10-18 22:29:25 · 426 阅读 · 0 评论 -
多列布局元素和栅格布局基础
目录多列布局(column)column-countcolumn-rulecolumn-fill瀑布流布局栅格布局grid-template-columns和grid-template-rowsgrid-template-areasgrid-templategrid-gap栅格布局的对齐方式justify-contentalign-contentalign-itemsjustify-self和align-selfplace-content、place-items和place-self布局!布局!布局!这篇原创 2021-10-26 21:38:23 · 368 阅读 · 0 评论 -
过渡效果和变形详细图示
目录过渡效果(transition)transition-durationtransition-propertytransition-delaytransition-timing-functiontransition变形(transition)旋转函数rotate移动translate缩放scale倾斜skew过渡效果(transition)在css3中发布了三种新添加的特性,可以让静止的网站变得动起来,而且不需要借助js脚本就能实现。这便是其中的一种,过渡。transition-duration原创 2021-10-28 22:21:57 · 122 阅读 · 0 评论 -
万金油“小三角“
目录万金油"小三角"朝下的三角朝左的三角三角形缺口作为页面点缀翻页的小图标线型三角万金油"小三角"写个能用在很多地方都能用到的小三角。<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> <meta charset="UTF-8"> <title>三角形</title> <style type="tex原创 2021-11-05 19:32:41 · 107 阅读 · 0 评论 -
动画基础属性
目录动画基础属性@keyframesanimation-nameanimation-durationanimation-iteration-countanimation-directionanimation-fill-modeanimation-delayanimation–play-state动画基础属性@keyframes@keyframes用来定义关键帧规则语法:@keyframes 动画名称{ keyframes-selecter :{ css-styles}原创 2021-10-30 23:47:29 · 87 阅读 · 0 评论 -
CSS中的常用单位
目录CSS中的常用的单位px、emvw、vh、vmin、vmaxfrCSS中的常用的单位px、empx:像素点,相对长度单位,相对于计算机屏幕分辨率Chrome浏览器默认显示最小字体为12pxem:相对长度单位,相对于当前对象内文本的字体尺寸任意浏览器默认的相对字体高度为16em12px = 0.75em10px = 0.625emvw、vh、vmin、vmax(1)vw、vh、vmin、vmax:是视窗(Viewport)单位,是相对单位,由视窗大小决定.1个单位类原创 2021-10-24 22:01:30 · 1451 阅读 · 0 评论