Category:HTML/CSS

  • It’s not easy to print the page content, instead of

    Time:2019-12-9

      123 /***Modification*/ function changeTextareaValue(obj) {  $(obj).html(obj.value);} /** * printing */ function clickPrint(){   bdhtml = window.document.body.innerHTML;   prnhtml = $(‘#container’).html();   window.document.body.innerHTML = prnhtml;   window.print();   window.document.body.innerHTML = bdhtml; }  

  • Double click dbclick event is not supported in select

    Time:2019-12-9

    XML/HTML CodeCopy content to clipboard <div class=“centent” style=“width:200px; float:left; margin-right:20px;”>     <select multiple=“multiple” id=“select1” style=“width:150px; height:160px;”>     <option value=“1”>Option 1</option>     <option value=“2”>Option 2</option>     <option value=“3”>Option 3</option>     <option value=“4”>Option 4</option>     <option value=“5”>Option 5</option>     </select>        <div>     <span id=“add” style=“display:block; width:140px; cursor:pointer;”>Check add to right>></span>     <span id=“addAll” style=“display:block; width:140px; cursor:pointer;”>Add all to the right>></span>     </div></div>     <div class=“centent” style=“width:200px; float:left; margin-right:20px;”>     <select multiple=“multiple” id=“select2” style=“width:150px; height:160px;”>     </select>     <div>     <span id=“add1” style=“display:block; width:140px; cursor:pointer;”><<Check delete to left</span>     […]

  • Using CSS to implement loading animation of Android system

    Time:2019-12-9

    There are two kinds of loading icons commonly used on the web, one is the “Chrysanthemum” of IOS, the other is the “ring” of Android. Today, we use SVG to realize the “ring” animation of Android, and the next lesson realizes the “Chrysanthemum” of IOS Be careful: the reason for the low number of GIF […]

  • JS hybrid sorting (similar to the address book sorting in Chinese mobile operating system)

    Time:2019-12-8

    In the afternoon when the sun is shining and the most suitable for dozing, the specially mute mobile phone actually moves. You can see it right. It vibrates God (customer) calls, “the Chinese name of the device in the tree menu on the left side of the report query system cannot be sorted”. To add […]

  • Using jQuery to fix page anchor failure in iframe

    Time:2019-12-8

    The application scenario is: iframe page does not have a scroll bar. If the scroll bar appears in the parent form, the anchor mark will be invalid. Because the anchor is based on the current window scroll bar to scroll the window. After it becomes a child form, there is no scroll bar, so it […]

  • Flex grow, flex shrink, flex basis and nine palace layout understanding

    Time:2019-12-8

    I. properties of flex grow, flex shrink, and flex basis Flex grow: defines the division of the remaining space. The default is 0, that is, if there is space left, it is not enlarged. Flex shrink: defines the reduction of the project. The default value of flex shrink is 1. When the value of flex […]

  • New features of ES6

    Time:2019-12-7

    ECMAScript 6 is the version released by ECMA on June 2015. As a demarcation point, now we usually call these later versions ES6. ES6 has brought a lot of new syntax and added the concept of class. It can be predicted that JavaScript is moving towards an engineering language. We don’t know whether this is […]

  • Using viewport to define screen CSS in meta tag

    Time:2019-12-7

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”> Width viewport widthHeight viewport heightInitial scale initial scaleMinimum scale the minimum scale that users are allowed to zoom toMaximum scale the maximum scale a user can zoom toUser scalable can users manually scale

  • Implementation of waterfall flow layout in uni app project

    Time:2019-12-7

    GitHub address. You can use star if you like Plug in Preview Using tutorials 1. Plug in code copy After downloading, copy the waterfall.vue file under the components directory to your own project directory 2. Plug in global configuration Configure the following code in main.js of the project import waterfall from ‘./components/waterfall.vue’ Vue.component(‘waterfall’,waterfall) 3. Plug […]

  • JavaScript implementation upload pictures and show

    Time:2019-12-6

    We all know that the image uploaded looks like this (before selection)It’s like this (after selection)。   Set up image upload in HTML first Upload pictures Then edit the CSS Style #file{ display: none; } #file + label{ display: inline-block; width: 100px; height: 30px; background-color: rgb(90, 152, 222); text-align: center; line-height: 30px; border-radius: 5px; } […]

  • Several methods to realize the prompt function of text box in HTML

    Time:2019-12-6

    You can use the attribute < input = “text” placeholder = “what you want to enter” > You can also use js to add CSS Style Copy code The code is as follows: <style type=”text/css”> .in_search { border:1 none; color:#999999; float:left; font-size:14px; height:18px; line-height:18px; margin:3px 2px; width:253px; } </style> < input name = “Q” onfocus […]

  • You may need such a large screen digital scrolling effect

    Time:2019-12-6

    The digital scrolling effect of large screen comes from a large screen UI chart in recent work. There is a module on the UI chart that needs to have the effect of digital scrolling. The following is the final effect:   thinking Before realizing this effect, let’s clear our mind and design our implementation steps […]