CSS--复习之旅(一)】的更多相关文章

html+css复习之第3篇 | jquery  | bootstrap…
css重构之旅 >前言: 今年我大一,马上就要大二了.从高三毕业暑假到大学的这一年马上过去,马上迎来大二生活学习前端也有将近一年了.一昧去追求那些视觉的效果和相对高端和新颖的技术,反而忽略了最基础的布局技巧. 回味 2017年3月,百格教育的手机端网站,是我接到的第一个公司外包的项目.我和组长合作完成,现在项目也已经顺利完成,回想起来,自己也跟着组长学到了不少:1)一个公告的列表(你应该提前考虑到,一则公告的字数一定有多有少的)多出的应该做处理,不然超出会排成两行,使布局陷入混沌的状态: tov…
今天是2017年3月24日周五 每一天都是余生当中最好的一天,珍惜当下. CSS基础复习 1 复习 1.1Css第一天 css层叠样式表 基础选择器 标签选择器 p{属性: 值;} 类选择器 .自定义类名{} 通过class调用 id选择器 #自定义名{} 通配符选择器 *{} 所有元素选中 复合选择器 标签指定式选择器 标签名.(#)选择器{} 后代选择器   选择器 选择器 {} 标签关系包含嵌套关系 并集选择器 选择器 选择器 {} 属性选择器 /*属性选择器*/ input[type][…
CSS 选择器 p.into  表示带有into类的p元素 伪类: a)      first-line b)      last-line 伪元素: :before  能在指定的元素前添加内容(创造内容) 如:p.tip:before{content: ‘hot top’;} :after 用法和:before相同 ::sekection  针对访问者选中的东西进行样式设置.(只能对颜色和背景颜色进行改变) 如:::selection{ color:#fff; background-color…
虽然我也接触前端一年之久了,但是无奈从切图布局下来的经验还真是很不足,因为之前比赛或者是做小项目时全部都是自己负责设计,所以都是编写边设计,哎呀,也是醉了:或者是有模板,然后从人家上面扒拉下来的,真的拿一张UI设计稿给我,还真是有点心虚的,所以借最近深入了解jquery的机会,我决定把布局顺带练一练,OK,废话不多说,开工了,一周练习一次,并上图示众,同时欢迎大家一起探讨css布局细节. 第一季 简单的轮播布局 2015.12.1 所有小图片在一张雪碧图上 来贴段代码 <!DOCTYPE htm…
margin: 1. 当有三个值时第一个值为上,第二个值为左右,第三个值为下. 2.margin外边距折叠,水平没有,垂直会折叠,且折叠后以两者最大值为准.另外,当一个元素包裹另一元素时也会发生折叠.折叠条件:垂直,包含. 3.margin用于来居中时auto要作用于左右,margin上下值会忽略auto. padding: 1.padding不接受负值,margin接受负值且很重要,用于垂直居中. 2.padding对auto无效. 3.不存在内边距折叠. overflow: 属性值有:vis…
1. 保证在火狐浏览器字体<12px,苹果横屏的时候字体显示大小还是12px html { background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 2. 带点击区域的图像映射 <img src="planets.gif" width="145" height="126" alt="Planets" usemap=…
主要内容: 盒子模型内边距,外边距,边框,外边距合并 主要包括:margin(外边距)padding(内边距) border(边框)centent(内容) 内边距:padding,paddingleft,paddingright,paddingtop,paddingbottom 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <…
color:颜色derction:方向:line-height:行高:letter-spaceing:字符间距:text-align:对齐方向:text-decoration:装饰:text-indent:锁紧文本中首行:text-transform:元素中的字母:unicode-bidi:设置文本方向:white-spacing:元素中空白的处理方式:word-spacing:字间距 代码实例: p{ color:red; text-align: center; } h6{ text-inde…
css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:background-repeat:norepeat,repreat,laft,right 代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…