日常练习题

最新推荐文章于 2024-08-06 12:58:11 发布

Y.

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量224

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/2301_78442768/article/details/131111011

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           /* .a{
               width: 100px;
               height: 100px;
               border: 2px solid red;
               border-bottom-right-radius: 30px;
               border-top-left-radius: 30px;
           } */
           body>div:first-child{
               width: 100px;
               height: 100px;
               border: 2px solid red;
               border-bottom-right-radius: 30px;
               border-top-left-radius: 30px;
           }


           body>div:nth-child(3){
               width: 100px;
               height: 100px;
               /* border: 2px solid red; */
               border-top: 3px dotted green;
               border-left: 3px solid green;
           }
           /* .nav{
               display: inline-block;
               width: 100px;
               height: 100px;
               border: 2px solid blue;
               font-size: 20px;
               text-align: center;
               line-height: 100px;
               text-decoration: underline;
               font-weight: bold;
           } */
           body>span:nth-of-type(1){
               display: inline-block;
               width: 100px;
               height: 100px;
               border: 2px solid blue;
               font-size: 20px;
               text-align: center;
               line-height: 100px;
               text-decoration: underline;
               font-weight: bold;
           }


           .ol_first>li{
               list-style: none;
           }
           .ol_first>li::before{
               display: inline-block;
               content:"";
               width: 10px;
               height: 10px;
               background-color: red;
               border-radius: 50%;
               margin-right: 10px;
           }
           .ul_first>li:nth-child(even){
               margin: 10px;
               padding: 10px;
               border: 2px solid blue;
           }

           .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{
               border: 2px solid red;
           }
           .ol_second>div{
               border: 2px solid red;
               /* border-top: 10px; */
           }
           .ol_second>a{
               border: 2px solid red;
           }
           .ol_second>li:nth-child(2){
               border-top: 10px;
           }


           /* .ol_second>div{
               position: absolute;
           } */


           .ol_second>div{
               width: 80px;
               height: 80px;
               text-align: center;
               line-height: 80px;
               border-radius: 50px;
               text-shadow: 2px 2px 10px blue,
               -2px 2px 10px blue,
               2px -2px 10px blue,
               -2px -2px 10px blue;
               transition: 2s;
               box-shadow: none;
           }
           .ol_second>div:hover{
               width: 70px;
               height: 40px;
               line-height: 40px;
               box-shadow: 2px 2px 10px blue,
               -2px 2px 10px blue,
               2px -2px 10px blue,
               -2px -2px 10px blue;
           }


           /* #myprogram{
           text-overflow: ellipsis;
           overflow: hidden;
           } */

       </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>

Y.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
日常练习题

子项22</li><li id="item23">子项23</li><li id="item1">子项1</li><li id="item2">子项2</li><a href="#">这是一个a链接</a><li id="item3">子项3。<span>哈哈哈哈</span><li>子项31</li><li>子项32
复制链接

扫一扫