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


    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


    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


    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


    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


    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


    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


    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


    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


    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


    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


    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


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