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

html ImgEncimaTxt

Imagen con texto encima

imgEncimaTxt.html


figure{
    // crear la caja que encierra el figcaption
    height: 400px;
    position: relative;

    // Elevar el texto por encima de la img/picture
    figcaption{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
    }
}

html Fondo y Texto encima

Imagen con texto por encima

FondoyTextoEncima.htm

// Método - Fondo con texto encima
figure{
        // Tamaño de la caja
        height: 400px;

        // Fondo Múltiple
        background: 
                    url(../assets/img/desktop/@1x/oscurecer.png),
                    url(../assets/img/desktop/@1x/banner.jpg) 50% 20% / cover no-repeat;

        // Texto
        figcaption{
            font-size: 5rem;
            color: white;
        }
}

html 排除坏词

badWords

<!-- Insert in Javascript -> Footer -->
<script>
function validateInput(field) {
  window.__custom_form_validations.push(
    {
      fieldName: field,
      validationFn: function (input) {
        var excludeRegex = /^((?!(word|anal|anus|arse|ass|ass fuck|ass hole|assfucker|asshole|assshole|bastard|bitch|black cock|bloody hell|boong|cock|cockfucker|cocksuck|cocksucker|coon|coonnass|crap|cunt|cyberfuck|damn|darn|dick|dirty|douche|dummy|erect|erection|erotic|escort|fag|faggot|fuck|Fuck off|fuck you|fuckass|fuckhole|god damn|gook|hard core|hardcore|homoerotic|hore|lesbian|lesbians|mother fucker|motherfuck|motherfucker|negro|nigger|orgasim|orgasm|penis|penisfucker|piss|piss off|porn|porno|pornography|pussy|retard|sadist|sex|sexy|shit|slut|son of a bitch|suck|tits|viagra|whore|xxx))[\s\S])*$/;
        return {
          isValid: excludeRegex.test(input.value.toLowerCase()),
          message: window._Translate.get('contains bad word'),
        };
      },
    }
  );
}

$(document).ready(function () {
  window.__custom_form_validations = [];

  $('input[type="text"], textarea, input[type="email"]').each(function () {
    validateInput($(this).attr('name'));
  });
});
</script>

html 将表单字段值发送到URL

URLparameters

<script>
window.instapageFormSubmitSuccess = function (form) {
  var queryString = '';
  $(form).find('input[type="text"], input[type="email"], select, textarea, input[type="checkbox"]:checked, input[type="radio"]:checked').each(function () {
    queryString += '&' + $(this).attr('name').toLowerCase().replace(/\ /g, '_') + '=' + encodeURI($(this).val());
  });
  queryString = queryString.replace('&', '?');

  var redirect_url = $(form).find('input[name="redirect"]').val();
  $(form).find('input[name="redirect"]').val(redirect_url + queryString);
}
</script>

html Styde APP的下拉切换

dropdown-toggle

<button class="btn dropdown-toggle notes__tag" type="button" data-toggle="dropdown" id="tagOptions">${el.tag}</button>
<div class="dropdown-menu" aria-labelledby="tagOptions">
  <a class="dropdown-item" href="#">Tag 1</a>
  <a class="dropdown-item" href="#">Tag 2</a>
  <a class="dropdown-item" href="#">Tag 3</a>
</div>

html 用占位符显示和隐藏标记

要显示和隐藏标记块，您可以使用asp：占位符，因此在后面的代码中，您将显示或隐藏它，如下所示： if（chkApprentice.Checked） { plcTrainee.Visible = false; plcApprentice.Visible = true; }

.html

<asp:PlaceHolder ID="plcApprentice" runat="server">
  <div class="row">
    <div class="col-12">
      <div class="form-group">
        <asp:Label ID="lblApprenticeProbation" runat="server" CssClass="label" AssociatedControlID="txtApprenticeProbationPeriod" EnableViewState="false">Probation Period in Months <em>*</em></asp:Label>
        <asp:TextBox ID="txtApprenticeProbationPeriod" runat="server" CssClass="form-control" placeholder="e.g. 6"></asp:TextBox>
      </div>
    </div>
  </div>
</asp:PlaceHolder>

html LRM ::自定义电话字段用于注册表单

LRM ::自定义电话字段用于注册表单

lrm_phone_filed.html

<div class="fieldset fieldset--phone">
      <label class="image-replace lrm-email lrm-ficon-mail" title="phone*"></label>
      <input name="phone" class="full-width has-padding has-border" type="text" placeholder="Phone*" required="">
      <span class="lrm-error-message"></span>
</div>

html 自定义验证器

比直接js稳定得多。 在js函数中，如果有效则设置args.IsValid = true，如果根据可以跨越其他控件的自定义规则无效则设置为false 错误消息将作为放置它的元素写出在标记中。 注意：不要分配属性ControlToValidate。别管它。添加它会阻止它工作

.html

 <asp:CustomValidator ID="cus_WageInstallments"
          runat="server"
          ClientValidationFunction="ValidateWageInstallments"
          ValidationGroup="DocForm"
          CssClass="text-danger"
          Display="Dynamic"
          Text="Please select a Wage Installment"></asp:CustomValidator>
          
          
// and your js
function ValidateWageInstallments(sender, args) {

    var weeklyCheckbox = document.getElementById("chkWeekly");
    var monthlyCheckbox = document.getElementById("chkMonthly");

    args.IsValid = true;
    if (weeklyCheckbox && monthlyCheckbox) {

        if (!weeklyCheckbox.checked && !monthlyCheckbox.checked) {
            args.IsValid = false;
        }        
    }
}

html 链接到同一页面上的锚点

anchor.html

<a href="#generator">Example headline</a>
<h2><a id="generator" hidden></a>HTML link code generator</h2>

html 英雄滑块

heroslider


*******the mf html******


<div class="hero" id="heroslide">


</div><!--end.hero-->



***********the css**************

.hero{
	  margin: 0;
	  background-size: cover;
	  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-lonely.jpg") no-repeat center center fixed;
	  background-blend-mode: darken;
	  transition: 3s;
		height:500px;
 }

*******the ACF Repeater*********

<?php

			$basePath = "";

					if( have_rows('background_slider') ):

							while ( have_rows('background_slider') ) : the_row();

									$imgURl = get_sub_field('background_image');
									$sliderImg[] = $imgURl;

							endwhile;

					endif;

		?>

*****the js***************

var bgImageArray = ["lonely.jpg", "uluwatu.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
		new Image().src = base + img;
		// caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
	window.clearTimeout();
	var k = 0;
	for (i = 0; i < bgImageArray.length; i++) {
		setTimeout(function(){
			document.getElementById('heroslide').style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
			document.getElementById('heroslide').style.backgroundSize ="cover";
		if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }
		}, (secs * 1000) * i)
	}
}
backgroundSequence();


******js with conditional screen size statement*************
//slider to fire above 780px
if (screen.width >= 780) {
				//convert php array to JS array
				var bgImageArray = <?php echo json_encode($sliderImg); ?>;
				//set our basepath
				base = "<?php echo $basePath ?>",
				secs = 4;
				//caches images, avoiding white flash between background replacements
				bgImageArray.forEach(function(img){
						new Image().src = base + img;
				});

				function backgroundSequence() {
					window.clearTimeout();
					var k = 0;
					for (i = 0; i < bgImageArray.length; i++) {
						setTimeout(function(){
							document.getElementById('heroslide').style.background = "url(" + base + bgImageArray[k] + ") no-repeat top center fixed";
							document.getElementById('heroslide').style.backgroundSize ="cover";
						if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 2000))} else { k++; }
					}, (secs * 2000) * i)
					}
				}
				backgroundSequence();
//dont use slider on mobile and set background image
			} else if (screen.width <= 779) {
					document.getElementById('heroslide').style.background = "url('images/mobile-back.jpg') no-repeat";
					document.getElementById('heroslide').style.backgroundSize ="contain";
			}
			
			****** NEEDS REFACTORING js with conditional screen size statement v2*************
			<script>
				//convert php array to JS array
				var bgImageArray = <?php echo json_encode($sliderImg); ?>;
				//set our basepath
				base = "<?php echo $basePath ?>",
				secs = 4;
				//caches images, avoiding white flash between background replacements
				bgImageArray.forEach(function(img){
						new Image().src = base + img;
				});



			if (screen.width >= 780) {

				function backgroundSequence() {
					window.clearTimeout();
					var k = 0;
					for (i = 0; i < bgImageArray.length; i++) {
							setTimeout(function(){
								document.getElementById('heroslide').style.background = "url(" + base + bgImageArray[k] + ") no-repeat top center fixed";
								document.getElementById('heroslide').style.backgroundSize ="cover";
							if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 2000))} else { k++; }
						}, (secs * 2000) * i)
					}
				}
				backgroundSequence();

			} else if (screen.width <= 779) {

				function backgroundSequence() {
					window.clearTimeout();
					var k = 0;
					for (i = 0; i < bgImageArray.length; i++) {
							setTimeout(function(){
								document.getElementById('heroslide').style.background = "url(" + base + bgImageArray[k] + ") no-repeat top center fixed";
								document.getElementById('heroslide').style.backgroundSize ="contain";
								document.getElementById('heroslide').style.backgroundAttachment ="scroll";
							if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 2000))} else { k++; }
						}, (secs * 2000) * i)
					}
				}
				backgroundSequence();
				// document.getElementById('heroslide').style.background = "url('images/mobile-back.jpg') no-repeat";


			}
		</script>