练习的作业

最新推荐文章于 2024-11-01 19:13:01 发布

苒苒鸭

最新推荐文章于 2024-11-01 19:13:01 发布

阅读量30

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/2301_77039810/article/details/131117414

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>

body>div:first-child{
   border: 1px solid red;
   width:100px;
   height:100px;
   border-top-left-radius: 50%;
   border-bottom-right-radius: 50%;
}
body>div:nth-child(3){

   width:100px;
   height:100px;
   border-top:5px solid green;
   border-left: 5px solid green;
}
body>span:nth-of-type(1){
   display: inline-block;
   width: 100px;
   height: 100px;
   border:1px solid blue;
   font-size:20px;
   line-height:100px;
   text-align:center;
   text-decoration: underline;
   font-weight: bold;

}
.ol_first>li{
   list-style: none;

}
.ol_first>li::before{
   display: inline-block;
   content: "";

   width: 5px;
   height: 5px;
   border-radius:3px;
   background-color: red;
   margin-right: 5px;
}
.ul_first>li:nth-child(even){
   border:1px solid blue;
   padding:10px;
   margin:10px;
}
.ol_second>a:link{
   color:green;
   text-decoration:none;
}
.ol_second>a:visited{
    color:black;
}
.ol_second>a:hover{
    color:red;
   text-decoration:underline;
   }
   .ol_second>a:active{
       color:yellow;
   }
   .ol_second>li:first-child{
       border: 1px solid red;
   }
   .ol_second>li:nth-child(2){
       border: 1px solid red;
   }
   .ol_second>div{
       border: 1px solid red;
   }
   .ol_second>a{
       border: 1px solid red;

       width:10px;
   }
   .ol_second>div{
       position:absolute;

   }
   ol:nth-of-type(2){
       position: relative;
   }
   div:nth-of-type(3){
   border: 1px solid red;
   width: 100px;
   height: 60px;
   font-size:20px;
   text-align: center;
   line-height: 60px;
   border-radius: 30px;
   text-shadow: 3px 3px 5px rebeccapurple,
   -3px 3px 5px rebeccapurple,
   3px -3px 5px rebeccapurple;

   transition:2s
   }
   div:hover{
       width:90px;
       height:50px;
       line-height:50px;
       text-align:center;
       box-shadow: 3px 3px 5px rebeccapurple,
       -3px 3px 5px rebeccapurple,
       3px -3px 5px rebeccapurple,
       -3px -3px 5px rebeccapurple;
   }


</style>
</head>
<body>
<div></div>
<span>哈哈哈哈</span>
<div></div>
<span></span>
<ol class="ol_first">
<li id="item1">子项1</li>
<li id="item2">子项2</li>
<li id="item3">子项3
<ul class="ul_first">
<li id="item21">子项21</li>
<li id="item22">子项22</li>
<li id="item23">子项23</li>
</ul>
</li>
</ol>
<ol class="ol_second">
<li>子项31</li>
<li>子项32</li>
<div>div33</div>
<a href="#">这是一个a链接</a>
</ol>
<div>button</div>
</body>
</html>