随笔分类 -  css

CSS Hack是什么意思
摘要：CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够 阅读全文
posted @ 2016-07-13 16:17 学习呗! 阅读(438) 评论(0) 推荐(0)
css float父元素高度塌陷
摘要：css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准。 float 原本是为了解决文字环绕才出现的。 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float 父元素高度消失/塌陷的问题 更好的方法是 阅读全文
posted @ 2016-07-13 14:25 学习呗! 阅读(799) 评论(0) 推荐(0)
前端项目流程
摘要：建立目录： images css js index.html切图HTML 从外到内,从大到小，一层层写CSS css重置 css全局属性 css模块属性 先写布局定位，把最不同的地方改掉 然后再慢慢调整细节JS 阅读全文
posted @ 2016-07-12 14:27 学习呗! 阅读(220) 评论(0) 推荐(0)
css-选择器-优先级
摘要：<!DOCTYPE html>CSS选择器优先级相同优先级下，位置在文档后面的覆盖前面的不同优先级下，越能具体描述元素的css选择器，优先级越高 具体情况：HTML元素继承父级元素的CSS属性 优先级 -100 浏览器赋予HTML元素的默认CSS属性 优先级 -10 星号选择器 优先级 0*{bac 阅读全文
posted @ 2016-07-12 14:24 学习呗! 阅读(225) 评论(0) 推荐(0)
css-盒模型,浮动,定位之间的关系
摘要：网站布局属性：盒模型：调整元素间距float浮动：竖排的块级元素改成横排position定位：重叠元素，精确控制元素位置 能用盒模型，不用float,能用浮动，不用定位 阅读全文
posted @ 2016-07-12 11:55 学习呗! 阅读(244) 评论(0) 推荐(0)
css-文本及其他
摘要：<!DOCTYPE html>css7-文本和其他 text-align行内元素对齐方式，值为 左/中/右 对齐：left/right/center.test{text-align:center;} white-space超出不换行 normal： 默认处理方式。 nowrap： 强制在同一行内显示 阅读全文
posted @ 2016-07-12 11:54 学习呗! 阅读(146) 评论(0) 推荐(0)
css-背景
摘要：<!DOCTYPE html><link rel="stylesheet" href="css/style.css"> CSS5-背景 常用图像格式web图片格式 jpg 24位 1600万色 适用：照片，复杂图片，有损压缩图片小（常用） gif 256色 动画 透明 适用：简单动画 png 8位 阅读全文
posted @ 2016-07-12 11:50 学习呗! 阅读(216) 评论(0) 推荐(0)
css-定位
摘要：<!DOCTYPE html>CSS5-定位元素定位 作用：1：元素重叠，2：元素的精确移动或定位 position static 默认，普通流，不能移动，不能使用zindex和top、right等偏移属性 relative:相对定位，脱离普通流，有占位。 absolute:绝对定位，脱离普通流，无 阅读全文
posted @ 2016-07-12 11:33 学习呗! 阅读(200) 评论(0) 推荐(0)
css-网页整体css布局
摘要：<!DOCTYPE html><!--有限宽度带居中布局：<style>*{margin:0;padding:0;list-style:none;} .zong{background:#ccc;}.zong .header{height:100px;background:#f00;}.zong .b 阅读全文
posted @ 2016-07-12 11:32 学习呗! 阅读(321) 评论(0) 推荐(0)
css-float
摘要：<!DOCTYPE html>CSS4-布局3-float 浮动属性最初发明的目的：用来给网页做文字环绕图片排版，写图文环绕案例现在浮动布局的根本目的：把竖排的块级元素改为横排 网页结构层：1：底层，普通流（文档流）2：中层，浮动流 float3：顶层，定位流 position 写块级元素横排案例 阅读全文
posted @ 2016-07-12 11:31 学习呗! 阅读(216) 评论(0) 推荐(0)
css-下拉菜单案例
摘要：<!DOCTYPE html>CSS4-布局2-display下拉菜单案例 <style>.xiala{width:200px;background:#ddd;}.xiala li div{position:absolute;width:150px;height:150px;background:# 阅读全文
posted @ 2016-07-12 11:30 学习呗! 阅读(286) 评论(0) 推荐(0)
css-布局1-基本属性
摘要：<!DOCTYPE html>CSS4-布局1-基本属性 属性：displayvisibilityfloatclear HTML元素类型：行内元素，块级元素 块级元素：最大的区别：换行行内元素：不换号 <style>div{background:#f00;width:200px;height:100 阅读全文
posted @ 2016-07-12 11:27 学习呗! 阅读(167) 评论(0) 推荐(0)
css-盒模型
摘要：<!DOCTYPE html>CSS3-盒模型 盒模型属性： width 宽度 height 高度 margin 外边距 border 边框 padding 内边距.test{width:200px; height:100px; margin:20px; padding:15px; border:5 阅读全文
posted @ 2016-07-12 11:11 学习呗! 阅读(137) 评论(0) 推荐(0)
css1-颜色和长度
摘要：<!DOCTYPE html>CSS1-颜色和长度 <style>div{ /*颜色*/ color:#f00; /*前景色*/ background:#00f; /*背景色*/ /*不同颜色标识*/ background:green; background:rgb(55,255,55); back 阅读全文
posted @ 2016-07-12 10:50 学习呗! 阅读(180) 评论(0) 推荐(0)
css书写步骤
摘要：CSS整体书写步骤1：CSS RESET 重置2：CSS GLABAL 全局属性3: CSS分模块属性，(先写默认样式和设计图相差最大的部分，先大块布局，后细致调整) <style>/*CSS RESET 重置*/*{margin:0;padding:0;list-style:none;}img{b 阅读全文
posted @ 2016-07-12 09:48 学习呗! 阅读(719) 评论(0) 推荐(0)
css基本属性
摘要：CSS属性分类(最最常用的属性)：颜色和长度文字盒模型布局定位背景文本和其他 常用CSS属性： <style>div{ color:#23729e; /*前景色*/ background:#8b8b8b; /*背景色*/ background:#ff0000 url(dian.png) no-rep 阅读全文
posted @ 2016-07-12 09:47 学习呗! 阅读(167) 评论(0) 推荐(0)
css基本选择器
摘要：CSS：层叠样式表 (Cascading Style Sheets) 结构层：HTML表现层: CSS行为层: DOM，JavaScript CSS语法结构：div{background:#f00;}选择器{属性名:属性值; 属性名2:属性值1 属性值2;} 指导思想：内容、样式、行为分离HTML/ 阅读全文
posted @ 2016-07-12 09:44 学习呗! 阅读(262) 评论(0) 推荐(0)