Tag:DIV

  • 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 […]

  • CSS add scrolls to div and hide scrollbars

    Time:2020-10-17

    CSS adds scrolling to div and hides the scroll bar. The specific code is as follows: In HTML <div class=”box”> < div > the following will scroll separately < / div > <div class=”scroll”> <div class=”content”> <p>1111111111111111</p> <p>222222222222222</p> <p>333333333333333</p> <p>4444444444444444</p> <p>1111111111111111</p> <p>222222222222222</p> <p>333333333333333</p> <p>4444444444444444</p> </div> </div> </div> CSS part <style> div{ font-size: 15px; margin-bottom: 20px; […]

  • Using div + CSS3 to achieve a background gradient button example code

    Time:2020-9-9

    With the increasing demand for front-end pages, some scenes need gradient background elements. In this paper, a background gradient button is implemented by using the new attributes of div and CSS3 1. Background: linear gradient background is gradient color attribute2. Using the animation feature animation in CSS3, the background changes from left to right_ move)3. […]

  • Div background translucent text is not translucent style

    Time:2020-8-14

    Div background translucent, div words are not translucent Copy code The code is as follows: <body bgcolor=”#336699″> <div style=”filter:alpha(opacity=50);background:#ffffff;width:600;”><span style=”color:yellow”> The background of the layer is translucent, and the color of the font is also translucent Copy code The code is as follows: </span></div> <div style=” filter:alpha (opacity=50);background:#ffffff; width:600 “><span style=” position:relative;color : yellow “> […]

  • Differences between div and span in HTML

    Time:2020-8-4

    common ground: Div tags and span tags treat some content as a whole, such as hiding and moving as a whole. Something like a box. This can simplify the code and improve efficiency. difference: 1. Div is to put the content into a rectangular block, and random movement will affect the layout. But span just […]

  • Code for seamless connection of divpicture Marquee

    Time:2020-6-20

    Copy code The code is as follows: <html> <head> <style type=”text/css”> <!– #demo { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #98CBFF; margin-bottom: 10px; margin-left: 5px; overflow: hidden; padding: 0 0 5px; width: 948px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { […]

  • How to show the div on the object without being obscured by the object animation

    Time:2020-6-19

    Today, I made a menu button. When I move the mouse to the button, the function of pull-down submenu appears. The implementation is to put the submenu into a div and add the hover function to the menu button. But there is a div under the menu button, in which is an object tag and […]