CSS

最新推荐文章于 2022-11-16 11:43:29 发布
最新推荐文章于 2022-11-16 11:43:29 发布
阅读量119 收藏
点赞数
分类专栏： 学习经验 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43477676/article/details/111569288
版权
本文介绍了CSS（层叠样式表）在网页美化中的重要作用，包括行内样式、内部样式和外部样式的使用方法，强调了外部样式对于代码维护的优势。同时，详细讲解了CSS的选择器、优先级规则，以及文本、背景、字体、列表、表格和边框等常见属性的设置。还探讨了position属性，如relative、absolute和fixed定位，用于创建动态布局。
摘要由CSDN通过智能技术生成
CSS简介及作用

Cacasding Style Sheet 层叠样式表
作用：
html：负责网页的结构(框架)
css：负责网页美化

使用css的方式
使用CSS有三种方式

方式1
行内样式
特点：
1.在标签内部使用style属性编写css内容。
2.作用范围：针对某个标签（很局限）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="" style="color:red;text-decoration:none;font-size:100px">羊咩咩</a><br/>
    <a href="" style="color:red;text-decoration:none;font-size:100px">羊咩咩</a><br/>
    <a href="" style="color:red;text-decoration:none;font-size:100px">羊咩咩</a><br/>
    <a href="" style="color:red;text-decoration:none;font-size:100px">羊咩咩</a><br/>
</body>
</html>

方式2

内部样式
特点：
1.在html文件的标签内使用

2.作用范围：针对多个标签（广泛）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a{
          color:red;
          text-decoration:none;
          font-size:100px"
        }
    </style>
</head>
<body>
    <a href="">羊咩咩</a><br/>
    <a href="" >羊咩咩</a><br/>
    <a href="" >羊咩咩</a><br/>
    <a href="" >羊咩咩</a><br/>
</body>
</html>

方式3
外部样式（和html文件分离，好维护）
特点：建立一个独立css文件，编写css内容，需要在html文件中导入css文件。

在这里插入图片描述
css.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <a herf="">羊咩咩</a>
</body>
</html>

css.css

a{
   color:red;
   text-decoration:none;
   font-size:20px;
}

注意：
优先级问题：行内样式>内部样式>外部样式

CSS选择器
css语法由三部分组成：选择器、属性、值 分类：
  1. 标签选择器
    特点：1.使用标签名选择标签。2.作用范围：当前html页面的所有同名标签。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        /*
        css多行注释
        */
        /*
        标签选择器
        */
        div{
           font-size:20px;
           color:red;
        }
    </style>
</head>
<body>
<div>羊咩咩1</div>
<div>羊咩咩2</div>
<div>羊咩咩3</div>
<div>羊咩咩4</div>
<a href="#" >羊咩咩</a>
</body>
</html>
  • 类选择器
    特点：1.在标签中，使用class给标签分类，然后使用类选择器（.class名称）选择同类标签。2.作用范围：当前html页面的同类标签。3.当存在标签选择器和类选择器时，类选择器优先于标签选择器。 
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        /*
        css多行注释
        */
        /*
        类选择器
        */
        .a{
           font-size:20px;
           color:red;
        }
    </style>
</head>
<body>
<div class="a">羊咩咩1</div>
<div class="a">羊咩咩2</div>
<div class="b">羊咩咩3</div>
<div class="b">羊咩咩4</div>
<a href="#" >羊咩咩</a>
</body>
</html>
  • ID选择器
    特点：1.在指定的标签中使用id属性，然后使用ID选择器(#id名称)选择特定id的一个标签。2.作用范围：在当前html页面的特定id的某个标签。3.注意：在同一个html页面中，不要出现多个同id的标签。 4.优先级排序：ID选择器>类选择器>标签选择器 
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        /*
        css多行注释
        */
        /*
        ID选择器
        */
        #a1{
           font-size:20px;
           color:red;
        }
    </style>
</head>
<body>
<div class="a" id="a1">羊咩咩1</div>
<div class="a">羊咩咩2</div>
<div class="b">羊咩咩3</div>
<div class="b">羊咩咩4</div>
<a href="#" >羊咩咩</a>
</body>
</html>
  • 并集选择器
    特点：1.当多个选择器的css内容相同时，可以使用并集选择器减少css代码编写。2.语法：选择器1，选择器2，......{} 
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        /*
        css多行注释
        */
        /*
        并集选择器
        */
        div,a{
           font-size:20px;
           color:red;
        }
        /*
        a{
           font-size:20px;
           color:red;
        }
        */
    </style>
</head>
<body>
<div class="a" id="a1">羊咩咩1</div>
<div class="a">羊咩咩2</div>
<div class="b">羊咩咩3</div>
<div class="b">羊咩咩4</div>
<a href="#" >羊咩咩</a>
</body>
</html>
  • 交集选择器
    特点：1.语法：选择器1 选择器2 选择器3{} （最后选择的是最后的选择器） 
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        /*
        css多行注释
        */
        /*
        并集选择器
        */
        /*
        div,a{
           font-size:20px;
           color:red;
        }*/
        span{
           font-size:20px;
           color:red;
        }
    </style>
</head>
<body>
<div class="a">羊咩咩1<span>span1</span></div>
<div class="a">羊咩咩2</div>
<div class="b">羊咩咩3</div>
<div class="b">羊咩咩4</div>
<a href="#" >羊咩咩</a>
<span>span2</span>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        /*
        css多行注释
        */
        /*
        交集选择器
        */
        /*
        div,a{
           font-size:20px;
           color:red;
        }*/
        div span{
           font-size:20px;
           color:red;
        }
    </style>
</head>
<body>
<div class="a">羊咩咩1<span>span1</span></div>
<div class="a">羊咩咩2</div>
<div class="b">羊咩咩3</div>
<div class="b">羊咩咩4</div>
<a href="#" >羊咩咩</a>
<span>span2</span>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        /*
        css多行注释
        */
        /*
        交集选择器
        */
        /*
        div,a{
           font-size:20px;
           color:red;
        }*/
        div span p{
           font-size:20px;
           color:red;
        }
    </style>
</head>
<body>
<div class="a">羊咩咩1<span>span1<p>段落</p></span></div>
<div class="a">羊咩咩2</div>
<div class="b">羊咩咩3</div>
<div class="b">羊咩咩4</div>
<a href="#" >羊咩咩</a>
<span>span2</span>
</body>
</html>
  • 通用选择器
    特点：1.作用范围：当前页面的所有标签。2.语法：*{ } 
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        /*
        css多行注释
        */
        /*
        通用选择器
        */
        *{
           font-size:20px;
           color:red;
        }
    </style>
</head>
<body>
<div class="a">羊咩咩1<span>span1<p>段落</p></span></div>
<div class="a">羊咩咩2</div>
<div class="b">羊咩咩3</div>
<div class="b">羊咩咩4</div>
<a href="#" >羊咩咩</a>
<span>span2</span>
</body>
</html>
  • 伪类选择器
    超链接用得最多。 作用：控制标签的不同状态下的样式。 标签存在以下四种状态: :link伪类：初始状态（没有鼠标经过，也没有点击）。 :hover伪类：鼠标经过状态。 :active伪类：鼠标按下状态（点住没有松开）。 :visited伪类：鼠标按完松开状态（访问过后的状态）。 一般顺序：:link  :visited  :hover :active 
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        /*
        css多行注释
        */
        /*
        伪类选择器
        */
         /*初始状态*/
        a:link{
          font-size:20px;
          color:red;
        }
        /*访问过后*/
        a:visited{
          font-size:20px;
          color:green;
          text-decoration:none;
        }
        /*鼠标经过状态*/
        a:hover{
          font-size:20px;
          color:blue;
          text-decoration:none;
        }
        /*鼠标按下没有松开状态*/
        a:active{
          font-size:20px;
          color:red;
          text-decoration:underline;
        }
    </style>
</head>
<body>
<div class="a">羊咩咩1<span>span1<p>段落</p></span></div>
<div class="a">羊咩咩2</div>
<div class="b">羊咩咩3</div>
<div class="b">羊咩咩4</div>
<a href="NewUserRrgTable.html" >羊咩咩</a>
<span>span2</span>
</body>
</html>
    CSS常用属性
    w3c组织，制定了网页制作规范。包括html，css，javascript，xml.... 网址：http://home.ustc.edu.cn/~xie1993/html/html-attributes.html

    背景：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
       body{
       /*背景色*/
          background-color:red;
       /*背景图*/
          background-image:url("dzq.jpg");
       }
       /*背景图重复*/
          background-repeat:no-repeat;
       /*背景图位置 top center bottom 从图片的哪个位置显示  left center right 把图片放到标签的哪个位置*/
          background-position:top center;
       }
       /*简写属性*/
       background:red url("dzq.jpg") no-repeat top center;
    </style>
</head>
<body>

</body>
</html>

    文本：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
         body{
         /*文本颜色*/
           color:red;
         /*修饰*/
           text-decoration:underline/*line-through(中划线) overline（上划线） none（无划线）*/
         /*单词间距*/
           word-spacing:30px;
         /*字符间距*/
           letter-spacing:30px;
          /*对齐*/
          text-align:center;
         }
    </style>
</head>
<body>
   羊咩咩1 羊咩咩2 羊咩咩3 羊咩咩4
</body>
</html>

    字体

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
         body{
         /*大小*/
           font-size:30px;
         /*类型 宋体 黑体*/
           font-family:"宋体";
         /*样式 正体/斜体*/
           font-style:italic;
         /*粗细*/
           letter-weight:bold;
         }
    </style>
</head>
<body>
   羊咩咩1 羊咩咩2 羊咩咩3 羊咩咩4
</body>
</html>

    列表

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        ul{
           /*类型*/
           list-style-type:none;
           /*类型图标*/
           list-style-image:url("dzq.jpg");
        }
    </style>
</head>
<body>
羊咩咩
<ul>
    <li>羊咩咩1</li>
    <li>羊咩咩2</li>
    <li>羊咩咩3</li>
    <li>羊咩咩4</li>
</ul>
</body>
</html>

    表格

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        table{
           /*边框合并*/
           border-collapse:collapse;
           /*边框颜色*/
           border-color:red;
        }
    </style>
</head>
<body>
    <table border="1">
        <caption>表格</caption>
        <tr>
           <th>羊咩咩1</th>
           <th>羊咩咩2</th>
           <th>羊咩咩3</th>
           <th>羊咩咩4</th>
        </tr>
        <tr>
           <td>羊咩咩1</td>
           <td>羊咩咩2</td>
           <td>羊咩咩3</td>
           <td>羊咩咩4</td>
        </tr>
     </table>
</body>
</html>

    边框：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
        div{
           /*样式: Style*/
           border-top-style:solid;
           border-bottom-style:dotted;
           border-left-style:dashed;
           border-right-style:double;
           /*样式: Style 简写
           默认顺序：上 右 下 左
           如果当前没有值，那么取对面的值。
           如果只有一个方向的值，那么四个方向取同一个值。
           */
           border-style:solid dotted dashed double;
           /*颜色: color*/
           border-top-color:red;
           border-bottom-color:blue;
           border-left-color:green;
           border-right-color:gray;
           /*宽度: width*/
           border-top-width:3px;
           border-bottom-width:4px;
           border-left-width:5px;
           border-right-width:6px;
        }
    </style>
</head>
<body>
<div>羊咩咩</div>
</body>
</html>

    总结：
    css属性和值
    css文本：text-decoration,color,text-align,word-spacing,letter-spacing
    css背景：background-color,background-iamge,background-repeat,background-position
    css字体：font-size,font-family,font-style,font-weight
    css列表：list-style-type,list-style-image
    css表格：border-collapse
    css边框：border-style,border-width,border-color

    盒子模型
    把html页面上的一个标签看做是一个盒子。是网页布局的基础理论。 盒子的属性： 宽和高：width height 内边距：padding 边框：border 外边距：margin

    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
    div{
       /*宽和高 决定盒子的容量*/
       width:100px;
       height:100px;
       /*内边距 padding 上下左右 决定边框与内容的距离*/
        padding-top:10px;
       /*边框 border 方向:上下左右 颜色 宽度 样式 决定盒子的厚度*/
       border-style:solid;
       border-color:red;
       border-width:3px;
       /*外边距 margin 上下左右*/
       margin-top:10px;
    }

    </style>
</head>
<body>
<div>羊咩咩1</div>
<div>羊咩咩2</div>
</body>
</html>

    模拟登录页面

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
    #main{
       width:100px;
       height:100px;
       padding-top:10px;
       border-style:solid;
       border-color:red;
       border-width:3px;
       /*外边距*/
       margin-top:100px;
       margin-left:300px;
       background-image:url("dzq.jpg");
       background-repeat:no-repeat;
       background-position:top center;
    #user{
       margin-top:40px;
       margin-left:80px;
    }
    #password{
       margin-top:30px;
       margin-left:80px;
    }
    #botton{
       margin-top:15px;
       margin-left:120px;
    }
    #regb{
       margin-top:40px;
       margin-left:80px;
    }
    #userinput{
       background-image:url("dzq.jpg");
       background-repeat:no-repeat;
       /*左内边距*/
       padding-left:30px;
    }
    #paawordinput{
       background-image:url("dzq.jpg");
       background-repeat:no-repeat;
       /*左内边距*/
       padding-left:30px;
    }
    }

    </style>
</head>
<body>
    <div id="main">
         <form>
             <div id="user">用户名:<input id="userinput" type="text" name="username"/></div>
             <div id="password">码:<input id="paawordinput" type="text" name="password"/></div>
             <div id="botton"><input type="submit" value="登录"/>
                 <input id="regb" type="botton" value="注册"/>
              </div>
         </form>
    </div>
</body>
</html>
    CSS定位

    posotion属性：
    relative：相对定位。相对于其正常位置（原来的位置）进行定位。
    adsolute：绝对定位。相对于其第一个父元素进行定位。
    fixed：固定定位。相对于浏览器窗口进行定位。
    元素的位置可通过left、top、right、bottom等属性移动定位后的元素位置。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css.css">-->
    <style type="text/css">
    div{
        width:100px;
        height:100px;
        border-style:solid;
        border-color:black;
        border-width:3px;
    }
    #div1{
        background-color:red;
    }
    #div2{
        background-color:blue;
    }
    #div3{
        background-color:green;
        /*相对定位*/
        /*position:relative;*/
        /*绝对定位*/
        /*position:absolute;*/
        /*固定定位*/
        position:relative;
        left:100px;/*向右移动*/
        top:100px;/*向下移动*/
    }
    #advt{
        width:200px;
        height:200px;
        border-style:solid;
        border-width:3px;
        border-color:black;
        background-color:green;
        position:fixed;
        right:0px;
        bottom:0px;
    }

    </style>
</head>
<body>
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩
      羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩
      羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩
      <br/> <br/> <br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
      <br/> <br/> <br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/> <br/> <br/>
      <div id="advt">羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩羊咩咩</div>
</body>
</html>
羊咩咩a284811
关注
专栏目录
CSS(day01)
Y565437520的博客
12-15 145
一、CSS概述 1.什么css? Cascading style sheets 层叠样式表,级联样式表,简称样式表 2.作用 修饰页面中的元素 3.HTML与css的关系 HTML:负责页面的结构搭建,负责数据的显示 CSS:负责装饰页面(亚洲4大邪术) 4.CSS与HTML属性的使用原则 W3C建议,我们尽量使用css的方式来取代html属性 CSS样式: 1.样式代码可以重用 2提高代码可维护...
CSS简介、行内样式、内部样式、外部样式、注释、引入其他CSS文件
专研前端，探索后端
04-15 1407
CSS的发展历程： 起初是没有css的，只有少量样式是可以写在html标签中，这样代码格外显得臃肿，此时CSS就出现了。 初识CSS： CSS(Cascading Style Sheets),被称为CSS样式表或者层叠样式表，主要用于设置HTML页面内容外观及布局外观。css有三大模块：定位、浮动、盒子模型，下面有详细介绍。 CSS书写位置： CSS书写位置可以分三种情况：行内样式(内联式)、内部样式表、外部样式(外链式) 1.行内样式（内联式）：在标签中添加style，并在style里面书写属性及属性值代
html的三种样式定义方式：外部样式表；内部样式表；内联样式表
热门推荐
yang_zongjun的专栏
07-28 3万+
html、css、javascript是网页中的三个基础，他们分别是数据、样式、行为。 css样式分为三种 style.html <!-- 作者：948228952@qq.com 时间：2015-07-28 描述：style.html 三种css样式 --> 样式 p{ color: crimson; }
css权重
LIANG_XJT的博客
06-08 2620
css权重 css权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，也就是说同一个元素设置多条样式，谁的权重越高那么就那一条对元素起作用，如果权重相同，那么后写的元素就会覆盖前面的写的样式。 下面我们把样式的应用分为几个等级，按照等级来计算权重 1、（！important） 通过图片我们可以发现，原本是蓝色背景的div被它前面设置的样式覆盖掉了，这是因为我在样式属性值后加上了！impor...
CSS MASK
weixin_41897680的博客
01-26 8415
CSS MASK的简单学习
CSS 浮动
m0_52861684的博客
08-28 5215
CSS浮动。
CSS Reset & Modern CSS Reset
YF云飞的博客
08-01 1万+
CSS Reset & Modern CSS Reset
CSS介绍
阳young的博客
03-03 3789
一. css概述 css:层叠样式表, 用来美化html页面的, 比如html为盖房子,css则为装修. css增强了网页的显示能力，并且css代码可以和html代码完全分离. 二. 在html页面引入css 2.1.通过标签上的style属性引入 绝大部分标签都提供style属性，可以通过style属性设置当前标签的css样式这种引入方式不推荐大量使用，会造成页面的混乱. 2.2.通过style标签引入 在head中，可以提供一个style标签，标签内部可以写入css样式 初步实现了css代
利用css 动画实现节流
D_Z_Yong的博客
11-16 2万+
css节流
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
PostCSS CSS变量 插件可将语法转换为静态表示形式。 该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm ...
智能优化算法结果每次不一样的解决方法
羊咩咩的博客
12-08 4879
最近在使用智能优化算法时，在相同数据下，结果会有差别。因为处理不同输入数据下的输出结果，所以需要降低输出结果的偏差。 智能优化算法，如粒子群算法中，相同数据下多次运行程序，结果还是有一些偏差。因此在算法中，运行一次算法，然后保存算法里面的随机值，在下一次程序运行时再使用这些随机值，这样就能保证结果无偏差或者偏差不大。 在储存数据时，一般使用二维数组，但是面对迭代中的迭代，使用cell数组会很好的解决数据储存问题。 在操作cell数组时，使用save(‘X.mat’,‘X’);储存X数据至X.mat。当使用这
电动汽车充电站选址定容软件简单实现
羊咩咩的博客
09-05 1888
通过分析与对比较多国内外文献，使用MATLAB实现了一定规划区域内的充电站选址定容仿真，并使用MATLAB GUI写了一个充电站选址定容软件，使用了比较简单易懂的方法实现GUI界面。本部分最费时间的还是充电站选址定容的仿真。在GUI部分，若有建议的爱好学习的学霸们，可以共同交流和探讨，营造美好的学习环境，嘻嘻嘻。 软件界面图如下所示 1.登陆系统 2.注册界面 在写注册界面时，我是在用户注册时，把用户信息写入表格，当下一个用户注册时，读出表格的信息，把新用户信息加进入，再写入表格。这样就可以一直储存所有的
Java中静态方法、非静态方法、构造方法执行顺序
羊咩咩的博客
03-21 1447
如果一个类，则执行顺序为： 静态代码块和静态方法初始化-类非静态方法-构造方法 public class StaticDemo { StaticDemo(){ System.out.println("构造"); } static { System.out.println("静态"); } { System.out.println("非静态"); } public static void main(String[] a
JDBC:createStatement（sql注入）与PrepareStatement（防止sql注入）程序案例代码优化
羊咩咩的博客
01-13 505
把程序中重复的代码写为一个工具类。 createStatement package cn.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import ja
css
最新发布
05-29
CSS（层叠样式表）是一种用于描述网页中内容展示样式的计算机语言。它可以用来控制网页中各个元素的位置、大小、颜色、字体等方面的样式。通过 CSS，我们可以实现网页的美化和布局。CSS 的基本语法包括选择器、属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值