Html/CSS 第4页
分类
子分类
排序
使用css使div占满整个屏幕的实现方法
使用定位方法 <style> *{ padding: 0; margin: 0; } #myDiv { width: 100%; height: 100%; border: 1px solid red; position: absolute } </style> <body> <div id="...
26天前
css实现文字竖排的方式(小结)
html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。 单行文字竖向排列 .onecn{ width: 20px; margin: 0 auto; line-height: 24px; } .oneen{ width: 15px; margin: 0 a...
26天前ES6与canvas实现鼠标小球跟随效果
最近闲来无聊，看了下ES6的语法，结合canvas实现了动画特效——随着鼠标的移动，会有小球跟随且自动消失的动画。 首先，html部分，目前就一个canvas标签。 <canvas id="canva...
26天前
巧用CSS3的calc()宽度计算做响应模式布局的方法
今天浏览这个http://www.sitepoint.com站时，因为好奇看了下人家写的代码，结果发现了这行代码， 于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calcu...
26天前
css 两边固定中间自适应布局的实现
解析四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。 浮动 <style type="text/css"> .wrap {background: #eee; padding: 20px; } p {margin: 0; } .left {width: 200p...
26天前你知道怎么利用css实现内凹圆角么
本文利用径向渐变来实现背景透明的内凹圆角。 基本线性渐变 div { height: 100px; width: 200px; background-image: linear-gradient(90deg, red, blue); } <div>从左到右的红到蓝渐变<...
26天前
纯CSS3实现的井字棋游戏
运行效果： html .tic-tac-toe - for (var turn = 1; turn <= 9; turn++) - for (var row = 1; row <= 3; row++) - for (var column = 1; column <= 3; column++) - var player = &quo...
26天前
CSS中处理不同长度文本的几种小技巧
当我们使用 CSS 构建布局时，考虑长短文本内容很重要，如果能清楚地知道当文本长度变化时需要怎么处理，可以避免很多不必要的问题。 在许多情况下，添加或删除一个单词会改变 UI 的外观，更糟的...
26天前css属性可分为哪几大类
CSS属性根据继承性可以分为两大类，分别是：可继承性属性、不可继承性属性。 一、可继承属性 所有标签可继承： visibility:行高 cursor 内联标签可继承： line-height:行高 color:文字颜色 font...
26天前
CSS弹性布局FLEX,媒体查询及移动端点击事件的实现
flex弹性布局 定义： Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目 容器默认存在两根轴：水平的主轴（ main ax...
26天前