季诗筱的博客

分享个人公众号“季诗筱”

清除浮动

当当当,我回来了。被毕业论文折磨了好久,现在又开心的回来做程序媛了。今天遇到一个问题–清除浮动。这个问题比较常见了,但是我写代码的时候,遇到的问题是这样的。 需求:有一个三列布局,两遍固定宽度,中间宽度自适应,并且要求最外层父元素要适应子元素的高度。页面html是这样的:<body>...

2017-05-02 21:06:27

阅读数:575

评论数:0

布局

今天重新学习布局,因为发现自己最近都没怎么写过CSS,成天在看JavaScript,布局的东西都有一点忘记了…… 主要介绍几点: 1、 左div固定宽度,右div宽度自适应; 2、右div固定宽度,左div宽度自适应; 3、三栏自适应布局; 4、三列等高布局; 5、水平垂直居中。1、左...

2016-08-14 23:45:44

阅读数:1295

评论数:4

CSS实现垂直居中

面试的时候经常会被问到这样一个题目:让一个元素中内容垂直居中怎么做。其实之前,我就会两种,line-height和table-cell,今天做项目,遇到了这个问题,就系统的查了一下,总结5种方法

2016-04-28 16:51:50

阅读数:779

评论数:0

【CSS3】-伸缩布局盒模型实现 3列等高布局

CSS3引入了Flexbox盒模型

2016-04-28 16:32:34

阅读数:3781

评论数:0

移动web学习--淘宝 flexible.js

最近在学习移动web,需要做一个移动端和PC端都兼容的弹出框表单。查阅了很多资料,最终选择了使用淘宝的flexible.js来实现各个终端的适配。 很好的博文:     1、从网易与淘宝的font-size思考前端设计稿与工作流     2、白色橡树:移动web资源整理     3、移动端...

2016-04-22 18:07:44

阅读数:9453

评论数:17

CSS设置字间距

text-indent:0.5em;//设置首行缩进 letter-spacing: 0.05em;//设置字与字之间的间距今天写页面的时候也用到了这两个css属性,挺好用的,可以让页面更美观一些~~

2016-04-12 18:02:33

阅读数:12228

评论数:0

CSS实现select样式

今天做的任务是写一个自适应的表单提交页面,要在移动端和PC端都使用,而且要浏览器兼容。在页面布局的时候遇到的问题是,我用的select下拉框,但是firefox和chrome的下拉框是不一样的,于是就想要自己重写一下。代码如下:select { /*Chrome和Firefox里面的边框是不一...

2016-04-12 18:00:10

阅读数:1083

评论数:0

自适应网页布局

自适应设计(Responsive Design)是指创建网站时仅用一套代码即可令它适应各种不同的屏幕尺寸。2010年,Ethan Marcotte提出了”自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 1、允许网页宽度自动...

2016-04-12 17:56:15

阅读数:2462

评论数:0

css中设置table中的td内容自动换行

在项目中,有用到表格。因为有的内容比较长,所以需要列宽大一些,有的内容比较短,列宽就小一些。遇到了一个问题,在学校联系方式表里面,联系人电话/电子邮件这两列,无论我加多大的宽度,内容总是会把表格列撑的很宽,百度了一下,发现原因是这样的: 一般字母的话会被浏览器默认是一个字符串或者说一个单词,所...

2016-04-05 21:22:13

阅读数:52438

评论数:10

浅谈 -webkit-tap-highlight-color 属性

这两天在做一个运营活动,是公司4周年的活动,要做一个拼蛋糕送祝福的H5页面。做完之后,发现有一个bug,就是,我在手机上(iphone5s)点击按钮的时候,屏幕总会闪动一下,这让页面看起来很不友好也不流畅。网上搜了一下,加了一句css就解决了:-webkit-tap-highlight-color...

2016-03-14 14:46:12

阅读数:8694

评论数:1

Swiper.js 实现移动端元素左右滑动

swiper.js也是一个很好用的移动端的js库,需要引入它的css文件和js文件。用法很简单,加入相应的类即可,看一下Demo,很容易看懂。 我的例子如下:<!DOCTYPE html> <html lang="en"> <head> ...

2016-03-09 17:53:46

阅读数:11088

评论数:4

CSS 的继承、层叠和特殊性[修改版]

今天在看《HTML5与CSS3权威指南》,编写代码来验证background-origin,却出现了一个问题。我的代码如下:<!DOCTYPE html> <html> <head> <title>background的新增属性</ti...

2016-03-09 14:46:02

阅读数:687

评论数:1

CSS3animation动画 + 动画如何切换

之前做转盘的时候,用的就是animation,然后加@keyframes。当时时间挺紧张的,就在网上搜了下怎么用,就直接用了。现在有时间了,好好看了一下具体的用法。 —《图解CSS3》         CSS3的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一...

2016-03-06 15:37:10

阅读数:1257

评论数:0

CSS3多列布局

最近买了基本书,因为在实习的时候用到很多CSS动画,师父给任务的时候,也会让布局一些设计页面。在做的过程中,觉着自己的css功底还是不行,所以就想再多积累多学习。今天主要看的是大漠的《图解CSS3》,看知乎上和很多人的技术博客里都推荐过。 今天先说CSS3的多列布局。平时用到的比较多的是两栏布局...

2016-03-06 10:55:34

阅读数:907

评论数:0

CSS画出一个三角形

今天做转盘,需要有一个三角形的指针,考虑到不想加载一个图片,就想能不能自己画一个。开始还真没画对,老师给指点了以后,明白了怎么画。html代码:<!DOCTYPE html> <html> <head> <title>用css画一个三角形&l...

2016-03-04 17:34:23

阅读数:514

评论数:0

position:absolute和relative

简述position的基本用法,介绍z-index属性

2016-02-29 17:34:26

阅读数:411

评论数:0

HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)

原文地址,摘自Grace的新浪博客 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 Fa...

2016-02-27 20:43:51

阅读数:1607

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭