<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title>
<style> p{font-style: italic}/*包括斜体等样式*/
.a01{border: 5px solid #000000} /*顺序为粗细、线条形式、颜色*/
.a01 p{ text-indent: 50px; letter-spacing: 100px; } /*文本的首行缩进；单字或者字母之间的间距*/
.a01 span{ word-spacing: 20px; text-transform: capitalize } /*字母语言的单词间距，拼写方式：全部小写，全部大写，首字母大写*/
.a02{ border: 5px solid #0001ff; text-align: right; text-decoration: line-through; line-height: 40px } /*边框属性；文本对齐方式；文本划线种类；行间距*/
.a03{ width: 800px; height: 500px; background-image: url("../img/card1.gif"); border: 5px solid #ff0b00; background-repeat: no-repeat; background-attachment: fixed; background-position: 555px 333px ;/*top center button*/ background-size: 50px auto; } /*宽，高；背景图片引用（必须事先定义div的宽高）；边框属性；背景循环方式；背景附着；背景图片定位坐标；背景图片大小*/
.a04{ margin: auto; width: 300px;height: 300px; border-bottom: 5px solid #000000; border-top: 5px double #ff0b00; border-left: 5px dashed #23ff09; border-right: 5px dotted #0300ff; border-radius: 180px; } /*边框与外围的距离；宽高；下边框属性；上、左、右*/
ul li{ list-style: none; } /*列表样式*/
.a05{ width: 154px;height: 30px; background-image: url("../img/logo_db.png"); background-repeat: no-repeat; overflow: hidden; } .a05 a{ line-height: 200px; display: block; height: 300px; }
.a06{ width: 154px;height: 30px; background-image: url("../img/logo_db.png"); background-repeat: no-repeat; } .a06 a{ text-indent: -100px; display: block; }
.a07{ position: relative; } .a07 span{ position: absolute; width: 100%;height: 100%; background-image: url("../img/logo_db.png"); background-repeat: no-repeat; } .a08{ text-decoration: none; }
.spr1{ width: 180px;height: 180px; background: url("../img/30d5bc953b7afba77514.jpg"); background-repeat: no-repeat; border-radius: 90px; outline: 5px solid #00ff9f; box-shadow: 15px 15px 5px 0px #10ff82; } .spr1:hover{ background-position: -280px 0; } .spr1:active{ background-position: 0 -270px; }
.box1{ width: 200px;height: 200px; /*background:linear-gradient(yellow,blue);*/ /*background: linear-gradient(to top,yellow,blue);*/ /*background: linear-gradient(45deg,yellow,orange);*/ /*background: linear-gradient(yellow 20%,orange 0);*/ background: linear-gradient(yellow,orange,#000000); /*径向渐变*/ /*background: radial-gradient(yellow,orange);*/ }
.box2{ width: 150px;height: 150px; border: 50px solid #0c04ff; border-radius: 70px; text-shadow: 10px 10px 5px #ff110e; font-size: 40px; }
.box3{ width: 200px;height: 100px; border: 1px solid #000000; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; }
.box4{ width: 100px;height: 100px; border: 1px solid #000000; border-radius: 50px; border-bottom: double #f4ff00 ; /*transform: rotate(45deg);*/ /*transform: translate(-50px,0)*/ /*transform: scale(2);*/ /*transform: skew(30deg,30deg);*/ transform: translate(40px,100px); } .box5{ width: 100px;height: 100px;background: #55ff30; border: 1px solid #ff2520; animation: donghua 2s linear infinite; } @keyframes donghua { /*from{*/ /*width: 100px;height: 100px;background: #55ff30;*/ /*}*/ /*to{*/ /*width: 50px;height: 50px;background: #221fff;*/ /*}*/ 0%{ width: 100px;height: 100px;background: #55ff30; } 50%{ width: 50px;height: 50px;background: #221fff; } 100%{ width: 100px;height: 100px;background: #55ff30; } } </style></head><body><p>我是一段文字</p><br/><br/>
<div class="a01"> <p>我也是一段文字</p> <span>we‘re English words</span></div>
<div class="a02"> <b>我是另一段文字</b></div>
<div class="a03"></div><br/><br/><div class="a04"></div>
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>
<hr/>
<h1 class="a05"> <a href="http://www.bilibili.com">百度</a></h1>
<h1 class="a06"> <a href="http://www.douban.com">豆瓣</a></h1>
<a href="http://www.baidu.com" class="a08"> <h1 class="a07"> <span></span>百度 </h1></a>
<div class="spr1"></div>
<div class="box1"></div><div class="box2">嘿嘿嘿</div><div class="box3"></div><div class="box4"></div><div class="box5"></div>
</body></html>
时间： 2024-10-22 20:44:46