手搓前端day1

news2024/11/14 21:04:28

断断续续的学了些前端，今天开始写写代码，就当是记录一下自己前端的成长过程

效果：

写了点css，实现了简单的前端页面的跳转

文件目录

代码如下：

styles.css


    body{
        margin: 0;
        padding: 0;
    }
   header{
        background-color: black;
        color: white;
        /* display: flex; */
        margin: 0;
        padding: 0;
    
   }
   section{
        background-color: white;
        color: black;
        /* display: flex; */
        margin: 0;
        padding: 30px;
        display: flex;
        /* flex-direction: row; */
      
    }
    div{
        background-color: rgb(87, 86, 86);
        color: white;
        margin: auto;
        width: 100px;
       
    }
    footer{
        background-color: black;
        color: white;
        padding: 20px;
    }
    li{
        /* background: rgb(122, 117, 117); */
        
        /* margin: 0; */
        padding: 0;
        /* display: inline-block; */
        /* margin: 0 20px 0 0; */
        margin-right: 20px;
    }
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
    }

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>skl练习</title>
    <link rel="stylesheet" href="styles.css">

</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Now</a></li>
                <li><a href="Trommer.html">Trommer</a></li>
                <li><a href="Fiture.html">Fiture</a></li>
            </ul>
        </nav>
        <h1>skl练习</h1>
    </header>

<section>
    <div>a</div>
    <div>b</div>
    <div>c</div>
</section>
<section>section2</section>
<footer>footer</footer>

</body>
</html>

Trommer.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>skl练习</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Now</a></li>
                <li><a href="Trommer.html">Trommer</a></li>
                <li><a href="Fiture.html">Fiture</a></li>
            </ul>
        </nav>
        <h1>Trommer Page</h1>
    </header>

<section>
    <div>a</div>
    <div>b</div>
    <div>c</div>
</section>
<section>section2</section>
<footer>footer</footer>

</body>
</html>

Fiture.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>skl练习</title>
<link rel="stylesheet" href="styles.css">
</head>

<body >
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Now</a></li>
                <li><a href="Trommer.html">Trommer</a></li>
                <li><a href="Fiture.html">Fiture</a></li>
            </ul>
        </nav>
        <h1>Fiture </h1>
    </header>

<section>
    <div>a</div>
    <div>b</div>
    <div>c</div>
</section>
<section>section2</section>
<footer>footer</footer>

</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1915352.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！