![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 51
季诗筱
分享我的个人公众号-【季诗筱】
展开
-
CSS画出一个三角形
今天做转盘,需要有一个三角形的指针,考虑到不想加载一个图片,就想能不能自己画一个。开始还真没画对,老师给指点了以后,明白了怎么画。html代码:<!DOCTYPE html><html><head> <title>用css画一个三角形</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"原创 2016-03-04 17:34:23 · 777 阅读 · 0 评论 -
布局
今天重新学习布局,因为发现自己最近都没怎么写过CSS,成天在看JavaScript,布局的东西都有一点忘记了…… 主要介绍几点: 1、 左div固定宽度,右div宽度自适应; 2、右div固定宽度,左div宽度自适应; 3、三栏自适应布局; 4、三列等高布局; 5、水平垂直居中。1、左div固定宽度,右div自适应介绍3种方法,严格来将是2种:利用float使左侧div脱离文档流利用原创 2016-08-14 23:45:44 · 2562 阅读 · 4 评论 -
CSS 的继承、层叠和特殊性[修改版]
今天在看《HTML5与CSS3权威指南》,编写代码来验证background-origin,却出现了一个问题。我的代码如下:<!DOCTYPE html><html><head> <title>background的新增属性</title> <meta charset="utf-8" /> <style type="text/css"> #box{原创 2016-03-09 14:46:02 · 1027 阅读 · 1 评论 -
【CSS3】-伸缩布局盒模型实现 3列等高布局
CSS3引入了Flexbox盒模型原创 2016-04-28 16:32:34 · 4862 阅读 · 0 评论 -
移动web学习--淘宝 flexible.js
最近在学习移动web,需要做一个移动端和PC端都兼容的弹出框表单。查阅了很多资料,最终选择了使用淘宝的flexible.js来实现各个终端的适配。 很好的博文: 1、从网易与淘宝的font-size思考前端设计稿与工作流 2、白色橡树:移动web资源整理 3、移动端web app自适应布局探索与总结 4、手机端页面自适应解决方案—rem布局 5、使原创 2016-04-22 18:07:44 · 11543 阅读 · 15 评论 -
CSS实现垂直居中
面试的时候经常会被问到这样一个题目:让一个元素中内容垂直居中怎么做。其实之前,我就会两种,line-height和table-cell,今天做项目,遇到了这个问题,就系统的查了一下,总结5种方法原创 2016-04-28 16:51:50 · 1305 阅读 · 0 评论 -
CSS设置字间距
text-indent:0.5em;//设置首行缩进letter-spacing: 0.05em;//设置字与字之间的间距今天写页面的时候也用到了这两个css属性,挺好用的,可以让页面更美观一些~~原创 2016-04-12 18:02:33 · 16759 阅读 · 1 评论 -
CSS实现select样式
今天做的任务是写一个自适应的表单提交页面,要在移动端和PC端都使用,而且要浏览器兼容。在页面布局的时候遇到的问题是,我用的select下拉框,但是firefox和chrome的下拉框是不一样的,于是就想要自己重写一下。代码如下:select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #b6b6b6; border-r原创 2016-04-12 18:00:10 · 2722 阅读 · 0 评论 -
自适应网页布局
自适应设计(Responsive Design)是指创建网站时仅用一套代码即可令它适应各种不同的屏幕尺寸。2010年,Ethan Marcotte提出了”自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。1、允许网页宽度自动调整首先,在网页代码头部,加入一行viewport 元标签<meta name="viewport"原创 2016-04-12 17:56:15 · 4824 阅读 · 0 评论 -
position:absolute和relative
简述position的基本用法,介绍z-index属性原创 2016-02-29 17:34:26 · 647 阅读 · 0 评论 -
浅谈 -webkit-tap-highlight-color 属性
这两天在做一个运营活动,是公司4周年的活动,要做一个拼蛋糕送祝福的H5页面。做完之后,发现有一个bug,就是,我在手机上(iphone5s)点击按钮的时候,屏幕总会闪动一下,这让页面看起来很不友好也不流畅。网上搜了一下,加了一句css就解决了:-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是苹果浏览器引擎,tap点击,highlight背景高亮原创 2016-03-14 14:46:12 · 17264 阅读 · 1 评论 -
HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)
原文地址,摘自Grace的新浪博客 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB23转载 2016-02-27 20:43:51 · 2167 阅读 · 0 评论 -
css中设置table中的td内容自动换行
在项目中,有用到表格。因为有的内容比较长,所以需要列宽大一些,有的内容比较短,列宽就小一些。遇到了一个问题,在学校联系方式表里面,联系人电话/电子邮件这两列,无论我加多大的宽度,内容总是会把表格列撑的很宽,百度了一下,发现原因是这样的: 一般字母的话会被浏览器默认是一个字符串或者说一个单词,所以不会自动换行所以需要设置一下,让表格内容自动换行。 1.在中设置样式style为word-wrap原创 2016-04-05 21:22:13 · 113933 阅读 · 11 评论 -
Swiper.js 实现移动端元素左右滑动
swiper.js也是一个很好用的移动端的js库,需要引入它的css文件和js文件。用法很简单,加入相应的类即可,看一下Demo,很容易看懂。 我的例子如下:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewpor原创 2016-03-09 17:53:46 · 15468 阅读 · 4 评论 -
CSS3animation动画 + 动画如何切换
之前做转盘的时候,用的就是animation,然后加@keyframes。当时时间挺紧张的,就在网上搜了下怎么用,就直接用了。现在有时间了,好好看了一下具体的用法。 —《图解CSS3》 CSS3的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步,实现复杂的动画效果。属性: animation-name:指定@keyframes关键帧的名字原创 2016-03-06 15:37:10 · 3089 阅读 · 0 评论 -
CSS3多列布局
最近买了基本书,因为在实习的时候用到很多CSS动画,师父给任务的时候,也会让布局一些设计页面。在做的过程中,觉着自己的css功底还是不行,所以就想再多积累多学习。今天主要看的是大漠的《图解CSS3》,看知乎上和很多人的技术博客里都推荐过。 今天先说CSS3的多列布局。平时用到的比较多的是两栏布局,三栏布局。方法也有好几种,浮动float、定位position、行内快inline-block。要是再原创 2016-03-06 10:55:34 · 1344 阅读 · 0 评论 -
清除浮动
当当当,我回来了。被毕业论文折磨了好久,现在又开心的回来做程序媛了。今天遇到一个问题–清除浮动。这个问题比较常见了,但是我写代码的时候,遇到的问题是这样的。 需求:有一个三列布局,两遍固定宽度,中间宽度自适应,并且要求最外层父元素要适应子元素的高度。页面html是这样的:<body> <div id="container"> <div id="team_logo">原创 2017-05-02 21:06:27 · 1976 阅读 · 0 评论