前端学习记录 CSS
CSS 可以控制网页布局和样式
CSS 规则由选择器和声明组成；声明由属性和值组成，每个属性对应一个值
selector {attribute1: val1; attribute2: val2;}
如果 val 是多个单词要 sel {attribute: "a b c";}
如果是颜色用到 RGB 的百分比的时候 就算是 0% 在 0 的后面也要加 %
<!DOCTYPE html> <html> <head> <title>标签切换</title> <style type="text/css"> * { margin: 0; } #container { position: relative; margin: 50px; width: 500px; height: 300px; /*background-color: rgba(0, 0, 0, .05);*/ } #tabs { position: absolute; top: 0; left: 1px; width: 150px; height: 100%; box-sizing: border-box; /*background-color: rgba(0, 0, 0, .1);*/ } #tabs .tab { width: 100%; height: 40px; line-height: 40px; padding-left: 10px; box-sizing: border-box; border-right: 1px solid #888; background-color: #ddd; cursor: pointer; } #tabs .tab:hover { background-color: #eee; } #tabs .tab.active { border: 1px solid #888; border-right: 1px solid #eee; background-color: #eee; } #contents { float: right; width: 350px; height: 100%; border: 1px solid #888; box-sizing: border-box; background-color: #eee; } #contents .content { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; /*background-color: rgba(0, 0, 0, .1);*/ display: none; } #contents .content.active { display: block; } </style> </head> <body> <div id="container"> <div id="tabs"> <div class="tab active">案件来源</div> <div class="tab">风险类型</div> </div> <div id="contents"> <div class="content active"> <ul> <li>内部核查</li> <li>用户反馈</li> <li>银行反馈</li> <li>商户反馈</li> </ul> </div> <div class="content"> <ul> <li>银行卡风险</li> <li>账户风险</li> <li>网银风险</li> </ul> </div> </div> </div> <script type="text/javascript" src="./jquery-1.8.3.min.js"></script> <script type="text/javascript"> var tabs = $('.tab'); var contents = $('.content'); tabs.each(function(index) { $(this).click(function() { tabs.removeClass('active'); tabs.eq(index).addClass('active'); contents.removeClass('active'); contents.eq(index).addClass('active'); }); }); </script> </body> </html>
id 选择器：#
class 选择器：.
也可以 #id .class 这样去选择某个 id 下的指定的 class
属性选择器：带有 title 属性的所有元素设定
[title] {
color: black;
}
插入样式表
<head> <link rel="stylesheet" type="text/css" href="myCSS.css" /> </head>
CSS 定位机制
有三种 普通流 浮动和绝对定位
position 属性：
position: 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top: 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow: 设置当元素的内容溢出其区域时发生的事情。
clip: 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align: 设置元素的垂直对齐方式。
z-index: 设置元素的堆叠顺序。
相对定位：position: relative;
让元素出现在它所在位置然后可以通过 left top right 这样来控制它相对原来位置偏移的距离
!!!在使用相对定位的时候无论是否移动元素都是占据原来位置的 所以偏移有可能导致覆盖其他的框
绝对定位：position: absolute;
绝对定位元素的位置是相对于最近的已定位祖先元素 如果没有最近的已定位祖先元素那么相对位置是最初的包含块
!!!因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序
浮动：position: float;
这里讲的 hin 清楚了
COLORRR
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
