• CSS + HTML to realize the function of top navigation bar


    Implementation of navigation bar, fixed top navigation bar and secondary menudesign sketch: Update on November 16, 2018:Recently, when using this navigation bar, I found some small problems in the layout and display of the navigation bar when the page is zoomed in and out, so I changed the code of CSS and pasted it again […]

  • JavaScript built-in object string summary and case


    Personal profile About the author: Hello, I’m Daniel, the new star creator in the whole stack field. Personal homepage:Hall owner a Niu🔥 Support me: like + collect ⭐ Email + message Series column:Hard bubble JavaScript🍁 Maxim: so far, all life is written with failure, but it doesn’t prevent me from moving forward! Previous portal: 👉Four […]

  • CSS border to add four corners of the implementation code


    1、html <div class=”loginbody”> <div class=”border_corner border_corner_left_top”></div> <div class=”border_corner border_corner_right_top”></div> <div class=”border_corner border_corner_left_bottom”></div> <div class=”border_corner border_corner_right_bottom”></div>       <–other……………………–> </div> 2、css .loginbody{ border: 1px solid #21a7e1; box-shadow: 5px 5px 10px 10px rgba(24,68,124,0.4); padding-top:20px; border-radius: 6px; position: relative; } /*Four corner boxes*/ .border_corner{ z-index: 2500; position: absolute; width: 19px; height: 19px; background: rgba(0,0,0,0); border: 4px solid #1fa5f1; } […]

  • Development specification document


    Specification document Naming style Declaration and use of component Declaration and use of global components Declaration and use of props Naming of component name attribute Naming of attributes and methods in mixins Programming protocol It is forbidden to use $parent to make parent content calls Use of V-for, V-IF and key Attribute values on DOM […]

  • How can pure CSS prevent users from copying the content of web pages


    preface When tapping my personal blog, on the details page of the blog, I want to have different replication methods for different contents. For example, I want the code block to be copied when the reader clicks, which is convenient for the reader to debug locally. For the text description part, I hope the reader […]

  • Front end three swordsmen: CSS


    CSS is the abbreviation of cascading style sheet, which is translated into ‘cascading style sheet’ or “cascading style sheet” in Chinese. It is a markup language used to control the appearance processing of web pages and allow the separation of web page performance and content. CSS does not need to be compiled and can be […]

  • Pure CSS custom multi line omission (from principle to implementation)


    How to display text overflow and what are your needs? Single line or multiple lines? Truncate, omit, custom style, adaptive height? You can find the answer here. Next, I will take you step by step to uncover the veil of multi line omission from simple to deep, from principle to implementation. Let’s start with the […]

  • CSS implements five commonly used 2D transformations


    The 2D transformation in CSS allows us to perform some basic transformation operations in two-dimensional space, such as moving, rotating, scaling or twisting. The transformed elements are similar to the absolutely positioned elements and will not affect the surrounding elements, but can overlap with the surrounding elements. The difference is that the transformed elements will […]

  • Use CSS to easily realize some strange buttons with high frequency


    background In the group, some students will ask relevant questions, how to use CSS to realize an inscribed corner button, and how to realize a button with an arrow? Based on some buttons that appear frequently in the design draft and are a little difficult and skilled to use CSS, this paper explains how to […]

  • HTML & CSS phase I


    Front end learning notes 1、 HTML 1、 1. Web standards Structure: HTML, page elements and content Performance: CSS, the appearance and position of web elements and other page styles (color, size, etc.) Behavior: Javascript, definition of web page model and page interaction 2. Fixed structure of web page code Whole, head, title, body <html> <head> […]

  • Three scrolling effects of notification bar realized by pure CSS


    preface The notification bar component is a common component. Basically, each site will have a component, which is mainly to announce some changes of the site or inform some winning lists.Recently, I was reviewing the content of CSS3 animation. I thought that most of the notification bar components are still implemented with JS. I happen […]

  • CSS position fixed left and right double positioning implementation code


    CSS positionThe position attribute specifies the location type of the element. Five values of position attribute: static relative fixed absolute sticky Elements can be positioned using the top, bottom, left and right attributes. However, these properties do not work unless the position property is set first. They also work in different ways, depending on the […]