一个简单css例子

最新推荐文章于 2024-05-07 22:37:05 发布

幸福诗歌

最新推荐文章于 2024-05-07 22:37:05 发布

阅读量5.1k

点赞数 16

文章标签： css

本文链接：https://blog.csdn.net/boke14122621/article/details/70990927

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css讲解</title>
    <link rel="stylesheet" href="style.css">
    <style>
/*    body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }*/
        div{ 
                width: 200px;
                height: 200px;
                background: blue;
                /* border: 15px solid red; */
         }
         #dd{ 
             width: 300px;
                height: 300px;
                background: red;
          }
          .xdd{ 
                color: yellow;
           }
           a{ 
                color: #000;
                font-size: 30px;
            }
            a:hover{ 
                color: green;
             }
             .abc{ 
                color: blue;
              }
              ul li:first-child{ 
                color: orange;
                background: blue;
           }
           ul li:last-child{ 
            color: blue;
             background: orange;
        }
        ul li:nth-child(3){  
             color: green;
         }
         ul li:only-child{ 
            color: red;
          }
    </style>

</head>
<body>
    <div style="border: 20px solid #000;">
            <h2 style="color:red;">css讲解</h2>
    </div>

    <form action=""></form>
    <div id="dd" class="xdd">
        我的div标签
        <p id="mm" class="xdd">我是p标签</p>
        <a id="gg" href="http://www.baidu.com">baidu</a>
        <h1></h1>
        <span></span>
    </div>

    <div>
        <a href="#"> 这是一个超链接</a>
        <p>今天气不错,大家有没有出游的计划</p>
    </div>
    <ul>
        <!-- <h2>我的老大</h2>
        <h2>我的男孩子</h2> -->
        <li class="abc">11111</li>
        <li>222222</li>
        <li>33333333</li>
        <li>4444444444</li>
        <li>555555555</li>
        <li>6666666</li>
        <li>7777777777</li>
        <li>8888888888</li>
        <li>9999999</li>
        <li>1000000000000</li>


    <ul>
        <<!-- h1>我的哥哥</h1> -->
        <li>我的独生子女</li>
        <li>我不是生子女</li>
    </ul>
    <ul>
        <li>我的真正的独生子女</li>
    </ul>

</body>
</html>

效果：
这里写图片描述

幸福诗歌

关注

16
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
一个简单css例子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css讲解</title> <link rel="stylesheet" href="style.css"> <style>/* body { color: #000; background: #fff; ma
复制链接

扫一扫