Tag:Box

  • CSS style all properties and hard to remember points (induction)

    Time:2021-4-18

    There are too many unpopular styles in some CSS, but if you want to remember them, you can read this article. This article includes some properties that CSS needs to remember, not including those that you often use (I believe you have contacted too many) Pseudo class selector :link Not visited :visited Visited :hover Move […]

  • Don’t underestimate the fact that a single question can show the candidates their true colors!

    Time:2021-3-30

    preface According to incomplete statistics(In fact, the statistics of their friends and colleaguesMobile phone tiktok or fast hand short video APP, the longest time spent on mobile phones is micro-blog and Kwai circle. I often see this kind of thing when I brush my microblog and visit my circle of friends It has a tall […]

  • Analysis of CSS box model

    Time:2021-3-27

    CSS box model Every HTML element can be regarded as a box. The relationship between parent element and child element is OK. A small box is placed in the big box, and the brother element is just like two small boxes in the big box. Box model includes four attributes: margin, border, padding and content. […]

  • Making a revolving pyramid

    Time:2021-3-12

    Making rotation pyramid animation, using CSS animation, the results are as follows,Here’s the codeThere are four layers needed to create a pyramid <div class=”triangle”> <div class=”box”> <div class=”surface1″> </div> <div class=”surface2″> </div> <div class=”surface3″> </div> <div class=”surf“ace4″> </div> </div> </div> Position the pyramid and the size of the pyramid (this doesn’t matter) .triangle { width: […]

  • Front end learning notes (5) practical cases of HTML + CSS static page: Happy Cake home page and Baidu home page

    Time:2021-2-24

    according toZhihu front end learning path recommended by Wang Xiaohei, after self-learning HTML and CSS, began to try to make static page small project. Happy cake home production First of all, I downloaded the teaching video, picture material and source code of the static page of happiness cake official website provided by Qianfeng education. I […]

  • Implementation of JSON industrial control fan impeller rotation based on HTML5 webgl

    Time:2021-2-10

    Suddenly, I have an idea that if I can put some knowledge points that use different knowledge points on the same interface and put them in a box, then if I want to see something, it can be displayed directly, and the box must be able to be opened. I use itHTRealized my idea, more […]

  • CSS3 animation related properties

    Time:2021-2-6

    1、 2D effect properties To use these properties, we need totransform,In addition, in order to ensure compatibility, we may also need to add attributes with browser kernel prefix, such as-webkit-transform。 Before you know the attributes, you should know what the coordinate system isWhat’s the difference between the coordinate system and theThe traditional mathematical coordinate system […]

  • The div is vertically centered up and down, and the elastic box is aligned- items:center

    Time:2021-2-6

    Example code <div class=”box”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> Div needs to be vertically centered up and down. You can directly use display: flex, align in CSS3- items:center realization. .box{ display: flex; align-items: center; width: 200px; height: 200px; background: #c00; margin: 100px auto; } We can also use flex: 1 Average gamete box .box […]

  • Text out of ellipsis type

    Time:2021-1-31

    1、 CSS text beyond hide and show ellipsis (one line) overflow:hidden; //Text hiding beyond text- overflow:ellipsis; //Overflow is shown with an ellipsis white- space:nowrap; //Overflow without line feed 2、 CSS text is hidden and ellipsis is displayed (two lines) overflow: hidden; text-overflow: ellipsis; display:-webkit-box; //It is shown as a flexible box model. -webkit-box- orient:vertical; //Set […]

  • HTML5+CSS3(3)

    Time:2021-1-30

    3D For short, 3D coordinate system has one more Z axis than 2D coordinate system 3D displacement 3D displacement has a movable z-axis on the basis of 2D transform: translate3d(x,y,z); <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 200px; height: […]

  • Induction and summary of knowledge points in CSS

    Time:2021-1-27

    preface     cssIs the page of the makeup artist, but also each front-end must master the foundation, in the work often because of frequent business, and not very good to precipitation technology, this paper is the author’s spare time learning notes, mainly recordedcssSome common foundations, andAdvanced application of CSS, for exampleSprite map,Font IconWait, there’s moreNew features […]

  • Layui event monitoring (forms and data tables)

    Time:2021-1-25

    1、 Event monitoring of forms Let’s first introduce the usage of several attributes 1. Lay filter event filter Equivalent to selector, layui’s exclusive selector 2. Lay verify properties The attribute values can be: required, required, phone number, email address, URL, number, date, identity, ID card. This is equivalent to regular judgment. Of course, you can […]