内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

当前分类:

> 网页设计 > div+css >

  • 边框攻略:纯CSS渐变虚框、边框滚动动画08月30日

    一、渐变虚线边框的实现 前段时间,有位小伙伴在微博上问了我这么一个虚线边框如何实现渐变效果的问题: 如果对边框的样式细节不是很在意,则可以借助反向镂空的方法实现,也就是虚线原本实色的地方和周围颜色融为一体,看上去透明,而原来虚框透明的部分透

    Tags:CSS边框
  • CSS魔法堂:稍稍深入伪类选择器08月29日

    前言 过去零零星星地了解和使用 :link 、 ::after 和 content 等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理。 伪类 伪类选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果。具体

    Tags:CSS伪类选择器
  • 使用纯CSS制作四子连珠游戏08月29日

    序言:你有没有想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决?这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。因为案例本身比较复杂,而本人水平有限,翻译必有不恰当之处,望指

    Tags:CSS
  • 开发“todolist”项目及其自己的感悟08月29日

    一,项目题目: 实现todolist项目 该项目主要可以练习js操控dom事件,事件触发之间的逻辑关系,以及如何写入缓存,获取缓存 、 固定。 二,todolist简介 ToDoList是一款非常优秀的任务管理软件,用户可以用它方便地组织和安排计划。该软件短小精悍,仅有一个

    Tags:todolist
  • css笔记:transition学习笔记(2)08月29日

    开始把7,8月份学的css整理一下 transition过渡 1. CSS transition transition过渡:用于当元素 从一种样式变换为另一种样式 时为元素添加效果。 2. transition的各项子属性详细值 name value 是否必须 备注 transition-property 需要应用过渡效果的CSS 属性

    Tags:transitioncss
  • 带箭头和圆点的轮播08月29日

    功能:图片轮播,当鼠标移入图片、圆点和方向键时,停止轮播,移除恢复。 1.首先建立div,并放入图片 css代码#wai{width:300px;height: 300px;border: 1px solid red;}img{width: 100%;height: 100%;display: none;}html代码div id=wai onmouseover=qing() o

    Tags:CSS
  • web框架开发:分页器(Paginator)08月29日

    Django有自带的分页器,可以将数据分在不同的页面中,并提供一些属性和方法实现对分页数据的操作。分页功能的类位于django/core/paginator.py中。 常用方法 # 分页器 # paginator分页器对象(obj,每页条数) paginator = Paginator(book_list, 3) #########

    Tags:Paginator分页器
  • 浅谈H5前端性能测试实践08月29日

    H5 页面发版灵活,轻量,又具有跨平台的特性,在业务上有很多应用场景。但是同时对比 App,H5 的性能表现总是要逊色一筹,比如页面打开往往会出现白屏,滑动列表等交互场景下也不如 Native 页面流畅。针对这些白屏、卡慢之类的问题,我们测试该从哪些方面去

    Tags:性能测试CSS
  • CSS变量(自定义属性)实践指南08月29日

    Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少重复代码,也加快了我们开发速度。 近年来,一些动态特性开始作为规范的一部分,出现在CSS语言中。CSS变量(C

    Tags:CSS
  • CSS的空格处理07月31日

    一、空格规则 HTML 代码的空格通常会被浏览器忽略。 phelloworld/p 上面是一行 HTML 代码,文字的前部、内部和后部各有两个空格。为了便于识别,这里使用半圆形符号 表示空格。 浏览器的输出结果如下。 hello world 可以看到,文字的前部和后部的空格都会忽

    Tags:CSS
  • 神奇的CSS3混合模式07月14日

    对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果。但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的,即使是文字,当字体很炫的话,我们也不得不用切图来替代。实际上在16年CSS3就

    Tags:CSS3混合模式
  • 写轮眼(sharingan)奇淫技巧06月25日

    本片文章直接拷贝与部门wiki,作者还有renwanfeng、duyalei 写轮眼是谢益辉开发的,利用markdown语法完成的slides的 工具 , 排版非常考究,书写速度极快。非常适合工程师序列的工作人员。 不过因为GFW的存在,sharingan 调用的js和font不能加载,会导致slid

    Tags:写轮眼sharingan
  • CSS中最全的换行处理方式05月14日

    在Web页面上常常可以看到某个元素内部有一个很长的单词,元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢?这取决于CSS,那么CSS如何控制布局,以及CSS如何让文本更合理的方式展示。 比如下图的一种效果,在Web中是很常见的:

    Tags:CSS
  • 使用CSS3实现百叶窗式鼠标滑过hover图片动画效果05月13日

    这是一款使用CSS3实现的百叶窗式鼠标滑过hover图片动画效果。该CSS3百叶窗式鼠标hover图片动画效果当鼠标移动到图片上时,通过伪元素来制作方块移动效果,形成百叶窗组合运动效果。 查看演示 下载源码 准备 示例基于bootstrap3,所以在页面中引入bootstrap和

    Tags:CSS3hover
  • 获取DOM元素的绝对位置04月23日

    本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性。 关于如何获取 DOM 元素高度和滚动高度 ,请参考视口的宽高与滚动高度 一文。 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN C

    Tags:DOMCSS
  • 前端调试清单之优化网络资源04月14日

    原文地址: https://blog.pragmatists.com/how-to-debug-front-end-optimising-network-assets-c0bfcad29b40 作者: Micha Witkowski 摘要:本文从性能监控、图片、网络字体和JS代码优化以及如何提升渲染阻塞资源的加载速度等方面列举了常见的前端优化方法。

    Tags:CSS
  • 从零开始学CSS Grid布局04月12日

    CSS Grid 布局是 CSS 中最强大的布局系统。这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox ,它主要是一维系统。你可以通过 Grid 布局将 CSS 规则应用于父元素(成为网格容器)和该元素的子元素(网格元素)。 前言 CSS Grid 布局(又名网格

    Tags:GridCSS
  • 第四届CSSConf CN见闻04月04日

    上周末作为一名分享者参加了 CSSConf CN ,在厦门。 其实除了自己的分享内容,这次我是带着很明确的目的参会的,因为有两个主题我特别关注,就是: 第一个:响应式的组件 第三个:从 API 的角度看组件的 CSS (两个分享的标题都被我稍微演绎了一下) 这两件事

    Tags:CSS
  • 怎么画一条0.5px的边?03月25日

    什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 * 1080,即横边有1920个像素,而竖边为1080个。一个像素就是一个单位色块,是由rgba四个通道混合而成。对于一个1200万像素的相机镜头来说,它有1200万个感光单元,它能输出

    Tags:浏览器

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号