css,Code片段,代码实例,代码示例,代码片段库

css 确认对话框

confirm.css

.confirm-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 1;
}
.confirm-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.confirm-container {
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.2em;
    min-width: 300px;
}
.confirm-title-container {
    font-size: 1.3em;
    padding: 10px;
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
}
.confirm-content-container {
    padding: 0px 10px 15px 10px;
}
.confirm-buttons-container {
    padding: 5px 15px 10px 15px;
    text-align: right;
}
.confirm-buttons-container button {
    margin-left: 10px;
    min-width: 80px;
    line-height: 20px;
    border-style: solid;
    border-radius: 0.2em;
    padding: 3px 6px;
    cursor: pointer;
}
.confirm-cancel {
    background-color: #fff;
    border-color: #848e97;
}
.confirm-cancel:hover {
    border-color: #6c757d;
}
.confirm-ok {
    background-color: #848e97;
    border-color: #848e97;
    color: #fff;
}
.confirm-ok:hover {
    background-color: #6c757d;
    border-color: #6c757d;
}

css 根据区域设置更改Force主题中的评论标题

css

:root {
    --add-review-block-title:'ADD REVIEW'
}
[lang="en"] {
    --add-review-block-title:'ADD EN'
}
[lang="es"] {
    --add-review-block-title:'ADD ES'
}

css 縦横比を维持しながら横幅いっぱいに背景画像を表示

（参考サイト）<br/> https://www.nxworld.net/tips/css-background-aspect-ratio.html

style.css

.background {
  width: 100%;
  height: 0;
  padding-top: calc(300 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(bg.jpg) center center / cover no-repeat;
}

css solo numeros，输入数字

css

 , p_attributes => ' input type="number" pattern="[0-9]*" inputmode="numeric" class="text-qty-rcvd small-width" onkeypress="return isNumber(event)"; id="f02_' || rownum || '"')  as received

css 提取了Ace Admin多级菜单

Ace Admin Multi Level Menu

<!-- L1 ul -->
				<ul class="nav nav-list">
					<!-- L1 li -->
					<li class="active">
						<a href="index.html">
							<i class="menu-icon fa fa-tachometer"></i>
							<span class="menu-text"> Dashboard </span>
						</a>

						<b class="arrow"></b>
					</li>
					
					<!-- L1 li -->
					<li class="">
						<a href="#" class="dropdown-toggle">
							<i class="menu-icon fa fa-desktop"></i>
							<span class="menu-text">
								UI &amp; Elements
							</span>

							<b class="arrow fa fa-angle-down"></b>
						</a>

						<b class="arrow"></b>
						
						<!-- L2 ul -->
						<ul class="submenu">
							<!-- L2 li -->							
							<li class="">
								<a href="#" class="dropdown-toggle">
									<i class="menu-icon fa fa-caret-right"></i>

									Three Level Menu
									<b class="arrow fa fa-angle-down"></b>
								</a>

								<b class="arrow"></b>
								
								<!-- L3 ul -->
								<ul class="submenu">
									<!-- L3 li -->
									<li class="">
										<a href="#">
											<i class="menu-icon fa fa-leaf green"></i>
											Item #1
										</a>

										<b class="arrow"></b>
									</li>
									
									<!-- L3 li -->
									<li class="">
										<a href="#" class="dropdown-toggle">
											<i class="menu-icon fa fa-pencil orange"></i>

											4th level
											<b class="arrow fa fa-angle-down"></b>
										</a>

										<b class="arrow"></b>
										
										<!-- L4 ul -->
										<ul class="submenu">
											<!-- L4 li -->
											<li class="">
												<a href="#">
													<i class="menu-icon fa fa-plus purple"></i>
													Add Product
												</a>

												<b class="arrow"></b>
											</li>											
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul><!-- /.nav-list -->

css 在IE上停止紧张的固定背景滚动

在IE上为`background-attachment：fixed`元素停止抖动

iefix

/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

css Firefox - Автоматомзакрепитьвсе固定背景

backgroun-fixed.css

section,
section div,
.elementor-background-overlay div
section {
  background-attachment: local !Important;
}

section,
section div,
div,
.elementor-background-overlay div
section {
  background-attachment: local !Important;
  background-size: cover;
  background-attachment: initial;
}

css datepicker修复可能

css

#ui-datepicker-div{
  top: 0 !important;
  left: 0 !important; 
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin-top: 0;
}

css MDIA Bontoala自定义CSS

custom.css

.header-main {
	border-bottom: 1px solid #ebebeb;
}

.header-main.sticky-header {
	border-bottom-color: transparent;
}

.header-v2 .navbar-nav > li > a:before {
	bottom: -1px;
}

.header-logo .logo {
	max-width: 80px;
}

.header-v2 .navbar-nav > li {
	padding-right: 0;
}

#ninzio-header.header-v2 .navbar-nav > li > a {
    color: #555 !important;
    padding-left: 2em;
    padding-right: 2em;
    font-weight: bold;
}

.ninzio-breadscrumb.layout2 {
	margin-bottom: 2em;
}

.page-contact .ninzio-breadscrumb.layout2 {
	margin-bottom: 0;
}

.testimonial-meta .name-client {
	display: block;
	font-weight: bold;
	font-size: 1.2em;
}

.testimonial-meta .space {
	display: none;
}

.top-information a {
    font-weight: bold;
    color: #11b67a !important;
    font-size: 1.1em;
    letter-spacing: 1px;
}

.mr-1 {
	margin-right: 1em;
}

.mr-2 {
	margin-right: 2em;
}

.widget.widget-text-heading.text-center.style1:before {
	right: 0;
	margin: auto;
}

.wpcf7-form {
	max-width: 600px;
}

.label-left .nf-field-label {
	width: 25% !important;
	text-align: left !important;
}

css span nowrap，no salto de linea wrapspan

css

span
{
  white-space: pre;
}


normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.