!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.font{
/*字体选择样式*/
font-family: "微软雅黑";
/*文字大小样式选择*/
font-size: 20px;
/*字体颜色*/
color: bisque;
/*背景颜色*/
background-color: black;
/*字体倾斜*/
/*italic 倾斜*/
font-style: italic;
/*也可直接在<em></em>或<i></i>标签内写代码*/
/*加粗*/
font-weight: bold;
/*下划线*/
text-decoration: underline;
/*上划线*/
text-decoration: overline; /*over 英文有超越的意思*/
/*去掉下划线*/
text-decoration: none; /* none 没有的意思*/
}
.btn{
200px;
height: 50px;
border: 1px solid #000000; /*边框线设置*/
font-size: 15px; /*字体大小*/
/*行高 列居中样式 */
line-height: 50px; /*一般用这个代替 vertical-align: middle; 列居中*/
transition: 2s; /*特效转变的过度时间*//*一般放在鼠标未指向之前的元素*/
}
/*鼠标指向的特效*/
.btn:hover{
/*特效*/
cursor: pointer; /*鼠标指向目标鼠标变成小手*/
/*圆角*/
border-radius: 10px; /*值一般不超过50% 超过50%按50%算*/
/*按角度旋转*/
transform:rotate(45deg);
/*根据X轴旋转*/
transform: rotateX(360deg);
/*按Y轴旋转*/
transform: rotateY(360deg);
}
.div1{
100px;
height: 30px;
border: 1px solid blue;
background: deepskyblue;
/*水平居中*/
text-align: center;
/*行高 列的居中*/
line-height: 30px;
/*圆角10px*/
border-radius: 10px;
/*圆角下面左面的角10px*/
border-bottom-left-radius: 10px;
/*阴影*/
box-shadow:1px 1px 1px cadetblue;
/*样式内值的含义:第一个1px 为向下1个像素,第二个1px为向右1个像素,第三个1px为虚化过度一个像素.*/
/*最后一个是阴影的颜色 若想得到向上向左的阴影只需把值改为负数 */
/*内侧阴影*/
-webkit-box-shadow:1px 1px 1px cadetblue;
/*样式内值的含义于阴影相同*/
/*旋转*/
/*1号*/ transform:rotate(45deg) ;/*顺时针旋转45度*/
/*还可以延x,y轴旋转*/
/*扭曲*/
transform: skew(45deg);
}
/*定义一个事件 当鼠标指上去时发生的事*/
.div1:hover{
transform:rotate(45deg)
}
</style>
</head>
<body>
<div class="font">
文字演示案例
</div>
<div class="btn">
这就是个按钮
</div>
<div class="div1">
按 钮
</div>
<style>
ul{
/*取消样式*/
list-style: none;
/*也可以放一张小一点的图片做样式使用*/
/*list-style: url(img/163.png);*/ /*图片尽量小*/
/*超出部分隐藏*/
overflow: hidden;
/*超出部分出现滚动条*/
overflow: scroll; /*scroll滚动条*/
/*stackoverflow 占溢出*/
/*程序员界的百度知道*/
/*stackoverflow 就是网址 不过要FQ*/
/*可见隐藏 就是隐藏的意思 不过占用该占用的空间*/
style="vvisibility: hidden;" /*hidden隐藏 visible显示*/
/*也是表示隐藏 不占用空间*/
style="display: none;" /*none 隐藏 block 显示*/
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>