随笔分类 -  HTML & CSS

模仿某旅行网站 纯css实现背景放大效果
摘要：基本功能是鼠标移动到图片上，对应宽度变宽。其中布局和基本样式直接copy官网，功能部分是自己瞎鼓捣实现的。 直接上代码： HTML部分 CSS部分 效果截个图： 虽然实现了，但还不是很完美，鼠标从右向左 没问题，从左向右滑动，会有问题。animation动画问题。 阅读全文
posted @ 2018-10-16 23:41 若鱼灬 阅读(654) 评论(0) 推荐(0) 编辑
checkbox及css实现点击下拉菜单
摘要：面试遇到的问题。用checkbox中的:checked伪类选择器实现。 通过label标签来触发checkbox的unchecked 和checked两种状态；用css普通同胞选择器 ~。另外补充一点，相邻同胞选择器是 +。 阅读全文
posted @ 2018-06-04 16:00 若鱼灬 阅读(2254) 评论(0) 推荐(0) 编辑
div 固定宽高 水平垂直居中方法
摘要：div固定宽高，水平垂直居中，根据所用单位不同，分成两种情况，分别是“px”和“%”情况。 例：将三层div做出三个边框，要求水平垂直居中。效果如图 情况一（单位是px时）： 只需要用绝对定位到屏幕中间，然后利用margin-left和margin-top取值就可以实现。 情况二（单位是%）： 由于 阅读全文
posted @ 2016-11-18 14:28 若鱼灬 阅读(2744) 评论(0) 推荐(0) 编辑
圣杯布局和双飞翼布局的理解和区别
摘要：圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单 阅读全文
posted @ 2015-10-16 17:30 若鱼灬 阅读(8782) 评论(0) 推荐(0) 编辑
右侧固定宽度，左侧自适应屏幕的布局（笔试题）
摘要：看到一些布局中一边固定宽度，另一边自适应屏幕的问题。总结了两种方法，一种是绝对定位，一种是浮动。 1、绝对定位方法 2、浮动方法 一定要注意DOM的顺序。 阅读全文
posted @ 2015-10-15 10:40 若鱼灬 阅读(358) 评论(0) 推荐(0) 编辑
CSS和CSS3中的伪元素和伪类（总结）
摘要：好多人伪类和伪元素分清楚，其实就是一句话，“伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到”。 CSS中伪类包括： :first-child :lang :active :focus :hover :link :visited CSS中伪元素包括： :f 阅读全文
posted @ 2015-10-14 18:26 若鱼灬 阅读(680) 评论(0) 推荐(0) 编辑
用CSS创建小三角形问题（笔试题常考）
摘要：笔试题中经常遇到用CSS实现某个Div边框添加三角形问题，掌握一点，合理利用div的边框，当div有宽有高时，边框就是不起眼的边框，当div的宽高为0时，边框就是一个小方块，把剩下的三个边透明就是神奇的三角形了。 然后就是考察CSS的：before和：after伪元素，此类问题一般分为两种类型，即实 阅读全文
posted @ 2015-10-14 18:22 若鱼灬 阅读(1293) 评论(0) 推荐(0) 编辑