css基础知识
完善
解决父子元素的外边距重叠问题
box1:before{
content: "";
display:table可以将一个元素设置为表格显示
}
经过修改后的clearfix是一个多功能的样式,既可以解决高度塌陷,又可以确保父元素和子元素的垂直外边距不会重叠
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
表单:
表单的作用就是用来将用户信息提交给服务器的
比如:百度的搜索框 注册 登录这些操作都需要填写表单
语法:
使用<form>标签来创建一个表单,表单中必须要有两个属性action和method
action表示提交表单到服务器中的地址
method表示提交表单的方法,一个表单可以包含多个表单项
文本框
<input type="text" name="name">
密码框
<input type="password" name="pwd">
多选框
<input type="checkbox" name="sports">
单选框
<input type="radio" name="gender">
提交按钮
<input type="submit" value="提交">
下拉列表
<select>
<option>北京</option>
</select>
input是我们最常见的表单象,它可以根据不同的type属性呈现不同的状态。
type属性可选值:
text:文本框
password:密码框
submit:提交按钮
checkbox:多选框
reset :重置按钮
select用于创建一个下拉列表。
option表示下拉列表中的列表项。
optgroup用于为列表项分组
文本域:(textarea)
可用属性;colse:文本域的列数
rows:文本域的行数
fieldset:用来为表单进行分组
legend;用来指定每组的名字
label;用来为表单定义描述文字
value是默认值,
提示信息用:placeholder="用户名/邮箱/手机号"
autocomplete="off"不保存缓存记录
multiple=" multiple"多选,直接展开
optgroup label="" 指定组名
自我介绍<textarea name="info"></textarea>多行输入,可以改变文本框大小
<input type="submit" value="注册" />
<input type="reset">恢复为默认值
<input type="button" ,value="按钮">只可以点击,没有反应
<input type="password"value="">设置密码框
<button type="submit">提交</button>与input功能相似,button是成对出现的,使用更灵活
label 1.可以单独设置样式 2.不点击文本框,也能点击 3.一般用于比较小的选择文本
<fieldset></fieldset>1.分组
<legend></lenged>2.组名
type="hidden"隐藏内容,有些内容想输入但又不想被用户看到
框架集
语法:framest(framest与body同时出现在一个页面中)
属性:
rows,指定框架集中的所有的框架,一行一行的排列
cols, 指定框架集中的所有的页面,一列一列的排列
这两个属性frameset必须选择一个,并且需要在属性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一样,它里边的内容都不会被搜索引擎所检索
所以如果搜索引擎检索到的页面是一个框架页的话,它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容,只能引入其他的页面
而我们每单独加载一个页面,浏览器都需要重新发送一次请求,引入几个页面就需要发送几次请求,用户的体验比较差
如果非得用建议使用frameset而不使用ifr
ie6png图片的修复
问题:在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示
解决方法:
1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以后,图片的清晰图会有所下降
2.使用JavaScript来解决该问题,需要向页
<!-- 以下代码只会在IE6中执行,其他浏览器中无效 -->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix("div,img");
</script>
<![endif]-->
css3过渡动画:
语法:transition:(想要先变谁就先写谁)
transition:all 500ms ease(一起变化)
border-radius:(圆角)
例如
/*在哪产生动画、动画的时间、运动曲线、延迟*/
/*transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/
transition: all 500ms ease;
}
.box:hover{
width: 500px;
height: 300px;
background-color: red;
border-radius: 50px;
}
css3 阴影 :
语法:box-shadow:h-shadow v-shadow blur spread color inset;
分别设置阴影:水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
rgba(新的颜色值表示法 阴影)
1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(兼容IE);
2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度
运动曲线图:
<style type="text/css">
div{
width: 50px;
height: 50px;
background-color: gold;
margin-bottom: 20px;
}
div:nth-child(1){
/*匀速*/
transition: all 1s linear;
}
div:nth-child(2){
/*开始和结束慢速,中间加速*/
transition: all 1s ease;
}
div:nth-child(3){
/*开始慢速,结尾突然停止*/
transition: all 1s ease-in;
}
div:nth-child(4){
/*突然开始,结束时慢速*/
transition: all 1s ease-out;
}
div:nth-child(5){
/*开始和结束时慢速*/
transition: all 1s ease-in-out;
}
div:nth-child(6){
/*贝塞尔(贝兹)曲线*/
/*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/
/*超出再缩回的弹性效果*/
transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
}
div:hover{
width: 1000px;
}
</style>
语法:基本形式:div:nth-child(描述的第几个div)
transition
linear:匀速
ease:开始和结束慢速,中间加速
ease-in:开始慢速,结尾突然停止
ease-out:突然开始,结束时慢速
ease-in-out:开始和结束时慢速
bezier:贝塞尔(贝兹)曲线
网友评论