使用HTML+CSS制作一个简单的网页

简单学习了一下HTML和CSS，制作了下面这个网页（第一次做还在学习中），里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。

网页预览（网页中的图片与图标均来自阿里巴巴矢量图标库）

CSS代码
里面包含悬浮、画面自适应等效果

*{box-sizing: border-box;}body{padding: 5px;background: #4682B4;}.header{padding: 10px;background: #87CEEB;overflow: auto;}.header a{text-decoration: none;}.biaoti1{display: inline-block;}.relation{display: inline-block;float: right;margin: 18px 200px 0 0;}.relation a{text-decoration: none;color: #FFFACD;}.relation a:hover{color: blue;}.biaoti1 h1{padding: 0 20px 0 20px;margin: 8px 8px 0 30px;font-family: Serif;font-size: 5vw;color: #FFFACD;text-shadow: 4px 4px 8px #8B4513;}.biaoti1 p{padding: 0 20px 0 20px;margin: 8px 8px 0 50px;font-family: Arial;font-size: 2vw;color: #FFFACD;text-shadow: 4px 4px 8px #8B4513;}.logo{display: inline-block;margin: 8px 0 0 100px;max-width: 11%;height: auto;border-radius: 25px;}.topnav{text-align:center;overflow: hidden;background-color: #AFEEEE;}.topnav li{display: inline;}.topnav a{display: inline;color: #F8F8FF;text-align: center;padding:16px;font-family: Arial;text-decoration: none;}.topnav a:hover{background-color: #FFFACD;color: black;}.active{background-color: #4CAF50;}.row:after{content:"";display: table;clear: both;}.menubtn{background-color: #00BFFF;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}.menu{overflow: visible
    position: relative;display: inline-block;}.menu-content{display: none;position: absolute;background-color: #FFFAF0;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;padding: 0;margin: 12px 0 0 0;min-width: 140px;}.menu-content li{display: block;}.menu-content a{color: black;text-align:left;padding: 12px 16px;text-decoration: none;display: block;}.menu-content a:hover{background-color: #f1f1f1}.menu:hover .menu-content{display: block;background-color: white;}.menu:hover .menubtn{background-color: #FFFACD;color: black;}.content{float: left;width: 20%;padding: 10px;height: 500px;font-size: 17px;letter-spacing: 2px;text-indent: 30px;line-height: 1.5;border-radius: 9px;overflow: auto;background-color: #ADD8E6;}.content-main{float: left;width: 60%;padding: 10px;height: 500px;font-size: 17px;letter-spacing: 2px;text-indent: 30px;line-height: 1.5;border-radius: 9px;overflow: auto;background-color: #D4F2E7;}.content:hover{background-color: #FFFACD;box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);}.content-main:hover{background-color: #FFFACD;box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);}@media screen and(max-width:1000px){//画面自适应
  .row ,.leftcolumn ,.rightcolumn ,.row2{width: 100%;}}@media screen and(max-width:900px){.topnav ,.menu ,.relation a ,.slidenav{display:none;}.logo{margin:0;padding:0;}.biaoti1 h1 ,.biaoti1 p{width: 30%;height: 30%;margin:0;padding: 0;}}.biaoti2{text-align: center;font-family: Arial;font-size: 40px;color: #FFFACD;}.leftcolumn{float: left;width: 75%;}.card-hp{display: inline-block;}.card-img{display: inline-block;float: right;}.rightcolumn{float: left;width: 25%;padding-left: 15px;}.card-img-right{text-align: center;}.card{background-color: white;padding: 20px;margin-top: 20px;overflow: auto;border-radius: 5px;}.card:hover{background-color:rgba(173,216,230, 0.5);box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);}.row2{background-color: #D4F2E7;}.row2:after{content:"";display: table;clear: both;}.chuanglian{margin: 5px;border: 1px solid #ccc;float: left;width: 200px;border-radius: 0 0 15px 15px;}.chuanglian img{width: 100%;height: auto;}.chuanglian:hover{box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);}.text{padding: 10px;text-align: center;border-radius: 0 0 15px 15px;background-color:rgba(173,216,230, 0.5);}.text:hover{color: green;}.center{text-align: center;background-color:rgba(173,216,230, 0.5);}.pagination{display: inline-block;padding: 5px 0 0 0;}.pagination a{color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;}.pagination a.active{background-color: #4CAF50;color: white;}.pagination a:hover:not(.active){background-color: #ddd;}.footer{padding: 20px;text-align: left;background: #F0FFFF;margin-top: 20px;border-radius: 9px;font-size: 28px;color:     #008080;}.f1 :hover{top:10px;}.banquan{padding: 7px;text-align: center;background:rgba(173,216,230, 0.5);margin-top: 20px;font-size: 15px;}.banquan a{text-decoration: none;color:     #008080;}.tool{float: right;position: relative;display: inline-block;border-bottom: 1px dotted black;font-size: 20px;}.tool .tooltext{visibility: hidden;width: 120px;background-color: #F5F5DC;color: black;text-align: center;padding: 5px 0;border-radius: 25px;font-size: 10px;/* 定位工具提示 */position: absolute;z-index: 1;top: 5px;right: 105%;}.tool:hover .tooltext{visibility: visible;}.slidenav{position: fixed;top: 200px;right: 0;width: 90px;height:300px;text-align:center;border-radius: 25px 0 0 25px;background-color:rgba(255,255,255, 0.3);}.slidenav a{text-decoration: none;}.slidenav a:hover{color: blue;}

HTML代码

<!DOCTYPEhtml><html><head></head><body><!--头部--><divclass="header"><ahref="#"><imgclass="logo"src="D:\image\logo.png"alt="LOGO"></a><divclass="biaoti1"><h1>Fabrics</h1><br/><p>Home Textile</p></div><divclass="relation"><ahref="#"><imgsrc="D:\image\login.png"width="50"height="50"><div>log in</div></a><ahref="#"><imgsrc="D:\image\signin.png"width="50"height="50"><div>sign in</div></a></div></div><!--导航栏--><divclass="topnav"><ul><li><ahref="#">Home</a></li><li><ahref="#">Work</a></li><li><ahref="#">News</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><divclass="menu"><li><aclass="menubtn"href="#">Menu</a></li><ulclass="menu-content"><li><ahref="#">1111</a></li><li><ahref="#">2222</a></li><li><ahref="#">3333</a></li></ul></div></ul></div><!--主内容1--><divclass="row"><divclass="content"><h2>Product</h2><p>Some text..</p></div><divclass="content-main"><h2>New Product</h2><p>Some text..</p></div><divclass="content"><h2>Product</h2><p>Some text..</p></div></div><!--主内容2--><divclass="biaoti2"><h2>Category</h2></div><divclass="row2"><!--左框--><divclass="leftcolumn"><divclass="card"><divclass="card-hp"><h2>high accuracy</h2><h4>door curtain made of cloth</h4><h4>sheer curtain</h4><p>Some introduction...</p><p>Some introduction...</p></div><divclass="card-img"><imgsrc="D:\image\1.png"alt="1"width="300"height="300"></div></div><divclass="card"><divclass="card-hp"><h2>pashm</h2><h4>door curtain made of cloth</h4><h4>sheer curtain</h4><p>Some introduction...</p><p>Some introduction...</p></div><divclass="card-img"><imgsrc="D:\image\2.png"alt="2"width="300"height="300"></div></div></div><!--右框--><divclass="rightcolumn"><divclass="card"><h2>123</h2><p>Some text..</p></div><divclass="card"><h2>123</h2><divclass="card-img-right"><imgsrc="D:\image\3.png"alt="3"width="300"height="300"></div></div><divclass="card"><h2>123</h2><p>Some text..</p></div></div></div><!--主内容3--><divclass="biaoti2"><h2>Picture</h2></div><divclass="row2"><divclass="chuanglian"><imgsrc="D:\image\1.png"alt="1"><divclass="text">1号</div></div><divclass="chuanglian"><imgsrc="D:\image\2.png"alt="2"><divclass="text">2号</div></div><divclass="chuanglian"><imgsrc="D:\image\3.png"alt="3"><divclass="text">3号</div></div></div><!--分页--><divclass="center"><divclass="pagination"><ahref="#">«</a><ahref="#"class="active">1</a><ahref="#">2</a><ahref="#">3</a><ahref="#">4</a><ahref="#">5</a><ahref="#">6</a><ahref="#">»</a></div></div><!--底部--><divclass="footer"><div><h2>Footer</h2></div><divclass="row"><divclass="tool">联系方式
            <spanclass="tooltext">Tooltext</span></div></div></div><!--悬浮列表--><divclass="slidenav"><divclass="slidecontact"><ahref="#"><imgsrc="D:\image\top.png"width="70"height="70"><div>top</div></a></div><divclass="slidecontact"><ahref="#"><imgsrc="D:\image\shopping.png"width="70"height="70"><div>shopping</div></a></div><divclass="slidecontact"><ahref="#"><imgsrc="D:\image\relation.png"width="70"height="70"><div>relation</div></a></div></div><!--版权--><divclass="banquan"><ahref="#">banquan</a></div></body></html>