css

---恢复内容开始---

css 选择器有修饰上的优先级:标签内部style > id > class > 外部标签

 插入样式的方法有三种:外部样式 < 内部样式 < 内联样式  (如果外部样式放在内部样式的后面,则外部样式覆盖内部样式)

 对于padding和margin,百分比按照父元素的宽计算,对于定位元素,则按照父元素的高计算。

 

块级元素水平居中对齐:margin:auto; 并且必须设置width

img{

  display:block;

  margin:auto;

}

 

#id{

  text-align:center;

  color:white;

  background-color:white;

}  

.class{}

p.class{}

h1.class{}

body{

background-image:url(' '),url('');

background-attachment:fixed;

background-repeat:no-repeat,repeat;

background-position:right bottom,left top;

background-color:#ffffff;

}

 

border-width:1px;

border-style: solid;

border-color:white;

border-top-style:dotted;

 

---恢复内容结束---

css 选择器有修饰上的优先级:标签内部style > id > class > 外部标签

 插入样式的方法有三种:外部样式 < 内部样式 < 内联样式  (如果外部样式放在内部样式的后面,则外部样式覆盖内部样式)

 对于padding和margin,百分比按照父元素的宽计算,对于定位元素,则按照父元素的高计算。

块级元素水平居中对齐:margin:auto;

#id{

  text-align:center;

  color:white;

  background-color:white;

}  

.class{}

p.class{}

h1.class{}

body{

background-image:url(' '),url('');

background-attachment:fixed;

background-repeat:no-repeat,repeat;

background-position:right bottom,left top;

background-color:#ffffff;

}

 

border-width:1px;

border-style: solid;

border-color:white;

border-top-style:dotted;

 

//旋转

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#hello{
width:200px;
height:100px;
background-color:yellow;
transform:rotate(70deg);
}
</style>
</head>
<body>
<div id="hello">Hello</div>
<button onclick="Rotate()">点击这里</button>
</body>
<script>
var i=0;
function Rotate(){
setInterval(function() {
var obj = document.getElementById("hello");
obj.style.transform = "rotate("+i*10+"deg)";
i++;
},1000);
}
</script>
</html>

posted @ 2017-11-23 18:13  音为  阅读(86)  评论(0编辑  收藏  举报