CSS——个人资料demo

【CSS——个人资料demo】的更多相关文章

CSS——个人资料demo

1.上下外边距合并,选最大值. 2.两个input标签在编辑中如果换行了,在浏览器中显示的时候会自动增加一些距离. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 2…

Css Secret 案例全套 github地址案例地址去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户体验.结构与布局.过渡与动画等.去年买入时,就决定将里面所有Demo案例全部撸一遍,作为自己2018年学习清单中的首项.这个过程中也可以学习到一些比较实用的css技巧,对于工作中css布局上面也有挺大的帮助. 下面是几种比较有趣的css场景的实现方式: 饼图(基于transform实现方式) <di…

CSS圆环百分比DEMO

<html> <head> <title>test</title> <style type="text/css"> .circleProgress_wrapper{ width: 200px; height: 200px; margin:…

CSS设计资料

CSS实现垂直居中的5种方法网页阶级配色:http://tools.jb51.net/tools/peise.htm…

常用CSS技巧资料收集

1.重置浏览器的字体大小重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0; padding:0; } table { border-collapse:collapse; border-spacing:…

css的小demo

demo1 一个高度随宽度变化的正方形 (缩小屏幕试试) 原理:margin和padding如果是用百分比设置,则是以父元素的宽度的百分比设置的. .Square{ display: inline-block; background:#FF0000; width:%; } .Square:before{ display: inline-block; content:""; padding-top:%; } .Square:before的父元素可以看作是.Square,把.Squar…

CSS grid layout demo 网格布局实例

直接上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-system/blob/master/grid.html <!DOCTYPE html> <html> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum…

CSS——tab导航demo

问题总结: 1.ul要比外套div宽度的值大一点 2.ul需要往左移动1px 3.外套的div设置overflow隐藏解决抖动: 1.li宽度设置98px,padding左右值1px,hover之后宽度不变,padding清零 2.li宽度设置100px,hover之后宽度设为98px bug问题: 外套div如果宽度500px,内部5个小盒子宽度需要比100px宽点,下面设置的是102px <!DOCTYPE html> <html lang="en"> &…

CSS——ul（demo）

1.ul本身是块级元素,在实际运用中,我们不设定宽高的话,它的宽就是父元素的宽,它的高就是内容撑起来的高度. 2.在局部布局的时候,我们可以不用设定ul的宽度和高度,直接使用margin来巧妙布局. 3.上述如果设定了ul或者其他盒子的宽度以后,会出现一个问题就是margin-left的值过大,盒子接近了另外盒子的边缘,再设置margin-right的时候如果值超过显示的距离那么将无效. <!DOCTYPE html> <html> <head> <meta ch…