我的学习日记html(2)

作者：你好赵伟 | 2024-04-28 14:29:32

踩

我的学习日记html(2)


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>4.24</title>
  <style type="text/css">
        p::after{
            content: "hahaha";
            color: red;
        }
        p::before{
            content: "hehehe";
            color: coral;
        }
          p::selection{
            color: aqua;
        }
           p::first-letter{
            font-size: 65px;
            color: blueviolet;
        }
      /* 综合运用类选择器？*/
      *{
        margin:0;
        padding:0;
      }
     ul{
      /*border:1px solid red;*/
      width:2000px;  
     }
     li{
      border:1px solid blue;
      height:300px;
      text-align: center;
      background-image:url("CSDN图片素材/3.webp");
      width:200px;
     }
     h3{padding-left:50px;}
     li{display:inline-block;}
    /* li p{color:red;}*/
    ul li{margin-left:10px;}
    nav{width:300px;height:100px;margin:40px auto;border:1px dashed pink;}
    h3::before{
   /* content:url("CSDN图片素材/3.webp"); 正确格式*/    content可添加的内容
   content:'';
   background:url("CSDN图片素材/3.webp") no-repeat center;
   background-size:20px 20px;
   display:no-repeat;
   display:inline-block;
   width:100px;    /*添加图片时需要设置高度*/
   height:50px;
    }
    li:hover{color:blue;}   /*a 行内元素  设宽高无效 */
    a:hover{cursor:pointer;}
    a{
      display:inline-block;
    }
 
    </style>               <!--  若想使a标记变宽display:inline-block;即可铺满li -->
</head>
<body> 
  伪类:<br>
  为元素::
  <hr  color="blue"  >
  <p class=".p1::first-letter">6
  当鼠标经过悬停与设置title属性的div盒子上时，鼠标旁边提示显示title设置的内容信息。此使用方法与html a超链接设置title属性相同。
 
六、div属性总结 - TOP
以上基础与实例介绍对div标签内设置常用属性，同时其它标签也可以设置以上五点属性，原理语法结构均相同，大家可以根据DIVCSS5教程举一反三使用。
 
</p>
<p class=".p2::first-letter">
  //本篇文章都使用这个结构代码来做演示
//lorem加上Tab键快速生成一段测试英文
</p>                         <!--  ul>li*5+tab -->
<ul>
  <nav><h3>美图赏析</h3></nav>
  <li><a href="">html10时45分</a></li>
  <li>下课了</li>
  <li>还有10分钟上课</li>
  <li>12345</li>
  <li>6789</li>
</ul>
</body>
</html>

效果图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/502752