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

html 语气

modal.html

 <!-- MODAL TRIGGER -->
      <button class="btn btn-info" data-toggle="modal" data-target="#myModal">
        Launch Modal
      </button>

      <!-- MODAL -->
      <div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal Title</h5>
              <!-- close btn -->
              <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Temporibus unde veniam harum magnam molestias dignissimos omnis
              architecto, quod, obcaecati dolorum debitis dolore porro qui,
              iusto quo accusantium voluptates pariatur illo.
            </div>
            <div class="modal-footer">
              <button class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

html ScrollSpy

scrollspy.html

 nav elemendil peab olema id ja igal sektsioonil peab olema id, millele viidatakse nav'is
 <nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#welcome">Welcome</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li class="nav-item">
        </ul>
      </div>
    </nav>
    
    <script>
    // scrollspy
    $('body').scrollspy({target:'#main-nav'});
    // smoothscroll
    $('#main-nav a').on('click', function(e){
      if(this.hash !== ''){
        e.preventDefault();
        // store hash
        const hash = this.hash;
        // animate smoothscroll
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 900, function(){
          // hash to url
          window.location.hash = hash;
        })
      }
    })
  </script>

html 使用JQuery引导CDN

bootstrap.html

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

html Angular：下载并显示图像

file-response.model.ts

export interface IFileResponse {
    fileName?: string;
    fileDownloadUri?: string;
    fileType?: string;
    size?: number;
}

export class FileResponse implements IFileResponse {
    constructor(public fileName?: string, public fileDownloadUri?: string, public pubfileType?: string, public size?: number) {}
}

file.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

type EntityResponseType = HttpResponse<IFileResponse>;
type EntityArrayResponseType = HttpResponse<IFileResponse[]>;

@Injectable({
    providedIn: 'root'
})
export class FileService {
    public resourceUrl = SERVER_API_URL + 'api/files';

    constructor(protected http: HttpClient) {}

    upload(file: File): Observable<EntityResponseType> {
        const formData = new FormData();
        formData.append('file', file);

        return this.http.post<IFileResponse>(`${this.resourceUrl}/`, formData, { observe: 'response' });
    }

    download(fileName: string) {
        return this.http.get(`${this.resourceUrl}/${fileName}`, { observe: 'response', responseType: 'blob' });
    }
}

entity.model.ts

export interface ICourse {
    imageUrl?: string;
}

export class Course implements ICourse {
    constructor(
        public imageUrl?: string
    ) {}
}

entity-update.component.ts

import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { FileService } from 'app/files/file.service';
import { IFileResponse } from 'app/shared/model/file-response.model';

@Component({
    selector: 'entity-update',
    templateUrl: './entity-update.component.html'
})
export class EntityUpdateComponent implements OnInit {
  imageMain?: File;
  
  constructor(
        //...
        protected fileService: FileService,
        protected fb: FormBuilder
    ) {}
    
    setNewForm(institutionId: number) {
        this.form = this.fb.group({
            imageUrl: new FormControl()
        });
    }
    
    onFileSelect(event) {
        if (event.target.files.length > 0) {
            const file = event.target.files[0];
            console.log('selected file: ' + file.name);
            this.imageMain = file;
        }
    }
    
    uploadMainImage(file: File) {
        console.log(`uploading main image: ` + file.name);
        this.fileService.upload(file).subscribe(
            (response: HttpResponse<IFileResponse>) => {
                this.course.imageUrl = response.body.fileName;
            },
            (res: HttpErrorResponse) => {
                console.error(`error saving file: ${file.name}`);
            }
        );
    }
}

entity-update.component.html

<div class="form-group">
  <label class="form-control-label" for="imageMain">Image Main</label>
  <input type="file" formControlName="imageMain" name="imageMain" id="imageMain"
   (change)="onFileSelect($event)">
</div>

entity-detail.component.ts

import { FileService } from 'app/files/file.service';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
    selector: 'entity-detail',
    templateUrl: './entity-detail.component.html'
})
export class EntityDetailComponent implements OnInit {
    imageMain?: Blob;
    imageUrl?;
    
    constructor(
        protected fileService: FileService,
        protected sanitizer: DomSanitizer
    ) {}
    
    ngOnInit() {
        this.activatedRoute.data.subscribe(({ entity }) => {
            this.entity = entity;
            this.fileService.download(this.entity.imageUrl).subscribe(res => {
                console.log('image downloaded...');
                this.imageMain = new Blob([res.body], { type: res.headers.get('Context-Type') });
                this.imageUrl = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(this.imageMain));
            });
        });
    }
}

entity-detail.component.html

 <!-- main image -->
<div>ImageMain: {{course.imageMain}}</div>
<img *ngIf="imageUrl" [src]="imageUrl"/>

html 在预览中隐藏

Hide in preview

<!--%%[if _messagecontext == "no show" then]%%--><table class="fluid-centered" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
  <tr>
   <td style="color:#666666;padding:25px; border:1px dotted #666666;" valign="top" align="center">
   <b> Laat dit blokje hier staan.</b> <br>Deze bevat de benodigde code om de mail goed te laden.<br> (Deze verdwijnt in de Preview)<br></td></tr></table>
<!--%%[endif]%%-->

html pdoToolsфильтрацияпоTV

pdotools_filter_tv

[[!pdoResources?
	&parents=`2`
	&includeTVs=`myTV`
	&where=`{"myTV:>":10}`
]]

html 响应电话

Enleverladétectionautomatiqued'unnumérourEdge et Iphone

html 表单提交后显示弹出窗口

example.html

<!-- Paste the following code under Settings - HTML/CSS, HEAD -->

<style>
  #submit-in-progress-popup,
  #submit-success-popup {
	    display: none !important;
}
</style>
  
<!-- Paste the following code under Settings - JavaScript, FOOTER -->

<script>
    // Make sure you name the button that will contain the popup -> "popup"
    var popupButton = $('.popup-link:contains(popup)');		
    window.instapageFormSubmitSuccess = function( form ){
    	popupButton[0].click();
    };
</script>

html 欧洲体育

gss

<!-- Insert in Javascript->Footer -->
<script>
$(document).ready(function () {
    var getUrlParameter = function getUrlParameter(sParam) {
        var sPageURL = window.location.search.substring(1),
            sURLVariables = sPageURL.split('&'),
            sParameterName,
            i;
        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');

            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
            }
        }
    };

    function setDefault() {
        header.text('eurosport header');
        subtitle.text('');
        header.show(); subtitle.show();
        imageBg.css('background-image', 'url(//v.fastcdn.co/u/1423139a/36217032-0-EPGimage-Cycling.jpg),url(//v.fastcdn.co/t/a4e5fed3/1c4aaebf/1563449213-36217032-ghost-EPGimage-Cycling.jpg)');
    }

    var esp = getUrlParameter('esp');

    var header = $("span b:contains('{header}')").addClass('hidden');
    var subtitle = $("span b:contains('{subtitle1}')").addClass('hidden');
    var imageBg = $('main > .section:first .section-block').css('background-image', 'none');
    var pagetitle = $('title');

    if (esp === undefined) {
        setDefault();
    }
    else {
        var foundEsp = false;
        // ID of the Google Spreadsheet
        var spreadsheetID = "1Cq1BKu8L-SKt9vRRSS8s00yXrJo-pNK-DMFZCxUHoug";
        var sheetNumber = 2;
        // Make sure it is public or set to Anyone with link can view
        var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/" + sheetNumber + "/public/values?alt=json"; //this is the part that's changed

        $.getJSON(url, function (data) {
            esp = "esp=" + esp;
            var entry = data.feed.entry.slice(2);

            $(entry).each(function () {
                if (esp === this.gsx$_cre1l.$t) {
                    foundEsp = true;
                    header.text(this.gsx$_chk2m.$t);
                    subtitle.text(this.gsx$_ciyn3.$t);
                    if (this.gsx$_clrrx !== undefined) {
                        imageBg.css('background-image', 'url(' + this.gsx$_clrrx.$t + ')');
                    }
                    pagetitle.text(this.gsx$_cyevm.$t);
                    header.show(); subtitle.show();
                    return false;
                }
            });
        }).always(function () {
            if (!foundEsp) {
                setDefault();
            }
        });
    }
});  //ready
</script>

custom_font

<!-- Insert in HTML/CSS->Head -->
<style>
@font-face {
  font-family: 'ESPAlphaHeadlineTab';
  src: url('https://storage.googleapis.com/instapage-app-assets/1523983787_espalphaheadlinetab-regular.otf');
  font-style: normal;
  font-weight: normal;
}
/* ------- This code will update all the heading fonts, h1-h6------- */
.headline {
  font-family: 'ESPAlphaHeadlineTab' , sans-serif !important;
}
</style>

html 仿IE风格的表单和列表组件

form

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		* {
		    border: 0;
		    margin: 0;
		    padding: 0;
		    font-weight: normal;
		    vertical-align: middle;
		}
		body {
		    font-family: Verdana, sans-serif;
		    font-size: 12px;
		    margin: 0 auto;
		    padding: 10px;
		    width: 980px;
		}
		h1, h2, h3, h4 {
		    font-weight: bold;
		}
		h1 {
		    font-size: 18px;
		}
		h2 {
		    font-size: 16px;
		}
		h3 {
		    font-size: 14px;
		}
		h4 {
		    font-size: 12px;
		}
		a,
		a:before,
		a:after {
		    color: blue;
		    text-decoration: underline;
		}
		a:hover {
		    color: red;
		}
		input, select, textarea, button {
		    font-family: inherit;
		    font-size: 12px;
		    outline: none;
		}
		textarea {
		    resize: none;
		    overflow-y: auto;
		}
		select {
		    border: 1px solid #CCC;
		    height: 30px;
		    padding: 5px;
		    width: 212px;
		}
		input[type="text"] {
		    height: 18px;
		}
		input[type="text"],
		input[type="password"],
		textarea {
		    border: 1px solid #CCC;
		    padding: 5px;
		    width: 200px;
		}
		input[type="text"]:focus,
		input[type="password"]:focus,
		textarea:focus,
		select:focus {
		    border-color: #000;
		}
		input[type="file"] {
		    border: 1px solid #CCC;
		    padding: 3px 3px 4px 3px;
		}
		button {
		    background-color: #EEE;
		    border: 1px solid #CCC;
		    cursor: pointer;
		    height: 30px;
		    padding: 5px;
		    min-width: 30px;
		}
		button:hover:not(:disabled) {
		    background-color: #DDD;
		}
		*:disabled {
		    background-color: #FFF;
		    cursor: not-allowed !important;
		    opacity: 0.5;
		}
		.css-form {
		    border: 1px solid #CCC;
		}
		.css-form-header {
		    border-bottom: 1px solid #CCC;
		    clear: both;
		    height: 17px;
		    padding: 10px;
		}
		.css-form-row {
		    padding: 10px 20px;
		}
		.css-form-row label {
		    cursor: pointer;
		    float: left;
		    padding-top: 8px;
		    width: 100px;
		}
		.css-form-footer {
		    border-top: 1px solid #CCC;
		    padding: 10px;
		}
		.css-table {
		    border: 1px solid #CCC;
		    border-collapse: collapse;
		    width: 100%;
		    margin-bottom: 10px;
		}
		.css-table thead tr td {
		    border-bottom: 1px solid #CCC;
		    padding: 10px;
		}
		.css-table tbody tr:hover {
		    background-color: #EEE;
		}
		.css-table tbody tr td {
		    padding: 10px;
		}
		.css-panel {
		    border: 1px solid #CCC;
		}
		.css-panel-header {
		    border-bottom: 1px solid #CCC;
		    clear: both;
		    height: 17px;
		    padding: 10px;
		}
		.css-panel-content {
		    clear: both;
		    padding: 10px 10px 0 10px;
		}
		.css-left {
		    float: left;
		}
		.css-right {
		    float: right;
		}
		.css-row {
		    clear: both;
		    height: 30px;
		    margin-bottom: 10px;
		}
		.css-row a {
		    line-height: 30px;
		}
		.css-search {
		    display: table;
		}
		.css-search-button {
		    display: table-cell;
		}
		.css-search-button button {
		    border-left: none;
		    height: 30px;
		}
		.css-width-10 {
		    width: 10px !important;
		}
		.css-width-25 {
		    width: 25px !important;
		}
		.css-width-50 {
		    width: 50px !important;
		}
		.css-width-75 {
		    width: 75px !important;
		}
		.css-width-100 {
		    width: 100px !important;
		}
		.css-blank-10 {
		    display: inline-block;
		    width: 10px;
		}
		.css-text-center {
		    text-align: center;
		}
		.css-button-group {
		    border: 1px solid #CCC;
		    display: inline-block;
		    padding-left: 5px;
		}
		.css-button-group button {
		    border: 1px solid transparent;
		    margin-left: -5px;
		    width: 30px; /* IE9 */
		}
	</style>
</head>
<body>
<form id="product_create_form" method="post" class="css-form">
    <div class="css-form-header">
        <h3>Create Product</h3>
    </div>
    <div class="css-form-row">
        <label for="product_type_id">Product Type:</label>
        <select id="product_type_id" name="productTypeId">
            <option value="0"></option>
            <option value="1">Mobile Phone</option>
            <option value="2">Tablet Computer</option>
        </select>
    </div>
    <div class="css-form-row">
        <label for="product_name">Product Name:</label>
        <input type="text" id="product_name" name="productName"/>
    </div>
    <div class="css-form-row">
        <label for="product_code">Product Code:</label>
        <input type="text" id="product_code" name="productCode"/>
    </div>
    <div class="css-form-row">
        <label for="price">Price:</label>
        <input type="text" id="price" name="price"/>
    </div>
    <div class="css-form-row">
        <label for="description">Description:</label>
        <textarea id="description" name="description" rows="5"></textarea>
    </div>
    <div class="css-form-footer">
        <button type="submit">Submit</button>
        <button type="button" id="cancel">Cancel</button>
    </div>
</form>
</body>
</html>

list

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		* {
		    border: 0;
		    margin: 0;
		    padding: 0;
		    font-weight: normal;
		    vertical-align: middle;
		}
		body {
		    font-family: Verdana, sans-serif;
		    font-size: 12px;
		    margin: 0 auto;
		    padding: 10px;
		    width: 980px;
		}
		h1, h2, h3, h4 {
		    font-weight: bold;
		}
		h1 {
		    font-size: 18px;
		}
		h2 {
		    font-size: 16px;
		}
		h3 {
		    font-size: 14px;
		}
		h4 {
		    font-size: 12px;
		}
		a,
		a:before,
		a:after {
		    color: blue;
		    text-decoration: underline;
		}
		a:hover {
		    color: red;
		}
		input, select, textarea, button {
		    font-family: inherit;
		    font-size: 12px;
		    outline: none;
		}
		textarea {
		    resize: none;
		    overflow-y: auto;
		}
		select {
		    border: 1px solid #CCC;
		    height: 30px;
		    padding: 5px;
		    width: 212px;
		}
		input[type="text"] {
		    height: 18px;
		}
		input[type="text"],
		input[type="password"],
		textarea {
		    border: 1px solid #CCC;
		    padding: 5px;
		    width: 200px;
		}
		input[type="text"]:focus,
		input[type="password"]:focus,
		textarea:focus,
		select:focus {
		    border-color: #000;
		}
		input[type="file"] {
		    border: 1px solid #CCC;
		    padding: 3px 3px 4px 3px;
		}
		button {
		    background-color: #EEE;
		    border: 1px solid #CCC;
		    cursor: pointer;
		    height: 30px;
		    padding: 5px;
		    min-width: 30px;
		}
		button:hover:not(:disabled) {
		    background-color: #DDD;
		}
		*:disabled {
		    background-color: #FFF;
		    cursor: not-allowed !important;
		    opacity: 0.5;
		}
		.css-form {
		    border: 1px solid #CCC;
		}
		.css-form-header {
		    border-bottom: 1px solid #CCC;
		    clear: both;
		    height: 17px;
		    padding: 10px;
		}
		.css-form-row {
		    padding: 10px 20px;
		}
		.css-form-row label {
		    cursor: pointer;
		    float: left;
		    padding-top: 8px;
		    width: 100px;
		}
		.css-form-footer {
		    border-top: 1px solid #CCC;
		    padding: 10px;
		}
		.css-table {
		    border: 1px solid #CCC;
		    border-collapse: collapse;
		    width: 100%;
		    margin-bottom: 10px;
		}
		.css-table thead tr td {
		    border-bottom: 1px solid #CCC;
		    padding: 10px;
		}
		.css-table tbody tr:hover {
		    background-color: #EEE;
		}
		.css-table tbody tr td {
		    padding: 10px;
		}
		.css-panel {
		    border: 1px solid #CCC;
		}
		.css-panel-header {
		    border-bottom: 1px solid #CCC;
		    clear: both;
		    height: 17px;
		    padding: 10px;
		}
		.css-panel-content {
		    clear: both;
		    padding: 10px 10px 0 10px;
		}
		.css-left {
		    float: left;
		}
		.css-right {
		    float: right;
		}
		.css-row {
		    clear: both;
		    height: 30px;
		    margin-bottom: 10px;
		}
		.css-row a {
		    line-height: 30px;
		}
		.css-search {
		    display: table;
		}
		.css-search-button {
		    display: table-cell;
		}
		.css-search-button button {
		    border-left: none;
		    height: 30px;
		}
		.css-width-10 {
		    width: 10px !important;
		}
		.css-width-25 {
		    width: 25px !important;
		}
		.css-width-50 {
		    width: 50px !important;
		}
		.css-width-75 {
		    width: 75px !important;
		}
		.css-width-100 {
		    width: 100px !important;
		}
		.css-blank-10 {
		    display: inline-block;
		    width: 10px;
		}
		.css-text-center {
		    text-align: center;
		}
		.css-button-group {
		    border: 1px solid #CCC;
		    display: inline-block;
		    padding-left: 5px;
		}
		.css-button-group button {
		    border: 1px solid transparent;
		    margin-left: -5px;
		    width: 30px; /* IE9 */
		}
	</style>
</head>
<body>
<div class="css-panel">
    <div class="css-panel-header">
        <div class="css-left">
            <h3>Product List</h3>
        </div>
        <div class="css-right">
            <a href="product_create.html">New Product</a>
        </div>
    </div>
    <div class="css-panel-content">
        <div class="css-row">
            <div class="css-left">
                <form id="product_search_form" method="post">
                    <div class="css-search">
                        <input type="text" id="product_name" placeholder="Product Name"/>
                        <span class="css-search-button">
                            <button type="submit">Search</button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="css-right">
                <div id="product_pager"></div>
            </div>
        </div>
        <table id="product_table" class="css-table">
            <thead>
                <tr>
                    <td>Product Type</td>
                    <td>Product Name</td>
                    <td>Product Code</td>
                    <td>Price</td>
                    <td>Description</td>
                    <td class="css-width-75">Action</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
</body>
</html>