1.边框圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#btn {
height: 40px;
width: 100px;
border: 0px black solid;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
text-align: center;
line-height: 40px;
background-color: goldenrod;
font-weight: 500;
font-size: 18px;
color: white;
}
#photo {
height: 300px;
width: 300px;
border: 0px black solid;
border-radius: 150px;
background-image: url(img/xingye.jpg);
background-size: 100% 100%;
box-shadow: 0px 0px 50px yellow;
}
button {
height: 40px;
width: 100px;
border: 0px black solid;
background-color: goldenrod;
font-weight: 500;
font-size: 18px;
color: white;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
</style>
</head>
<body>
<div id="btn">
一个按钮
</div>
<hr>
<hr>
<br>
<div id="photo">
</div>
<br>
<br>
<br>
<button type="button">一个按钮</button>
</body>
</html>
2.内间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai {
height: 200px;
width: 400px;
border: 1px black solid;
padding-left: 150px;
padding-top: 80px;
box-sizing: border-box;
}
#nei {
height: 100px;
width: 200px;
border: 1px black solid;
background: yellowgreen;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
</div>
</div>
</body>
</html>
3.字符间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
letter-spacing: 10px;
}
button{
height:50px;
font-size: 15px;
width: 200px;
letter-spacing: 10px;
}
</style>
</head>
<body>
<button type="button">按钮按钮按阿牛</button>
<p>
计算机信息(数字、文字、图片)在电子中是以二进制 1 和 0(01000101)进行存储的。
为了规范字母数字字符的存储,创建了 ASCII(全称 American Standard Code for Information Interchange)。它为每个存储字符定义了一个独特的二元 7 位数字,支持 0-9 数字,大/小写英文字母(a-z、A-Z)和一些特殊的字符,比如 ! $ + - ( ) @ < > 。
由于 ASCII 使用一个字节(7 位表示字符,1 位表示传输奇偶控制),所以它只能表示 128 个不同的字符。这些字符中有 32 个被保留作为其他控制目的使用。
ASCII 的最大的缺点是,它排除了非英文字母。
ASCII 今天仍然在广泛使用,尤其是在大型计算机系统中。
如需深入了解 ASCII,请查看完整的 ASCII 参考手册。
</p>
</body>
</html>
4.线条设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
text-decoration: underline;
}
h2{
text-decoration: line-through;
}
h3{
text-decoration: overline;
}
a{
text-decoration: none;
}
h4{
text-transform: lowercase;
}
h5{
text-transform: uppercase;
}
h1:hover{
cursor: pointer;
}
</style>
</head>
<body>
<h1>啊发撒沙发沙发</h1>
<h2>啊发撒沙发沙发</h2>
<h3>啊发撒沙发沙发</h3>
<a href="#">asfasdfsadfd</a>
<h4>ABCDEF</h4>
<h5>asdfasdfasdfasdfasf</h5>
</body>
</html>
5.段落的缩进
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
text-indent: 2em;
line-height: 2em;
}
</style>
</head>
<body>
<p>
JavaScript是一门面向对象的编程语言,与其它面向编程的语言不同的是,JavaScript的面向是基于原型的。即使在ES6中有了类的概念,但也只是语法糖而已。所有JS对象都会从它的原型对象
JavaScript是一门面向对象的编程语言,与其它面向编程的语言不同的是,JavaScript的面向是基于原型的。即使在ES6中有了类的概念,但也只是语法糖而已。所有JS对象都会从它的原型对象中继承属性和方法,从而实现面向对象编程。
构造器函数
回顾前面学过的构造函数,我们可以通过构造函数的new方法实例化对
</p>
</body>
</html>
6.列表属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai {
border: 0px black solid;
height: 30px;
padding: 0;
display: flex;
}
#wai .neili {
list-style-type: none;
border: 0px black solid;
width: 100px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
margin: auto;
border-radius: 6px;
background: goldenrod;
color: white;
}
.neili:hover>#nei {
display: block;
}
#nei {
padding: 0;
display: none;
}
#nei .item {
list-style-type: none;
border-bottom: 1px black solid;
width: 100px;
height: 30px;
background: red;
}
</style>
</head>
<body>
<ul id="wai">
<li class="neili">关于本站
<ul id="nei">
<li class="item">关于本站</li>
<li class="item">联系我们</li>
<li class="item">进入首页</li>
<li class="item">关于本站</li>
<li class="item">联系我们</li>
<li class="item">进入首页</li>
</ul>
</li>
<li class="neili">联系我们</li>
<li class="neili">进入首页</li>
<li class="neili">关于本站</li>
<li class="neili">联系我们</li>
<li class="neili">进入首页</li>
</ul>
</body>
</html>
7.彩色图片变黑白
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
height: 400px;
width: 230px;
background-image: url(img/girl2.jpg);
background-size: 100% 100%;
transition: filter 2s;
}
#d1:hover{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
transition: filter 2s;
}
</style>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
8.Transform动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
height: 200px;
width: 200px;
background-color: red;
transition: transform 1s;
}
#d1:hover{
transform: translate(200px,0px);
transition: transform 1s;
}
#d2{
height: 200px;
width: 200px;
background-color:yellow;
transition: transform 1s;
}
#d2:hover{
transform: rotate(-45deg);
transition: transform 1s;
}
#d3{
height: 200px;
width: 200px;
background-color:goldenrod;
transition: transform 1s;
}
#d3:hover{
transform: scale(2);
transition: transform 1s;
}
#d4{
height: 200px;
width: 200px;
background-color:blue;
transition: transform 1s;
}
#d4:hover{
transform: skew(-45deg);
transition: transform 1s;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
<div id="d3">
</div>
<div id="d4">
</div>
</body>
</html>
9.过渡动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai {
height: 100px;
width: 250px;
border: 1px black solid;
display: flex;
}
#nei {
height: 80px;
width: 230px;
background-image: url(img/mi.png);
box-sizing: 100% 100%;
margin: auto;
transition: transform 0.5s 0s linear;
}
#wai:hover>#nei {
transform: rotate(15deg);
transition-property:transform ;
transition-duration: 0.5s;
transition-delay: 2s;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
</div>
</div>
</body>
</html>