摘要：
基于JavaScript以及canvas实现输入颜色预览以及背景颜色变为输入颜色值的效果。 输入框中默认值为黑色，下方画布显示该颜色。通过输入新的颜色值后，点击【显示颜色】按钮，画布中的二维正方形显示对应的颜色。点击【设为背景颜色】按钮，整个页面背景颜色均采用该颜色。 <!DOCTYPE html> 阅读全文
摘要：
以色列国旗长度为220厘米X160厘米，白色背景。两条25厘米宽的水平蓝色条纹放在距边缘15厘米处。大卫之盾由两个相交的等边三角形组成，位于旗帜的中央。它的高度为69厘米，每边长60厘米，宽度为5.5厘米。条纹和星星的颜色范围可以从蓝色到耶鲁蓝色。“大卫盾”在旗帜中与四方边沿等距。 初步观察到，绘制 阅读全文
摘要：
根据百度百科中土耳其国旗的相关绘制数学关系式： 字母 含义 长度 G 宽 1 A 新月外边构成的圆（后称外圆）的圆心和接缝的距离 1/2 G B 外圆的直径 1/2 G C 外圆的直径和新月内边构成的圆（后称内圆）的直径的距离 1/16 G D 内圆直径 2/5 G E 内圆最左端和星的五个角构成的 阅读全文
摘要：
按照要求捷克国旗： 1、捷克国旗呈长方形，长宽之比为3：2。旗面由蓝、白、红三色组成。 2、构成旗帜中，左侧为蓝色等腰三角形。右侧是两个相等的梯形，上白下红。 3、在用CSS绘制时，旗帜长度为300px。 分析：这个图形相当于CSS绘制三角形的一个简单变种,采用border进行实现三角形，超出部分为 阅读全文
摘要：
美国星条旗绘制比例示意图如下： 根据美国法典目录相关绘制比例资料数据： 美国国旗高度：A=1.0； 美国国旗宽度：B=1.9； 蓝色部分高度：C=0.5385（7/13,7条间纹的高度）； 蓝色部分宽度：D=0.76（1.9x2/5，五分之二的国旗宽度）； E=F=0.0538(C/10，蓝色部分高 阅读全文
摘要：
任务要求： 1、创建一个div作为红旗旗面，用CSS控制其比例宽高比为3:2，背景为红色。 2、再创建五个小的div，用CSS控制其大小和位置。 3、用CSS同时控制每个小div的大小、边框和位置，同时配合旋转，使其与父元素组成五角星。 4、分别用CSS控制每个五角星的平移、旋转和缩放，直到五角星的 阅读全文
摘要：
尽管网上有很多CSS绘制五角星的代码案例，但是对于初学者来说可以拿来移植使用，但是在不明白其原理的情况下，进行修改移植就比较困难了。譬如想要将五角星尺寸进行缩小或者放大等设计，就需要对原代码相关数据进行修改。如果不清楚代码实现时的原理，就无法对代码的各项数据进行正确的改动维护。和CSS绘制三角形的原 阅读全文
摘要：
JavaScript示例：1、判断一个数是否是质数的函数；2、编写一个可以对任意自然数进行质因数分解的函数；3、编写代码要求可以求两个正整数的最大公因数以及最小公倍数。通过对699、996进行质因数分解以及求两者的最大公约数和最小公倍数验算编程是否正确吧。 699=3x233；996=2x2x3x8 阅读全文
摘要：
书页任意角度折角效果示意图 <div class='note'> 欢迎来到二狗哥的博客，HTML、CSS、JavaScript等前端代码研究，你我共勉！ </div> 代码编程要求： 1、折线与上边缘构成角度为30°；2、背景颜色色标#6d98bd，折角部分色标#577b98；3、为增加逼真效果，需 阅读全文
摘要：
在文本行中实现斑马条纹效果的隔行变色，从代码实现角度来说，通过对每行文字包裹在<div>元素中通过选择器nth-child(even)可以实现隔行变色。但是这种方式非常笨重，当段落文字发生变动或者长度发生改变时，就需要重新添加包裹元素。这里推荐通过CSS线性渐变以及背景定位相关知识可以更加灵活实现文 阅读全文
摘要：
浮动布局并不是再是流行的布局方式，不过基于浮动的经典布局还是经常出现在前端面试中，圣杯布局和双飞翼布局就是其中常考核的知识点。圣杯布局和双飞翼布局都是前端中三列设计布局方式，要求主要中间内容优先渲染，左右内容宽度固定，中间主要内容宽度自适应排布。圣杯布局和双飞翼布局都没有使用绝对定位，而是应用浮动、 阅读全文
摘要：
在网上找到一篇竖版金刚般若波罗蜜经，尝试通过CSS实现接近书籍图片原文的排版效果。 网络中找到的截图： 采用CSS模拟实现的效果截图： 实现难点： 1.竖版文字的排列； 2.等距离竖格线的实现：竖格线要在容器中上下满屏分布，恰好满足与文字的距离。 莲花图片在百度图片中找到近似图片。 <div cla 阅读全文
摘要：
气泡效果在前端设计中很常见，如上图就是一种对话气泡效果的实际应用。气泡效果在CSS前端编程中实现的难点是不规则的三角形，比较主流的设计思路是通过绝对定位的伪元素来制作该三角形效果。 .container { width: 300px; height: 200px; background-color: 阅读全文
摘要：
三角形属于常见的几何图形，在网页设计中应用较为广泛。在网页编程中除了采用图片来实现前端展现外，纯CSS也可以实现三角形绘制。 1、基于border-width方案 基于border-width绘制三角形是“一门传统手艺”，由于该属性浏览器的支持性非常好，几乎没有兼容性问题，主流的三角形绘制方案都是采 阅读全文
摘要：
块级格式上下文BFC(block formatting context)是一种规定渲染区域元素排列的规则，包括子元素如何定位以及和其它元素的作用关系。块级盒参与块级格式上下文。 块级格式上下文的渲染规则主要有以下几点： 1、触发该规则——浮动元素、绝对定位元素、非块级盒的块级容器[如行内块级元素(d 阅读全文
摘要：
绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中，定位祖先元素的宽度为W，垂直高度为H，则存在以下关系： 元素水平方向 width + left + right + marginLeft + marginRight = W 垂直方向： he 阅读全文
摘要：
currentColor属于CSS中的一个变量，当然也有人称之为CSS的自定义属性，其代表“当前颜色”。 在CSS中设置了color的值后，相应CSS代码块（由两个花括号包裹的内容）中出现currentColor即引用的color属性值。对于需要设置多个相同颜色值的CSS代码而言，通过current 阅读全文
摘要：
浮动在HTML/CSS布局中十分常见，虽然浮动布局可以实现很多有用的排版效果，但是浮动的元素脱离了文档流，可能造成包含块高度塌陷、下方行框上移等行为。因此在使用浮动实现想要的效果后，通常还需要清除浮动影响的布局来避免上述问题。 HTML/CSS中清除浮动的本质是需要清除浮动元素对正常文档流的影响。 阅读全文
摘要：
学习CSS/HTML的过程中，当出现释义冲突时，W3C（万维网联盟）官网所陈列的技术标准是最核心的判断参考。但是新手在查阅W3C标准索引页面时，会发现同一个属性或者模型会出现多个不同的阶段规范展示结果。对于不能流畅阅读英文原版内容的同学来说，十分不友好，同时多个不同规范标识拥有不同的含义，其所表达的 阅读全文
摘要：
table标签目前前端主流推荐HTML、CSS、JS三者分离，实际使用table标签的CSS样式代码还是采用table的style的属性和值来进行外观样式控制。 习惯样式： 1 table { 2 display: table; 3 border-collapse: separate; 4 bord 阅读全文