![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML+CSS笔记
文章平均质量分 54
HTML+CSS笔记
Alice_LMY
这个作者很懒,什么都没留下…
展开
-
HTML+CSS笔记 15:CSS 移动端
像素:屏幕是由一个个发光的小点构成,这一个个的小点就是像素分辨率:1920*1080 说的就是屏幕中小点的数量在前端开发中像素要分成两种情况讨论:物理像素:上述说的小点CSS像素:编写网页时,所用的像素都是CSS像素浏览器在显示网页时,需要将CSS像素转换为物理像素然后再呈现一个CSS像素最终由几个物理像素显示由浏览器决定默认情况下在PC端,一个css像素 = 一个物理像素视口:屏幕中用来显示网页的区域叫做视口可以通过查看视口的大小,来观察css像素和物理像素的比值默认情转载 2021-05-28 13:19:05 · 131 阅读 · 0 评论 -
HTML+CSS笔记 14:CSS 弹性盒flex
弹性盒是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变两个概念弹性容器要使用弹性盒,必须先将一个元素设置为弹性容器通过display来设置弹性容器 display:flex display:inline-flex弹性元素弹性容器的子元素是弹性元素(弹性项)一个元素可以同时是弹性容器和弹性元素<ul> <li>1</li> <li>2&原创 2021-05-21 14:40:55 · 194 阅读 · 0 评论 -
HTML+CSS笔记 13:CSS LESS
less 简介less是一门css的预处理语言less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性,像对变量的支持、对mixin的支持…less的语法大体上和css语法一致,但是less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须先将less转换为css,再由浏览器执行CSS 的一些功能有些浏览器不支持html { --color: tomato; --length: 100px;}.box1原创 2021-05-20 15:47:55 · 144 阅读 · 0 评论 -
HTML+CSS笔记 12:CSS 动画
过渡通过过渡可以指定当一个属性发生变化时的切换方式<div class="box1"> <div class="box2"></div> <div class="box3"></div></div>.box1 { width: 800px; height: 800px; background-color: silver; overflow: hidden;}.box1 div { wi转载 2021-05-19 14:36:13 · 94 阅读 · 0 评论 -
HTML+CSS笔记 11:HTML 表单
表单用于将本地的数据提交给远程的服务器<!-- 使用 form 标签来创建一个表单 action 属性:表单要提交的服务器的地址--><form action="../html/page.html"> <!-- name 属性:要提交到服务器的数据必须指定的属性,表示参数的名字 --> 文本框:<input type="text" name="username"> <br><br>原创 2021-05-08 15:05:27 · 94 阅读 · 0 评论 -
HTML+CSS笔记 10:HTML 表格
表格使用 table 标签表示表格使用 tr 标签表示行,几个 tr 就是几行使用 td 标签表示单元格,几个 td 就是几个单元格使用 rowspan 属性来表示纵向合并单元格使用 colspan 属性来表示横向合并单元格<table border="1" width="50%" align="center"> <tr> <td>A1</td> <td>B1</td> <td>C原创 2021-05-08 11:27:38 · 92 阅读 · 0 评论 -
HTML+CSS笔记 09:CSS背景
背景<div class="box1"></div>.box1 { width: 500px; height: 500px; /* 设置背景颜色 */ background-color: rosybrown; /* 设置背景图片 二者可以同时设置,此时背景颜色将会成为背景图片的背景色 如果背景图片小于元素,则背景图片会自动在元素中平铺,将元素铺满 如果背景图片大于元素,将会有一部分背景图片无法显示 */ back转载 2021-05-07 16:12:07 · 102 阅读 · 0 评论 -
HTML+CSS笔记 08:CSS字体
字体<div>大河之剑天上来</div>/* 可以将服务器中的字体直接提供给用户去使用 加载速度问题 版权问题 字体文件格式的问题*/@font-face { /* 指定字体的名字:取名字 */ font-family: 'MyFont'; /* 服务器中字体文件的路径 format("truetype") 通知浏览器字体文件的格式 */ src: url('../source/令东齐伋体.ttf')原创 2021-04-27 10:23:32 · 103 阅读 · 0 评论 -
HTML+CSS笔记 07:CSS定位
定位原创 2021-04-25 13:28:52 · 118 阅读 · 0 评论 -
HTML+CSS笔记 06:CSS浮动
CSS 编写位置内联样式<p>我心里有一簇迎着烈日而生的花</p><p>比一切美酒都要芬芳</p><p>滚烫的馨香淹没过稻草人的胸膛</p><p>草扎的精神从此万寿无疆</p><!-- 内联样式: 在标签内部通过 style 属性来设置元素的样式 问题:样式只能对一个标签生效,当样式发生变化时,需要对所有的标签都进行修改 --><div style="color: y原创 2021-04-21 15:36:58 · 109 阅读 · 0 评论 -
HTML+CSS笔记 05:CSS盒子模型
盒子模型<div class="box1"></div>CSS 将页面中的所有元素都设置为一个矩形的盒子将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置每一个盒子都有以下几个部分组成:内容区(content)内边距(padding)边框(border)外边距(margin).box1 { /* 内容区 元素中的所有子元素和文本内都在内容区中 width 和 height 指定的是内容区的大小原创 2021-04-21 14:48:08 · 129 阅读 · 0 评论 -
HTML+CSS笔记 04:CSS的一些相关内容
长度单位、颜色单位、文档流、轮廓阴影和圆角、浏览器的默认样式等内容的介绍原创 2021-04-21 14:45:53 · 140 阅读 · 0 评论 -
HTML+CSS笔记 03:CSS选择器
CSS 选择器1. 常用选择器<h1>《默读》</h1><p>我心里有一簇迎着烈日而生的花</p><p id="sc2">比一切美酒都要芬芳</p><p>滚烫的馨香淹没过稻草人的胸膛</p><p>草扎的精神从此万寿无疆</p><br><br><!-- class 属性,与 id 类似,但可以重复使用 可以使用 class 属性来对元素进行原创 2021-04-20 17:05:12 · 133 阅读 · 0 评论 -
HTML+CSS笔记 02:CSS基本语法
CSS 编写位置1. 内联样式<p>我心里有一簇迎着烈日而生的花</p><p>比一切美酒都要芬芳</p><p>滚烫的馨香淹没过稻草人的胸膛</p><p>草扎的精神从此万寿无疆</p><!-- 内联样式: 在标签内部通过 style 属性来设置元素的样式 问题:样式只能对一个标签生效,当样式发生变化时,需要对所有的标签都进行修改 --><div style="color原创 2021-04-20 17:02:15 · 89 阅读 · 0 评论 -
HTML+CSS笔记 01:HTML 基础
1. 相关概念W3C 制定了网页开发的标准,我们编写的网页都要遵循 W3C 的规范HTML 用于描述页面的结构;CSS 用于控制页面中元素的样式;JavaScript 用于响应用户操作原创 2021-04-07 13:29:57 · 110 阅读 · 0 评论