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

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

2022-04-29 16:19:58tanz10086

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

b6ab8a9003584237911c2b030234e158.gif

         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 .

a8ac7c28fbae47a2b16f7755eb4e0226.gif

 

(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 .

2f587ffce5b649b1ad1760838110ccd5.gif

 

( 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 )

        52cd74bb77c546c8beaefec8d8ef1393.gif

 

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 )

1f92258af8a941b488cc9f5b6d7be1b2.png

 ( 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 )

2f3c73dfd8f44106b1fcdb153fea4ef1.png

that , See you next time

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

 

 

 

copyright notice
author[tanz10086],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291424495134.html

Random recommended