随笔分类 -  CSS2

1 2 下一页
CSS_细节总结
摘要：1. 负外边距 上下200*200盒子的重叠，切记用 absolute 绝对定位 为最佳解决方案。 定位 position : fixed absolute relative( top 为 -200px ) 如果元素有文字，会覆盖元素 浮动 float ： 需要使得要浮动的元素，作为被覆盖元素的兄弟 阅读全文
posted @ 2018-10-26 09:44 耶梦加德 阅读(315) 评论(0) 推荐(0)
__x__(49)0910第六天__命名规范
摘要：id class 命名规范： 小驼峰命名法： aaaBbbCcc，helloWorld 大驼峰命名法： AaaBbbCcc，HelloWorld 匈牙利命名法： 类型+描述 formUserName，aBaiDu，inputUserName，inputUserPsd 阅读全文
posted @ 2018-09-10 19:38 耶梦加德 阅读(133) 评论(0) 推荐(0)
__x__(48)0910第六天__CSS Hack
摘要：CSS Hack： 不到万不得已，不要使用。不易于维护。 有一些情况，需要一段特殊代码在遇到特殊浏览器环境才执行，而在其他条件下，不执行。 此时，CSS Hack 就能实现。 CSS Hack 实际上指的是一段特殊的代码，这段代码只在特定的浏览器环境下识别并执行。 写法： 条件Hack只对IE9及以 阅读全文
posted @ 2018-09-10 18:10 耶梦加德 阅读(144) 评论(0) 推荐(0)
__x__(45)0910第六天__各种表单
摘要：效果图： html代码： css代码： 阅读全文
posted @ 2018-09-10 15:07 耶梦加德 阅读(240) 评论(0) 推荐(0)
__x__(44)0910第六天__表单
摘要：form表单： form必须属性：action，指定一个服务器地址。 若希望表单中的数据发送给服务器，必须设置name属性。 用户填写的信息，将会追加在url地址？后面，以查询字符串的形式发送给服务器，以“&”隔开。 网页用表单来向服务器提交信息。 最常见的百度一下： 键入关键字，点击搜索， 浏览器 阅读全文
posted @ 2018-09-10 13:49 耶梦加德 阅读(172) 评论(0) 推荐(0)
__x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷
摘要：原理1： <table> 将会隔离父子元素， 所以解决垂直外边距重叠问题方法1： 原理2： 解决高度塌陷方法2： 最终方法： 给父元素加 class="clearfix"; 即可。 阅读全文
posted @ 2018-09-10 13:12 耶梦加德 阅读(190) 评论(0) 推荐(0)
__x__(42)0910第六天__表格布局 老旧的布局方法
摘要：table 布局 不易于维护，耦合太严重了。 不利于搜索引擎检索。 效果图： html代码： css代码： 阅读全文
posted @ 2018-09-10 12:31 耶梦加德 阅读(201) 评论(0) 推荐(0)
__x__(41)0909第五天__长表格
摘要：长表格 银行流水，表格很长。。。 则需要将表格分为 表头 thead ，主体数据 tbody ， 表格底部 tfoot 三个标签无顺序要求，易于维护：thead → tfoot → tbody 如果没写 tbody ，浏览器会自添加 tbody，并将所有的 tr 移入 tbody 好处： 可以分别设 阅读全文
posted @ 2018-09-09 23:15 耶梦加德 阅读(165) 评论(0) 推荐(0)
__x__(40)0909第五天__表格 table 的 css 样式 美化
摘要：如果就向下面的代码那样，不写 tbody ， 则浏览器自添加 tbody ， 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素，而是 tbody 的子元素。 所以 以后编写代码，尽可能地写上 tbody，防止混淆。 th 表头 是特殊的 td “具有加粗，文字居中”的效果 阅读全文
posted @ 2018-09-09 22:52 耶梦加德 阅读(372) 评论(0) 推荐(0)
__x__(39)0909第五天__ 表格 table
摘要：表格 表示一种格式化的数据，如课程表，银行对账单... ... 在网页中，使用 table 创建一个表格。 html代码： css代码： 阅读全文
posted @ 2018-09-09 20:38 耶梦加德 阅读(183) 评论(0) 推荐(0)
__x__(38)0909第五天__雪碧图的制作
摘要：1. 用ps打开目标图片若干。 2. 调整合适的画布大小。 3. 将图片拖曳到一张里。 4. 存储为Web所用格式，选择 png24 。 阅读全文
posted @ 2018-09-09 18:37 耶梦加德 阅读(132) 评论(1) 推荐(0)
__x__(37)0909第五天__背景图按钮
摘要：link，hover，active三种按键状态，存放三张图片 缺点： 资源只有在被使用时，才会被加载。 页面第一次加载时，会出现短暂的延迟闪烁，造成一次不佳的用户体验。 图片整合技术 CSS-Sprite 雪碧图： 将三张图片整合为一张图片，在不同的伪类中通过设置 background-positi 阅读全文
posted @ 2018-09-09 12:18 耶梦加德 阅读(171) 评论(0) 推荐(0)
__x__(36)0908第五天__背景 background
摘要：1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 background-image: url(img/cat.gif); 如果图片大于元素，则会显示图片左上角部分 阅读全文
posted @ 2018-09-08 20:55 耶梦加德 阅读(178) 评论(0) 推荐(0)
__x__(35)0908第五天__opacity 透明度
摘要：opacity 透明度 设置一个 0 - 1 之间的值。 opacity: 0; 完全透明 opacity: 0.5 半透明 opacity: 1; 完全不透明 缺点： IE8及以下都不支持 opacity 。 IE8及以下 透明度 ： filter: alpha(opacity=50); 此时，透 阅读全文
posted @ 2018-09-08 20:03 耶梦加德 阅读(143) 评论(0) 推荐(0)
__x__(35)0908第五天__ 层级 z-index
摘要：如果三个 div 全部设置 position: absolute; 绝对定位，且未设置 z-index， 则从代码结构上 下面的元素 会盖住 上面的元素。 z-index 层级： 通过 z-index 属性 设置元素的 层级。 z-index : 正整数; 层级越高 ，越优先显示在最上面。 z-in 阅读全文
posted @ 2018-09-08 19:50 耶梦加德 阅读(176) 评论(0) 推荐(0)
__x__(34)0908第五天__ 定位 position
摘要：position 定位 指将原始摆放到页面的任意位置。 继承性：no 默认值：static 没有定位，原始出现在正常的文档流中 可选值： static : 默认值，元素没有开启定位 relative : 开启元素的相对定位 absolute : 开启元素的绝对定位 fixed : 开启元素的固定定位 阅读全文
posted @ 2018-09-08 19:29 耶梦加德 阅读(143) 评论(0) 推荐(0)
__x__(31)0908第五天__导航条的练习 <ul> 版本
摘要：效果图： html代码： css代码： 阅读全文
posted @ 2018-09-08 11:12 耶梦加德 阅读(176) 评论(0) 推荐(0)
__x__(30)0908第五天__导航条的练习 <div>版本
摘要：效果图： html源代码： CSS源代码： 阅读全文
posted @ 2018-09-08 10:39 耶梦加德 阅读(137) 评论(0) 推荐(0)
__x__(29)0908第五天__高度塌陷 问题
摘要：高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的。 但是当为 子元素 设置 float 时，子元素会完全脱离文档流，无法再撑开父元素，导致父元素高度塌陷。。。以致于布局混乱 变成 BFC块级格式化环境 根据 W3C 标准，元素都有一个隐含的属性 “Block Formatting Contex 阅读全文
posted @ 2018-09-08 10:06 耶梦加德 阅读(127) 评论(0) 推荐(0)
__x__(28)0907第四天__固定布局
摘要：布局 固定布局，需要计算单位 自适应响应布局 固定布局 html代码 固定布局 css代码 效果图： 阅读全文
posted @ 2018-09-07 22:17 耶梦加德 阅读(138) 评论(0) 推荐(0)

1 2 下一页