1.
min-height属性 设置块的最小高度,往块里添加内容随着内容的增加,块的高度也会增加
max-height属性 设置块的最大高度,内容不能超过该块 可以运用在框定图片大小上
2.
想把图片和文字排在一个div块的左右两边,例如左图右文字,图片的css要求 position: absolute;,如果还不行就把他们所在的块的css position: relative;
3.
一个块里可能有多种字体,因此可以把字体css单写出来 eg: .font14{font-size:14px;} 然后调用 需要改变颜色的话就再写一个颜色的css .color{color:#FF0000;} 调用的时候就直接写class="color font14"
4.
想在一句话中有不同颜色的字体
<div class="alter1">提醒:未注册过爱车小屋账号的手机号,登录时将自动注册,且表示您同意<span class="fblue">《爱车小屋用户服务协议》</span> </div> fblue里写上颜色
5.
做一个图上文字下的这种效果,先写图片的代码
.iconplace{
margin: 31px 36px 49.3px 36px;
width: 22px;
height: 22px;
}
位置不错,再放文字的代码
.chplace2{
position: absolute;
margin:65px 33px 24.3px 35px;
color: #333333;
font-size: 13px;
font-family: "PingFangSC-Light";
text-align: center;
}
结果因为两边的padding碰撞,文字被推到下边的块里, 解决的办法是,在HTML页面中,先写出文字的div块,再写图片的div块,而且文字的position要是absolute才可以。
6.
子块设置padding-top时影响父块高度的解决办法:在父块css加overflow:hidden;
7.
自适应居中div 首先,先让div居中 margin: 0 auto;
自适应的css是 width: auto; 但如果直接这么写所有的div都编程一个大长条
解决方法是,在灰色div块外面再套一个div块,并写入text-align: center; 灰色div块里写入display: inline-block !important; 就可以了
8.写js方法的时候用if if else 不行 非得用好几个if才能出现效果!什么鬼。。
9.一个用Js点击不同按钮切换页面内容的例子
<html>
<head>
<title>My HTML starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style>
.c1{
width:200px;
height:200px;
border:red solid 1px
}
</style>
<script type="text/javascript">
function f1(param){
for(var i =1;i<=4;i++){
var id =document.getElementById("d"+i);
id.style.display="none";
if(i==param)
{
id.style.display="block";
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮1" οnclick="f1(1);">
<input type="button" value="按钮2" οnclick="f1(2);">
<input type="button" value="按钮3" οnclick="f1(3);">
<input type="button" value="按钮4" οnclick="f1(4);">
<div id="d1" class="c1">111111111</div>
<div id="d2" class="c1" style="display:none">22222222</div>
<div id="d3" class="c1" style="display:none">33333333</div>
<div id="d4" class="c1" style="display:none">44444444</div>
</body>
</html>
10.利用h5最新的oninput事件动态获取输入框的内容
11. cursor:pointer; css属性,鼠标放在上面变成小手
12.比如说没完成某个条件不能按按钮时,按钮就可以设置成disable
eg:<button type="button" disabled>登录</button>
13.CSS3选择器 伪类选择器 root 根选择器,
not 除谁之外的选择器
div:not([id="footer"]){}
empty 内容为空的选择器
div:empty{}
target 触发器的选择器
<span style="white-space:pre"> </span>#id :target{}
first-child last-child nth-child(n) nth-last-child(n) 选择第某子元素的选择器 (例如第二个的话就是不管什么类型 就是子元素的第二个)
<span style="white-space:pre"> </span>ul > li : first-child{}
first-of-type nth-of-type last-of-type nth-last-of-type(n) only-child only-of-type 指定某个元素类型的第某个元素的选择器 (确定是某一个元素类型的第二个子元素)
<span style="white-space:pre"> </span>.wrapper > div:nth-last-of-type(5){}
:enabled :disabled选择器
<span style="white-space:pre"> </span>input:disabled{}
<span style="white-space:pre"> </span>若有多个input的话就
<span style="white-space:pre"> </span>input[type="text"]:disabled{}
:checked选择器 配合其他标签实现自定义选中样式 在span里面设置样式,checked表示选中状态
<span style="white-space:pre"> </span>input[type="radio"]:checked + span {
<span style="white-space:pre"> </span>opacity: 1;
<span style="white-space:pre"> </span>}
::selection 改变鼠标选中文本样式的选择器
::selection{
background: orange;
color: white;
}
::-moz-selection{
background: orange;
color: white;
}
read-only选择器 相对的就是 read-write选择器
设置只读
<input type="text" name="address" id="address" placeholder="中国上海" readonly />
用选择器设置只读样式
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}