CSS 学习笔记

最新推荐文章于 2024-08-03 21:32:51 发布

NemoHi

最新推荐文章于 2024-08-03 21:32:51 发布

阅读量435

点赞数

分类专栏： html 前端文章标签： css 学习 bootstrap

本文链接：https://blog.csdn.net/qq_42817985/article/details/125541767

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

CSS 学习笔记

CSS：Cascading Style Sheets 层叠样式表

1、选择器

笔者认为，选择器是一个新手入门的一个重点！因此放在最前面简单介绍。

选择器可以便于我们选择到我们需要制定样式的元素身上！

ID选择器

#id

#para1
{
    text-align:center;
    color:red;
}

Class选择器

.class

.center {text-align:center;}

选择器分组

如果想要 h2 和 p 标签同时被指定为灰色，可以将他们用逗号隔开！

h2, p {color:gray;}

2、在HTML中引入CSS

嵌入方式

适用于你没有单独的 css

<head>
    <style>
    .h1 {
        background: red;
    
    </style>
</head>

内联方式

我创建了单独的 css 文件，需要在 html 页面进行引入

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

3、恶作剧：为什么总在加载？

了解了选择器和引入方式后，我们现在可以策划一起简单的恶作剧！

恶作剧十分简单，只需要 5行代码

<style>
    * {
      cursor: wait
    }
 </style>

我们在一个页面使用嵌入方式引入这样一个 css，现在打开页面试试？

5、数量庞大的属性

属性太多，没法一一列举。建议通过搜索引擎搜索你想要的效果！

例如：html 怎么将文字居中或左右对齐？怎么将字体设置为红色？

6、框架：爱不释手

6.1、Bootstrap 4

Bootstrap 4 所有类见此文档：
Bootstrap中文网

引入方式：

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-p1KAotb3W9ndluCsqePPYnjRm3c6abdnIjo0tQwYUv83VsbsYd43RuofnFAaDo0E" crossorigin="anonymous">

当然还需引入配套的 js 否则组件将不能正常工作！

<!-- jQuery and JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi" crossorigin="anonymous"></script>

6.2、MDBootstrap

官方网站：https://mdbootstrap.com/

由 Google 提供

另：笔者很喜欢 MDB 提供的按钮按下的纹理，与 Android 原生相同，拥有精美的细节！But 默认没有圆角的锯齿感是让人失望的。相比 Google，个人还是更加喜欢 Apple 的设计规范！

引入方式：

互联网找资源 https://qige.io/web/MDB-Pro-4.12.zip

6.3、Bootstrap-Table

Q：为什么要把它单独拿出来？

A ：数据库课程困难的课程设计让我不得不接触到这个组件，于是在此进行总结，同时又能为我的笔记增加一定的字数。何乐而不为？

6.3.1、下载

https://www.bootstrap-table.com.cn/doc/getting-started/download/

6.3.2、电商之旅（Tour of E-SHOP）XD

要做什么？

前端渲染一个商品表格，数据来源于后端对数据库的查询结果

6.3.2.1、创建表格

首先我们需要一个表格

<table id="dataTable" class="align-items-center text-center"></table>

当然，此时它没有任何内容，在页面上无法看到任何效果

使用 jQuery 对表格进行声明

$('#dataTable').bootstrapTable({
            url: '/itemsToOrder',  //ajax 请求路径
            pagination: true,  //是否开启分页
            sidePagination: "client", //分页方式：服务端还是客户端
            pageSize: 10, //一页有多少数据
            //toolbar: "#toolbar", //工具栏
            pageList: [10, 25, 50, 100], //分页规格 可以以 10,25,50,100页进行更改
            showToggle: true, //是否展示切换详情的按钮
            search: true, //是否启用搜索
            clickToSelect: false,  //点击选中（要开启下方checkbox和visible进行配合使用）
            uniqueId: "ID",
            columns: [{
                checkbox: true,
                visible: true
            }, {
                field: 'item_code__item_name', //json 的 key
                title: '商品名称' //表头
            }, {
                field: 'true_price',
                title: '商品价格(供应表的真实价格)'
            }, {
                field: 'item_code__item_stock',
                title: '商品库存'
            }, {
                field: 'orderCount',
                title: "订购数量"

            }, {
                field: 'item_code_id',
                title: "操作",
                align: "center",
                valign: "middle",
                width: "150",
                formatter: "actionFormatter"  //样式控制
            }]
        })

// table的最后一列 操作栏的格式化
        function actionFormatter(value, row, index) {
            // 这莫名其妙的就把ID得到了
            var id = value;
            var result = "";
            result += "<button class='btn btn-primary btn-sm mr-2' data-toggle=\"modal\" data-target=\"#exampleModal\" οnclick=\"EditViewById('" + id + "','" + index + "')\">订购</button>";
            return result;
        }

在配置ajax请求url前，我们只能看到一个表头

这样，我们创建表格的步骤就完成了。

6.3.2.2、配置服务器后端处理请求

这个不是重点，我们不妨让后端通过一系列操作传输的一个这样的 json

[
    {
        "true_price": "200",
        "item_code__item_name": "欧莱雅----男士洁面",
        "item_code__item_stock": "44",
        "item_code_id": "04",
        "orderCount": 0
    },
    {
        "true_price": "30",
        "item_code_ame": "火锅底料",
        "item_code__item_stock": "90",
        "item_code_id": "02",
        "orderCount": 0
    },
    {
        "true_price": "700",
        "item_code__item_name": "Oracle公司",
        "item_code__item_stock" "item_code_id": "03",
        "orderCount": 0
    },
    {
        "true_price": "30",
        "item_code__item_name": "格陵兰岛",
        "item_code__item_stock": "90",
        "item_code_id": "01",
        "orderCount": 0
    }
]