舒大少博客

2020javaweb教程之jQuery效果

显示、隐藏、显示及隐藏

<div id="box">这是个内容</div>
<style>
    #box{width:500px;height:300px;border:1px solid red;}
</style>
<button id="btn1">3秒隐藏div</button>
<button id="btn2">5秒显示div</button>
<button id="btn3">5秒显示/隐藏div</button>
<script>
$(function(){
    $("#btn1").click(function () {
        $("#box").hide(3000);//3秒隐藏
 （更多…）

HTML和CSS

定位position
该属性用于指定一个元素在文档中的定位方式。
top、right、bottom、left属性决定了该元素最终位置

position取值：
static(默认值)，relative(相对定位)，absolute(绝对定位)
fixed(固定定位)，sticky(粘性定位) （更多…）

HTML和CSS

表格标签

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表格头
<td>：定义表格单元
<caption>：定义表格标题 （更多…）

CSS hack

用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的css效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式

IE检测工具 IEtester

Hack分类
1.css属性前缀法
2.选择器前缀法
3.IE条件注释法 （更多…）

选择器的权重：
行内样式1000
ID选择器100
类选择器10
标签选择器1
通用选择器0

css属性简写：
background：背景色 背景图片 背景平铺
background:red url(xxx.png) no-repeat;
border:边框宽度 边框样式 边框颜色
border:1px solid red;
font:字体样式 加粗 字号大小/行高 字体,备用字体,”备用字体”;
font:italic bold 20px/35px arial,sans-serif,”微软雅黑”;
margin/padding:上右下左
margin/padding:上 左右 下
margin/padding:上下 左右
margin/padding:四周相同
color:rgb/rgba,red,#ccc （更多…）