CSS笔记

JS 播放列表收缩展开

下面要做实现的效果收缩和展的功能遵循网页布局,行为,结构,样式分离下面是html 结构代码: <div id="drop" class="down_list"> <h2 class="up">播放列表</h2> <ul> <li><a href="#">心雨</a></li> <li><a href=&qu…

练习地址: http://www.fgm.cc/learn/lesson2/09.html <style> *{ margin: 0;padding: 0;font-size: 12px;list-style: none; } .outer{ width: 180px; margin: 10px auto; border: 1px solid #000; } .outer>h2{ padding: 5px; background: #ccc url(imgs/ico.gif) 160px…

CSS笔记 - fgm练习 2-10 - 提示框效果（清除子元素浮动高度塌陷的影响）

CSS清除浮动方法参考: https://blog.csdn.net/promiseCao/article/details/52771856 <style> *{ margin: 0; padding: 0; list-style: none; font-size: 12px; } .outer{ width: 560px; margin: 10px auto; border: 1px solid #000; padding: 10px 0 0 10px; } .outer>h2{ te…

CSS笔记 - fgm练习 2-7 - 简易选项卡

练习地址 http://www.fgm.cc/learn/lesson2/07.html <style> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;} /* overflow:hidden;zoom:1; 作用?…

CSS笔记 - fgm练习 2-8 - 简易日历

CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding撑起来的尺寸.外层div居中,内层跟着居中. <style> *{margin:0;padding:0;} // 后来添加的 body{ font-size: 12px; } #outer{ margin: 10px auto; width: 180px; } /* #login input, #…

CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局

<title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; } #outer{ width: 330px; display: flex; margin: 0 auto; } #outer div{ height: 100px; background-color: black; flex:1; margin: 5px; /* 平分3个div的方法,实例答案如下: #ou…

HTML+CSS笔记 CSS笔记集合

HTML+CSS笔记表格,超链接,图片,表单涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器,选择符 HTML+CSS笔记 CSS入门续集涉及内容:继承,特殊性(权值),层叠,重要性 HTML+CSS笔记 CSS进阶涉及内容:文字排版:字体,字号,颜色,粗体,斜体,下划线,删除线;段落排版:缩进,行间距,中文字间距(字母间距),对齐 HTML+CSS笔记 CSS进阶续集涉及内容:元素分…

JS+CSS打造三级折叠菜单，自动收缩其它级 js

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS+CSS打造三级折叠菜单,自动收缩其它级</title> <style> *,body,ul,h1,h2{ marg…

CSS笔记--选择器

CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <meta name="keywords" content="java培训,大前端培训"> <meta name="description" content="据说中国口碑最好的IT培训机构!"> <meta h…

jQuery 收缩展开效果

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>jquery 收缩展开效果</title> <script src="js/jquery-1.7.1.min.js"&g…

C#使用splitContainer控件制作收缩展开面板

C#使用splitContainer控件制作收缩展开面板原创 2011年07月19日 17:18:02 标签: c# / object / 扩展 / 测试 15690 最近对Squid Ink公司的一款PC端软件系统上的一个收缩伸展面板很感兴趣,加上自己做的喷码机数据管理系统的界面非常单调,想在现在界面的基础上将这个功能加上去.我个人只是写c#的一个菜鸟,在网上查了C#的很多控件,很多人都是用GroupBox和SplitContainer实现的,于是就对这两个控件进行了测试.附…

JS收缩展开效果

// 收缩展开效果 $(document).ready(function () { $(".box h2").toggle(function () { $(this).next(".text").animate({ height: 'toggle', opacity: 'toggle' }, "slow"); }, function () { $(this).next(".text").animate({ height: 't…

css笔记 - 张鑫旭css课程笔记之 float 篇

https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮动的包裹与破坏包裹收缩坚挺隔绝 - BFC 具有包裹的其他属性:(是不是可以生成块级上下文的其他属性?) display: inline-block.table-cell... position: absolute(近亲).fixed.sticky overflow: hidden.scro…

HTML+CSS笔记 CSS中级一些小技巧

水平居中行内元素的水平居中 </a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table> </div> <style> tabl…

HTML+CSS笔记 CSS中级颜色&长度值

颜色值在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色语法: p{color:red;} 2.RGB颜色这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数. 每…

HTML+CSS笔记 CSS中级缩写入门

盒子模型代码简写回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有三种缩写的方法: 1.如果top.right.bottom.left的值相同, margin:10px 10px 10px 10px; 可缩写为: margin:10px; 2.如果top和…

HTML+CSS笔记 CSS进阶再续

CSS的布局模型清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3…

HTML+CSS笔记 CSS进阶续集

元素分类在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<span>.<br>…

HTML+CSS笔记 CSS进阶

文字排版字体我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体.(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体.) 现在一般网页喜欢设置"微软雅黑" 关于字体的问题可以参考阮一峰的经典文章:http://www.ruanyifeng.com/blog/20…

HTML+CSS笔记 CSS入门续集

继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> 上面代码展示了: 某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签. 语法: p{border:1px solid red;} <p&…

HTML+CSS笔记 CSS入门

简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. </p> 第二部:加入代码: span{ color:red; } CSS代码语法: css 样式由选择符(选择器)和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响…

HTML+CSS笔记表格,超链接,图片,表单

表格给表格加入CSS样式,添加表格边框语法: <style type="text/css"> table tr td,th{border:1px solid #000;} </style> 摘要 ; margin: 0; } th,tr{ border: 1px solid #000; width: 100px; height: 30px; } table{ border-collapse: collapse; margin: 100px auto; } &…

HTM CSS 笔记乱炖

一.常用实体(字符转义) '<' == '<' '©' == '©' '>' == '>' '"' == '"' ' ' == ' ' '®' == '®' '&&' == '&' '™' == '™' 二.图片选择时,需要考虑效果与文件体积 <img src="路径" title="鼠标悬浮显示的文字" alt="图片不显示时,显示的文字,被搜索引擎收录" /&g…

通用 CSS 笔记、建议与指导

在参与规模庞大.历时漫长且人手众多的项目时,所有开发者遵守如下规则极为重要: + **保持 CSS 的可维护性** + **保持代码清晰易懂** + **保持代码的可拓展性** 为了实现这一目标,我们要采用诸多方法. 本文档第一部分将探讨语法.格式以及 CSS 分析:第二部分将从方法论.思维框架以及编写与规划 CSS 的态度入手. ## 目录 * CSS 文档分析 * 总览 * 单一文件与多文件 * 目录 * 章节标题 * 代码顺序 * 规则解析 * 命名规范 * JavaScript 钩子 *…

【CSS笔记 - fgm练习 2-9 - 播放列表收缩展开】的更多相关文章