css学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布

@干就完了

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量41

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44946697/article/details/119118973

版权

CSS里的颜色

HSL

请添加图片描述

字体设计

请添加图片描述

代码笔记

body{
    background-color: rgb(241, 241, 241);
    color:#111113;
    font-family: 'Times New Roman', Times, serif;
    font-size: 22px;
    font-weight:1000px ;
}
.box1{

  
}
.box2{
  border: 5px dotted #3ece86; 
  border-radius: 35px;
  
}
.box2 h1{
    text-align: center;
}
.container{
    width:80;
    margin:auto;

}
.list li{

    list-style-image: url(../image/webp.png);
    list-style-type: disc;
}
button:hover{
  background-color: #8ecea7;  
}
button :active{
    background-color: #482cc5;
}
a{
    text-decoration: none;
}
a:hover{
    color:#3ece86;
}
a:visited{
    color: rgb(5, 24, 24);
}
.block{
    float: left;
    width: 33.3%;
   border:1px solid #f7f8f7;
   box-sizing: border-box;
}
.clearfix{
    clear:both
}
#main-block{
    float :left;
    width:70%;
    border:1px solid #949ce0;
    box-sizing: border-box;

}
#sidebar{
    float :right;
    width:30%;
    border:1px solid #35a735;
    box-sizing: border-box;

}
.list2 li:nth-child(odd){
 background-color: #8ecea7;   
}
.list2 li:nth-child(2){
    background-color: #3f245e;   
   }
   .list2 li:nth-child(first){
    background-color: #ce8e97;   
   }
   .list2 li:nth-child(7){
    background-color: #812d61;   
   }
   .position-box{
      width: 500px;
      height: 500px;
      border: 1px solid #111113; 
      position: relative;
    
   }
   .position-box h1{
       position: absolute;
       top: 35px;
   }
   .position-box h2{
    position: absolute;
    right: 20px;
}
#fixed{
    position:fixed;
    right: 0;
    bottom: 250px;
}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="./css/style.css">
   <title>CSS Crash</title>
</head>

<body>
   <div class="container">
       <div class="box1">
           <h1> hello world!!</h1>
           <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste aperiam dignissimos minus corporis
               tenetur aliquid, cupiditate rerum cum incidunt reprehenderit in maiores obcaecati minima molestias
               similique. Architecto qui nostrum vel dolores quae reprehenderit eaque ullam iusto suscipit autem labore
               sed temporibus ipsum et porro facere veritatis eum eveniet quam, modi quod ratione iste! Ullam
               recusandae totam nesciunt aperiam vero officiis ratione fugit voluptatibus atque? Eum in voluptatibus
               accusantium eligendi velit necessitatibus. Eaque illum quisquam enim dolore quod? Est, placeat nulla
               quam enim earum voluptates repudiandae dolores
               pariatur iste ipsam beatae obcaecati cum hic atque iusto dolorem? Deserunt, eveniet amet!
           </p>
           <button> 有本事就点我呀</button>
       </div>
       <br>
       <br>
       <br>

       <div class="box2">
           <h1> hello world!!</h1>
           <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste aperiam dignissimos minus corporis
               tenetur aliquid, cupiditate rerum cum incidunt reprehenderit in maiores obcaecati minima molestias
               similique. Architecto qui nostrum vel dolores quae reprehenderit eaque ullam iusto suscipit autem labore
               sed temporibus ipsum et porro facere veritatis eum eveniet quam, modi quod ratione iste! Ullam
               recusandae totam nesciunt aperiam vero officiis ratione fugit voluptatibus atque? Eum in voluptatibus
               accusantium eligendi velit necessitatibus. Eaque illum quisquam enim dolore quod? Est, placeat nulla
               quam enim earum voluptates repudiandae dolores
               pariatur iste ipsam beatae obcaecati cum hic atque iusto dolorem? Deserunt, eveniet amet!

           </p>
           <button> 有本事就点我呀</button>
       </div>
       <div class="block">
           <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde quam totam perspiciatis sunt incidunt
               facilis reprehenderit nostrum, quibusdam eveniet.
           </p>
       </div>
       <div class="block">
           <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde quam totam perspiciatis sunt incidunt
               facilis reprehenderit nostrum, quibusdam eveniet.
           </p>
       </div>
       <div class="block">
           <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde quam totam perspiciatis sunt incidunt
               facilis reprehenderit nostrum, quibusdam eveniet.
           </p>
       </div>
   <div class ="clearfix"></div>
       <div id="main-block">
           <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde quam totam perspiciatis sunt incidunt
               facilis reprehenderit nostrum, quibusdam eveniet.
           </p>
       </div>
       <div id="sidebar">
           <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde quam totam perspiciatis sunt incidunt
               facilis reprehenderit nostrum, quibusdam eveniet.
           </p>
       </div>
       <div class ="clearfix"></div>
       <div class="list">
           <ul>
               <li><a href="#">List1</a></li>
               <li><a href="#">List1</a></li>
               <li><a href="#">List1</a></li>
               <li><a href="#">List1</a></li>
               <li><a href="#">List1</a></li>
               <li><a href="#">List1</a></li>
           </ul>

       </div>
       <br>
       <br>
       <br>
       <br>
       <hr>
       <div class="list2">
           <ul>
               <li>List1</a></li>
               <li>List1</a></li>
               <li>List1</a></li>
               <li>List1</a></li>
               <li>List1</a></li>
               <li>List1</a></li>
               <li>List1</a></li>
       
           </ul>
           <br>
           <br>
           <br>
           <br>
           <div class="position-box">
        <h1>还是有一个括号的</h1>
        <h2>还是有一个括号的</h2>
       
       </div>
         <button id='fixed'>button</button>

       </div>
       </body>
       </div>
      

  
  

</html>

网页效果

请添加图片描述

@干就完了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记

CSS里的颜色HSL字体设计代码笔记body{ background-color: rgb(241, 241, 241); color:#111113; font-family: 'Times New Roman', Times, serif; font-size: 22px; font-weight:1000px ;}.box1{ }.box2{ border: 5px dotted #3ece86; border-radius:
复制链接

扫一扫