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

html 非模糊绝对居中文本

在div上使用`transform：translateX（-50％）`会模糊文本。相反，使用此边距技巧。非常适合工作相对变量。 <br/> <br/>即：http：//cloud.madebyspeak.com/b51796 <br/>

html.html

<style>
  #staff-modal {
    position: fixed;
    left: 50%;
    width: 90vw;
    max-width: 100%;
    height: 500px;
  }
</style>

<div id="staff-modal">
   <div class="close-modal"></div>
   <div class="image"></div>
   <div class="info"></div>
</div>

<script>
  jQ171(document).ready(function($) {
   $(window).on("resize load", function() {
      $("#staff-modal").css("margin-left", "calc(-"+($("#staff-modal").outerWidth())+"px/2)");
   });
});
  
</script>

html 动画号码

当使用uikit scrollspy componentsnet进入视口时，为数字设置动画

animate-numbers.js

function animateNumbers() {

	var elements = document.querySelectorAll(".tm-animate-number");
	
	elements.forEach(e => {
	
		let current = 0;
		let end = e.getAttribute("data-number");
		let end_2 =  (end > 200) ? end - 50 : end;
		let increase_by =  (end > 200) ? 23 : 1;
		let duration = (end > 50) ? 5 : 80;
		
	
		UIkit.scrollspy(e, function() {
			e.addEventListener("inview", function() {
	
				var timer = setInterval(function() {
					current += increase_by;
					e.innerHTML = current;
					if (current >= end_2) {
						clearInterval(timer);
					}
				}, duration);
	
				// Last numbers increase by 1 if its more then 200
				if(end > 200) {
					var timer2 = setInterval(function() {
					current += 1;
					e.innerHTML = current;
					if (current == end) {
						clearInterval(timer2);
					}
				}, 20);
				}
	
			});
		});
	
	});

}

// Run Function
animateNumbers();

animateNumbers.html

<div>
	<span class="tm-animate-number" data-number="1200"></span>
	<span class="tm-animate-number" data-number="220"></span>
	<span class="tm-animate-number" data-number="10"></span>
	<span class="tm-animate-number" data-number="2000"></span>
</div>

html Mẫu选择

select.html

<div class="col-lg-3 col-md-3 col-sm-3 col-margin-xs">
  <label>Users</label>
  <div>
    <ui-select ng-model="filter.ui_select_user"
      ng-change="search();"
      ng-disabled="isSearching">

      <ui-select-match placeholder="Search member">
        <span ng-if="!$select.selected.key">All users</span>
        <span ng-if="$select.selected.key" ng-bind="$select.selected.name"></span>
      </ui-select-match>

      <ui-select-choices repeat="user in users | limitFilterUser:$select.search track by user.key">
        <span ng-if="!user.key" translate="All users"></span>
        <span ng-if="user.key" ng-bind="user.name"></span>
      </ui-select-choices>
    </ui-select>
  </div>
</div>

html Angular ngb popover

ngb popover

                        <div class="row" *ngIf="details?.customer.out_customer_id && showCancelContract" style="margin-left: 775px;" >
                          <button id="btnCancelContract" class="button button-red button-mid" [ngbPopover]="popContent"
                            popoverTitle="Cancel Contract" #p="ngbPopover" placement="right">CANCEL CONTRACT</button>
    
                          <ng-template #popContent>
                            <p>Are you sure you want to cancel the contract?</p>
                            <div class="col align-center">
                              <button class="button-hover-white" (click)="[p.close(), cancelContract()]">Yes</button>
                              <button class="button-hover-white" (click)="p.close()">No</button>
                            </div>
                          </ng-template>
                        </div>

html 签名

signature

<p class="MsoNormal"><b><span style="font-size:10.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#0097CC">Mohsen Takmili</span></b><b><span style="font-size:7.5pt;font-family:&quot;Verdana&quot;,sans-serif"><br></span></b><b><span style="font-size:8.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#E21665">Developer Expert</span></b><span style="font-size:8.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#5F5F5F"><br></span><span style="font-size:8.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#7F7F7F">Citynet IT Solution<br>
Unit 12, No. 3,Farhad Alley, Khorramshahr (Apadana) St., Tehran, IRAN.<br>
T: +98 21 88 47 39</span> <span style="font-size:8.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#7F7F7F">08<br><a href="javascript:void(window.open('/cpsess8342611731/horde/imp/dynamic.php?page=compose&amp;to=takmili%40citynet.ir&amp;popup=1','','width=820,height=610,status=1,scrollbars=yes,resizable=yes'))"><span style="color:#0563C1">takmili@citynet.ir</span></a></span></p>
<p class="MsoNormal"><span style="font-size:8.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#7F7F7F"><a href="http://www.citynet.ir/" target="MCFGEfondDadZ9f6HS8UyPk" rel="noopener noreferrer"><span style="color:#7F7F7F">www.citynet.ir</span></a></span></p>
<p class="MsoNormal"><img border="0" width="169" height="39" id="Picture_x0020_3" src="https://user-generated.getmailspring.com/asset/YWFhYTFlNzktNTIzMC00YTgyLWJlMjktMmFiMmYxYTBhMTBiL3NpZy1pbml0aWFsLnBuZw.png?t=1558416899582&amp;msw=169&amp;id=2&amp;imp_img_view=data&amp;actionID=view_attach&amp;muid=%7B5%7DINBOX64&amp;view_token=geB7F7FQPw2_quG-Q8h8O-Q" alt="cid:image003.png@01D1E803.E6C7BA50" name="Picture_x0020_3"></p>

html AWS IP和区域标识符

AWS IP和区域标识符

index.html

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

    <style type="text/css">
        @import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';
        .dud {
            color: #38a169;
        }
    </style>
</head>

<body class="h-screen">
    <div class="bg-green-500 justify-center items-center ">
        <object height="55" type="text/plain" data="server_details.txt"></object>
    </div>
    <div class="bg-gray-900 h-screen font-sans">
        <div class="container mx-auto h-full flex justify-center items-center">
            <div class="text text-green-400 text-2xl font-hairline"></div>
        </div>
    </div>

    <script type="text/javascript">
        // ——————————————————————————————————————————————————
        // TextScramble - https://codepen.io/soulwire/pen/mErPAK
        // ——————————————————————————————————————————————————

        class TextScramble {
            constructor(el) {
                this.el = el
                this.chars = '!<>-_\\/[]{}—=+*^?#________'
                this.update = this.update.bind(this)
            }
            setText(newText) {
                const oldText = this.el.innerText
                const length = Math.max(oldText.length, newText.length)
                const promise = new Promise((resolve) => this.resolve = resolve)
                this.queue = []
                for (let i = 0; i < length; i++) {
                    const from = oldText[i] || ''
                    const to = newText[i] || ''
                    const start = Math.floor(Math.random() * 40)
                    const end = start + Math.floor(Math.random() * 40)
                    this.queue.push({
                        from, to, start, end
                    })
                }
                cancelAnimationFrame(this.frameRequest)
                this.frame = 0
                this.update()
                return promise
            }
            update() {
                let output = ''
                let complete = 0
                for (let i = 0, n = this.queue.length; i < n; i++) {
                    let {
                        from, to, start, end, char
                    } = this.queue[i]
                    if (this.frame >= end) {
                        complete++
                        output += to
                    } else if (this.frame >= start) {
                        if (!char || Math.random() < 0.28) {
                            char = this.randomChar()
                            this.queue[i].char = char
                        }
                        output += `<span class="dud">${char}</span>`
                    } else {
                        output += from
                    }
                }
                this.el.innerHTML = output
                if (complete === this.queue.length) {
                    this.resolve()
                } else {
                    this.frameRequest = requestAnimationFrame(this.update)
                    this.frame++
                }
            }
            randomChar() {
                return this.chars[Math.floor(Math.random() * this.chars.length)]
            }
        }

        // ——————————————————————————————————————————————————
        // Example
        // ——————————————————————————————————————————————————

        const phrases = [
            'Neo,',
            'sooner or later',
            'you\'re going to realize',
            'just as I did',
            'that there\'s a difference',
            'between knowing the path',
            'and walking the path'
        ]

        const el = document.querySelector('.text')
        const fx = new TextScramble(el)

        let counter = 0
        const next = () => {
            fx.setText(phrases[counter]).then(() => {
                setTimeout(next, 800)
            })
            counter = (counter + 1) % phrases.length
        }

        next()
    </script>
</body>

</html>

html WordPress搜索和导航弹出Полезности

script.js

// ========================================================================================
// search-and-navigation-popup - При клике на овердей скрываем попап окно поиска
// START
// ========================================================================================
jQuery(document).ready(function($) {
$('body').bind('click', '.custombox-content.custombox-fullscreen:not(.sanpop-search-box)',function(event) {
	// Для того что бы исключить скрытие формы при клике по Input'у
	// Вычисляем ID родителя при клике на оверлей (Ну и он отличается от ID родителя при клике в Input или кнопку отправки)
    // 	console.log(event.target.id);
	var ParrentOverley = event.target.id;
	if (ParrentOverley == 'sanpop-modal-1'){
		// console.log('

html Angular：Mime图标文件类型

FileIconPipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'fileIcon'
})
export class FileIconPipe implements PipeTransform {

  transform(fileType: string): string {
    switch (fileType) {
        // images
        case 'image/png': {
            return 'file-image';
        }
        case 'image/jpeg': {
            return 'file-image';
        }
        case 'image/bmp': {
            return 'file-image';
        }
        case 'image/svg+xml': {
            return 'file-image';
        }
        case 'image/tiff': {
            return 'file-image';
        }
        // audio
        case 'audio/mpeg': {
            return 'file-audio';
        }
        case 'audio/ogg': {
            return 'file-audio';
        }
        case 'audio/wav': {
            return 'file-audio';
        }
        case 'audio/aac': {
            return 'file-audio';
        }
        // video
        case 'video/x-msvideo': {
            return 'file-video';
        }
        case 'video/mpeg': {
            return 'file-video';
        }
        case 'video/3gpp': {
            return 'file-video';
        }
        // other
        case 'application/pdf': {
            return 'file-pdf';
        }
        case 'application/msword': {
            return 'file-word';
        }
        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
            return 'file-word';
        }
        default: {
            return 'file';
        }
    }
  }
}

module.ts

import {FileIconPipe} from 'app/shared/file-icon.pipe';

@NgModule({
    declarations: [ FileIconPipe],
    exports: [FileIconPipe],
})

use.html

<fa-icon [icon]="file.fileType | fileIcon"></fa-icon>

html Formulario Entrada HTML5 / CSS

Formulario de entrada con codigo en HTML y CSS

FormularioHTML-CSS.html

<!--------------------------------->
<!-- Formulario de entrada HTML---->
<!--------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Metadatos Web -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- HTML Meta Tags -->
    <title>Formulario</title>
    <meta name="description" content="">

    <!-- Google / Search Engine Tags -->
    <meta itemprop="name" content="">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="http://">

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="http://">
    <meta property="og:type" content="website">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="http://">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="http://">

<!-- archivos externos -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

    <h4 class="titulo">formulario de contacto</h4>
    <form action="enviar.html" method="post">
        <input type="text" name="nombre" id="nombre" placeholder="* nombre">    
        <input type="text" name="apellidos" id="apellidos" placeholder="* apellidos">
        <input type="text" name="movil" id="movil" placeholder="móvil">
        <input type="email" name="email" id="email" placeholder="* email">
        <textarea name="comentario" id="comentario" rows="10">* comentario</textarea>
        <button type="submit">enviar</button>
    </form>

</body>
</html>

/********************************
    Formulario de entrada CSS ***
*********************************/

/* Estilos Básicos */
/* *************** */
*{
    box-sizing: border-box;
}
/* Tipografía */
html{
    font-family: arial, sans-serif;
    font-size: 16px;
}
::placeholder, textarea{
    font-size: 1.2rem;
}

/* Colores */
body{
    background-color: #F5F5F5;
}
input, textarea{
    border: 0;
}
.titulo{
    color: #a2a2a2;
}
::placeholder, #comentario{
    color: #a0a0a0;
}
#comentario{
    color: #d0d0d0;
}


/* Enlaces */


/* Botones */
button{
    background-color: #C7C7C7;
    border: 0;
    padding: 0.5rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #fff;
    border-radius: 1.3rem;
}

/* Margenes */
body{
    padding: 1rem 2rem 3rem 2rem;
    height: 100vh;
}

/* Tamaños */
.titulo{
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: bold;
}
input{
    height: 50px;
    padding: 0.5rem;
}
textarea{
    padding: 0.5rem;
    flex-grow: 0.7;
}

/* Maquetación del contenido */
/* ************************ */
.titulo{
    text-align: center;
    margin-bottom: 2rem;
}
form{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 2rem);
}

html 动态页脚日期

phpfooter

<?php echo date("Y"); ?>

htmlfooter

<script type="text/javascript">
  document.write(new Date().getFullYear());
</script>