Home > Developer > JavaScript
Stylus-css framework usage, stylus-css framework
Stylus is a css language that needs to be compiled. Therefore, its own files cannot be directly called by html. You need to compile them into css files before loading them.
Stylus is an excellent css compilation language that requires node. js support. The first step is to install node. js.
1
# apt-get update # apt-get install -y python-software-properties software-properties-common # add-apt-repository ppa:chris-lea/node.js # apt-get update # apt-get install nodejs
2. View node version information. If any information is returned, the installation is successful.
3. Install stylus
# npm install stylus
4. debug Stylus (Ctrl + D)
# styus
border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius(5px)
Check whether the returned result is returned.
body { font: 12px Helvetica, Arial, sans-serif;}a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
5. Compiling styus files
Create a test. styl file with the following content:
1 border-radius() 2 -webkit-border-radius arguments 3 -moz-border-radius arguments 4 border-radius arguments 5 6 body 7 font 12px Helvetica, Arial, sans-serif 8 9 a.button10 border-radius 5px
Save and close. Run the following command on the command line:
# stylus --compress < test.styl > test.css
Check whether it is a file named test.css and whether the content is as follows:
1 body{2 font:12px Helvetica,Arial,sans-serif3 }4 a.button{5 -webkit-border-radius:5px;6 -moz-border-radius:5px;7 border-radius:5px8 }
Such a stylus file is compiled into a css file that can be called by html.
Framework concept:
The so-called framework is to divide a webpage into several frames and obtain multiple URLs at the same time. You only need to <FRAMESET> <FRAME>, and all the FRAME tags should be placed in a total html file. This file only records how the framework is divided and does not display any information, therefore, you do not need to add the <BODY> flag. to browse this framework, you must read this file instead of the files in other frame windows. <FRAMESET> is used to divide a FRAME window. Each FRAME window is marked by a <FRAME> MARK. <FRAME> must be used in the <FRAMESET> range. For example:
<Frameset cols = "50%, *">
<Frame name = "hello" src = "up2u.html">
<Frame name = "hi" src = "me2.html">
</Frameset>
In this example, <FRAMESET> splits the image into the left and right sides, displays up2u.html on the left, and displays the me2.html file on the right, <FRAME> the marked window is always in the order of top, bottom, left to right.
<FRAMESET> <FRAME>:
<FRAMESET> frame tag, used to declare an HTML file as the frame mode and set how to split the windows.
<FRAME> only sets the parameter attributes in a window.
<FRAMESET> parameter settings:
Example: <frameset rows = "90, *" frameborder = "0" border = 0 framespacing = "2" bordercolor = "#008000">
COLS = "90 ,*"
Vertical Cut screen (such as divided between the left and right pictures), accept the integer, percentage, * represents the occupied space. The number of values indicates the number of windows to be divided by commas. For example, COLS = "30, *, 50%" can be divided into three windows. The first window is the width of 30 pixels, which is an absolute split, the second window is the space left after the first and third windows are allocated, and the third window occupies 50% of the width of the entire screen. You can adjust the number by yourself.
ROWS = "120 ,*"
It is horizontal cutting, which separates up and down the screen. The value is set to the same as above. The COLS parameter and the ROWS parameter should not be in the same <FRAMESET> flag, because Netacape occasionally cannot display this type of frame, so use multiple splits.
Frameborder = "0"
Set the frame border. The value is only 0 and 1. 0 indicates no border, and 1 indicates that the border is to be displayed. (Avoid using yes or no)
Border = "0"
Set the Border thickness of the frame, in pixels.
Bordercolor = "#008000"
Set the border color of the frame.
Framespacing = "5"
The gap between the framework and the framework.
<FRAME> parameter settings:
Example: <frame name = "top" src = "a.html &... full text>
How to use framework code in js
Not quite clear!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
