提示：以下是本篇文章正文内容，下面案例可供参考这是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"> 每一段时光，只要放在心上，就是地久天长</div> 19 <div class="qy2"> 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;
}
标签：float,height,照片,width,HTML,background,size,left From： https://www.cnblogs.com/ykj521/p/18118040