当前位置：网站首页>网页设计（二）

网页设计（二）

2022-08-07 13:04:00 【默一】

系列文章目录

提示：这里面的图片和文字都可以更改，里面的属性稍微改一下，可以更好地达到预期的效果
例如：tu1、tu2、wen等

提示：一些之前讲过的我不在重复，新的重点在下面

网页设计（二）

系列文章目录
前言
一、代码
二、代码分析
总结

前言

提示：我用的vsc软件进行编写代码，一些地方可能与大家的不同，这个需要注意一下：

例如：图片的路径等

提示：以下是本篇文章正文内容，下面案例可供参考

一、代码

我把htmll和css部分分开了，这是HTML部分代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="css.css">
        <title>QCSJ</title>
        <style type="text/css"></style>
        <body>
            <div class="zj">
                <div class="bt">
                    <a class="logo" href="#">QCSJ</a>
                    <a class="kb"></a>
                    <a class="shouye" href="#">首页</a>
                    <a class="lz" href="#">利兹</a>
                    <a class="fh">&</a>
                    <a class="gd" href="#">小岛</a>
                </div>
                <div class="qy">&nbsp;&nbsp;&nbsp;每一段时光，只要放在心上，就是地久天长</div>
                <div class="qy2">&nbsp;&nbsp;&nbsp;Meet a person, the world right to change---遇见一个人，世界权改变</div>
                <div class="nr">
                    <div class="bt1">
                        <p style="font-size: 36px;color: lightpink;text-align: center;line-height: 50px;">The world is so beautiful</p>
                        <p style="font-size: 18px;color:moccasin;text-align: center;line-height: 50px;">I want to show you</p>
                    </div>
                    <div class="bt2">
                        <div class="kbk"></div>
                        <div class="tw">
                            <div class="tu1"></div>
                            <div class="kong"></div>
                            <div class="wz">The moment I fell in love with you, you will live in my heart forever.</div>
                        </div>
                        <div class="kbk"></div>
                        <div class="tw">
                            <div class="tu2"></div>
                            <div class="kong"></div>
                            <div class="wz">Love is very simple, like three points, cherish seven points.</div>
                        </div>
                        <div class="kbk"></div>
                    </div>
                    <div class="hk"></div>
                    <div class="bt3">
                        <div class="kbk"></div>
                        <div class="tw">
                            <div class="tu3"></div>
                            <div class="kong"></div>
                            <div class="wz">Because he doesn't like you, so he won't feel sorry for you.</div>
                        </div>
                        <div class="kbk"></div>
                        <div class="tw">
                            <div class="tu4"></div>
                            <div class="kong"></div>
                            <div class="wz">I love you until the end of the world.</div>
                        </div>
                        <div class="kbk"></div>
                    </div>
                    <div class="hk"></div>
                    <div class="bt4">
                        <div class="kbk"></div>
                        <div class="tw">
                            <div class="tu5"></div>
                            <div class="kong"></div>
                            <div class="wz">the persistence of a sound after its source has stopped</div>
                        </div>
                        <div class="kbk"></div>
                        <div class="tw">
                            <div class="tu6"></div>
                            <div class="kong"></div>
                            <div class="wz">Love understands love; it needs no talk.</div>
                        </div>
                    </div>
                </div>
                <div class="hk"></div>
                <div class="bt">
                    <p style="text-align:center;color: rgb(216, 97, 190);line-height: 80px;">This work was created by myself and stolen must be investigated</p>
                </div>
            </div>
        </body>
    </head>
</html>

*{
    padding: 0;
    margin: 0 auto;
}
html{
    height: 100%;
}
body{
    height: 100%;
    cursor: url(https://images.cnblogs.com/cnblogs_com/jingjingjingjingjingjingrj/1701449/o_200415081944o_cursor.png),auto;
    background:url(../QCSJ/photo/20141119024734831.jpg);
    background-size: 100%;
}

.zj{
    width: 1000px;
    height: 2000px;
    justify-content: center;
    /*align-items: center;*/
}
.bt{
    width: 1000px;
    height: 80px;
    border-bottom:1px solid #000;
    box-shadow: 2px 2px 5px #000;
    float: left;
    margin-bottom: 20px;
}
.logo{
    width: 200px;
    height: 80px;
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 36px;
    color:black;
    float: left;
    line-height: 70px;
    display: inline;
    text-decoration: none;
}
.kb{
    width: 400px;
    height: 80px;
    float: left;
}
.shouye{
    width: 100px;
    height: 80px;
}
.lz{
    width: 100px;
    height: 80px;
}
.fh{
    width: 100px;
    height: 80px;
}
.gd{
    width: 100px;
    height: 80px;
}
.shouye,.lz,.fh,.gd{
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 36px;
    color:black;
    float: left;
    line-height: 80px;
    display: inline;
    text-decoration: none;
    float: left;
}
.qy,.qy2{
    width: 1000px;
    height: 60px;
    text-align:left;
    font-size: 24px;
    line-height: 60px;
    color:rgb(63, 56, 56);
    float: left;
    border-bottom:1px solid #000;
    box-shadow: 2px 2px 5px #000;
}
.nr{
    width: 1000px;
    height: 1600px;
    float: left;
    margin-top: 20px;
    border-bottom:1px solid #000;
    box-shadow: 2px 2px 5px #000;
}
.bt1{
    width: 1000px;
    height: 100px;
}
.bt2{
    width: 1000px;
    height: 460px;
}
.kbk{
    width: 100px;
    height: 450px;
    float: left;
}
.tw{
    width: 350px;
    height: 450px;
    float: left;
    border-bottom:1px solid #000;
    box-shadow: 2px 2px 5px #000;
}
.tu1{
    width: 350px;
    height: 320px;
    background: url(../QCSJ/photo/YKJ_1022.JPG);
    background-size: 100%;
}
.wz{
    width: 350px;
    font-size: 18px;
    text-align: center;
}
.tu2{
    width: 350px;
    height: 320px;
    background: url(../QCSJ/photo/YKJ_1026.JPG);
    background-size: 100%;
}
.bt3{
    width: 1000px;
    height: 460px;
    float: left;
}
.tu3{
    width: 350px;
    height: 320px;
    background: url(../QCSJ/photo/oip.jpg);
    background-size: 100%;
}

.tu4{
    width: 350px;
    height: 320px;
    background: url(../QCSJ/photo/OIP-C.jpg);
    background-size: 100%;
}
.bt4{
    width: 1000px;
    height: 450px;
    float: left;
}
.tu5{
    width: 350px;
    height: 320px;
    background: url(../QCSJ/photo/2021011324936043.jpg);
    background-size: 100%;
}
.tu6{
    width: 350px;
    height: 320px;
    background: url(../QCSJ/photo/232003528624.jpg);
    background-size: 100%;
}
.kong{
    width: 350px;
    height: 50px;
}
.hk{
    width: 1000px;
    height: 50px;
    float: left;
}
.hkk{
    width: 1000px;
    height: 50px;
    float: left;
}