相关内容
html和css进阶
粗细 颜色 线条种类; * border: 1px red solid; * 内边距：边和内容之间的距离 * padding: 20px; * css3.0 启动盒子内减模式的属性 * box-sizing: border...radio（实现单选功能）单选功能：把input加name属性且保证取值相同即可默认选中：xhtml1.0 checked=“checked”； html5.0如果k==v，省略等号引号保留一个...
HTML5＆CSS3初学者指南（4）–Canvas使用
系列 html5 css3 的知识介绍已经全部结束了，希望对学习 html5 css3 的朋友有所帮助。 来源：http:www.cnblogs.compowertoolsteamphtml5_css3_4.html...绘图方法：线条以及填充moveto（）方法使用x和y作为参数，在 canvas 上设置参数指定的线条起始点。 lineto（）方法使用x和y作为参数，在 canvas 上创建上...
HTML5 & CSS3初学者指南(4) – Canvas使用
putimagedata（）方法有7个参数：imagedata 对象imagedata 对象左上角的x坐标imagedata对象左上角的y坐标放置图像的x坐标放置图像的y坐标绘制图像的宽度绘制图像的高度本系列 html5 css3 的知识介绍已经全部结束了，希望对学习 html5 css3 的朋友有所帮助...
CSS团队协作规范
不可直接 over write 或在原本框架的 class 增加内容classclass设计rwd网站，请遵循移动设备优先原则htmlcss手机开启网页很吃手机效能和网络状况，前端工程师一开始就以手机版为优先，可以让html一开始载入，使用最少的效能快速载入网页。 当开始制作桌面版时，只会少许跑版，做适当微调即可。 相反，如果先制作桌面...
CSS——loading动画
三根线条排版； 动画——颜色、线条长度渐变； 动画引入及执行方法； loading动画2动画2中则与动画1排版略有不同：在动画区域内，有四个圆点，然后重复的放大缩小以及匀速旋转。 因此步骤如下：建立块级区域； 四个原点排版（定位flex等方法）动画——缩放、旋转； 动画引入及执行方法； 二、 代码1. loading1html ...
妙用CSS变量，让你的CSS变得更心动
使用场景其实「css变量」有一个特别好用的场景，那就是结合list元素集合使用。 如果不明白这是什么，请继续往下看。 以下所有演示代码基于vue文件，但html、css和js分开书写，为了简化css的书写而使用sass进行预处理，方便代码演示 条形加载条一个条形加载条通常由几条线条组成，并且每条线条对应一个存在不同时延的...
CSS 实用手册
1. css 样式表的使用方式(1). 内联方式，又称为行内样式，将样式定义在某 html 元素中(style 属性中)语法:内容部分 (2). 内部样式表，以独立的方式，定义页面元素的样式(元素与样式相分离)，并且能够让样式应用在多个元素中(提升可重用性和可维护性)语法: p{ color:red; background-color:yellow; font-size:24px; } ...
CSS简笔画：纯CSS绘制一辆婴儿车
婴儿车 html结构 css部分代码1、定义css变量:root{ --bgcolor:rgb(28, 194, 78); --linecolor: #fff; 2、婴儿车水平垂直居中body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: var(--bgcolor); .baby-carriage { position: relative; * 下方代码...
代码变油画，精细到毛发，这个前端小姐姐只用HTML+CSS，让美术设计也惊叹丨GitHub热榜
晓查 郭一璞 发自 凹非寺 量子位 报道 | 公众号 qbitaihtml不是编程语言，但这并不妨碍精通它的大佬玩出花来。 普通的前端，用html+css制作网页，元素简单，工具丰富。 大佬级前端，用html+css绘画，全程不用ps、ai这种图形化的图片编辑器，单纯敲一行行代码纯手工绘制。? 把代码转换之后，就变成了鲜嫩的水果：?...
HTML概要
html css javascript 的关系html是网页内容的载体。 内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 css样式是表现。 就像网页的外衣。 比如，标题字体、颜色变化，或为标题加入背景图片、边框等。 所有这些用来改变内容外观的东西称之为表现。 javascript是用来实现网页上的动态...
HTML基础
html基础----html基本知识与结构html常见标签标签写法与嵌套的讨论html、css、javascript三者的关系 html是网页内容的载体。 内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 css样式是表现。 就像网页的外衣。 比如，标题字体、颜色变化，或为标题加入背景图片、边框等。 所有这些...
CSS3实现彩色炫酷文字
它的一大用途就是上面这样设置炫酷的彩色文字，还有一个用途就是设置镂空文字，如下。 html： 镂空文字css： .hollow-out-text{ text-align: center; font-size: 40px; *设置背景透明* -webkit-text-fill-color: transparent; *设置镂空线条* -webkit-text-stroke: 1px #cc00ff; 最终效果：?...
Css学习手册之基本篇
几种css使用姿势主要有下面三个使用姿势，其中优先级为 c > b > aa.直接引入css文件b.在html中，直接写css:c.在标签中直接写css p { color: red} dd对于标签的样式定义，特别是在引入css文件时，发现一个标签可能多重命中方式，有通过id进行设置的，有class设置的，也有标签设置的，他们之间的优先级是:1...
css基础教程之其他常用css知识
老雷css基础教程之其他常用css知识一、content 用来和:after及:before伪元素一起使用，在对象前或后显示内容 normal 默认值使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） 插入字符串 .box:after{ content:a, content:url(bg.jpg) }二、outline 设置或检索对象外的线条...
用CSS画小猪佩奇
这里说的都是“类”，这也正是小猪佩奇的构图精髓，一种手绘风格，而不是标准刻板的线条。 在前端技术选型上，画图首先想到的是svg、canvas，但它们本身就擅长画图，而且网上都有在线编辑svg的工具，这就没意思了，我想佩奇也不会答应的。 于是我想用纯粹的css来做，这样更有挑战，因为画图画曲线不是css擅长的事情...
如何提升CSS技术？8个硬核技巧带你迅速提升CSS技术
既然只玩css，那只有html文件和css文件就足够了。 另外还需一个浏览器chrome和一个编辑器vscode。 vscode还需安装live sass compiler和live server两个插件。 live sass compiler用于实时编译sassscss文件为css文件。 live server用于启动具有实时刷新功能的本地开发服务器，以处理静态页面和动态页面。 新建index...
CSS常见兼容性问题总结
浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。 这里谈到的浏览器，主要指ie6ie7ie... firefox chrome opera safari 等。 但更多的兼容还是考虑ie6ie7ff之间的斗争先来谈谈csshack 我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的...
网格系统 CSS Grid Layout
听闻w3cplus大漠在第三届css conf上的演讲主题是css grid layout，吓得我赶紧抛下红尘俗事闭门谢客苦心钻研，唯恐脚步太慢，遥望大漠一骑绝尘而扼腕叹息...上面的几个概念我们提炼下：线条，栏(竖直)，行(横向)，单元格，合并。 下面我们把这些概念对应到我们的网格系统? grid containers：首先我们要设置父元素...
网格系统 CSS Grid Layout
听闻w3cplus大漠在第三届css conf上的演讲主题是css grid layout，吓得我赶紧抛下红尘俗事闭门谢客苦心钻研，唯恐脚步太慢，遥望大漠一骑绝尘而扼腕叹息...上面的几个概念我们提炼下：线条，栏(竖直)，行(横向)，单元格，合并。 下面我们把这些概念对应到我们的网格系统? grid containers：首先我们要设置父元素...
【CSS】599- 9个很棒的CSS边框技巧
要做到这一点，我们只需要为动画创建一个自定义的关键帧（keyframe），并在元素的css代码中的动画（animation）参数中使用它。 让我们看一个例子，html如下 编程适合那些有不同想法的人... 对于那些想要创造大事物并愿意改变世界的人们。 编写css和动画@keyframes animated-border{ 0% { box-shadow: 0 0 0 0 rgba...
