为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3

CSS垂直居中的6种方式,最快只需2行代码

本文给出了6种利用CSS使HTML元素垂直居中与父元素的方法,其中包括: 1、2 绝对定位的方式 3 基于属性计算的方式(只需要2行代码哦) 4 利用vertical-align属性 5 盒子模型方式 6 基于内联元素特性 需要说一下下面的代码的打开方式,当启用一种方法时,请打开一种方法的注释,然后把其它方法注释掉,比如我想使用第2中最简单的方式,最终结果为: <!DOCTYPE html&...

310浏览 7推荐 0评论

flex布局实例深入全面总结

2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 通过笔者大量实践,发现flex布局屡试不爽,尤其在移动端自适应方面。但处于其大量的属性记忆混乱,今天图文并茂梳理如下。 语法及概念部分 实例演示部分 结合笛卡尔坐标系(仅考虑一个item情况,其它情况可以据此的排列组合实现...

69浏览 1推荐 0评论

css学习之--三种定位机制

1.标准文档流 (Normal flow) 从上到下,从左到右 块级元素: div,ul,li,dl,dt,p等 行级元素: span,strong,img,input等 块级元素和行级元素都是盒子模型 盒子模型:m b p c 盒子3D模型: 从上到下依次border,content+padding,background-image,backgroud-color,margin 样式初始化:*{...

77浏览 1推荐 0评论

新年刚过完,再给大家来一波干货,请叫我雷锋111

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name...

392浏览 3推荐 0评论

图片精灵和icon-font对比

今天学习导航上小图标实现的两种方式icon-font和CSS Sprite CSS Sprite 中文名称图片精灵。实现原理将多个小图片通过工具拼成一张大图进而减少网页的请求数。通过background-image和background-position两个css属性实现导航上的小图标。 注意点: 需要事先定义图标的大小 注意小图标与小图标之间的距离 css的坐标系和小学学过的坐标系的y轴正好相反...

137浏览 1推荐 0评论

讲解CSS布局,元素分类

元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address&g...

99浏览 1推荐 0评论

css3实现radio选择效果 原创

该手记通过简单教程,实现如图所示的radio单选样式效果 html结构,div中包含一个radio单选框与一个指向该单选框的label标签 <div class='radio-check'> <input type='radio' name='test' id='test1'/> <lab...

232浏览 5推荐 0评论

制作导航右侧分割线简易代码

.nav li{ position:relative; display:inline-block; padding:0 16px; font-size: 13px; text-shadow:1px 2px 4px rgba(0,0,0,.5); list-style: none outside none; background:linear-gradient(to bottom,#dd2926,#...

72浏览 1推荐 0评论

CSS background深入理解及应用

Background background属性的简写用法, 常见背景属性的理解以及神奇的渐变色。 目录 background属性的简写用法 常见背景属性介绍 神奇的渐变色 background属性 background简写属性在一个声明中可设置所有的背景属性。 可设置属性如下: background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景; backgroun...

103浏览 1推荐 0评论

CSS入门基础,个人整理 全文较长。 原创

CSS入门基础 基础语法规则 CSS 规则由两个主要的部分构成: 1.选择器:通常是需要改变样式的 HTML 元素 2.一条或多条声明:由一个属性和一个值组成。 每个属性有一个值。属性和值被冒号分开。 选择器: 分组:用逗号可以将需要分组的选择器分开。 继承:从父元素继承属性,如head继承body <br /> 引用: <!-- 引用外部资源 MyCss.css --> ...

193浏览 8推荐 0评论

CSS+CSS3 GitHub上填坑(兼容)常用代码总结

以下是常用的代码收集,没有任何技术含量,只是填坑的积累。转载请注明出处,谢谢。 原文链接:https://github.com/jsfront/src/blob/master/css.md 1. css 2.x 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单...

84浏览 2推荐 0评论

CSS border深入理解及应用

Border 几种常见的边框用法。以下介绍均为个人见解,如有不对的地方,请多多指教,非常感谢。 目录 透明边框的实现 多层边框的几种实现方法 border-radius 圆角的使用 border-image 边框背景详解 透明边框 要求: 给内部盒子设置一个透明边框, 可以看到外层盒子的背景。 dom结构: <div class="border-box"> <...

168浏览 4推荐 0评论

Flex布局之父元素属性的总结

flex布局之父元素的属性 这是在学习小程序的时候,建议使用flex布局,所以就学习了flex布局,尽管之前也听说了flex布局的好处,在分析css框架的时候也经常看见过,但是却从未真正使用过。。。我是参考了CSDN里的博客写的,地址如下 CSDN:flex布局 所有的flex布局必须把父元素的display设置成flex,才能够使用flex布局 display:flex; 父元素下的子元素都可以...

178浏览 1推荐 0评论

导航条两边的分割线!!!

.nav li{ position:relative; display:inline-block; padding:0 16px; font-size: 13px; text-shadow:1px 2px 4px rgba(10px,10px,3px,.5); list-style: none outside none; background:linear-gradient(to bottom,#...

133浏览 1推荐 0评论

最实用的CSS技巧和经验:

  1. 如何清除图片下方出现几像素的空白间隙   方法1   img {   display: block;   }   方法2   img {   vertical-align: top;   }   // 除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都...

267浏览 7推荐 0评论
首页上一页1234567下一页尾页

推荐作者

热门手记

意见反馈 常见问题 APP下载
官方微信