Marco Nie - css https://blog.niekun.net/category/css/ CSS element+element Selector 的使用 https://blog.niekun.net/archives/796.html 2019-12-17T09:37:00+08:00 选择特定元素内部的某个元素，需要使用加号 + 来进行选择。<!DOCTYPE html> <html> <head> <style> div + p { background-color: yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div> <h2>My name is Donald</h2> <p>I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p> <p>I will not be styled.</p> </body> </html> lightbox2 使用 https://blog.niekun.net/archives/768.html 2019-12-12T22:03:00+08:00 lightbox 是一个JavaScript 库，用来在前端显示图片。它的特点是轻量，容易部署，适用于现代的浏览器。官网：https://lokeshdhakar.com/projects/lightbox2/GitHub 项目地址：https://github.com/lokesh/lightbox2release 下载：https://github.com/lokesh/lightbox2/releases下载在发布页下载最新版本到本地或服务器：wget https://github.com/lokesh/lightbox2/archive/v2.11.1.tar.gz tar -zxvf v2.11.1.tar.gz css/js 文件在解压包的 dist 目录下。引用在 html 的 <head> 标签栏内引用 css 文件：<link href="path/to/lightbox.css" rel="stylesheet" /> 在 html 结束前的 </body> 标签前引用 js 文件：<script src="path/to/lightbox.js"></script> lightbox2 的 js 需要 jQuery 1.7，所以确保 jQuery 在 lightbox 的 js 文件之前引用。如果你没有安装 jQuery，可以使用预先包含了 lightbox 和 jQuery 的 js 文件 代替上面的 lightbox.js：<script src="dist/js/lightbox-plus-jquery.js"></script> 使用在图片链接内增加属性 data-lightbox 来激活 lightbox。单图片显示<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a> 选项:增加 data-title 属性，如果你想增加一个title.增加 data-alt 属性，如果你想附加一个图片的属性.多图片库如果你有多张图片想要通过左右箭头切换显示，可以设置如下：<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a> <a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a> <a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>属性设置如果想要修改默认的显示设置，可以引用 option method，例如：<script> lightbox.option({ 'resizeDuration': 200, 'wrapAround': true }) </script>所有可设置的参数，可查看官网：https://lokeshdhakar.com/projects/lightbox2/ bootstrap 的使用 https://blog.niekun.net/archives/764.html 2019-12-12T21:55:00+08:00 bootstrap 是全球最流行的前端框架，用来构建高响应，移动端优先的项目。官网：https://getbootstrap.com/GitHub 主页：https://github.com/twbs/bootstraprelease 页面：https://github.com/twbs/bootstrap/releases下载从官方发布页下载：wget https://github.com/twbs/bootstrap/releases/download/v4.4.1/bootstrap-4.4.1-dist.zip unzip bootstrap-4.4.1-dist.zip 引用如果只想使用 bootstrap 的 css 特性，在 <head> 标签内 link： <link rel="stylesheet" href="path/to/bootstrap.min.css"> 如果想要全套的交互响应功能，需要 jQuery，popper.js 框架和引用 bootstrap.js 文件,注意引用顺序不能乱，jQuery must come first, then Popper.js, and then our JavaScript plugins，将一下 script 放到结束符号 </body> 标签前：<script src="path/to/jquery.min.js"></script> <script src="path/to/popper.min.js"></script> <script src="path/to/bootstrap.min.js"></script>jQuery：https://github.com/jquery/jquerypopper.js：https://github.com/popperjs/popper.js使用官方手册：https://getbootstrap.com/docs/4.4/getting-started/introduction/w3 教程：https://www.w3schools.com/bootstrap4/container 容器相关https://getbootstrap.com/docs/4.4/layout/overview/grid 栅格结构相关https://getbootstrap.com/docs/4.4/layout/grid/typegraphy 输入文字相关https://getbootstrap.com/docs/4.4/content/typography/https://getbootstrap.com/docs/4.4/components/badge/https://getbootstrap.com/docs/4.4/utilities/text/输入特殊字符相关https://getbootstrap.com/docs/4.4/content/code/table 表格相关https://getbootstrap.com/docs/4.4/content/tables/alert 报警框https://getbootstrap.com/docs/4.4/components/alerts/button 按键https://getbootstrap.com/docs/4.4/components/buttons/https://getbootstrap.com/docs/4.4/components/button-group/https://getbootstrap.com/docs/4.4/components/dropdowns/https://getbootstrap.com/docs/4.4/components/popovers/https://getbootstrap.com/docs/4.4/components/tooltips/#examplescard 卡片模块https://getbootstrap.com/docs/4.4/components/card/https://getbootstrap.com/docs/4.4/utilities/stretched-link/carousel 幻灯片https://getbootstrap.com/docs/4.4/components/carousel/collapse 折叠内容https://getbootstrap.com/docs/4.4/components/collapse/form 表格输入框格式相关https://getbootstrap.com/docs/4.4/components/forms/https://getbootstrap.com/docs/4.4/components/input-group/list 相关https://getbootstrap.com/docs/4.4/components/list-group/modal 弹窗相关https://getbootstrap.com/docs/4.4/components/modal/nav 导航栏https://getbootstrap.com/docs/4.4/components/navs/https://getbootstrap.com/docs/4.4/components/navbar/https://getbootstrap.com/docs/4.4/components/scrollspy/页面导航栏https://getbootstrap.com/docs/4.4/components/pagination/progress 进度条https://getbootstrap.com/docs/4.4/components/progress/spinner 动态进度图标https://getbootstrap.com/docs/4.4/components/spinners/breadcrumb官网简介：https://getbootstrap.com/docs/4.4/components/breadcrumb/breadcrumb 可以指明当前页面层级关系，使用 css 定义的符号进行分割。<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page">Home</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav>为了为障碍浏览提供方便，针对面包屑这样具备导航功能的模块，建议添加一个有意义的标签：aria-label="breadcrumb" 來描述 <nav> 元素，以及使用 aria-current="page" 到这组导航的最后一个项目，以标明当前页面名称（路径）。修改默认分割符：<style> .breadcrumb-item + .breadcrumb-item::before { content: ">"; } </style>border 边缘https://getbootstrap.com/docs/4.4/utilities/borders/color 颜色https://getbootstrap.com/docs/4.4/utilities/colors/display 元素显示定义https://getbootstrap.com/docs/4.4/utilities/display/https://getbootstrap.com/docs/4.4/utilities/flex/嵌入 iframe 元素https://getbootstrap.com/docs/4.4/utilities/embed/shadow 阴影https://getbootstrap.com/docs/4.4/utilities/shadows/sizing 宽度高度定义https://getbootstrap.com/docs/4.4/utilities/sizing/spacing 空间 padding 和 margin 的定义https://getbootstrap.com/docs/4.4/utilities/spacing/alignment 对齐https://getbootstrap.com/docs/4.4/utilities/vertical-align/