10-01 列表属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表属性</title>
<style type="text/css">
ul{
/*list-style-type:circle ;
list-style-position: outside;
list-style-image: url(favicon.png);*/
list-style:circle inside url(favicon.png);
list-style: inside circle url(favicon.png);
list-style: none;
}
ul li{
border: 1px solid red;
}
</style>
</head>
<body>
<!--对列表的相关属性仅做了解就行，不需记忆-->
<!--列表标志：list-style-type:标志类型 ;-->
<!--列表标志位置：list-style-position: inside;-->
<!--outside：默认值，表示标志在列表项之外-->
<!--inside：默认值，表示标志在列表项之内-->
<!--列表项图像：list-style-image: url(图像路径);-->
<!--简写列表样式：list-style: 列表标志 列表标志位置 列表项图像;-->
<!--列表样式重置：list-style: none;
列表前的样式会全部消失
-->
<!--ul>li{我要自学网$}*3-->
<ul>
<li>我要自学网1</li>
<li>我要自学网2</li>
<li>我要自学网3</li>
</ul>
</body>
</html>
10-02 表格属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格属性</title>
<style type="text/css">
table{
border-spacing: 20px 30px;
border-collapse: collapse;
width: 500px;height: 200px;
text-align: center;
}
</style>
</head>
<body>
<!--1.单元格间隔：设置相邻的单元格间隔-->
<!--border-spacing: 水平间隔 垂直间隔;-->
<!--2.边框折叠：-->
<!--border-collapse: collapse|separate;-->
<!--separate：默认值，边框会分开-->
<!--collapse：边框会合并-->
<!--3.表格（单元格）宽高：width: 500px;height: 200px;-->
<!--4.表格文本对齐：text-align vertical-align-->
<!--5.表格背景：background属性-->
<table border="1">
<tr>
<td>我要自学网1</td>
<td>我要自学网2</td>
<td>我要自学网3</td>
<td>我要自学网4</td>
<td>我要自学网5</td>
</tr>
<tr>
<td>我要自学网1</td>
<td>我要自学网2</td>
<td>我要自学网3</td>
<td>我要自学网4</td>
<td>我要自学网5</td>
</tr>
</table>
</body>
</html>
10-03 鼠标样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标样式</title>
<style type="text/css">
div{
width: 100px;height: 30px;line-height: 30px;
text-align: center;
background: yellow;
}
div:hover{
cursor: pointer;
}
</style>
</head>
<body>
<!--鼠标样式设置：-->
<!--cursor：样式单词;-->
<!--(span{我要自学网$}+br)*4-->
<!--手型鼠标-->
<span style="cursor: pointer;">我要自学网1</span>
<br />
<!--转圈圈鼠标-->
<span style="cursor: wait;">我要自学网2</span>
<br />
<!--帮助？鼠标-->
<span style="cursor: help;">我要自学网3</span>
<br />
<!--自动-->
<span style="cursor: auto;">我要自学网4</span>
<br />
<div id="page">点击跳转</div>
<script type="text/javascript">
document.getElementById("page").onclick = function(){
window.location="http://www.51zxw.net";
}
</script>
</body>
</html>
10-04 高斯模糊和饱和度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高斯模糊和饱和度</title>
<style type="text/css">
img{
/*filter: blur(10px);*/
filter: saturate(0%);
}
</style>
</head>
<body>
<!--滤镜属性：定义图像的可视效果-->
<!--语法：filter: 属性值;-->
<!--1.高斯模糊：filter: blur(合法的尺寸单位);-->
<!--默认值是0，值越大，图像越模糊-->
<!--不能设置成百分比-->
<!--2.饱和度设置：filter: saturate(百分比);-->
<!--默认值是100%，图像不变，0%时图像会变成黑白-->
<!--值可以超过100%，有更高的饱和度-->
<img src="favicon.png" width="400" />
</body>
</html>
10-05 灰度和对比度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>灰度和对比度</title>
<style type="text/css">
img{
/*filter: blur(10px);*/ /*高斯模糊*/
/*filter: saturate(0%);*/ /*饱和度*/
/*filter: grayscale(50%);*/ /*灰度*/
filter: contrast(50%); /*对比度*/
}
</style>
</head>
<body>
<!--滤镜属性：定义图像的可视效果-->
<!--语法：filter: 属性值;-->
<!--1.高斯模糊：filter: blur(合法的尺寸单位);-->
<!--默认值是0，值越大，图像越模糊-->
<!--不能设置成百分比-->
<!--2.饱和度设置：filter: saturate(百分比);-->
<!--默认值是100%，图像不变，0%时图像会变成黑白-->
<!--值可以超过100%，有更高的饱和度-->
<!--3.灰度设置：filter: grayscale(百分比);-->
<!--值在0%-100%之间。默认是0%
当值为100%时，图像会变成黑白图像
-->
<!--4.对比度：filter: contrast(百分比);-->
<!--默认值：100%，图像没有变化；值为0%时，图像会变成全黑-->
<!--当值超过100%时，意味着运用了更低的对比度-->
<img src="favicon.png" width="400" />
</body>
</html>
10-06 透明度设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度设置</title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
div{
width: 400px;background: red;
}
img{
width: 100%;
/*filter: blur(10px);*/ /*高斯模糊*/
/*filter: saturate(0%);*/ /*饱和度*/
/*filter: grayscale(50%);*/ /*灰度*/
/*filter: contrast(50%); */ /*对比度*/
/*老版谷歌和欧朋浏览器需要加前缀*/
-webkit-filter: opacity(100%);
filter: opacity(100%);
}
</style>
</head>
<body>
<!--注意：所有IE浏览器都不支持滤镜属性
老版谷歌和欧朋浏览器需要加前缀
-->
<!--滤镜属性：定义图像的可视效果-->
<!--语法：filter: 属性值;-->
<!--1.高斯模糊：filter: blur(合法的尺寸单位);-->
<!--默认值是0，值越大，图像越模糊-->
<!--不能设置成百分比-->
<!--2.饱和度设置：filter: saturate(百分比);-->
<!--默认值是100%，图像不变，0%时图像会变成黑白-->
<!--值可以超过100%，有更高的饱和度-->
<!--3.灰度设置：filter: grayscale(百分比);-->
<!--值在0%-100%之间。默认是0%
当值为100%时，图像会变成黑白图像
-->
<!--4.对比度：filter: contrast(百分比);-->
<!--默认值：100%，图像没有变化；值为0%时，图像会变成全黑-->
<!--当值超过100%时，意味着运用了更低的对比度-->
<!--5.透明度设置：filter: opacity(百分比);-->
<!--默认值：100%，表示完全不透明，0%时，表示完全透明-->
<!--值在0%-100%之间-->
<div>
<img src="favicon.png" width="400" />
</div>
</body>
</html>
reset.css
*{margin: 0;padding: 0;/*重置内边距和外边距*/
-moz-box-sizing: border-box; /*火狐浏览器老版本*/
-webkit-box-sizing: border-box; /*webkit内核浏览器*/
box-sizing: border-box;
}
body{font-size: 16px;font-family: "微软雅黑";color: #333333;}
b{font-weight: normal;}
i{font-style: normal;}
a,a:hover,a:active{text-decoration: none;color: #000000;}
textarea,input,select{outline: none;}
img{border: none;vertical-align: top;} /*解决img元素和相邻元素之间下方有空隙的问题*/
li{list-style: none;} /*把列表前面的样式圈圈去掉*/
扫一扫
4753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
