Tag:DIV

  • CSS3 implementation of div slide in and out from the bottom

    Time:2021-5-14

    1. First of all, we need to use the target selector of CSS3 to switch the target element with the ID selector specified by a tag, which is used to select the target element of the current activity.2. Transition animation of CSS3. I won’t introduce it in detail here Take a look at the renderings: […]

  • HTML + CSS make div tag add top right delete icon example code

    Time:2021-5-2

    1、 Requirement description The delete icon is displayed in the upper right corner of the div tab 2、 Implementation mode html、CSS 3、 Reference code <style> .container{ width:60px; height:60px; border: 1px dotted red; position:relative; } .content{ position:relative; top:20px; } .delete{ width:20px; height:20px; border-radius:60%; position:absolute; top:-10px; right:-10px; } </style> <div class=”container”> <img src=”http://www.iconpng.com/download/png/61252″ class=”delete” οnclick=”alert(1)”/> <div class=”content”>content</div> […]

  • Implementation code of setting div background in CSS

    Time:2021-4-27

    There are only two steps to add background control to a component <View className=”gifts” style={{ background: `url(${baseUrl}starMove/exclusiveEntrance/card.png) no-repeat`, backgroundSize: ‘100% 100%’, }} > <View classname=”gift-lists”></View> </View> Set background and backgroundsize. style={ width:100%; height:100%; } PS: now let’s introduce how the CSS file can make the size of the background image adapt to the size of […]

  • Detailed explanation of HTML5 div layout and table layout

    Time:2021-2-25

    This paper analyzes the layout of HTML5 div and table for your reference Div layout:HTML + CSS to achieve simple layout. #Height in container cannot be written as a percentage. It must be a specific height. <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> < title > div layout <style type=”text/css”> body{ margin:0; padding:0; } #container{ […]

  • Automatic filling of residual height with div adaptive height

    Time:2021-2-9

    Option 1: Html: <div class=”outer”> < div class = “a” > head div < / div > < div class = “B” > lower div < / div > </div> CSS:  html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; } […]

  • CSS sets the div height to 100% all the time

    Time:2021-2-2

    preface Sometimes you need to keep the height of a box container 100% at all times, and the browser height remains the same no matter how you zoom. It’s like the sidebar of some websites, but it doesn’t work to set the height of the box container to 100%. demo If you want the percentage […]

  • Pure CSS realizes the adjustment of div height according to the adaptive width (percentage)

    Time:2021-1-24

    In today’s responsive layout requirements, many elements that can automatically adjust the size can achieve height and width adaptation, such as img{ width:50%;height : Auto;} to adjust the height of the picture according to the width ratio. However, div, the most used tag, can’t be adjusted automatically (either inherited from the parent, or specified Px, […]

  • Pure CSS3 + div to achieve small triangle border effect example code

    Time:2021-1-5

    The specific codes are as follows: The HTML code looks like this <div class=”arrow-up”> <! — upward Triangle — > </div> <div class=”arrow-down”> <! — downward Triangle — > </div> <div class=”arrow-left”> <! — left triangle — > </div> <div class=”arrow-right”> <! — triangle to the right — > </div> Next, CSS3 is used to […]

  • Example of vertical center of div internal sub elements by flex layout

    Time:2021-1-3

    1. Flex is the abbreviation of flexible box, which means “flexible layout”, and is used to provide the maximum flexibility for the box model. Any container can be specified as a flex layout. Note that when set to flex layout, the float, clear, and vertical align properties of the child elements will be invalid. Elements […]

  • When div is set to contenteditable = true, the cursor cannot be positioned after its content is reset

    Time:2020-12-10

    Recently, I’m doing a comment function. I need to be able to comment on the expressioncontentEditableThis attribute is the first to bear the brunt of the problem First of all, I would like to comment on the district chief   When the input content exceeds the limit, clear the user’s input content beyond the limit. […]

  • Div common attributes self collation

    Time:2020-11-29

    1、 Property list Copy code The code is as follows: Color: text colorFont family: Song typefaceFont size: 10pt text sizefont- style:itelic Character slanting Sportsfont- variant:small-caps Small fontLetter spacing: 1pt text spacingLine height: 200% set line heightfont- weight:bold Text in boldvertical- align:sub Subscriptvertical- align:super superscript text-d ecoration:line-through Add? H to remove the wiretext-d ecoration:overline Top linetext-d […]

  • Right alignment of multi elements in the same row under div in CSS

    Time:2020-11-9

    Method 1 float:rightIn addition, floating makes the layout more compact (no gaps) <div style=”background-color: red;width: 100%;height: 60px;/* text-align: right; */”> <div style=”width: 30px;height: 100%;background-color: yellow;float: right;”>hello</div> <div style=”width: 60px;height: 100%;background-color: blue;float: right;”>hi</div> </div> The effect picture is as follows: Method 2 display:inline-block+text-align:righttext- align:right The influence is the in line element or text under it, so […]