2014阿里巴巴web前端实习生试题分析(1)
来源:互联网 发布:越狱iphone抹除数据 编辑:程序博客网 时间:2024/06/07 04:04
简化以下CSS代码:
div.container{width:500px;background-image:url(/img/sprite.png);background-repeat:no-repeat;background-position:0px -78px;}div.container ul#news-list,div.container ul#news-list li{margin:0px;padding:0px;}div.container ul#news-list li{padding-left:20px;background-image:url(/img/sprite.png);background-position:-120px opx;}A{font-size:14px;font-weight:bold;line-height:150%;color:#000000;}
答案:
div.container{width:500px;background-image:url(/img/sprite.png);background-repeat:no-repeat;background-position:0px -78px;}div.container ul#news-list,div.container ul#news-list li{margin:0px;padding:0px;}div.container ul#news-list li{padding-left:20px;background-image:url(/img/sprite.png);background-position:-120px opx;}A{font-size:14px;font-weight:bold;line-height:150%;color:#000000;}div.container{width:500px;background:url(/img/sprite.png) no-repeat 0 -78px;}#news-list,#news-list li{margin:0 padding:0;}#news-list li{padding-left:20px;background:url(/img/sprite.png)no-repeat -120px 0;}
分析:CSS简写用法介绍
(1)CSS中font简写:
font:italicsmall-capsbold12px/1.5emarial,verdana;等效于:
font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;
顺序:font-style|font-variant|font-weight|font-size|line-height|font-family
(2)CSS中background简写:
background:#fffurl(bg.gif)no-repeatfixedlefttop;等效于:
background-color:#fff;background-image:url(bg.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:lefttop;
顺序:background-color|background-image|background-repeat|background-attachment|background-position
(3)CSS中margin&padding简写:
border:1pxsolid#000;等效于:
border-width:1px;border-style:solid;border-color:#000;
(4)CSS中list-style简写:
list-style:squareoutsideurl(bullet.gif);等效于:
list-style-type:square;list-style-position:outside;list-style-image:url(bullet.gif)
顺序:list-style-type|list-style-position|list-style-image
(5)四边的简写一般如下:
padding:1px2px3px4px;等效于:
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
不论是边框宽度,还是边框颜色、边距等,只要CSS样式涉及四边,顺序通通都是“上右下左”(顺时针方向)。
5.1)如果四边的值省略一个,只写三个:
padding:1px2px3px;则等效于省略的“左值”等于“右值”:
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:2px;
5.2)如果四边的值省略两个:
padding:1px2px;则等效于:省略的左值等于右值,上值等于下值
padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;
5.3)只有一个值
Padding:1px:则等效于:
padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;
1 0
- 2014阿里巴巴web前端实习生试题分析(1)
- 2014阿里巴巴WEB前端实习生在线笔试题
- 2014阿里巴巴WEB前端实习生在线笔试题
- 2014阿里巴巴WEB前端实习生在线笔试题
- 阿里巴巴web前端开发面试题
- 一道阿里巴巴web前端面试题拓展
- 把字符串转换成整数(2014年阿里巴巴实习生招聘面试题)
- 2014-03-28阿里巴巴研发工程师实习生招聘试题
- 阿里巴巴 前端面试题
- 【JS每日练习】阿里巴巴web前端开发面试题
- 2014年阿里巴巴数据分析师实习生招聘笔试题
- 2015阿里巴巴前端实习生在线笔试题
- 2015阿里巴巴前端实习生在线笔试题
- 2015阿里巴巴前端实习生在线笔试题
- 2015阿里巴巴实习生招聘客户端开发试题
- 2015阿里巴巴实习生招聘客户端开发试题
- WEB 前端面试题(1)
- 2014阿里巴巴实习生笔试题目
- hdu 3076 ssworld VS DDD 概率dp
- MYSQL教程:检查数据表和修复数据表
- android蓝牙文件传输的实现(建议与蓝牙精典结合起来看)
- storm源码分析-日志服务
- 浅析HTTP协议
- 2014阿里巴巴web前端实习生试题分析(1)
- Maven使用(二)——使用archetype/m2eclipse创建maven项目
- 老码农教你学英语:补充一些英语学习素材
- 如何为嵌入式开发建立交叉编译环境
- java 全角字符转半角字符
- php-isset
- #define中##连接符、#符以及#@符的使用
- android开发中使用百度地图定位功能遇到的问题!
- Gson.用来json和对象的互转