I'll write a website collection station myself. Do you think it's ok? [HTML + CSS + JS] Tan Zi

Abstract ： My blog must be easy to understand , It must also have the feasibility of practical operation , Even if you haven't learned about Web Design , The content of this blog can also be operated through your own efforts （ Nanny level teaching ）

        however , Let's read it as a fun picture , Although it is easier to find than simply clicking on browser favorites , But you really need to do it yourself . Writing code is a very interesting thing , The knowledge learned can be used in operation , It'll be really fulfilling .

Real summary （ Make complaints ）：

When I often need to use some websites （ Understand everything ）, The following three steps are required

        1. After opening the browser ;

        2. Search the website you want to visit ;

        3. Then point in ;

        *4. You may need to log in ;

        *5. Check what you often read

        ……

         Sometimes I see good websites but I don't use them often , It leads to searching every time you want to use it ; Or I sometimes have to go to the school class grabbing system , But because I forgot the website, I was slow and couldn't grab the favorite course （ In fact, there is no need to rob , You can't grab ） Etc., etc. .

emmm In fact, it can be directly collected in the browser , But if you change a computer , When you need to visit the website you want to see , Then you can only repeat the above steps , It's uncomfortable . If I want to open XX website faster , Just like desktop shortcuts ……So, Is there a better way to stably visit your common websites ; Or write them down （ Copy website ）, Do what you share with others .

        Can't I write my own favorites ？

         must That's ok ！

The final effect picture shows

         As long as the mind does not slip , There are more ways than difficulties ！

Project description ： Use Javascript Print out the code to jump the hyperlink , Easily and simply write an equivalent of a response (html) Webpage .

Need preparation ： Just have a computer , The keyboard will type its own code ！（ I know everyone likes hot copy and paste code , It will be given at the end of this article ）

OK, All eyes on me , Look at me look at me , Let me announce something ：

I want to write a favorite ！

============================== Split line split line ===============================

My thoughts ： Plan to write a html Webpage , It has the function of jumping to the page like hyperlink , For example CSDN Click any element in the page , Will pop up a new page . It can be understood as a pop-up new web page , Are all websites we want to collect .

        To put it simply ：

        1. We can write a html file , It can U It's hard to carry , You can also share it with others （ Suitable for learning 、 Wisdom tree or something ）

        2. adopt css Format to write a box style , Let our favorites look less shabby （ Just look a little better ）

        3. use Javascript Write the hyperlink effect of relevant requirements and edit the website of your collection .

Come straight on ！

HTML plate ：

        html It's actually quite easy to write , stay DW Or is it WebStorm And other compilers can write html Of . Here I will explain how to create... From two perspectives html file :1. Children who have studied Web Design ;2. Babies who don't have any relevant knowledge and want to learn .

        1. The compiler creates html file （ Children who have studied Web Design ）

You can promise me ( Learned web design ） stay 2022 The key time point of 2010 will not be created yet ？！    face , I was embarrassed .

        2. Zero basis creation html file （ For babies who want to learn ）

We can use the compiler mentioned in the previous paragraph to directly create , You can also be brave , Use Notepad to write ！

（1） The compiler creates

        First you need to download a compiler （ Personal recommendation is WebStrom, But if you want free , It can be used IJidea）

        The specific operation is shown in the figure .

（2） Notepad creation （ No compiler needed , Just fix it ）

Operation as shown below , But you need to break into html Format , Or copy and paste the following code .

（ Write specific code in Notepad ）

After writing the code , Transfer Notepad format to html Format （ Only the suffix is changed to .html To become a web page ）

CSS plate ：

css The concept of ： Written in html Medium <head> And <body> Between the labels <style> label , Powerful assistance ！

Here is the code for writing the center box

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .content {
        width: 100vw;
        height: 100vh;
        background-color: cornflowerblue;
        background-size: cover;
    }

    .content1 {
        width: 100vw;
        overflow: hidden;
        margin: 0 auto;
        text-align: center;
        line-height: 100px;
        background-color: cornflowerblue;
    }
</style>

At the same time, this article refers to B standing UP Lord Makabaka pap Dynamic effects of rain （ this css Some will be shown below ）

 （ Thank you again for up The Lord's help ）

JS plate ：

The code block I provide here is JS function —— use JS The output code to save the string , Click the text in the web page to jump to the hyperlink , By the way, set the font size and color .

    <div class="content1">
        <script type="text/javascript">
            document.write(' Baidu '.fontcolor('white').fontsize(6).link('https://www.baidu.com'))
        </script>
    </div>

         Use the box attribute to put the whole js Print all wrapped up , And designate css style . Basically, in <body> Copy and paste the above paragraph in the label and change the content and website , You can jump to the page after clicking the mouse .

        among ' Baidu ' Is a custom display character , hinder 'white' It's white , Then is 6 Font size , final link The URL with is the destination page that you can click to jump to .

        It is worth noting that , Some URLs are required to log in , Try to write the URL displayed after login （ with uid Of ）

About the raindrop falling effect css And js Code reference ：

<style>

    #rainBox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
    }

    .rain {
        position: absolute;
        width: 2px;
        height: 50px;
        background: linear-gradient(rgb(249, 249, 249), rgba(221, 255, 2, 0.8));
    }

</style>

<script>
    const box = document.getElementById('rainBox');
    let boxHeight = box.clientHeight;
    let boxWidth = box.clientWidth;
    // When the page size changes , Change the size of the box 
    window.onresize = function () {
        boxHeight = box.clientHeight;
        boxWidth = box.clientWidth;
    }
    // Every once in a while , Add raindrops 
    setInterval(() => {
        const rain = document.createElement('div');
        rain.classList.add('rain');
        rain.style.top = 0;
        // Randomly refresh the raindrop position 
        rain.style.left = Math.random() * boxWidth + 'px';
        // Random raindrop transparency 
        rain.style.opacity = Math.random();
        box.appendChild(rain);
        // Every once in a while , Rain falls 
        let race = 1;
        const timer = setInterval(() => {
            if (parseInt(rain.style.top) > boxHeight) {
                clearInterval(timer);
                box.removeChild(rain);
            }
            race++;
            rain.style.top = parseInt(rain.style.top) + race + 'px'
        }, 20)
    }, 50)
</script>

Haha haha , This code is very precious , Comrades should see , Look, show me everything , Don't copy and paste, right ？

The final code presentation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Collection summary </title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .content {
        width: 100vw;
        height: 100vh;
        background-color: cornflowerblue;
        background-size: cover;
    }

    #rainBox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
    }

    .rain {
        position: absolute;
        width: 2px;
        height: 50px;
        background: linear-gradient(rgb(249, 249, 249), rgba(221, 255, 2, 0.8));
    }

    .content1 {
        width: 100vw;
        overflow: hidden;
        margin: 0 auto;
        text-align: center;
        line-height: 100px;
        background-color: cornflowerblue;
    }
</style>

<body>
<div class="content">

    <div id="rainBox"></div>

    
    
    <div class="content1">
        <script type="text/javascript">
            document.write(' Baidu '.fontcolor('white').fontsize(6).link('https://www.baidu.com'))
        </script>
    </div>
    <!-- hold div These five lines of code are pasted repeatedly , Modify the content to fill the web page -->
    
    
    
</div>

<script>
    const box = document.getElementById('rainBox');
    let boxHeight = box.clientHeight;
    let boxWidth = box.clientWidth;
    // When the page size changes , Change the size of the box 
    window.onresize = function () {
        boxHeight = box.clientHeight;
        boxWidth = box.clientWidth;
    }
    // Every once in a while , Add raindrops 
    setInterval(() => {
        const rain = document.createElement('div');
        rain.classList.add('rain');
        rain.style.top = 0;
        // Randomly refresh the raindrop position 
        rain.style.left = Math.random() * boxWidth + 'px';
        // Random raindrop transparency 
        rain.style.opacity = Math.random();
        box.appendChild(rain);
        // Every once in a while , Rain falls 
        let race = 1;
        const timer = setInterval(() => {
            if (parseInt(rain.style.top) > boxHeight) {
                clearInterval(timer);
                box.removeChild(rain);
            }
            race++;
            rain.style.top = parseInt(rain.style.top) + race + 'px'
        }, 20)
    }, 50)
</script>

</script>
</body>
</html>

Add ：

Raindrop effects copyright belongs to

WebStorm Download from the compiler's official website

IntelliJ IDEA Download from the compiler's official website ( It is recommended to download the community version )

I put my commonly used programming learning platforms in the cloud disk , You can click the link below to get what you need ！

I personally use programming to recommend websites （ Alicloud disk download ）

that , See you next time

==============================THE END===============================