CSS应用的小问题总结

纯CSS实现带小角的对话框式下拉菜单

最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>CSS画对话框小三角</title> </head> <body> <div class=&q…

JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别在 dom 想用jquery 必须先引入(顺序问题) 先css 再js: 先框架css再自己css 先jquery 再框架在自己鼠标移动到div和修改ipt中弹窗 <!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标移动…

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用.代码如下: <div class="box2"> 纯css写带小三角对话框 </div> .box2{ float:left; position:relative; width:200px; height:100p…

来一波CSS兼容问题小总结吧

1.DOCTYPE 影响 CSS 处理; 2.火狐谷歌等浏览器设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.火狐谷歌等浏览器支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然…

css border制作小三角形状及气泡框(兼容IE6)

先看下CSS盒模型一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等. 调整宽度大小可以调节三角形形状. 一般情况下, 我们设置盒子的宽高度, 及上下左右边框 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…

从零开始学习html（十五）css样式设置小技巧——下

六.垂直居中-父元素高度确定的单行文本 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> .wrap h2{ margin:0; height:100px; background:#ccc; } </style> </head> <body> <!--…

CSS sprites(css 精灵):将小图标整合到一张图片上

一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升. css sprites是什么通俗解释:CSS Sprites其实就是把网页中一…

JQuery和html+css实现带小圆点和左右按钮的轮播图

是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图左右按钮小白点*/ #second_div{ margin-top: 160px; } .img_box{ overflow: hidden; width:100%; height:420px; border:1px solid; position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none;…

css浮动布局小技巧

父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另外一个作用就是迫使父元素包含其浮动的子元素. 二.同时浮动父元素. 三.添加非浮动的元素并清除它. 这里又有二种办法来清除元素: 第一种方法是加个空的div容器,由于没有往其添加内容,所以不会引入多余空间,然后使用clear属性清除他,我们知道包含元素一定会包围非浮动的子元素, 当我们添加一个div…

纯 css 打造一个小提示 tooltip

最后编辑:2019/11/26 前无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果使用的特性 css2 中的 attr 函数,所以现在(2019/11/26)主流浏览器基本都兼容为了更加精准定位使用了 css3 中的 calc 函数,如果被要求的浏览器不支持,那么降级处理的最好方式就是手动计算定位 Code <element data-title="回到顶部"></element> // 背景色 $…

【CSS应用的小问题总结】的更多相关文章