HTML 照片墙

提示：以下是本篇文章正文内容，下面案例可供参考
这是HTML代码 
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <link rel="stylesheet" type="text/css" href="css.css">
 6         <title>QCSJ</title>
 7         <style type="text/css"></style>
 8         <body>
 9             <div class="zj">
10                 <div class="bt">
11                     <a class="logo" href="#">QCSJ</a>
12                     <a class="kb"></a>
13                     <a class="shouye" href="#">首页</a>
14                     <a class="lz" href="#">利兹</a>
15                     <a class="fh">&</a>
16                     <a class="gd" href="#">小岛</a>
17                 </div>
18                 <div class="qy">&nbsp;&nbsp;&nbsp;每一段时光，只要放在心上，就是地久天长</div>
19                 <div class="qy2">&nbsp;&nbsp;&nbsp;Meet a person, the world right to change---遇见一个人，世界权改变</div>
20                 <div class="nr">
21                     <div class="bt1">
22                         <p style="font-size: 36px;color: lightpink;text-align: center;line-height: 50px;">The world is so beautiful</p>
23                         <p style="font-size: 18px;color:moccasin;text-align: center;line-height: 50px;">I want to show you</p>
24                     </div>
25                     <div class="bt2">
26                         <div class="kbk"></div>
27                         <div class="tw">
28                             <div class="tu1"></div>
29                             <div class="kong"></div>
30                             <div class="wz">The moment I fell in love with you, you will live in my heart forever.</div>
31                         </div>
32                         <div class="kbk"></div>
33                         <div class="tw">
34                             <div class="tu2"></div>
35                             <div class="kong"></div>
36                             <div class="wz">Love is very simple, like three points, cherish seven points.</div>
37                         </div>
38                         <div class="kbk"></div>
39                     </div>
40                     <div class="hk"></div>
41                     <div class="bt3">
42                         <div class="kbk"></div>
43                         <div class="tw">
44                             <div class="tu3"></div>
45                             <div class="kong"></div>
46                             <div class="wz">Because he doesn't like you, so he won't feel sorry for you.</div>
47                         </div>
48                         <div class="kbk"></div>
49                         <div class="tw">
50                             <div class="tu4"></div>
51                             <div class="kong"></div>
52                             <div class="wz">I love you until the end of the world.</div>
53                         </div>
54                         <div class="kbk"></div>
55                     </div>
56                     <div class="hk"></div>
57                     <div class="bt4">
58                         <div class="kbk"></div>
59                         <div class="tw">
60                             <div class="tu5"></div>
61                             <div class="kong"></div>
62                             <div class="wz">the persistence of a sound after its source has stopped</div>
63                         </div>
64                         <div class="kbk"></div>
65                         <div class="tw">
66                             <div class="tu6"></div>
67                             <div class="kong"></div>
68                             <div class="wz">Love understands love; it needs no talk.</div>
69                         </div>
70                     </div>
71                 </div>
72                 <div class="hk"></div>
73                 <div class="bt">
74                     <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>
75                 </div>
76             </div>
77         </body>
78     </head>
79 </html>

这是css代码

*{
    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;
}

 

posted @ 2024-04-06 22:22  予欣子  阅读(422)  评论(0)    收藏  举报