Posts

pesudo

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> pre { color : blue ; } pre : first-letter { color : red ; font-size : 20 pt ; font-style : italic ; } pre : before { content : url ( "../img/pointer.png" ) ; background : #68ff46 ; } pre : after { content : url ( "../img/pointer.png" ) ; background : #68ff46 ; } </style> </head> <body> <pre> Integrate all business processes and operations into one system to streamline operations, optimize resources, and provide better service to customers with ERP and CRM software. </pre> </body> </html>

Layer Z-Index

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . main { width : 500 px ; height : 500 px ; border : solid 2 px ; position : relative ; } . div1 { width : 400 px ; height : 400 px ; background : red ; position : absolute ; left : 40 px ; top : 40 px ; } . div2 { width : 400 px ; height : 400 px ; background : green ; position : absolute ; top : 20 px ; left : 20 px ; /* z-index: 1; */ } . div3 { width : 400 px ; height : 400 px ; background : blue ; position : absolute ; } </style> </head> <body> <div class ="main" ...

postion sticky

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> ul { display : flex ; list-style : none ; } header { background : #0c5460 ; height : 200 px ; } . stiky { position : sticky ; top : 0 px ; left : 0 px ; right : 0 px ; } </style> </head> <body> <header> <nav> <ul> <li><a href ="#" > Home </a></li> <li><a href ="#" > About </a></li> <li><a href ="#" > Contact </a></li> </ul> </nav> </header> <header class ="stiky" style =" background : #00FF00 " > <nav> <ul> ...

position card

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . card { width : 300 px ; height : 400 px ; background : gray ; border-radius : 15 px ; position : relative ; margin : 20 px ; } . offdis { width : 68 px ; height : 35 px ; background : yellow ; position : absolute ; bottom : 10 px ; right : 0 px ; padding : 7 px ; } . new { background : #65e965 ; padding : 10 px ; position : absolute ; top : 10 px ; } </style> </head> <body> <div class ="container" style =" display : flex ; flex-wrap : wrap ; " > <div class ="card" > <span class ="...

position

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . div1 { border : solid red 2 px ; background : rgba ( 255 , 0 , 0 , 0.97 ) ; width : 400 px ; height : 400 px ; position : relative ; top : 10 px ; } . div2 { border : solid #115706 2 px ; background : #00FF00 ; width : 400 px ; height : 400 px ; } . fixed { border : solid red 2 px ; background : rgba ( 255 , 0 , 0 , 0.97 ) ; /* width: 400px; */ /* height: 400px; */ position : fixed ; top : 10 px ; right : 0 px ; left : 0 px ; bottom : 30 px ; } . div4 { position : ; } </style> </head> <body> ...

overflow

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> div { border : solid ; padding : 10 px ; width : 500 px ; } p { overflow : auto ; } . p1 { overflow-x : scroll ; } . p2 { overflow-y : scroll ; } </style> </head> <body> <div> <table> <tr> <td> Data1 </td> <td> Data1 </td> <td> Data1 </td> </tr> <tr> <td> Data1 </td> <td> Data1 </td> <td> Data1 </td> </tr> <tr> <td> Data1 </td> <td> Data1 </td> <td> Data1 </td>...

cursor

<!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . a { list-style-image : url ( "img/Checkmark.png" ) ; } body { cursor : url ( 'img/Pointer_20px.png' ) , auto ; } </style> </head> <body> <ul class ="a" > <li> item1 </li> <li> item1 </li> <li> item1 </li> <li> item1 </li> <li> item1 </li> </ul> <ul > <li> item1 </li> <li> item1 </li> <li> item1 </li> <li> item1 </li> <li> item1 </li> </ul> <ul class ="a" > <li> item1 </li> <li> item1 </li> <li> item1 </li> <li> item1 </li> <li> item1 </li...