HTML and CSS
关注
分享
扫一扫
文章平均质量分 86
HTML and CSS 的学习与应用
~嘘~禁止想象~
~嘘
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
HTML和HTML5的简单区别
html5原创 2021-05-08 15:31:40 · 5058 阅读 · 0 评论 -
px 和 rem
| px | rem || 12 | 12/16 = .75 || 14 | 14/16 = .875 || 16 | 16/16 = 1 || 18 | 18/16 = 1.125 || 20 | 20/16 = 1.25 || 24 | 24/16 = 1.5 || 30 | 30/16 = 1.875 |...原创 2020-08-13 11:16:00 · 152 阅读 · 0 评论 -
less基础
css的弊端CSS是一门非程序式的语言，没有变量，，SCOPE（作用域）等概念。css需要书写大量看似没有逻辑的代码，CSS的冗余度是较高的。不方便维护及扩展，不利于复用css没有很好的计算能力非前端开发工程师来讲，往往会因为缺少css编写经验而很难组织良好且易于维护的CSS代码项目。1. lessless(Learner Style Sheets 的缩写) 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin（混入）、函数等特性，使 CSS 更易维护和扩展。原创 2020-08-01 01:02:46 · 368 阅读 · 0 评论 -
万年历（JavaScript）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { .原创 2020-06-21 19:01:55 · 664 阅读 · 0 评论 -
简易计算器（JavaScript）
<html><meta charset="utf-8"><head> <script> // 插入 function insert(num) { document.form.textview.value = document.form.textview.value + num; } // 计算 function equal() { .原创 2020-06-21 19:00:24 · 358 阅读 · 0 评论 -
第二次网页设计实验报告（设计性实验）（表格+表单）
第一个：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>产品介绍...原创 2020-05-04 11:59:34 · 3334 阅读 · 0 评论 -
清除浮动（css）
浮动会让子元素脱离文档流，使得父级元素看不见自己。但是在父元素的末尾加上一个空的盒子，虽然看不见上面的，但是能看到最下面的那个，所以高度也能确定方法一：.clearfix1:after { content: ""; display: block; clear: both;} <ul class="clearfix1"> &...原创 2020-04-17 22:29:59 · 149 阅读 · 0 评论 -
超链接（网页设计实验）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>班级主页</...原创 2020-04-09 23:49:58 · 1328 阅读 · 0 评论 -
文字（网页设计实验）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>班级主页</...原创 2020-04-09 23:40:32 · 420 阅读 · 1 评论 -
列表（网页设计实验）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-04-09 23:37:36 · 376 阅读 · 0 评论 -
成绩登记表（网页设计实验）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>成绩登记表<...原创 2020-04-09 18:25:10 · 2288 阅读 · 1 评论 -
班级网站（网页设计实验）
<!-- 程序 5 - 8 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-04-09 17:53:03 · 5904 阅读 · 1 评论 -
普通话考试通知（网页设计实验）
<!-- 程序 4 - 9 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-04-09 17:42:41 · 661 阅读 · 0 评论 -
唐诗欣赏（网页设计实验）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-04-09 17:18:46 · 3387 阅读 · 0 评论 -
HTML的<marquee>标签
在MDN上看到这句话，对我这个小白来说实在是有点难受，好 nb 的一个标签为啥废弃了呢，还想学会装装 b 呢， 不管，不管，废弃了也要学。属性值作用behaviorscroll(默认值) / slide / alternate设置文本在 marquee 元素内如何滚动bgcolorcolor / #…设置背景颜色directionleft(默认值) ...原创 2020-03-31 12:43:44 · 323 阅读 · 0 评论 -
CSS的 background 属性怎么记得住呢？
（闲来无聊 练练英语）The background shorthand CSS property sets all background style properties at once, such as color, image, orgin and size, or repeat method.文章目录1. Values of properties2. Syntax3. Value1....原创 2020-03-29 18:32:13 · 531 阅读 · 0 评论 -
关于text-decoration
关于text-decorationtext-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。text-decoration 属性是以下三种属性的简写：text-decoration-linetext-decoration-colortext-decoration-style1. text-decoration-lineoverlineline-thr...原创 2020-03-27 12:15:58 · 2281 阅读 · 0 评论 -
关于img（前端）
文章目录1. map 图（图中图）2. figure元素（有利于搜索引擎搜索）1. map 图（图中图） <a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin" target="_blank"> <img usemap="#solorMap...原创 2020-03-17 13:06:08 · 1674 阅读 · 0 评论 -
css选择器的权重问题
选择器的权重问题 important > 行间样式 > id > class ==[属性选择器] > 标签选择器 记忆： (纹身一样) (唯一性：身份证) (衬衫一样) （class就是从标签中挑出来个别的） 身份证和衬衫哪个丢了重要类型权重!importantInfinity行间样式...原创 2020-03-16 17:01:57 · 221 阅读 · 0 评论 -
a标签的属性值
a标签的属性值（需要记忆，只有5个，但我记不住啊…）单独写一篇原创 2020-03-14 13:53:24 · 428 阅读 · 0 评论 -
属性值的计算过程
属性值的计算过程1. 一个一个元素依次渲染，顺序按照页面文档的树形目录结构进行2. 渲染每个元素的前提条件：该元素的所有css属性必须有值。3. 一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性值计算过程确定声明值：参考样式表中没有冲突的声明，直接作为css属性值层叠冲突：对样式表中有冲突的声明使用层叠规则，确定css属性值 - 比较重要性 - 比较...原创 2020-03-14 13:38:05 · 444 阅读 · 0 评论 -
用float，grid，flex，练习简单导航栏
用float，grid，flex，练习简单导航栏HTML相同（需要引入reset文件）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2020-03-14 11:17:57 · 317 阅读 · 0 评论 -
Visual Studio Code常用插件（前端）
Visual Studio Code常用插件（前端）插件作用Chinese (Simplified) Language Pack for Visual Studio Code中文包open in browser使用右键在默认浏览器打开JS-CSS-HTML Formatter保存格式化（对齐）Auto Rename Tag自动重命名匹配，只用改一个标...原创 2020-03-13 19:04:08 · 812 阅读 · 0 评论 -
css display的属性值
css display的属性值1. 定义和用法display 属性规定元素应该生成的框的类型。2. 属性值最后两个是css3的display属性原创 2020-03-13 18:13:55 · 182 阅读 · 0 评论 -
BFC
A. 常见定位方案.1. 普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。..2. 浮动 (float)在浮动布局中，元素首先按照...原创 2019-12-09 15:21:20 · 262 阅读 · 0 评论 -
em strong span标签的语义化
1. i标签语义化的 元素 可以用来表示：外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。2. b标签语义化的 <b>元素 用于表示：局部范围内不重要但需要突出的内容，如概要中的关键字、评论中的名词等。3. em标签语义化的 元素 表示：局部范围内强调的内容，用于改变句子或段落的侧重点。注意其作用范围为局部，也就是阅读到某段落或句子时...原创 2020-03-11 11:44:22 · 557 阅读 · 0 评论 -
css区别行盒（行内元素），块盒（块级元素），行块盒
常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、 h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；常见行内元素有：span、a、img、textarea、button、input、br、label、select、canvas、progress、cit...原创 2020-02-15 17:47:40 · 1577 阅读 · 3 评论 -
HTML的 相对路径 和 绝对路径
相对路径./ ：代表文件所在的目录（可以省略不写）…/ ：代表文件所在的父级目录…/…/ ：代表文件所在的父级目录的父级目录/ ：代表文件所在的根目录绝对路径绝对路径是指完整的网址.相对路径的好处是什么？因为网站经常是在本地搭建测试过后才上传到服务器的，这时候网址就会变成本地路径，比如说"E: ./…/… a.html",直接用这样的地址设立超链接过后在本地浏览没啥问题，但是...原创 2020-02-15 20:16:42 · 303 阅读 · 0 评论 -
关于cellpadding cellspacing 属性，无法在css中设置问题
1. 什么是table 的cellpadding cellspacing 属性cellpadding：代表单元格边框到内容之间的距离（留白）cellspacing：用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。..2. 为啥html中，table 的cellpadding cellspacing 属性，无法在css中设置cus：cellpaddi...原创 2020-02-16 19:20:09 · 1204 阅读 · 0 评论 -
HTML，css居中问题
以上方法只能实现水平方向，对于垂直方向是无效的，因为垂直方向没有剩余空间https://blog.youkuaiyun.com/linshizhan/article/details/71521140原创 2020-02-18 20:07:22 · 288 阅读 · 0 评论 -
html 注册界面练习（附源码）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-02-24 20:14:00 · 817 阅读 · 0 评论 -
HTML_first_复习
day 11. 网页组成元素文字图像超链接音频视频flash…2. 浏览器（显示代码）浏览器是网页显示，运行的平台，主流浏览器有IE， tridentChrome， GeckoFirefox， webkitOpera， BlinkSafari. Blink移动端大部分用的是webkit 的内...原创 2020-02-24 20:28:51 · 727 阅读 · 0 评论