前端学习记录 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>

View Code

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)

转载于:https://www.cnblogs.com/zlrrrr/p/11504655.html