• Classic three column layout front entry layout


    1. Float + margin (floating layout) <template> <div class=”container”> <div class=”left”>Left</div> <! — the right should be written in the middle — > <div class=”right”>Right</div> <div class=”main”>Main</div> </div> </template> <style scoped> html,body, .container { height: 100%; width: 100%; margin: 0; padding: 0; } /*Left floating*/ .left { float: left; height: 100%; width: 200px; background: #e056fd; […]

  • Layout of angular material (1): introduction to layout


    At the time of writing this article, the version of angular material is1.1.1Based on angle V1, angular material 2 based on angular 2 is still in alpha phase Layout introduction overview The layout features of angular material make it easier for developers to create modern responsive layouts based on CSS3 flexbox. The layout API contains […]

  • Layout of angular material (2): layout container


    Layout container Layout and container Using thelayoutDirective to specify the layout direction for its child elements: arrange horizontally(layout=”row”)Or vertically(layout=”column”)。 Note that if thelayoutInstruction has no value, thenrowIs the default layout direction. row: items arranged horizontally.max-height = 100%andmax-widthIs the width of the item in the container. column: items arranged vertically.max-width = 100%andmax-heightIs the height of the […]

  • Layout of angular material (3): layout sub elements


    Layout sub elements Layout the child elements within the container To customize the size and location of elements in a layout container, use theflex,flex-orderandflex-offsetProperties: <div layout=”row”> <div flex=”20″> [flex=”20″] </div> <div flex=”70″> [flex=”70″] </div> <div flex hide-sm hide-xs> [flex] </div> </div> takeflexDirective is added to the child element of the layout, and the child element […]

  • Layout of angular material (4): sub element alignment


    Child element alignment layout-alignThe command requires two values. The first value represents how the child elements are aligned horizontally in the layout, and the second value represents how the child elements are aligned vertically in the layout. When there is only one value in the instruction. For example,layout=”row” layout-align=”center”The element is centered horizontally and the […]

  • Principle and practice of front end responsive layout


    preface As a front-end developer, responsive website development is one of the necessary skills. Response has its good advantages and disadvantages. This requires us to make trade-offs when developing. For the website with less content and mainly for display, it adopts the responsive mode; for the website with more content and management class, it adopts […]

  • Layout of angular material (5): layout parameters


    Layout parameters <div layout=”row” layout-sm=”column”> <div flex> I’m above on mobile, and to the left on larger devices. </div> <div flex> I’m below on mobile, and to the right on larger devices. </div> </div> For a basic description of layout instructions, see the section layout and containers.To change the layout based on the size of […]

  • Front end daily combat work 174: calendar


    The mid autumn National Day holiday is over, but also into the work, do a calendar to commemorate it. Effect preview Press the “click preview” button on the right to preview on the current page, and click the link to preview in full screen. https://codepen.io/comehope/pen/mdEyWEv Source code download For the full source code of daily […]

  • HTML page layout


    There are several common methods of layout 1、 Float layout The float attribute defines in which direction the element floats. In the past, this property has always been applied to images to surround text around images, but in CSS, any element can float. Floating elements generate a block level box, regardless of the element itself. […]

  • 06 CSS3 layout – I (front end must master)


    The following is the main referencehttp://www.ruanyifeng.com/blo…andhttps://developer.mozilla.org…Two articles. If you want more details, you can take a look at these two articles. The ROC rises with the wind one day and soars to 90000 Li! Study together and make progress together! CSS layout The traditional scheme is based on the boxed model and relies on the […]

  • I integrated Alibaba, Tencent, byte skipping, meituan and other Android performance optimization into a PDF document


    Android development army is vast, after nearly a decade of development, Android technology optimization is changing with each passing day. Now Android 11.0 has been released, and Android system performance has been very smooth, which can be completely comparable to IOS in experience. However, in the hands of major manufacturers, changing the source code and […]

  • Talking about ASP.NET Core 2.0 layout page


    This paper introduces the ASP.NET The core 2.0 layout page is shared with you as follows: problem How to ASP.NET Sharing visible elements, code blocks, and instructions in a core 2.0 project? answer Create an empty project. First add the greetingservice service and the userviewmodel model public interface IGreetingService { string Greet(string firstname, string surname); […]