CSS 随记

css狂记

接着上一篇 html狂记,同样是DIV+CSS传统站点开发,同样只是收集.整理... CSS 背景属性(Background) 属性描述 CSS background 在一个声明中设置所有的背景属性. 1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. 1 background-color 设置元素的背景颜色. 1 background-image 设置元素的背景图像. 1 background-position 设置背景图像的开始位置. 1 ba…

html.css随便记

css 绝对定位:一个元素绝对定位时,浏览器首先将它从流中完全删除,然后浏览器再把这个元素放在属性指定的位置上,对其他元素没有影响绝对定位要相对于最近的父级元素进行定位 position: absolute; // 相当于到页面距离固定定位: position: fixed; // 相当于到浏览器窗口距离 css链接…

CSS随记

在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:float属性不具有继承特性,就是说子元素不会继承父元素的浮动属性. 在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. clear 属性定义了元素的哪边上不允许出现浮动元素.不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距…

div+css布局记扎

实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系,body作为整个页面是最大的盒,而在这个最大的盒里面的第一层子盒们构成了全局布局,在这些子盒内部,又可能分出若干个盒以形成局部布局.因此,在规划一个网页的布局时,先区分出有哪些大的板块作为处于全局布局一级的大盒,再在这些大盒内部进行局部小盒子的布局以最终实现想要达到的页面布局效果. 例如,上面的布…

伪类选择符的顺序:L-V-H-A CSS提供了四种元素设置链接的颜色,包括:link.:visited.:hover.:active,它们的声明是有一定顺序的,我们简称这种顺序为L-V-H-A,即link最先,其次visited,之后hover,最后active,如此声明才能保证hover与active状态显示正确的样式表单元素不显示光标 readonly unselectable="on"…

css随记02布局

布局二栏布局利用absolute, margin .container { position: relative; } nav { position: absolute; left: 0px; width: 200px; } section { /* position is static by default */ margin-left: 200px; } 利用float, margin nav { float: left; width: 200px; } section { margin…

css随记01编辑技巧,背景与边框

代码优化一个按钮的例子,使其值同比例变化; button{ color: white; background: #58a linear-gradient(#77a0bb, #58a); padding: 6px 16px; border-radius: 4px; //由padding+content构成,分别扩展 border: 1px solid #446d88; font-size: 20px; line-height: 30px; //shadow: insert <x/y> <…

css 坑记

1. div 内容超出 (做换行处理) 要注意 white-space属性的运用设置 div width:100%;(或者固定值) 设置换行 word-break: break-all; 设置之后发现没有效果,发现在祖级div中设置 white-space: nowrap; 不换行处理. 父级菜单需要不换行处理,所以在父级菜单添加white-space: normal; 解决…

webstorm之js，css文件压缩

不说废话了,代码压缩是每个网站上线前的必备过程,但由于有时候小的项目或者加急的项目每次都构建一次类似gulp或者grunt等前端部署,实在是大题小做,所以才有了今天这个帖子: 我们会用到yui compressor 的jar包,已放入百度云,下载地址:http://pan.baidu.com/s/1o67tnB0 一:添加css压缩: 1.选择设置: 2.选择工具中的file Watchers选项 3.点击右侧的加号,选择YUI Compressor CSS选项 4.看图中所示位置选择下载的ja…

[ZZ] [精彩盘点] TesterHome 社区 2018年度精华帖

原文地址: https://testerhome.com/topics/17646 相逢即是缘分,总有一篇适合您! 感觉好的请点赞收藏 ,感觉分类不严谨的,欢迎反馈给我! 测试方法&测试管理首次接觸 "變異測試 Mutation Testing" 的心得测试方法论-质量的基石线上问题跟进总结突破测试的墨菲定律 -- 有感于一次 UAT 组织有赞.测试团队介绍 (一) 之日常工作手游项目流程缺陷增长模型手游测试知识点# 每日一道面试题 # 移动应用升级安装中的覆盖安装测试需要关…

Matplotlib数据可视化（3）：文本与轴

在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]…

三角形变形记之纯css实现的分布导航条效果

三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-size:13px; font-weight:bold; } li { float:left; position:relative; line-height:30px; background:#9BBB38; color:#fff; width:100px; height:30px; text-align:cen…

总是记不住但又总是要用的css

有没有经常遇到一些样式每次写都要用百度呢?我收集了一些我平时经常要用到的但又总是记不住的样式.有错误的地方欢迎指正.转载请注明出处. 一.设置input 的placeholder的字体样式 input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } input::-moz-placeholder { /* Firefox 19+ */ color: red; } input:-ms-input-placeh…

记一次项目中的css样式复用

本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0#wechat_redirect 二维码: 一直觉得css是一个不被重视,或者说是重视不够的饭后甜点.因为它太“简单”,门槛低,不能彰显或提升广大闷骚程序猿的逼格...一直都想聊聊css相关的一些杂碎.正好借最近的一次项目实践来侃侃…

（一）css代码积累——自己经常忘记，但是总记不住的代码

1.透明度设置 90%透明:filter:alpha(opacity=90);-moz-opacity:0.90;-khtml-opacity: 0.90;opacity: 0.90; 80%透明:filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity: 0.80;opacity: 0.80; 70%透明:filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity: 0.70;op…

记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样当屏幕大于600px时,是这样我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0…

一些实用而又记不住的css技巧

user-select 禁止用户选中文本 div { user-select: none; /* Standard syntax */ } 清除手机tap事件后element 时候出现的一个高亮 * { -webkit-tap-highlight-color: rgba(0,0,0,0); } 修改浏览器的滚动条样式 ::-webkit-scrollbar-thumb 可以修改浏览器的滚动条样式.IE火狐可能不支持. 使用CSS transforms 或者 animations时可能会有页面闪烁…

asp.net mvc项目实记-开启伪静态-Bundle压缩css,js

百度这些东西,还是会浪费了一些不必要的时间,记录记录以备后续一.开启伪静态如果不在web.config中配置管道开关则伪静态无效首先在RouteConfig.cs中中注册路由 routes.MapRoute( name: "index", url: "index.html", defaults: new { controller = "Home", action = "Index", id = UrlParameter.…

关于css那些常用却有点记不住的属性

虽然说css样式都比较简单,但是某些单词每次都用到还是没记住怎么拼写,都要百度一番,干脆就汇总一下自己经常忘记的这些,也好方便查找. 单行文本溢出: { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 兼容IE的透明度: { filter: alpha(opacity=90); } 伪元素清除浮动: .clearfix:after{ content: "."; display: block; height…

记一次产品需求：图片等比缩放和CSS自适应布局16:9

前言前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面,图片展示也理应是这样的,更加友好.当时我就说应该没啥大问题,于是就有了下文(PS:萌新还没技术积累,只能是凭着一点积累和现查来调研). 1. 图片等比缩放网上搜了一下图片等比缩放,有介绍使用: width: auto; height: auto; max-width: 100%; max-heig…

DIV+CSS初学随记

字间隔word-spacing 属性可以改变字(单词)之间的标准间隔.其默认值 normal 与设置值为 0 是一样的. word-spacing 属性接受一个正长度值或负长度值.如果提供一个正长度值,那么字之间的间隔就会增加. 为 word-spacing 设置一个负值,会把它拉近: p.spread {word-spacing: 30px;}p.tight {word-spacing: -0.5em;} <p class="spread"> This is a para…

常用且难记的一些css

1.多行文字超出隐藏,自动追加 ... 移动端兼容更好,pc下只能兼容 Safari.Opera 以及 Chrome 等部分浏览器,挺常用. (注:为什么要同时加这几个css不在这里详细叙述,详见) /* Safari.Opera 以及 Chrome */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 2.移…

html+css+jq随记

随便写个博客吧,记录一下自己的历程,今天忽然用自己好久不用的jq还做项目,并且从零开始搭建,让自己慌乱不已啊!遇到了如下问题 1.ios端点击闪屏的问题,解决办法如下在body上添加 -webkit-tap-highlight-color: rgba(0,0,0,0); 2.移动端300ms延迟,解决办法如下使用zepto.js代替jquery.js,语法糖是一样的,zepto现在是按照模块加载的,你需要在你的html里引入touch模块,然后使用语法$('#id').tap(funct…

记一次前端css样式的三角形的应用

1)面试题是这样的要求用css实现 <section> <div></div> <div></div> </section> <style> div{ position:relative; width:200px; height:50px; background:red; float:left; margin-left:10px; } div::before{ content:""; display:b…

记关于webpack4下css提取打包去重复的那些事

注意使用vue-cli3(webpack4),默认小于30k不会抽取为公共文件,包括css和js,已测试经过2天的填坑,现在终于有点成果环境webpack4.6 + html-webpack-plugins 多页项目刚开始看文章说webpack4以上无法使用 extract-text-webpack-plugin,用 mini-css-extract-plugin 代替所以一开始提取css 是用的是mini-css-extract-plugin : 2个页面,2个入口js文件中,分别…

css选择器:first-child和nth-child 采坑记

今天想用nth-child来给一个类似于树的目录(bootstrap-nav-tree 一个angularjs插件)设置不同的颜色,结构大致类似于 <ul> <li class="a">cat1</li> <li class="b">cat2</li> <li class="a">cat3</li> <li class="b">c…

CSS躬行记（1）——CSS基础拾遗

一.box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行.跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒子会被分割成多部分. (2)clone:断开的各个盒子会单独渲染. 下面用一个示例来演示两种的区别,第一个span元素采用box-decoration-break的默认值,效果如第一张图所示,在断行处没有左右内边距和圆角:第二个span元素box-decoration-break的值为clone,效…

【CSS 随记】的更多相关文章