• HTML layered box shadow effect example code


    First picture: today we do this effect! In fact, it’s nothing. I just want to share with you that you often have to make a navigation bar when making web pages. You may feel that your navigation bar is always a little less three-dimensional. Let’s take a look today! <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ […]

  • HTML implementation of random roll call device example code


    After starting the roll call, click the stop button to complete the roll call, because the compact version does not consider the automatic stop requirement. The name data is stored in string form, which is suitable for small-scale roll call. There are a lot of needs and can be improved appropriately. <head> <meta charset=”UTF-8″> <meta […]

  • Splitting and merging table in HTML (colSpan, rowspan)


    Code demonstration horizontal merge: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> < title > demo table tag 2 — cell merging < / Title > <style type=”text/css”> td{ text-align: center; } </style> </head> <body> <table border=”1″ cellspacing=”0″ width=”50%” height=”150″> < caption > merge cells horizontally < / caption […]

  • Implementation of fixed position of some contents without scrolling when scrolling HTML pages


    This paper mainly introduces that some content positions are fixed without scrolling when scrolling HTML pages, which is helpful for layout. There is no more nonsense, as follows: Effect screenshot: Page source code: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> < title > Untitled Page < / Title > </head> <body style=”width: 900px; margin: 0px auto; […]

  • HTML + CSS box model cases (circle, semicircle, etc.) “border radius” is simple and easy to use


    When learning at the front end, many children find that the box model defaults to square. How to turn the box into the desired model? First, let’s look at the default—- <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=, initial-scale=1.0″> <style> .box{ width: 100px; height: 100px; background-color: rgb(116, 51, 51); […]

  • The form in HTML realizes the centering effect


    I came across an assignment before and gave a picture to make a form according to the picture style. However, after all functions are realized, I found that the form cannot be centered and has been shrunk in the upper left corner, which looks very ugly. After various modifications, I finally succeeded in centering the […]

  • Implementation of heartbeat effect made by HTML + CSS


    Today, let’s make a simple heartbeat effect. It doesn’t need a lot of code. Just add a box and make full use of CSS. 1. First, we add a visual box to the page <body> <div class=”heart”></div> </body> 2. Then turn it into a heart .heart{ position:relative; width:100px; height:100px; margin:100px; } .heart:after, .heart:before{ position:absolute; width:60px; […]

  • Implementation of cyberpunk style button with HTML + CSS


    First look at the effect: preface: This idea was made by Steven in station B. I thought it was very good, and then I got one myself( Here is the detailed process. The full code is at the end. realization: 1. First define a div tag as a button, and the class name is. Anniu: […]

  • An example of implementing hierarchical pyramid with HTML + CSS


    This paper mainly introduces an example of implementing hierarchical pyramid with HTML + CSS, which is shared with you as follows: First look at the effect of the code Code directly // html <div class=”finetriangle”> <div class=”sanjiao”> <!– Pyramid — > <div class=”sj sj1″></div> <div class=”sj sj2″></div> <div class=”sj sj3″></div> <div class=”sj sj4″></div> <div class=”sj […]

  • HTML + CSS to achieve text folding effect example


    This paper mainly introduces an example of HTML + CSS to realize text folding effect, which is shared with you as follows: effect: realization: 1. Definition label: <h1>aurora</h1> 2. Set the basic style of text: h1{ text-transform: uppercase; letter-spacing: 3px; font-size: 15vw; transform: rotate(-10deg) skew(30deg); position: relative; color: rgba(0, 101, 253, 0.6); -webkit-text-stroke: 2px rgba(0, […]

  • Making top navigation bar menu with HTML + CSS


    Making of navigation bar: Technical requirements:  CSS HTML tags To achieve the goal: Making navigation bar menu Code analysis: Basic style cleanup No sequence origin deletion Underline delete Center text by default A tag sets block level elements Modification of a state by pseudo class selector Step by step: Three column layout: use floating Logo […]

  • HTML CSS3 does not stretch the image display effect


    1. Use the transform attribute to display the image without stretching (the path problem needs to be modified as required); html: <div id=”surface-div1″> <img :src=”pic1″ class=”surface-img”> </div> CSS: #surface-div1{ position: relative; width: 372px; height: 175px; float: left; margin-top: -34px; margin-left: 122px; cursor: pointer; background: url(../../../static/img/addheadpic.jpg)center center no-repeat; text-align: center; border: 1px solid #CCCCCC; border-radius:6px; overflow: […]