• HTML + CSS + JavaScript to display the selected effect with mouse movement


    1. Display effect: 2, HTML structure <div class=”process_list-lpu”> <div class=”process_line”></div> <div class=”content_list”> <ul> <li><a href=”javascipt:;”>End customer get product<b>1</b></a> </li> <li><a href=”javascipt:;”>Log in EFOSE website and present installation or maintenance requirements <b>2</b></a></li> <li><a href=”javascipt:;”>EFOSE prefer contact service point<b>3</b></a> </li> <li style=”margin-left:115px;”><a href=”javascipt:;”>Customer contact service point to get service<b>4</b></a> </li> <li><a href=”javascipt:;”>Customer pays the bill directly or […]

  • Mobile debugging


    In the development of daily projects, the partners who contact the mobile development inevitably have to deal with the mobile debugging. In this paper, we summarize the commonly used mobile debugging, and welcome the partners to add. Google browser Google browser is an essential tool in our front-end development, such as jump style, break point, […]

  • Example code of CSS to realize the sticky effect of two balls intersecting


    This is a pure CSS effect. The effect is an image processing principle. It is almost the same as that in Photoshop. It’s just a layer and color plate, and one is CSS (DIV as layer thinking). Start with Photoshop In the beginning, when we play Photoshop, it’s easier to understand than writing CSS directly […]

  • Front end interview 3 + 1 Daily – 159th day


    Today’s knowledge (September 22, 2019) – day 159 [HTML] for example, how to use pure HTML to realize the function of drop-down prompt? How to use CSS to achieve alignment? [JS] what is the difference between attribute and property in JS? [soft skills] did your last company write a daily, weekly or monthly newspaper? Talk […]

  • Summary of several methods of realizing vertical center in CSS


    In the process of front-end layout, it is easy for us to realize horizontal centering, which can be realized through margin: 0 Auto; and parent element text align: Center. But it’s not so easy to realize the vertical center. Let’s share some ways to realize the vertical center in my work. 1. Line height equals […]

  • Front end interview 3 + 1 per day (weekly total on September 22, 2019)


    In the Analects of Confucius, Zeng Zi said:“Three times a day, three times a day”I reflect on myself many times a day.Front end interview questions 3 + 1 a day, with interview questions to drive learning, make progress every day!Let effort become a habit, let struggle become a enjoyment!believeInsistPower of!!! Learning is not closed, charging […]

  • Css-webkit-box-original: detailed explanation of the problem of loss of vertical property after compilation


    I. causes It is required to display two lines of text, and the redundant text is replaced by three points. Therefore, these non-standard attributes are used display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; Later, it was found that the code was well written. When it came to the page, there was no response, just like it […]

  • The problem of keeping alive cache in Vue Mobile


    When the Vue mobile terminal exits the current a user and switches to the new B user, the data of B user or that of a user is the cache of the last account. How do you solve this problem? I’m very anxious

  • On element UI cascading menu (city three level linkage menu) and echo problem


    Code bottom Parameter screenshot of each item The code is as follows < El form item label = “domicile” prop = “census land” style = “padding left: 57px” > <el-cascader v-model=”ruleForm.censusLand” style=”width:180px;padding-left:7px;width:270px” Placeholder = “please select province or city” :options=”cascaderData1″ @expand-change=”censusLandChange” :props=”{ value: ‘id’, label: ‘name’, children: ‘cities’ }” ></el-cascader> </el-form-item> data (){ retutn { […]

  • Adaptive width (height) of elements based on CSS and CS3 elastic box model


    1、 CSS implementation of left width fixed right width adaptive 1, positioning <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> < title > adaptive < / Title > <style> *{ padding: 0; margin: 0; } .left{ background: red; width: 200px; height: 200px; Position: absolute; / * positioning*/ left: 0; top:0; } .right{ background: blue; height: 200px; […]

  • Pseudo class and pseudo element


    Pseudo class There are two types of pseudo classes:State pseudo class(UI pseudo class) andStructural pseudo class. (1) The state pseudo class is selected based on the current state of the element. The state of an element changes dynamically during the interaction with the user, so the element presents different styles according to its state. When […]

  • Front end interview questions · selection (continuous update)


    2019.04.23Given the following code, how to modify it to make the picture width 300px? Note that the following code is not modifiable <img style=”width:480px!important;”> Solution: css3Zoom: transform(scale(0.625, 0.625)); js: document.getElementsByTagName(“img”)[0].setAttribute(“style”,”width:300px!important;”) css: max-width: 300px;(I didn’t expect that…) css: box-sizing: border-box; padding-left: 90px; padding-right: 90px;(I didn’t expect that…) 2019.03.22If the promise constructor is synchronous or asynchronous, what […]