CSS 手札记

【CSS 手札记】的更多相关文章

Display:Block/Flex 宽度如果不定义会尽可能的扩充外层宽度在内容区域使用高度百分比和固定像素高度的时候外层设overflow:auto;可以把内层的高度撑开,否则外层会比内层短一截当用百分比作为宽高时因为百分比是相对于其最近的父元素的宽高,所以首先其父元素要有宽高,宽度一般不设置会有默认值(比如整个屏幕的宽度),但是高度不设置就没有默认值,因此如果父元素没设高度值,而其内部元素用了百分比作为高度时,是没有效果的 transform会提升元素的层级定位,会把元素的默认z-in…

一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用border属性:2.利用正方形旋转45度. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style> *{…

纯css手写圆角气泡对话框微信小程序和web都适用

嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了.另一种方法就是border来写了,虽然怎么写都是尖角的,可是我想尝试一下.纯手写写出设计师想要的圆角吧什么是圆角的?什么是尖角的?以下图片可以对比出来: 这种是尖角: 这种是圆角: 尖角的方法网上一搜也是一大堆,其中有我最喜欢的阮大神的方法,阮大神博文在此(可点击):http://www.ruan…

偏前端-纯css,手写轮播-（焦点切换和自动轮播只可选择一种，两者不可共存）

现在我们一般都是在网上找个轮播插件,各种功能应有尽有,是吧!!~大家似乎已经生疏了手写是什么感觉.万一哪天想不起来,人家要手写,就尴尬了!~~跟我一起复习一下吧不多说:效果图看一下: 高度不能是固定的哈,用padding 和 position 来解决,动画效果也可以改的哦!~ css: /*css reset start*/ *{ ; ; } ul,li{ list-style: none; } /*css reset end*/ /*css public start*/ .floatfix…

css手写一个表头固定

Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定主要遇到的个问题就是固定以后数据表格与表头的对齐问题,也看了很多我文章试下来都不怎么成功,只好自己一点点试表头固定的一般思路是布两个table,一个放表头,一个放表格体,然后将表格体加上高度height以及overflow-y <div class="content"> <…

CSS 手动画热销小图标

效果图 HTML 标签 <div class="main"> <div class="small"> <div class="big-area"> <span>热销</span> </div> <div class="small-l"> </div> <div class="small-r"> <…

css——手机端图片正确显示

这两天遇到的问题汇总(一): 1.图片在app端显示有差异:如下左边图片是:图片显示太大,以至于让整个页面都失真的效果:右边是调好样式之后的效果,知道增加了一个什么属性不? ... <div class="starter-template"> <h1>{{data.title}}</h1> <span class="auth">作者:{{data.author}} …

html+css手机端自动适应

JS 手札记

addEventListener中的事件如果移除(removeEventListener)的话不能在事件中执行bind(this)否则会移除无效! // selectCurrent() // copy("example...") // function sleep (ms) { // return new Promise((resolve) => { // setTimeout(() => { // resolve('sleep for ' + ms + ' ms'); /…

辛星和您一起手写CSS气泡

上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢?他能够用来当我们点击某段文字的时候再显示出来,当然,这个可能须要用到Javascript的知识,我们先不提了,我们这里先给大家看一下怎样去做一个CSS气泡把. 我们先分析一下思路,它的实现无非就是一个矩形的边框.然后以下是一个三角形,可是这个三角形是一个镂空的,也就是是一个空心三角形,而且它还是一…