...Normalize.css 1.3 布局容器 2 栅格系统 2.1 栅格系统简介 2.2 栅格参数 2.3 栅格系统使用 2.4 不同屏幕设置不同宽度 2.5 列偏移 2.6 列位置移动 3 排版 3.1 标题 3.2 突出显示 3.3 对齐 3.4 改变大小写 3.5 引用 3.6 列表 4 代码 4.1 内联代码 4.2 用户输入 4.3 代码块 4.3 变量 4.4 程序输出 5 表格 5.1 基本 5.2 条纹状表格 5.3 带边框的表格 5.4 鼠标悬停 5.5 紧缩表格 5.6 状态类 5.7 响应式表格 6 表单 6.1 基本实例 6.2 内联表单 6.3 水平排列的表单 6.4 表单控件输入框文本域多选和单选框下拉列表静态内容帮助文字校验状态添加额外的图标控件尺寸 7 按钮 7.1 可作为按钮使用的标签或元素 7.2 预定义样式 7.3 尺寸 7.4 激活状态 7.5 禁用状态 8 图片 8.1 响应式图片 8.2 图片形状 9 辅助类 9.1 文本颜色 9.2 背景色 9.3 三角符号 9.4 浮动 9.5 让内容块居中 9.6 清除浮动 9.7 显示或隐藏内容 9.10 图片替换 10 响应式工具 10.1 不同视口下隐藏显示 10.2 打印类 1 BootStrap基础 1 什么是BootStrap 由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 2 BootStrap的版本 BootStrap2 BootStrap3 BootStrap4 3 BootStrap 下载用于生产环境的Bootstrap Bootstrap Less 源码Bootstrap Sass 源码 4 CDN服务 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 5 目录结构生产环境版 bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ ├── bootstrap-theme.css.map│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf├── glyphicons-halflings-regular.woff└── glyphicons-halflings-regular.woff2 6 基本模板 <!DOCTYPE html><html lang="zh-CN"><head><title>Bootstrap 101 Template</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html> 7 浏览器支持手机浏览器 ——- Chrome Firefox Safari Android Supported Supported N/A iOS Supported Supported Supported 桌面浏览器 ——— Chrome Firefox Internet Explorer Opera Safari Mac Supported Supported N/A Supported Supported Windows Supported Supported Supported Supported Not supported 8 浏览器兼容让 IE8 支持H5新标签页面中引入respond.js <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> IE兼容模式页面中添加如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 国产浏览器切换webkit内核页面中添加如下代码 <meta name="renderer" content="webkit"> 2 BootStrap布局 1 概览 1.1 移动设备优先为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ 1.2 Normalize.css BootStrap内置了Normalize.css 1.3 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 <div class="container">...</div> .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 <div class="container-fluid">...</div> 2 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列 2.1 栅格系统简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-不存在，也影响大屏幕设备。 2.2 栅格参数超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 最大列（column）宽自动 ~62px ~81px ~97px 2.3 栅格系统使用使用单一的一组 .col-md- 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。 <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-6">.col-md-6</div><div class="col-md-6">.col-md-6</div></div> 2.4 不同屏幕设置不同宽度 <div class="row"><div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><div class="row"><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div></div> 2.5 列偏移使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。 <div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><div class="row"><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><div class="row"><div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div> 2.6 列位置移动通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列（column）的顺序。 <div class="row"><div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div><div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div></div> 3 排版 3.1 标题 HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 <h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6> 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 <h1>h1. Bootstrap heading <small>Secondary text</small></h1><h2>h2. Bootstrap heading <small>Secondary text</small></h2><h3>h3. Bootstrap heading <small>Secondary text</small></h3><h4>h4. Bootstrap heading <small>Secondary text</small></h4><h5>h5. Bootstrap heading <small>Secondary text</small></h5><h6>h6. Bootstrap heading <small>Secondary text</small></h6> 3.2 突出显示通过添加 .lead 类可以让段落突出显示。 <p class="lead">...</p> 3.3 对齐 <p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p> 3.4 改变大小写 <p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p> 3.5 引用 <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote><blockquote class="blockquote-reverse">...</blockquote> 3.6 列表无样式列表 <ul class="list-unstyled"><li>...</li></ul> 内联列表 <ul class="list-inline"><li>...</li></ul> 水平排列的内联列表 <dl class="dl-horizontal"><dt>...</dt><dd>...</dd></dl> 4 代码 4.1 内联代码通过 <code> 标签包裹内联样式的代码片段。 For example, <code><section></code> should be wrapped as inline. 4.2 用户输入通过 <kbd> 标签标记用户通过键盘输入的内容。 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 4.3 代码块多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。 <pre><p>Sample text here...</p></pre> 还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。 4.3 变量通过 <var> 标签标记变量。 <var>y</var> = <var>m</var><var>x</var> + <var>b</var> 4.4 程序输出通过 <samp> 标签来标记程序输出的内容。 <samp>This text is meant to be treated as sample output from a computer program.</samp> 5 表格 5.1 基本为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 <table class="table">...</table> 5.2 条纹状表格 <table class="table table-striped">...</table> 5.3 带边框的表格 <table class="table table-bordered">...</table> 5.4 鼠标悬停 <table class="table table-hover">...</table> 5.5 紧缩表格 <table class="table table-condensed">...</table> 5.6 状态类通过这些状态类可以为行或单元格设置颜色。 Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 5.7 响应式表格将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 6 表单 6.1 基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 <form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form> 6.2 内联表单为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠） 6.3 水平排列的表单通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了 <form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div></form> 6.4 表单控件输入框包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。只有正确设置了 type 属性的输入控件才能被赋予正确的样式。文本域支持多行文本的表单控件。可根据需要改变 rows 属性。多选和单选框默认样式 <div class="checkbox"><label><input type="checkbox" value="">Option one is this and that—be sure to include why it's great</label></div><div class="checkbox disabled"><label><input type="checkbox" value="" disabled>Option two is disabled</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that—be sure to include why it's great</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one</label></div><div class="radio disabled"><label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>Option three is disabled</label></div> 内联单选和多选框 <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label> 不带文本的Checkbox 和 radio <label><input type="checkbox" id="blankCheckbox" value="option1" aria-label="..."></label></div><div class="radio"><label><input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."></label></div> 下拉列表 <select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select> 静态内容如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可 <form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">Email</label><div class="col-sm-10"><p class="form-control-static">email@example.com</p></div></div><div class="form-group"><label for="inputPassword" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword" placeholder="Password"></div></div></form> 帮助文字 <label class="sr-only" for="inputHelpBlock">Input with help text</label><input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">...<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> 校验状态 Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。 <div class="form-group has-success"><label class="control-label" for="inputSuccess1">Input with success</label><input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"><span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div><div class="form-group has-warning"><label class="control-label" for="inputWarning1">Input with warning</label><input type="text" class="form-control" id="inputWarning1"></div><div class="form-group has-error"><label class="control-label" for="inputError1">Input with error</label><input type="text" class="form-control" id="inputError1"></div><div class="has-success"><div class="checkbox"><label><input type="checkbox" id="checkboxSuccess" value="option1">Checkbox with success</label></div></div><div class="has-warning"><div class="checkbox"><label><input type="checkbox" id="checkboxWarning" value="option1">Checkbox with warning</label></div></div><div class="has-error"><div class="checkbox"><label><input type="checkbox" id="checkboxError" value="option1">Checkbox with error</label></div></div> 添加额外的图标你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可 <div class="form-group has-success has-feedback"><label class="control-label" for="inputSuccess2">Input with success</label><input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputSuccess2Status" class="sr-only">(success)</span></div> 控件尺寸通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg- 类似的类可以为控件设置宽度。高度尺寸创建大一些或小一些的表单控件以匹配按钮尺寸 <input class="form-control input-lg" type="text" placeholder=".input-lg"><input class="form-control" type="text" placeholder="Default input"><input class="form-control input-sm" type="text" placeholder=".input-sm"><select class="form-control input-lg">...</select><select class="form-control">...</select><select class="form-control input-sm">...</select> 水平排列的表单组的尺寸通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。 <form class="form-horizontal"><div class="form-group form-group-lg"><label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"></div></div><div class="form-group form-group-sm"><label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"></div></div></form> 7 按钮 7.1 可作为按钮使用的标签或元素为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式 <a class="btn btn-default" href="" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit"> 7.2 预定义样式 <button type="button" class="btn btn-default">（默认样式）Default</button><button type="button" class="btn btn-primary">（首选项）Primary</button><button type="button" class="btn btn-success">（成功）Success</button><button type="button" class="btn btn-info">（一般信息）Info</button><button type="button" class="btn btn-warning">（警告）Warning</button><button type="button" class="btn btn-danger">（危险）Danger</button><button type="button" class="btn btn-link">（链接）Link</button> 7.3 尺寸需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。 7.4 激活状态添加 .active 类 7.5 禁用状态为 <button> 元素添加 disabled 属性，使其表现出禁用状态。为基于 <a> 元素创建的按钮添加 .disabled 类。 8 图片 8.1 响应式图片在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center <img src="..." class="img-responsive" alt="Responsive image"> 8.2 图片形状 <img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail"> 9 辅助类 9.1 文本颜色 <p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...</p><p class="text-danger">...</p> 9.2 背景色 <p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p> 9.3 三角符号 <span class="caret"></span> 9.4 浮动 <div class="pull-left">...</div><div class="pull-right">...</div> 9.5 让内容块居中 <div class="center-block">...</div> 9.6 清除浮动通过为父元素添加 .clearfix 类可以很容易地清除浮动（float） <div class="clearfix">...</div> 9.7 显示或隐藏内容 <div class="show">...</div><div class="hidden">...</div> 9.10 图片替换使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。 <h1 class="text-hide">Custom heading</h1> 10 响应式工具 10.1 不同视口下隐藏显示 .visible-xs- .visible-sm- .visible-md- .visible-lg- .hidden-xs .hidden-sm .hidden-md .hidden-lg.visible--block .visible--inline .visible--inline-block 10.2 打印类 .visible-print-block.visible-print-inline.visible-print-inline-block.hidden-print 打印机下隐藏本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_67155975/article/details/123351126。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-18 14:41:25

150

转载

CSS

css横向铺满轮播图代码

在网页设计中，CSS横向轮播图作为一种流行且实用的布局方式，不仅能够有效地展示多张图片，还能增强网站的视觉吸引力和用户体验。随着技术的发展，CSS3新增了scroll snap功能，使得开发者可以更轻松地创建平滑滚动、精准对齐的轮播效果。例如上述代码示例中利用scroll-snap-type和scroll-snap-align属性，实现了滚动时元素自动吸附对齐，有效避免了滚动过程中的抖动和错位问题。近期，各大主流浏览器如Chrome、Firefox和Safari均对CSS Scroll Snap功能提供了良好支持，这意味着更多用户将能够体验到这一流畅而高效的轮播效果。在实际应用中，设计师和开发者可以根据项目需求，结合JavaScript进行更复杂的交互控制，比如自定义动画过渡、触摸滑动切换等。值得注意的是，为了保证不同设备和屏幕尺寸下的兼容性和显示效果，开发人员在实现横向铺满轮播图时还需关注响应式设计原则，运用媒体查询（Media Queries）调整轮播图在移动端或其他小屏设备上的布局和行为。此外，随着Web性能优化理念的普及，如何在保证视觉效果的同时减少资源加载和渲染负担，也成为衡量一个优秀轮播图组件的重要指标。通过懒加载、预加载等技术手段，以及对图片大小、格式的合理选择，可以使CSS横向铺满轮播图在提升用户体验的同时，也能兼顾页面性能表现。

2023-01-15 14:17:14

469

算法侠

CSS

css根据屏幕大小切换样式

CSS是网页设计中必不可少的一部分。然而，如何让网站在不同大小的屏幕上看起来都好看？这正是CSS自适应设计的作用。按照屏幕大小，可以替换不同的CSS风格，达到最优的视觉效果。以下是一个基本的实现方法： / 设定默认风格 / body { background-color: FFF; font-size: 14px; } / 设定较小屏幕的风格 / @media screen and (max-width: 480px) { body { font-size: 12px; } } / 设定较大屏幕的风格 / @media screen and (min-width: 768px) { body { background-color: EEE; } } 在上面的代码中，我们首先设定了默认风格，即在任何大小屏幕上都使用的风格。然后我们使用@media查询设定了较小与较大屏幕上的风格。在较小屏幕上，我们将字体大小缩小到12px。而在较大屏幕上，我们将背景色更改为深灰色。通过上面的方法，我们可以按照不同屏幕大小使用不同的CSS。这样，我们就可以为用户提供最优的用户体验。

2023-06-07 11:37:32

489

电脑达人

CSS

CSS3 @media 查询在Safari与IE浏览器中的响应式设计及屏幕尺寸适应实践

...，编写能够灵活应变的CSS代码。这样一来，无论用户是在手机、平板还是电脑上浏览网站，都能享受到超棒的用户体验，让网站“见屏如见人”，在各种设备上都活灵活现，游刃有余。二、问题提出然而，在实现响应式设计的过程中，会遇到一个常见的问题：如何让CSS代码在Safari和IE等不同浏览器中都能正常工作呢？这就是本文要讨论的主题——如何使用CSS的@media查询来兼容Safari和IE浏览器。三、解决方法 1. 使用@media查询 @media查询是CSS3引入的一种新的媒体查询机制，它可以根据设备的不同特征（例如屏幕大小、分辨率、方向等）来调整CSS样式。这样，就可以为不同的设备提供不同的CSS样式。具体来说，我们可以使用@media查询来设置不同的CSS样式，当用户的设备满足特定条件时，就应用这些样式。例如，如果我们想要在宽屏设备上显示一张大图，可以这样做： css / 全局样式 / body { font-size: 16px; } / 宽屏设备样式 / @media only screen and (min-width: 800px) { body { font-size: 20px; } } 在这个例子中，当屏幕宽度大于等于800px时，body元素的字体大小就会从默认的16px变为20px。 2. 处理Safari和IE浏览器的兼容性问题虽然@media查询可以让我们根据设备的不同特性来调整CSS样式，但是在处理Safari和IE浏览器的兼容性问题时，还需要注意一些细节。首先，我们需要确保我们的CSS代码在Safari和IE浏览器中都能正常工作。所以，我们可以借助一些工具来检查咱们的CSS代码，就比如Google Chrome自带的那个超好用的开发者工具。其次，由于Safari和IE浏览器对于CSS3的支持程度有所不同，所以在编写CSS代码时，我们也需要注意这一点。比如说，拿@media查询这个功能来讲吧，在Safari和IE这两个浏览器上，它们的写法可是有点小差异。所以呢，我们得悠着点，对CSS代码做出适当的调整，让它们能在各个浏览器下都乖乖听话。再次，为了确保我们的CSS代码在所有浏览器中都能正常工作，我们还可以使用一些在线的CSS测试工具，例如CSSLint。四、总结总的来说，通过使用@media查询和一些其他的技巧，我们可以让我们的CSS代码在Safari和IE等不同浏览器中都能正常工作。当然，这并不是一件容易的事情，需要我们不断地学习和实践。但是，只要我们用心去做，就一定能做到！

2023-03-28 16:51:16

439

笑傲江湖_t

Bootstrap

Bootstrap响应式布局实战：自定义断点与栅格系统调整，优化屏幕尺寸适应及用户体验

...的自适应布局。媒体查询（Media Queries） , 媒体查询是CSS3中的一种特性，允许开发者根据设备的特定条件（如视口宽度、设备像素比等）应用不同的样式规则。在Bootstrap中，媒体查询被用来定义响应式断点，当浏览器窗口大小达到或超过某个预设阈值时，便会触发相应的CSS样式变化，实现界面布局在不同屏幕尺寸下的平滑过渡与适配。 SCSS（Sass Cascading Style Sheets） , SCSS是CSS预处理器 Sass 的语法格式之一，它扩展了原生CSS的功能，提供了变量、嵌套规则、混合宏、继承等更强大的编程功能。在Bootstrap中，源码使用SCSS编写，使得开发者能够更加方便地定制主题、修改样式，并通过编译生成最终的CSS文件，包括响应式布局相关的断点设置等。

2023-06-28 11:25:46

499

青山绿水

转载文章

[转载]手机端页面自适应解决方案—rem布局进阶版

...移动端屏幕物理像素与CSS像素之间的比例关系，表示一个CSS像素由多少个物理像素组成。在高清屏设备中，由于像素密度高，一个CSS像素可能对应多个物理像素，设备像素比就是用来描述这种关系的数值，例如dpr=2表示一个CSS像素由4个物理像素点组成。 rem布局 , rem是CSS中的长度单位，代表“root em”，即相对于根元素<html>的字体大小的单位。在移动端页面自适应解决方案中，通过动态设置html标签的font-size属性，并结合rem单位进行布局，可以根据不同设备屏幕尺寸和分辨率自动调整页面元素大小，实现页面内容的自适应显示。媒体查询（Media Queries） , 媒体查询是CSS3中的一种技术，允许内容根据设备环境的不同特性如视口宽度、设备高度、设备像素比等进行响应式展示。在使用rem布局方案下，虽然一般情况下可以避免使用媒体查询，但在某些特定场景下（比如针对特定宽度设备做样式调整），仍可通过编写媒体查询语句来实现不同屏幕尺寸下的定制化样式设计。例如，当需要对iPhone5（css像素宽度320px）以下的设备应用不同的布局样式时，可以使用@media screen and (max-width: 640px) ... 这样的语法结构。

2023-03-23 12:01:53

133

转载

转载文章

[转载]秒杀项目之秒杀商品操作

...实体类vo 用于连表查询，得到商品名字 package com.example.seckill.vo;import com.example.seckill.pojo.SeckillGoods;import lombok.Data;@Datapublic class SeckillGoodsVo extends SeckillGoods {private String goodsName;} ②、在SexkillGoodsMapper.xml文件中定义sql <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.example.seckill.mapper.SeckillGoodsMapper"><select id="queryAll" resultType="com.example.seckill.vo.SeckillGoodsVo">select sg.,g.goods_namefrom t_seckill_goods sg,t_goods gwhere sg.goods_id = g.gid;</select></mapper> ③、在mapper中定义 package com.example.seckill.mapper;import com.example.seckill.pojo.SeckillGoods;import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.example.seckill.vo.SeckillGoodsVo;import org.springframework.stereotype.Repository;import java.util.List;/ <p> 秒杀商品信息表 Mapper 接口 </p> @author lv @since 2022-03-19/@Repositorypublic interface SeckillGoodsMapper extends BaseMapper<SeckillGoods> {List<SeckillGoodsVo> queryAll();} ④、service层与controller层 service: ISeckillGoodsService: package com.example.seckill.service;import com.example.seckill.pojo.SeckillGoods;import com.baomidou.mybatisplus.extension.service.IService;import com.example.seckill.util.response.ResponseResult;import com.example.seckill.vo.SeckillGoodsVo;import java.util.List;/ <p> 秒杀商品信息表服务类 </p> @author lv @since 2022-03-19/public interface ISeckillGoodsService extends IService<SeckillGoods> {ResponseResult<List<SeckillGoodsVo>> queryAll();} SeckillGoodsServiceImpl: package com.example.seckill.service.impl;import com.example.seckill.pojo.SeckillGoods;import com.example.seckill.mapper.SeckillGoodsMapper;import com.example.seckill.service.ISeckillGoodsService;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.example.seckill.util.response.ResponseResult;import com.example.seckill.vo.SeckillGoodsVo;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.util.List;/ <p> 秒杀商品信息表服务实现类 </p> @author lv @since 2022-03-19/@Servicepublic class SeckillGoodsServiceImpl extends ServiceImpl<SeckillGoodsMapper, SeckillGoods> implements ISeckillGoodsService {@Autowiredprivate SeckillGoodsMapper seckillGoodsMapper;@Overridepublic ResponseResult<List<SeckillGoodsVo>> queryAll() {List<SeckillGoodsVo> list= seckillGoodsMapper.queryAll();return ResponseResult.success(list);} } controller: SeckillGoodsController: package com.example.seckill.controller;import com.example.seckill.service.ISeckillGoodsService;import com.example.seckill.util.response.ResponseResult;import com.example.seckill.vo.SeckillGoodsVo;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;/ <p> 秒杀商品信息表前端控制器 </p> @author lv @since 2022-03-19/@RestController@RequestMapping("/seckillGoods")public class SeckillGoodsController {@Autowiredprivate ISeckillGoodsService seckillGoodsService;@RequestMapping("/queryAll")public ResponseResult<List<SeckillGoodsVo>> queryAll(){return seckillGoodsService.queryAll();} } 得到秒杀商品数据： 3、前端显示数据 ①、编辑跳转秒杀界面 goodList.ftl: <!DOCTYPE html><html lang="en"><head><include "../common/head.ftl"><style>.layui-this{background: deepskyblue !important;}</style></head><body class="layui-container layui-bg-orange"><div class="layui-tab"><ul class="layui-tab-title"><li class="layui-this">普通商品</li><li>秒杀商品</li></ul><-- 普通商品--><div class="layui-tab-content"><div class="layui-tab-item layui-show"><div class="layui-form-item"><label class="layui-form-label">搜索栏</label><div class="layui-input-inline"><input type="text" id="normal_name" name="text" placeholder="请输入搜索内容" class="layui-input"></div><div class="layui-input-inline"><button class="layui-btn layui-btn-primary" id="normal_search">🔍</button><button class="layui-btn layui-btn-primary" id="normal_add">增加</button></div></div><table id="normal_goods" lay-filter="normal_goods"></table><script type="text/html" id="button_1"><a class="layui-btn layui-btn-xs" lay-event="normal_del">删除</a><a class="layui-btn layui-btn-xs" lay-event="normal_edit">编辑</a></script></div><--秒杀界面--><div class="layui-tab-item"><div class="layui-form-item"><label class="layui-form-label">搜索栏</label><div class="layui-input-inline"><input type="text" id="seckill_name" name="text" placeholder="请输入搜索内容" class="layui-input"></div><div class="layui-input-inline"><button class="layui-btn layui-btn-primary" id="seckill_search">🔍</button><button class="layui-btn layui-btn-primary" id="seckill_add">增加</button></div></div><table id="seckill_goods" lay-filter="seckill_goods"></table></div></div></div></div><--引入js--><script src="/static/asset/js/project/goodsList.js"></script></body></html> ②、获取数据 goodList.js: // 秒杀商品let seckill_table=table.render({elem: 'seckill_goods',height: 500,url: '/seckillGoods/queryAll' //数据接口,parseData(res){ //res 即为原始返回的数据return {"code": res.code===200?0:1, //解析接口状态"msg": res.message, //解析提示文本"count": res.total, //解析数据长度"data": res.data //解析数据列表};},cols: [[ //表头{field: 'id', title: '秒杀商品编号', width:80, sort: true},{field: 'goodsId', title: '商品名字id'},{field: 'seckillPrice', title: '秒杀价格'},{field: 'stockCount', title: '秒杀库存'},{field: 'startDate', title: '活动开始时间'},{field: 'endDate', title: '活动结束时间'},{field: 'goodsName', title: '商品名称'}]]}); 呈现界面：二、秒杀商品添加 1、后端：接收前端添加秒杀商品的数据 ①、实体类vo：SeckillGoodsVo private List<Map<String,Object>> goods; 修改实体类时间的类型：SeckillGoods @ApiModelProperty("秒杀开始时间")@TableField("start_date")@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")private Timestamp startDate;@ApiModelProperty("秒杀结束时间")@TableField("end_date")@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")private Timestamp endDate; ②、mapper层：SeckillGoodsMapper int addGoods(SeckillGoodsVo seckillGoodsVo); ③、mapper.xml层：SeckillGoodsMapper 批量插入秒杀商品的sql语句： <insert id="addGoods">insert into t_seckill_goods(goods_id, seckill_price, stock_count, start_date, end_date)values<foreach collection="goods" item="g" separator=",">({g.gid},{g.goodsPrice},{g.goodsStock},{startDate},{endDate})</foreach></insert> ④、service层 ISeckillGoodsService： ResponseResult<List<SeckillGoodsVo>> addGoods(SeckillGoodsVo seckillGoodsVo); SeckillGoodsServiceImpl： @Overridepublic ResponseResult<List<SeckillGoodsVo>> addGoods(SeckillGoodsVo seckillGoodsVo) {int goods=seckillGoodsMapper.addGoods(seckillGoodsVo);return ResponseResult.success(goods);} ⑤、controller层 @RequestMapping("/add")public ResponseResult<List<SeckillGoodsVo>> add(@RequestBody SeckillGoodsVo seckillGoodsVo){return seckillGoodsService.addGoods(seckillGoodsVo);} 2、前端 ①、定义数据与刷新、添加 goodsList.js： var layer,row,seckill_table// 添加秒杀商品$("seckill_add").click(()=>{layer.open({type:2,content: '/goods/SeckillGoodsOperate',area: ['800px','600px']})})// 秒杀商品刷新var seckill_reload = ()=> {seckill_table.reload({page:{curr:1 //current} });} var layer,row,seckill_tablelayui.define(()=>{let table=layui.tablelayer=layui.layerlet $=layui.jquerylet normal_table=table.render({elem: 'normal_goods',height: 500,url: '/goods/queryAll' //数据接口,page: true //开启分页,parseData(res){ //res 即为原始返回的数据return {"code": res.code===200?0:1, //解析接口状态"msg": res.message, //解析提示文本"count": res.total, //解析数据长度"data": res.data //解析数据列表};},//用于对分页请求的参数：page、limit重新设定名称request: {pageName: 'page' //页码的参数名称，默认：page,limitName: 'rows' //每页数据量的参数名，默认：limit},cols: [[ //表头{field: 'gid', title: '商品编号', width:80, sort: true, fixed: 'left'},{field: 'goodsName', title: '商品名字'},{field: 'goodsTitle', title: '商品标题'},{field: 'goodsImg',title: '商品图片',width:200,templet: (goods) => <b onmouseover='showImg("${goods.goodsImg}",this)'> + goods.goodsImg + </b> },{field: 'goodsDetail', title: '商品详情'},{field: 'goodsPrice', title: '商品价格', sort: true},{field: 'goodsStock', title: '商品库存', sort: true},{field: 'operate', title: '商品操作',toolbar: 'button_1'}]]});// 刷新表格let reloadTable=()=>{let goodsName=$("normal_value").val()// 【JS】自动化渲染的重载,重载表格normal_table.reload({where: {//设定异步数据接口的额外参数,height: 300goodsName},page:{curr:1 //current} });}// 搜索$("normal_search").click(reloadTable)// 增加$("normal_add").click(()=>{row = nullopenDialog()})//工具条事件table.on('tool(normal_goods)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"let data = obj.data; //获得当前行数据let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）if (layEvent === 'normal_del') { //删除row = data//获得当前行的数据let url="/goods/del/"+data.gidlayer.confirm('确定删除吗？',{title:'删除'}, function(index){//向服务端发送删除指令og$.getJSON(url,{gid:data.gid}, function(ret){layer.close(index);//关闭弹窗reloadTable()});layer.close(index);//关闭弹窗});}if (layEvent === 'normal_edit') { //编辑row = dataopenDialog()} })// 页面弹出let openDialog=()=>{// 如果是iframe层layer.open({type: 2,content: '/goods/goodsOperate', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']area:['800px','600px'],btn: ['确定','取消'],yes(index,layero){let url="/goods/insert"// 拿到表格数据let data=$(layero).find("iframe")[0].contentWindow.getFormData()if(row) {url="/goods/edit"}$.ajax({url,data,datatype: "json",success(res){layer.closeAll()reloadTable()layer.msg(res.message)} })} });}// -------------------------秒杀商品-------------------------------------------seckill_table=table.render({elem: 'seckill_goods',height: 500,url: '/seckillGoods/queryAll' //数据接口,parseData(res){ //res 即为原始返回的数据return {"code": res.code===200?0:1, //解析接口状态"msg": res.message, //解析提示文本"count": res.total, //解析数据长度"data": res.data //解析数据列表};},cols: [[ //表头{field: 'id', title: '秒杀商品编号', width:80, sort: true},{field: 'goodsId', title: '商品名字id'},{field: 'seckillPrice', title: '秒杀价格'},{field: 'stockCount', title: '秒杀库存'},{field: 'startDate', title: '活动开始时间'},{field: 'endDate', title: '活动结束时间'},{field: 'goodsName', title: '商品名称'}]]});// 添加秒杀商品$("seckill_add").click(()=>{layer.open({type:2,content: '/goods/SeckillGoodsOperate',area: ['800px','600px']})})})// 图片显示let showImg = (src,obj)=> {layer.tips(<img src="${src}" width="100px">, obj);}// 秒杀商品刷新var seckill_reload = ()=> {seckill_table.reload({page:{curr:1 //current} });} ②、增加秒杀商品弹出页面样式 <!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="/static/asset/js/layui/css/layui.css" media="all"></head><body><div style="padding:15px 0px;"><div class="layui-condition"><form id="fm" name="fm" action="/" method="post" class="layui-form"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label" style="width: 100px;text-align: left;">秒杀活动时间:</label><div class="layui-input-inline" style="width:280px;"><input type="text" class="layui-input" id="dt"></div><div class="layui-input-inline"><button class="layui-btn" id="btn_save" type="button"><i class="fa fa-search fa-right"></i>保存</button></div></div></div></form></div><div class="layui-fluid" style="margin-top:-18px;"><table id="tb_goods" class="layui-table" lay-filter="tb_goods" style="margin-top:-5px;"></table></div></div><script src="/static/asset/js/layui/layui.js"></script><script src="/static/asset/js/project/seckillGoodsOperate.js"></script></body></html> ③、实现增加秒杀商品 seckillGoodsOperate.js: layui.define(()=>{let table=layui.tablelet laydate = layui.laydatelet $=layui.jquerylet layer=layui.layer// 读取普通商品table.render({elem: 'tb_goods',height: 500,url: '/goods/queryAll' //数据接口,page: true //开启分页,parseData(res){ //res 即为原始返回的数据return {"code": res.code===200?0:1, //解析接口状态"msg": res.message, //解析提示文本"count": res.total, //解析数据长度"data": res.data //解析数据列表};},//用于对分页请求的参数：page、limit重新设定名称request: {pageName: 'page' //页码的参数名称，默认：page,limitName: 'rows' //每页数据量的参数名，默认：limit},cols: [[ //表头// 全选按钮{field: '', type:"checkbox"},{field: 'gid', title: '商品编号', width:80},{field: 'goodsName', title: '商品名字'},{field: 'goodsTitle', title: '商品标题'},{field: 'goodsDetail', title: '商品详情'},{field: 'goodsPrice', title: '商品价格', sort: true},{field: 'goodsStock', title: '商品库存', sort: true}]]});// 构建时间选择器//执行一个laydate实例laydate.render({elem: 'dt', //指定元素type: "datetime",range: "~"});$("btn_save").click(()=>{// 获取时间let val=$("dt").val()if(!val){layer.msg("请选择时间")return}// 解析时间2022-2-2 ~2022-5-2let startDate=new Date(val.split("~")[0]).getTime()let endDate=new Date(val.split("~")[1]).getTime()// 获得选中的普通商品,获取选中行的数据let rows= table.checkStatus('tb_goods').data; //idTest 即为基础参数 id 对应的值if(!rows||rows.length===0){layer.msg("请选择数据")return}layer.prompt(function(value, index, elem){// 修改每个商品的数量rows.forEach(e=>{e.goodsStock=value})let data={startDate,endDate,goods:rows}// 访问后台的秒杀商品的接口$.ajax({url: "/seckillGoods/add",contentType:'application/json',data: JSON.stringify(data),datatype:"json",//返回类型type:"post",success(res){parent.seckill_reload()layer.closeAll()parent.layer.closeAll()layer.msg(res.message)} })});})}) ④、展示结果增加成功：三、秒杀商品的操作 1、后端操作秒杀单个商品详情 ①、mapper层 SeckillGoodsMapper： Map<String,Object> querySeckillGoodsById(Long id); mapper.xml文件：SeckillGoodsMapper.xml <select id="querySeckillGoodsById" resultType="map">select sg.id,sg.goods_id,sg.seckill_price,sg.stock_count,sg.start_date,sg.end_date,g.goods_img,g.goods_title,g.goods_detail,g.goods_name,(casewhen current_timestamp < sg.start_date then 0when (current_timestamp between sg.start_date and sg.end_date) then 1when current_timestamp > sg.end_date then 2end) goods_statusfrom t_goods g,t_seckill_goods sgwhere g.gid = sg.goods_idand sg.id = {0}</select> ②、service层 ISeckillGoodsService： Map<String,Object> querySeckillGoodsById(Long id); SeckillGoodsServiceImpl： @Overridepublic Map<String, Object> querySeckillGoodsById(Long id) {return seckillGoodsMapper.querySeckillGoodsById(id);} ③、controller层：SeckillGoodsController package com.example.seckill.controller;import com.example.seckill.service.ISeckillGoodsService;import com.example.seckill.util.response.ResponseResult;import com.example.seckill.vo.SeckillGoodsVo;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.;import org.springframework.web.servlet.ModelAndView;import java.util.List;/ <p> 秒杀商品信息表前端控制器 </p> @author lv @since 2022-03-19/@Controller@RequestMapping("/seckillGoods")public class SeckillGoodsController {@Autowiredprivate ISeckillGoodsService seckillGoodsService;// 返回json@ResponseBody@RequestMapping("/queryAll")public ResponseResult<List<SeckillGoodsVo>> queryAll(){return seckillGoodsService.queryAll();}@ResponseBody@RequestMapping("/add")public ResponseResult<List<SeckillGoodsVo>> add(@RequestBody SeckillGoodsVo seckillGoodsVo){return seckillGoodsService.addGoods(seckillGoodsVo);}// 正常跳转界面@RequestMapping("/query/{id}")public ModelAndView querySeckillGoodsById(@PathVariable("id") Long id) {ModelAndView mv = new ModelAndView("/goods/goodsSeckill");mv.addObject("goods", seckillGoodsService.querySeckillGoodsById(id));return mv;} } 2、前端展示 ①、在goodsList.js增加列的操作 {field: '', title: '操作', width: 140,templet: function (d) {return <div><a class="layui-btn layui-btn-xs layui-btn-danger">删除</a><a href="/seckillGoods/query/${d.id}" class="layui-btn layui-btn-xs layui-btn-normal">秒杀</a></div>;} } ②、添加秒杀详情界面：goodsSkill.ftl <!DOCTYPE html><html lang="en"><head><include "../common/head.ftl"/></head><body><table style="position: absolute;top:-10px;" class="layui-table" border="1" cellpadding="0" cellspacing="0"><tr><td style="width:120px;">商品图片</td><td><img src="${goods['goods_img']}" alt=""></td></tr><tr><td>商品名称</td><td>${goods['goods_name']}</td></tr><tr><td>商品标题</td><td>${goods['goods_title']}</td></tr><tr><td>商品价格</td><td>${goods['seckill_price']}</td></tr><tr><td>开始时间</td><td><div style="position: relative;${(goods['goods_status']==1)?string('top:10px;','')}">${goods['start_date']?string("yyyy-MM-dd HH:mm:ss")}-${goods['end_date']?string("yyyy-MM-dd HH:mm:ss")}<if goods['goods_status']==0>活动未开始<elseif goods['goods_status']==1>活动热卖中<div style="position:relative;top:-10px;float:right;"><input type="hidden" id="goodsId" value="${goods['goods_id']}" name="goodsId"/><button class="layui-btn" id="buy">立即抢购</button></div><else>活动已结束</if></div></td></tr></table><script src="/static/asset/js/project/goodsSeckill.js"></script></body></html> ③、实现：goodsSkill.js let layer, form, $;layui.define(() => {layer = layui.layerform = layui.form$ = layui.jquery$('buy').click(() => {$.ajax({url: '/seckillOrder/addOrder',data: {goodsId: $('goodsId').val()},dataType: 'json',type: 'post',async: false,success: function (rs) {if (rs.code === 200)layer.msg(rs.message)elselayer.msg(rs.message)} })});}) ④、展示效果点击秒杀： 3、后端操作秒杀抢购功能 ①、导入雪花id工具包：SnowFlake package com.example.seckill.util;@SuppressWarnings("all")public class SnowFlake {/ 起始的时间戳/private final static long START_STMP = 1480166465631L;/ 每一部分占用的位数/private final static long SEQUENCE_BIT = 12; //序列号占用的位数private final static long MACHINE_BIT = 5; //机器标识占用的位数private final static long DATACENTER_BIT = 5;//数据中心占用的位数/ 每一部分的最大值/private final static long MAX_DATACENTER_NUM = -1L ^ (-1L << DATACENTER_BIT);private final static long MAX_MACHINE_NUM = -1L ^ (-1L << MACHINE_BIT);private final static long MAX_SEQUENCE = -1L ^ (-1L << SEQUENCE_BIT);/ 每一部分向左的位移/private final static long MACHINE_LEFT = SEQUENCE_BIT;private final static long DATACENTER_LEFT = SEQUENCE_BIT + MACHINE_BIT;private final static long TIMESTMP_LEFT = DATACENTER_LEFT + DATACENTER_BIT;private long datacenterId; //数据中心private long machineId; //机器标识private long sequence = 0L; //序列号private long lastStmp = -1L;//上一次时间戳public SnowFlake(long datacenterId, long machineId) {if (datacenterId > MAX_DATACENTER_NUM || datacenterId < 0) {throw new IllegalArgumentException("datacenterId can't be greater than MAX_DATACENTER_NUM or less than 0");}if (machineId > MAX_MACHINE_NUM || machineId < 0) {throw new IllegalArgumentException("machineId can't be greater than MAX_MACHINE_NUM or less than 0");}this.datacenterId = datacenterId;this.machineId = machineId;}public static void main(String[] args) {SnowFlake snowFlake = new SnowFlake(2, 3);long start = System.currentTimeMillis();for (int i = 0; i < 1000000; i++) {System.out.println(snowFlake.nextId());}System.out.println(System.currentTimeMillis() - start);}/ 产生下一个ID @return/public synchronized long nextId() {long currStmp = getNewstmp();if (currStmp < lastStmp) {throw new RuntimeException("Clock moved backwards. Refusing to generate id");}if (currStmp == lastStmp) {//相同毫秒内，序列号自增sequence = (sequence + 1) & MAX_SEQUENCE;//同一毫秒的序列数已经达到最大if (sequence == 0L) {currStmp = getNextMill();} } else {//不同毫秒内，序列号置为0sequence = 0L;}lastStmp = currStmp;return (currStmp - START_STMP) << TIMESTMP_LEFT //时间戳部分| datacenterId << DATACENTER_LEFT //数据中心部分| machineId << MACHINE_LEFT //机器标识部分| sequence; //序列号部分}private long getNextMill() {long mill = getNewstmp();while (mill <= lastStmp) {mill = getNewstmp();}return mill;}private long getNewstmp() {return System.currentTimeMillis();} } ②、service层 ISeckillOrderService ： package com.example.seckill.service;import com.example.seckill.pojo.SeckillOrder;import com.baomidou.mybatisplus.extension.service.IService;import com.example.seckill.pojo.User;import com.example.seckill.util.response.ResponseResult;/ <p> 秒杀订单信息表服务类 </p> @author lv @since 2022-03-19/public interface ISeckillOrderService extends IService<SeckillOrder> {ResponseResult<?> addOrder(Long goodsId, User user);} SeckillOrderServiceImpl ： package com.example.seckill.service.impl;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;import com.example.seckill.exception.BusinessException;import com.example.seckill.mapper.GoodsMapper;import com.example.seckill.mapper.OrderMapper;import com.example.seckill.mapper.SeckillGoodsMapper;import com.example.seckill.pojo.;import com.example.seckill.mapper.SeckillOrderMapper;import com.example.seckill.service.ISeckillOrderService;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.example.seckill.util.SnowFlake;import com.example.seckill.util.response.ResponseResult;import com.example.seckill.util.response.ResponseResultCode;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;/ <p> 秒杀订单信息表服务实现类 </p> @author lv @since 2022-03-19/@Servicepublic class SeckillOrderServiceImpl extends ServiceImpl<SeckillOrderMapper, SeckillOrder> implements ISeckillOrderService {@Autowiredprivate SeckillGoodsMapper seckillGoodsMapper;@Autowiredprivate GoodsMapper goodsMapper;@Autowiredprivate OrderMapper orderMapper;@Transactional(rollbackFor = Exception.class)@Overridepublic ResponseResult<?> addOrder(Long goodsId, User user) {// 下单前判断库存数SeckillGoods goods = seckillGoodsMapper.selectOne(new QueryWrapper<SeckillGoods>().eq("goods_id", goodsId));if (goods == null) {throw new BusinessException(ResponseResultCode.SECKILL_ORDER_ERROR);}if (goods.getStockCount() < 1) {throw new BusinessException(ResponseResultCode.SECKILL_ORDER_ERROR);}// 限购SeckillOrder one = this.getOne(new QueryWrapper<SeckillOrder>().eq("user_id", user.getId()).eq("goods_id", goodsId));if (one != null) {throw new BusinessException(ResponseResultCode.SECKILL_ORDER_EXISTS_ERROR);}// 库存减一int i = seckillGoodsMapper.update(null, new UpdateWrapper<SeckillGoods>().eq("goods_id", goodsId).setSql("stock_count=stock_count-1"));// 根据商品编号查询对应的商品（拿名字）Goods goodsInfo = goodsMapper.selectOne(new QueryWrapper<Goods>().eq("gid", goodsId));// 生成订单//生成雪花idSnowFlake snowFlake = new SnowFlake(5, 9);long id = snowFlake.nextId();//生成对应的订单Order normalOrder = new Order();normalOrder.setOid(id);normalOrder.setUserId(user.getId());normalOrder.setGoodsId(goodsId);normalOrder.setGoodsName(goodsInfo.getGoodsName());normalOrder.setGoodsCount(1);normalOrder.setGoodsPrice(goods.getSeckillPrice());orderMapper.insert(normalOrder);//生成秒杀订单SeckillOrder seckillOrder = new SeckillOrder();seckillOrder.setUserId(user.getId());seckillOrder.setOrderId(normalOrder.getOid());seckillOrder.setGoodsId(goodsId);this.save(seckillOrder);return ResponseResult.success();} } ③、controller层 SeckillOrderController ： package com.example.seckill.controller;import com.example.seckill.pojo.User;import com.example.seckill.service.ISeckillOrderService;import com.example.seckill.util.response.ResponseResult;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;/ <p> 秒杀订单信息表前端控制器 </p> @author lv @since 2022-03-19/@RestController@RequestMapping("/seckillOrder")public class SeckillOrderController {@Autowiredprivate ISeckillOrderService seckillOrderService;@RequestMapping("/addOrder")public ResponseResult<?> addOrder(Long goodsId, User user){return seckillOrderService.addOrder(goodsId,user);} } ④、呈现结果限购次数：本期内容结束，下期内容更完善！！！！！！！！！！！！！！！！！！！！！1 本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_60389087/article/details/123601288。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-02-25 23:20:34

121

转载

JQuery插件下载

js和CSS3媒体查询制作简单的响应式导航菜单

...绍这款名为“js和CSS3媒体查询制作简单的响应式导航菜单”的浏览器插件，采用jQuery技术结合CSS3媒体查询实现了一款高度自适应的导航菜单解决方案。该插件专注于移动优先设计原则，为用户提供流畅的跨设备浏览体验。类似于Bootstrap框架下的导航菜单，它在设计上注重简洁与实用。当浏览器视口宽度小于760像素时，这款插件会智能地将常规展示的导航菜单转换为紧凑型的汉堡包菜单模式，隐藏大部分菜单项以节省空间，优化小屏幕设备上的内容布局。而在大屏幕或宽视口环境下，导航菜单则会展开并完整显示所有链接项目。通过整合JavaScript的强大交互能力和CSS3媒体查询的动态样式切换功能，此插件不仅确保了导航菜单在不同设备尺寸下的视觉一致性，还兼顾了用户的操作便捷性，是现代响应式网页设计中不可或缺的实用工具之一。点我下载文件大小：10.27 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-08-12 22:24:15

120

本站

JQuery插件下载

jQuery和CSS3实用响应式商品参数比较表格

...格"的jQuery和CSS3插件，专为电子商务网站设计，旨在提升用户体验。它巧妙地结合了前端开发的两大利器——jQuery的动态交互性和CSS3的媒体查询与布局灵活性。通过直观易用的界面，用户能够轻松地在不同设备上浏览和对比商品的各项详细参数，如尺寸、颜色、价格等，确保信息的清晰呈现。该插件的核心特点是响应式设计，这意味着无论是在桌面电脑、平板还是手机上，都能自适应屏幕大小，保持表格整洁且易于阅读。设计师利用CSS3的媒体查询技术，确保表格在不同分辨率下都能展现出最佳视觉效果，同时保证了跨平台的一致性。借助jQuery的便捷操作，诸如排序、筛选和实时更新等功能得以实现，使用户能够即时对比多个商品的特性，简化了购物决策过程。此外，插件还可能包含动画效果，增强用户的交互体验。总而言之，这款"响应式商品参数比较表格"插件是电商网站优化用户体验、提升转化率的重要工具，适合任何寻求高效商品比较功能的在线商城。通过它，开发者可以轻松地将复杂的数据展示转变为用户友好的交互式体验。点我下载文件大小：131.87 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-08-06 17:13:44

本站

JQuery插件下载

jQuery垂直时间轴插件

...uery的强大功能与CSS3的现代动画特性。这款插件旨在为网站开发者提供一种直观且交互性极强的方式来展示时间线上的重要事件或里程碑。核心功能包括：1.动态展示：当用户向下滚动页面时，时间轴事件以流畅的动画效果从两侧向中心移动，创造了一种吸引人的视觉体验，同时保持了信息的清晰展示。2.交互式翻转：在第二种效果中，插件进一步利用CSS3的旋转动画，使时间轴事件能够进行翻转操作，为用户提供更丰富的互动体验，增强了内容的可探索性。3.响应式设计：考虑到不同设备的显示需求，该插件采用了CSS3的媒体查询技术，确保在各种屏幕尺寸下都能呈现最佳的视觉效果和用户体验。4.易于集成：基于jQuery，该插件提供了简洁的API接口，使得集成到现有项目中变得极为简便，只需几个简单的调用即可实现所需的功能。5.颜色变化与图标支持：通过CSS样式自定义，开发者可以轻松调整时间轴的背景颜色、边框样式以及图标字体，以适应不同的设计风格和主题需求。6.适应性与优化：考虑到不同浏览器的兼容性问题，该插件进行了充分的测试与优化，确保在主流浏览器环境下稳定运行。通过jQuery垂直时间轴插件，网站开发者可以轻松构建出既美观又功能丰富的垂直时间轴，不仅能够有效传达信息，还能增强用户的参与度和网站的整体吸引力。无论是记录公司历史、展示产品开发过程、还是呈现重要事件序列，这款插件都是理想的选择。点我下载文件大小：783.36 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-08-04 11:22:29

322

本站

HTML

不平铺html怎么设置

在深入理解了如何使用CSS的background属性和background-size属性来实现HTML元素背景图片不平铺效果后，我们可以进一步探索现代网页设计中的更多高级布局与样式技巧。近期，随着CSS Grid和Flexbox布局模块的广泛普及，设计师和开发者拥有了前所未有的强大工具来精确控制元素的位置和尺寸，进而能够更灵活地调整背景图像以适应各种复杂的布局场景。例如，在响应式设计中，利用CSS的媒体查询（Media Queries），可以针对不同设备视口宽度动态调整background-size属性，实现自适应背景图效果。此外，CSS的object-fit属性也可以帮助我们更好地处理背景图片或img元素的内容填充问题，它允许我们选择“contain”、“cover”等多种模式以适应容器尺寸。另一方面，Web性能优化也是当下网页开发的重要议题。在运用背景图片时，除了关注展示效果外，还需注意图片加载速度对用户体验的影响。通过合理压缩图片、使用CDN加速、以及懒加载等技术手段，可有效提升页面加载速度，确保背景图片即使在低速网络环境下也能快速呈现且不影响整体布局渲染。同时，最新的CSS Houdini草案正逐步引入一些底层API，如CSS Paint API，使得开发者可以直接在CSS中编写JavaScript代码来自定义元素的绘制行为，包括背景图案的生成和渲染方式，这为网页背景设计带来了无限可能。综上所述，从基础到进阶，从布局到性能，CSS在背景图片处理方面提供了丰富的功能和广阔的应用空间，值得广大前端开发者持续关注并深入研究实践。

2024-01-05 16:01:16

430

键盘勇士

CSS

css样式表颜色背景编号

...置已经不再仅仅局限于CSS样式表中的基础方法。例如，现在我们可以利用CSS3提供的RGBA、HSLA以及CSS Color Level 4新增的颜色函数来实现更丰富、细腻的颜色控制。首先，RGBA颜色模式在RGB的基础上增加了Alpha通道，允许开发者设定颜色的透明度，这对于实现元素半透明效果或渐变过渡效果极为重要。例如：background-color: rgba(255, 0, 0, 0.5); 这条规则将会为背景赋予一个半透明的红色。其次，HSLA（Hue, Saturation, Lightness, Alpha）是一种基于色相、饱和度、亮度和透明度的颜色表示方式，它使得设计师能够从色彩理论的角度更加直观地调整颜色。例如：color: hsla(0, 100%, 50%, 1); 表示的是纯红色。再者，CSS Color Level 4引入了诸如color()、hwb()等新的颜色函数，它们能以更多维度定义颜色，大大扩展了前端开发者的调色板范围。例如，color()函数可以接受多种颜色空间的值作为输入，包括Lab、LCH和RGB等。此外，响应式设计和暗黑模式的需求也促使着颜色管理策略的升级。通过媒体查询结合CSS变量，可以实现根据设备环境动态切换主题颜色，确保无论在何种环境下，网页都能提供最佳的视觉体验。综上所述，虽然本文介绍了CSS中基本的颜色和背景设置方法，但实际应用中还需紧跟技术潮流，充分利用现代CSS特性，以满足日益增长的设计复杂性和用户体验要求。

2023-08-04 12:20:22

544

软件工程师

HTML

冰墩墩html css代码

...x Layout）是CSS3中的一种布局模式，旨在提供强大的、更简洁的解决方案来处理各种复杂布局问题。在本文的上下文中，通过设置div元素的display属性为flex，我们可以轻松实现其内部子元素（如冰墩墩图片和文字）的水平居中和垂直居中对齐，以及灵活的伸缩空间分配。 alt属性 , alt属性是HTML img标签的一个重要属性，全称为“alternate text”。在网页开发中，当图片无法加载或用户使用屏幕阅读器等辅助技术时，alt属性提供的文本信息将替代图片显示，以确保内容的可访问性和理解性。在这篇文章中，冰墩墩图片的alt属性值设置为“冰墩墩”，确保了即使图片未加载成功，用户也能知道该部分代表的是北京冬奥会吉祥物冰墩墩。响应式设计 , 响应式设计是一种网页设计方法，使得网站能够根据用户所使用的设备环境（系统平台、屏幕尺寸、屏幕方向等）进行适应性的布局调整。虽然文章并未直接提及响应式设计，但在实际开发过程中，制作冰墩墩网站图标时可能会运用到这一原则，比如利用CSS3媒体查询技术让冰墩墩图像在不同尺寸的屏幕上都能保持合适的大小和显示效果，从而提升用户的浏览体验。

2023-07-30 08:03:59

729

电脑达人

CSS

css根据分辨率设置缩放比例

...网和多屏时代的到来，CSS的响应式设计已成为现代网页开发不可或缺的一部分。近期，W3C（万维网联盟）在CSS布局模块Level 4规范中进一步强化了对媒体查询功能的支持，使得开发者能够更加精细地针对不同设备、屏幕特性进行样式适配。例如，新增了对视口比例、颜色Gamut等特性的查询，让设计师在实现自适应缩放效果的同时，还能考虑色彩显示差异等因素。实际上，在实际项目中，除了使用zoom和transform: scale()属性调整页面整体或元素级别的缩放外，Flexbox与Grid布局也是实现响应式设计的重要工具。这两种现代CSS布局模式可以灵活处理内容的流动和定位，确保在不同分辨率下界面布局都能保持清晰且易用。同时，诸如Bootstrap、Foundation等流行的前端框架也在持续优化其响应式组件，通过预设断点和便捷的类名系统简化了根据不同设备分辨率设置样式的过程。这些框架不仅提供了基本的布局方案，还包含了丰富的UI组件，帮助开发者快速构建跨平台兼容、具有良好用户体验的网站。值得注意的是，Google、Apple等公司在推进Web技术发展的同时，不断强调无障碍性和性能优化。因此，在运用CSS实现响应式设计时，不仅要关注视觉效果，还要充分考虑到各类辅助技术用户的体验，如合理设置字体大小、确保足够的触控目标尺寸以及优化页面加载速度等，以满足日益严格的Web内容可访问性标准要求。总之，从基础的@media规则到最新的CSS特性，再到成熟的前端框架支持，都在推动着响应式设计的不断发展和完善。作为前端开发者，紧跟技术潮流并深入理解如何根据设备分辨率有效设置缩放比例及样式，将极大地提升网页在多元终端环境下的呈现质量和用户体验。

2023-12-07 22:51:38

487

码农

CSS

css正方形里面加数字

...le Box）布局是CSS3中的一种布局模型，它为复杂、灵活的网页布局提供了一种更加高效且响应式的设计方案。在本文语境中，通过设置.square元素的display: flex;属性开启Flex布局，并使用justify-content: center;和align-items: center;两个属性值将正方形内的数字元素水平与垂直居中对齐，使得无论容器大小如何变化，数字始终能保持在正方形中心位置。 CSS Grid , 虽然文章并未直接提到CSS Grid，但作为现代前端开发中的另一种重要布局系统，在处理二维布局问题时与Flexbox相辅相成。CSS Grid是一种基于网格系统的布局方法，可以更轻松地控制网页内容的行和列布局，而Flexbox更适合一维布局和项目对齐。在实际应用中，开发者可以根据具体需求选择适合的布局技术。响应式设计 , 响应式设计是一种让网站或应用能够自动适应不同设备屏幕尺寸和方向的网页设计方法。虽然本文主要聚焦于创建一个带有数字的正方形并在其中运用Flexbox进行居中对齐，但在现代前端开发中，这种技巧常常会被应用于响应式布局场景下，确保无论用户是在桌面电脑、平板还是手机上浏览，数字都能在正方形内以美观且易读的方式展现出来。响应式设计的关键在于利用CSS媒体查询以及Flexbox或CSS Grid等布局技术，根据视口宽度动态调整页面元素的样式和布局。

2023-06-14 12:07:04

426

软件工程师

转载文章

[转载]Bootstrap框架class=thumbnail是什么意思？

...流行的开源HTML、CSS和JavaScript工具包，用于快速开发响应式布局以及移动设备优先的网站。它提供了丰富的预定义组件，如导航栏、按钮、表单元素等，帮助开发者轻松构建具有专业外观和交互功能的网页。缩略图（thumbnail） , 在计算机图形学与Web设计中，缩略图是指原始图片或文档的一种小型版本，保留了大致内容和结构特征，常用于快速浏览大量内容时提供预览效果。在Bootstrap框架下，thumbnail 类专门用来创建图像或其他内容的缩略视图，通常带有链接至完整尺寸或更多详情页面的功能。响应式布局 , 响应式布局是一种网页设计方法，使网站能够根据访问设备的不同屏幕尺寸和方向自动调整布局、内容大小和功能展现方式。在Bootstrap框架中，响应式布局是其核心特性之一，通过一系列媒体查询和灵活的网格系统，确保网页在桌面、平板和手机等各种设备上都能提供良好的用户体验。

2023-06-08 11:31:22

299

转载

CSS

CSS元素高度计算详解：内容、内边距、边框、外边距与height属性互动实践

CSS模型高度计算方法：深入解析与实例演示 1. 引言在我们构建丰富多彩的Web世界时，CSS扮演着至关重要的角色，尤其在布局和尺寸控制方面。其中，元素的高度计算是CSS中一个既基础又复杂的主题。这篇文会拽着你的手，一起蹦跶进CSS的奇幻世界，咱们要大聊特聊的就是CSS模型里头那个高度计算的秘密法则。咱会甩出一串串活灵活现的代码实例，就像你亲手在揭那层神秘的面纱一样，让你能摸得着、看得懂，最后把这门深奥的规律玩得溜溜的。 2. CSS高度计算的基本概念在CSS中，元素的高度主要取决于其内容、内边距（padding）、边框（border）以及外边距（margin）。一般来说，当你在网页里放一个像div这样的块级元素时，默认情况下，这个家伙会超级自觉地自己调整高度，完全根据它肚子里装的内容多少来自适应。不过，有时候在一些特定场景，比如说我们在捣鼓响应式设计或者自由发挥做布局时，就真的需要对元素的高度拿捏得恰到好处，这就不可避免地要接触到CSS计算高度的技巧啦。 css / 基本元素高度示例 / div { width: 300px; padding: 20px; border: 5px solid black; margin: 10px; } 在此示例中，div的实际占用高度不仅包括内容区域的高度，还包括内边距、边框和外边距的高度。 3. 自动高度计算（height: auto）通常情况下，如果未明确设置height属性，元素的高度会自动调整以适应其内容。 html 这是一段动态内容，它的长度会决定div的高度。在这个例子中，div的高度会随着p标签内的文本内容变化而变化。 4. 明确指定高度（height: value）我们可以使用height属性为元素设定固定的或者百分比高度。 css .fixed-height { height: 200px; / 设置固定高度 / } .percent-height { height: 50%; / 设置为父元素高度的50% / } 这里，.fixed-height元素的高度被明确指定为200像素，而.percent-height元素的高度则与其父元素相关联。 5. 内容盒子高度计算（min-height & max-height）除了直接设置height，我们还可以利用min-height和max-height来限制元素的高度范围。 css .dynamic-height { min-height: 200px; / 最小高度保证 / max-height: 400px; / 最大高度限制 / overflow: auto; / 当内容超出最大高度时添加滚动条 / } 当.dynamic-height元素的内容超过最大高度时，由于设置了overflow: auto，它会自动出现滚动条。 6. 总结与思考 CSS高度计算方法并非一成不变，而是灵活多变，根据实际需求和场景选择合适的计算方式至关重要。无论是让内容自己决定高度，还是我们亲自拍板定个高度，甚至给高度设定一个灵活的区间范围，都得我们在实际操作中不断尝试、摸索和领悟。希望这篇文章能帮助你更好地驾驭CSS高度计算，提升页面布局的精细度与灵活性，让网页设计更加得心应手！

2023-10-03 08:48:32

504

繁华落尽

CSS

iOS设备上表格滚动优化：实现overflow-x:auto与-webkit-overflow-scrolling:touch的结合使用以解决水平滚动问题

...优化解决方案。例如，CSS的新特性Scroll Snap旨在提高滚动体验的一致性和可控性，通过scroll-snap-type和scroll-snap-align等属性来定义滚动容器内的元素如何对齐和捕捉，使得用户在浏览横排表格或列表时能更准确地定位到目标内容。另外，随着iPhone和iPad Pro等iOS设备引入ProMotion技术，支持120Hz高刷新率屏幕，滚动效果的平滑度成为新的关注点。开发者可以利用CSS的@media查询针对高刷新率设备优化滚动行为，确保滚动条的动画更为流畅自然。此外，为了进一步提升移动端用户体验，现代Web框架如React、Vue等也在滚动优化方面做了很多工作，提供了虚拟滚动（Virtual Scrolling）等功能，只渲染可视区域的内容，大幅降低了大数据量场景下的内存占用和渲染性能开销，使得即便是包含大量数据的横向表格也能实现快速流畅的滚动浏览。综上所述，解决移动设备上的滚动问题不仅涉及样式属性的合理运用，也与紧跟Web技术发展趋势、采用最新前端框架特性密切相关，这要求开发者不断学习新技术、新策略以适应日益增长的移动端交互需求。

2023-09-29 12:02:28

520

心灵驿站_t

转载文章

[转载]基于SSM的手表商城系统设计与实现

...留言，订购产品，订单查询和发布留言7个模块；本文转载自http://www.biyezuopin.vip/onews.asp?id=11975后台部分由管理员使用，主要包括管理员身份验证，商品管理，处理订单，用户信息管理，连接信息管理5个模块。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"/><title>腕表商城</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="shortcut icon" type="image/x-icon" href="img/favicon.png"><link rel="stylesheet" type="text/css" href="<%=basePath%>home/css/font-awesome.min.css" /><link rel="stylesheet" type="text/css" href="<%=basePath%>home/css/bootstrap.css" /><link rel="stylesheet" type="text/css" href="<%=basePath%>home/css/style.css"><link rel="stylesheet" type="text/css" href="<%=basePath%>home/css/magnific-popup.css"><link rel="stylesheet" type="text/css" href="<%=basePath%>home/css/owl.carousel.css"><script type="text/javascript">function getprofenlei(){ var html = ""; $.ajax({url: "leixing.action?list&page=0&rows=30",type: "POST",async: false, contentType: "application/x-www-form-urlencoded;charset=UTF-8",success: function (data) { $.each(data.rows, function (i, val) { html += ' <li ><a href="home/search.jsp?fenlei='+val.id+'" >'+val.a1+' </a></li>';})} }); $("fenlei").html(html);}function gettop1(){var html = "";$.ajax({url: "leixing.action?list&page=0&rows=10",type: "POST",async: false,success: function (data) {var total='';//<div class="tab-pane active" id="nArrivals">// <div class="nArrivals owl-carousel" id="top1">$.each(data.rows, function (i, valmm) { html+='<div class="nArrivals owl-carousel" id="'+valmm.id+'">';$.ajax({url: "shangpin.action?list&page=0&rows=10",type: "POST",async: false,data: { fenlei:valmm.id },success: function (data) { $.each(data.rows, function (i, val) { html+='<div class="product-grid">'+'<div class="item">'+' <div class="product-thumb">'+' <div class="image product-imageblock"> <a href="home/details.jsp?ids='+val.id+'"> <img data-name="product_image" style="width:223px;height:285px;" src="<%=basePath%>'+val.tupian1+'" alt="iPod Classic" title="iPod Classic" class="img-responsive"> <img style="width:223px;height:285px;" src="<%=basePath%>'+val.tupian1+'" alt="iPod Classic" title="iPod Classic" class="img-responsive"> </a> </div>'+' <div class="caption product-detail text-left">'+' <h6 data-name="product_name" class="product-name mt_20"><a href="home/details.jsp?ids='+val.id+'" title="Casual Shirt With Ruffle Hem">'+val.biaoti+'</a></h6>'+' <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-x"></i></span> </div>'+'<span class="price"><span class="amount"><span class="currencySymbol">$</span>'+val.jiage+'</span>'+'</span>'+'<div class="button-group text-center">'+' <div class="wishlist"><a href="home/details.jsp?ids='+val.id+'"><span>wishlist</span></a></div>'+'<div class="quickview"><a href="home/details.jsp?ids='+val.id+'"><span>Quick View</span></a></div>'+'<div class="compare"><a href="home/details.jsp?ids='+val.id+'"><span>Compare</span></a></div>'+'<div class="add-to-cart"><a href="home/details.jsp?ids='+val.id+'"><span>Add to cart</span></a></div>'+'</div>'+'</div>'+'</div>'+'</div>'+' </div>'; })html+='</div>'; } })}) $("nArrivals").html(html); } }); 本篇文章为转载内容。原文链接：https://blog.csdn.net/newlw/article/details/127608579。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-03-21 18:24:50

转载

转载文章

[转载]jstree插件对树操作增删改查的使用

...://v3.bootcss.com font-awesome官方地址：http://www.fontawesome.com.cn/faicons/ github项目地址：https://github.com/chengchuanqiang/jstreeDemo 2、jstreedemo主要文件 2.1、html页面代码 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jstree demo</title><link rel="stylesheet" href="jstree/dist/themes/default/style.min.css" /><link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" /> </head><body><div class="container"> <div class="row" style="height: 100px;"></div><div class="row"><div > <button class="btn btn-info" onclick="node_create()"> 新增 </button><button class="btn btn-info" onclick="node_rename()"> 编辑</button><button class="btn btn-info" onclick="node_delete()"> 删除</button></div></div><div class="row" style="height: 5px;"></div><div class="row"> <div class="col-md-3">  <div class="input-group row"> <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-screenshot"></i></span> <input type="text" class="form-control" placeholder="请输入功能名称..." id="search_ay" aria-describedby="basic-addon1"> </div>  <div id="jstree_demo_div" class="row"> </div> </div> <div lass="col-md-9"> <button class="btn btn-tab" var='json/data.json'>data.json</button>  <button class="btn btn-tab" var='json/data2.json'>data2.json</button>  <button class="btn refresh "><i class="glyphicon glyphicon-refresh"></i></button>  </div> </div> </div> <script src="jquery/jquery.min.js"></script><script src="jstree/dist/jstree.min.js"></script><script src="jstreeDemo.js?20180125"></script></body></html> 2.2、jstreeDemo.js代码 function jstree_fun(url){var $tree = $("jstree_demo_div").jstree({"core":{//'multiple': false, // 是否可以选择多个节点//"check_callback": true, // 允许拖动菜单唯一右键菜单"check_callback" : true,//设置为true,当用户修改数时,允许所有的交互和更好的控制(例如增删改)"themes" : { "stripes" : true },//主题配置对象,表示树背景是否有条带"data" : {//'url' : url,//'data' : function(node){//return { 'id' : node.id };//}"url" : url,"dataType" : "json"},"check_callback" : function(operation, node, node_parent, node_position, more){if(operation === "move_node"){var node = this.get_node(node_parent);if(node.id === ""){alert("根结点不可以删除");return false;}if(node.state.disabled){alert("禁用的不可以删除");return false;} }else if(operation === "delete_node"){var node = this.get_node(node_parent);if(node.id === ""){alert("根结点不可以删除");return false;} }return true;} },"plugins": [ //插件 "search", //允许插件搜索 // "sort", //排序插件 "state", //状态插件 "types", //类型插件 "unique", //唯一插件 "wholerow", //整行插件"contextmenu"],types:{ "default": { //设置默认的icon 图 "icon": "glyphicon glyphicon-folder-close", } } });$tree.on("open_node.jstree", function(e,data){ //监听打开事件var currentNode = data.node; data.instance.set_icon(currentNode, "glyphicon glyphicon-folder-open"); });$tree.on("close_node.jstree", function(e,data){ //监听关闭事件 var currentNode = data.node; data.instance.set_icon(currentNode, "glyphicon glyphicon-folder-close"); });$tree.on("activate_node.jstree", function(e, data){var currentNode = data.node; //获取当前节点的json .node //alert(currentNode.a_attr.id) //alert(currentNode.a_attr.href) //获取超链接的 .a_attr.href "链接" .a_attr.id ID //alert(currentNode.li_attr.href) //获取属性的 .li_attr.href "链接" .li_attr.id ID });// 创建$tree.on("create_node.jstree", function(e, data){alert("创建node节点");});// 修改$tree.on("rename_node.jstree", function(e, data){alert("修改node节点");});// 删除$tree.on("delete_node.jstree", function(e, data){alert("删除node节点");});// 查询节点名称var to = false;$("search_ay").keyup(function(){if(to){clearTimeout(to);}to = setTimeout(function(){$tree.jstree(true).search($('search_ay').val()); //开启插件查询后使用这个方法可模糊查询节点 },250);});$('.btn-tab').click(function(){ //选项事件 //alert($(this).attr("var")) $tree.jstree(true).destroy(); //可做联级 $tree = jstree_fun($(this).attr("var"));//可做联级 //alert($(this).attr("var")) }); $('.refresh').click(function(){ //刷新事件 $tree.jstree(true).refresh () }); return $tree; }function node_create(){var ref = $("jstree_demo_div").jstree(true);var sel = ref.get_selected();if(!sel.length){alert("请先选择一个节点");return;}sel = sel[0];sel = ref.create_node(sel);if(sel){ref.edit(sel); } }function node_rename(){var ref = $("jstree_demo_div").jstree(true);var sel = ref.get_selected();if(!sel.length){alert("请先选择一个节点");return;}sel = sel[0];ref.edit(sel);}function node_delete(){var ref = $("jstree_demo_div").jstree(true);var sel = ref.get_selected();if(!sel.length){alert("请先选择一个节点");return;}sel = sel[0];if(ref.get_node(sel).parent==''){alert("根节点不允许删除");return;}ref.delete_node(sel);}// 初始化操作function init(){var $tree = jstree_fun("json/data.json");}init(); 3、图片效果展示本篇文章为转载内容。原文链接：https://blog.csdn.net/qq_27717967/article/details/79167605。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-09-08 13:23:58

转载

JQuery

jquery改变css样式动画

...易于使用，但随着原生CSS3动画功能的增强和完善，开发者们有了更多的选择。近期，Web开发社区对CSS3动画的关注度日益提升，尤其是Transition和Animation属性的广泛运用，使得开发者无需依赖JavaScript库就能创建出平滑、高性能的动画效果。例如，通过CSS Transition可以轻松实现元素样式过渡，只需定义transition-duration、transition-property等属性即可；而CSS Animation则支持关键帧动画，允许开发者精细控制动画每一阶段的样式变化。同时，现代浏览器对于硬件加速的支持，使得CSS3动画在性能上甚至优于某些基于JavaScript实现的方案。诸如Animate.css、Hover.css等开源CSS动画库也应运而生，它们提供了丰富的预设动画效果，大大简化了开发流程。然而，这并不意味着jQuery过时或不再适用。在需要复杂交互逻辑或需兼容老旧浏览器的情况下，jQuery及animate方法依然具有不可替代的优势。因此，在实际项目中，开发者可以根据需求灵活选择jQuery与CSS3动画结合使用，以达到最佳的用户体验与开发效率。总的来说，无论是jQuery的animate方法还是CSS3原生动画，都是为了更好地服务于网页动态效果的设计与实现。在追求技术创新与优化体验的道路上，了解并掌握多种工具和技术的应用场景和优缺点，是每一位前端开发者不断提升自身能力的关键所在。

2023-11-29 08:09:32

378

软件工程师

转载文章

[转载]简单粗暴搞定webpack4的style-loader!css-loader

...域，Webpack对CSS的打包处理已成为现代项目构建流程中的重要一环。随着技术的发展和社区生态的完善，Webpack对于CSS的支持也在不断进化和完善。例如，近期发布的Webpack 5版本中，对模块联邦（Module Federation）的支持使得跨项目共享CSS模块成为可能，极大地提升了大型项目的组件复用与协同开发效率。同时，围绕Webpack进行优化和拓展的工具链也在持续发展。MiniCssExtractPlugin插件可以帮助开发者将CSS从JavaScript中提取出来，生成单独的CSS文件，这既有利于首屏加载性能优化，也便于服务端渲染场景下的样式应用。另外，PostCSS作为一种强大的CSS处理器，在Webpack构建流程中扮演着重要角色，通过各种插件如Autoprefixer可以自动添加浏览器前缀，确保兼容性；而CSS Modules则能在Webpack中实现真正的CSS局部作用域，避免命名冲突问题。此外，随着Tailwind CSS等实用工具类库的兴起，如何在Webpack配置中无缝集成这些库，实现高效的开发体验，也成为众多开发者关注的话题。Webpack不仅为CSS打包提供了解决方案，更是在推动前端工程化、模块化进程中起到了关键作用。综上所述，Webpack对CSS的打包处理不仅是技术演进的表现，更是契合当下前端开发实践需求的重要手段。紧跟社区动态，深入了解并合理运用Webpack及相关工具链的各种功能，有助于提升项目整体质量和开发团队的工作效率。

2023-03-13 11:42:35

转载

知识学习

实践的时候请根据实际情况谨慎操作。

随机学习一条linux命令：

sudo su - user - 切换到指定用户（需有sudo权限）。