月份：2021年9月

分类
个人学习历程

bootstrap文本类设置

<h1 class="display-1">display1</h1>
<h1 class="display-2">display2</h1>
<h1 class="display-3">display3</h1>
<h1 class="display-4">display4</h1>
<!--使用六个类名h1-h6来让非标题元素实现标题效果-->
<div class="h1">一级标题</div>
<div class="h2">二级标题</div>
<div class="h3">三级标题</div>
<div class="h4">四级标题</div>
<div class="h5">五级标题</div>
<div class="h6">六级标题</div>
<!--副标题类-->
<h1>一级标题<small>我是副标题</small></h1>
<h1>一级标题<small class="test-muted">我是副标题</small></h1>
继续阅读 “bootstrap文本类设置”
分类
个人学习历程

html元素置中

transform:translate(40%,20px);

第一个数值代表距离左边的距离,第二个数值代表立上边的距离
示例:

<style>
        .tou{
            width: 1080px;
            position:absolute;
            transform:translate(40%,20px);
        }
        .mainpng{
            width: 1080px;
        }
        .title{
            margin: auto;
            float: inherit;
            transform:translate(40%,0);
        }
</style>
分类
个人学习历程

bootstrap栅格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--要求当前页面使用IE浏览器最高版本的内核进行渲染-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--视口标签-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--解决IE9一下浏览器对html5和css3兼容的问题-->
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <!--
     
       [if it IE9]
       <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist.html5shiv.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/re"></script>
       -->
        <title></title>
        <style type="text/css">
        [class^="col"]{
            border: 1px solid red;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
        }
        .dh{
            background-color: #eee;
        }
        li:hover{
            background-color: #fff;
        }
        .col-sm-12{
            text-align: center;
            font-size: 30px;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
            <div class="row">
            <div class="col-md-8">col-md-8</div>
            <div class="col-md-4">col-md-4</div>
            </div>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-xs-12 col-sm-6">col-md-4</div>
            <div class="col-md-3 col-xs-12 col-sm-6">col-md-4</div>
            <div class="col-md-3 col-xs-12 col-sm-6">col-md-4</div>
            <div class="col-md-3 col-xs-12 col-sm-6">col-md-4</div>
        </div>
            <ul class="row dh">
                <li class="col-md-3 col-sm-12">首页</li>
                <li class="col-md-3 col-sm-12">新闻资讯</li>
                <li class="col-md-3 col-sm-12">关于我们</li>
                <li class="col-md-3 col-sm-12">客户服务</li>
            </ul>
        </div>
    </body>
</html>
分类
个人学习历程

centos常用安装与卸载命令

https://www.cnblogs.com/code-duck/p/13828244.html

分类
个人学习历程

codecolorer代码高亮使用方法

官方文档https://kpumuk.info/projects/wordpress-plugins/codecolorer/

官方示例https://kpumuk.info/projects/wordpress-plugins/codecolorer/examples

注意一定要切换到文本模式

[cc lang=“lang”]code[/cc]

或

<code lang=“lang”>code</code>

分类
个人学习历程

bootstrap响应式开发

默认开头

<meta charset=”utf-8″/>

&lt;meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0"&gt;<code>

div{
width: 300px;
height: 300px;
background-color: :pink;
}
@media screen and (max-width:539px) {
div{
background-color: blue;
}

}
@media screen and (min-width:540px) and (max-width:969px) {
div{
background-color: green;
}

}
@media screen and (min-width:970px) {
div{
background-color: red;
}

}