钟楼区建设局网站网盟推广平台
分享一个可以“趁别人喝咖啡的功夫“”写的一个静态网页，纯纯练手小项目，适合前端刚入门的小白练练手。
@前端练手静态页面
实现效果图展示
CSS代码
HTML 代码
环境：VScode编辑器
语言：HTML 、CSS
一、实现效果图
仅仅通过html、CSS最简单的一些代码基础就可以实现，是一个静态的网页，没有很复杂。涉及到的一些基础知识如下：
1- px像素、颜色；2-开发环境搭建、vscode配置；3-网页的基本结构；4-CSS常用样式基础；5-html常用标签；6-布局常用的css样式基础；7-盒模型基础；8-浮动原理；9-列表标签；10-字体样式、文本样式11-伪类、组合选择器、伪元素；12-CSS继承；13-图文混排；14-背景样式；15-文本格式化、特殊标签、锚点、字体图标；等。
完整代码文件及图片获取
搜索公粽号＠李桥桉，回复【家居网首页①】即可ｇｅｔ．
二、CSS代码如下
.header{/* background-color: pink; */height: 140px;
}
.main{/* background-color: aquamarine; */height: 2130px;
}
.footer{/* background-color: tomato; */height: 200px;
}
.header .h-logo{height: 100px;/* background-color: bisque; */
}
.header .h-logo .h-l-content{width: 1126px;height: 100%;/* background-color: rgb(246, 250, 144); */margin: 0 auto;/* 设置一个属性，来解决传递过来的margin */overflow: hidden;
}
.header .h-logo .h-l-content .logo-box{width: 173px;height: 60px;margin-top: 20px;float: left;
}
.header .h-logo .h-l-content .logo-box img{height: 60px;width: 100%;
}
.header .h-logo .h-l-content .search-box{width: 341px;height: 25px;/* background-color: rgb(58, 159, 248); */float: right;margin-top: 37.5px;
}
.header .h-logo .h-l-content .search-box .s-login{width: 80px;height: 100%;/* background-color: pink; */float: left;
}
.header .h-logo .h-l-content .search-box .s-login a{float: left;color: #000000;font-size: 13px;text-decoration: none;line-height: 25px;
}
.header .h-logo .h-l-content .search-box .s-login a:last-child{float: right;
}
.header .h-logo .h-l-content .search-box .s-login span{float: left;margin-left: 12px;color: #dbdbdb;
}.header .h-logo .h-l-content .search-box .s-input{width: 160px;height: 100%;/* background-color: tomato; */float: left;margin-left: 20px;border-bottom: 1px solid #000;
}
.header .h-logo .h-l-content .search-box .s-input img{width: 20px;vertical-align: middle;
}.header .h-logo .h-l-content .search-box .s-input input{width: 130px;vertical-align: middle;border: none;outline: none;
}.header .h-logo .h-l-content .search-box .s-icon{width: 60px;height: 100%;/* background-color: red; */float: right;
}
.header .h-logo .h-l-content .search-box .s-icon a{float: left;margin-top: 2px;
}
.header .h-logo .h-l-content .search-box .s-icon a:last-child{float: right;
}.header .h-nav{height: 40px;/* background-color: #85daf6; */overflow: hidden;
}
.header .h-nav .h-menu{width: 605px;height: 15px;/* background-color: rgb(117, 117, 251); */margin: 12.5px auto;overflow: hidden;flex-wrap: nowrap; }.header .h-nav .h-menu a{float: left; padding: 0 19px;font-size: 13px;color: #333333;text-decoration: none;height: 13px;font-family: MicrosoftYaHei;font-weight: normal; font-stretch: normal;line-height: 15px;color: #333333;/* display: flex;flex-wrap: wrap;justify-content: space-between; */
}.header .h-nav .h-menu a:hover{color: #000;
}.main .m-banner{height: 666px;background-color: rgb(140, 236, 122);
}
.main .m-banner .m-box{height: 666px;
}
.main .m-banner .m-picture img{width: 100%;height: 666px;margin: 0 auto;
}.main .m-entry{width: 840px;height: 380px;background-color: rgb(255, 255, 255);margin: 0 auto;margin-top: -50px;position: relative;z-index: 9;
}
.main .m-entry .m-entry-box{width: 260px;height: 350px;background-color: rgb(216, 241, 143);float: left;margin-left: 15px;margin-top: 15px;}
.main .m-goods{width: 1126px;height: 1070px;/* background-color: tomato; */margin: 0 auto;margin-top: 30px;
}
.main .main-goods .m-g-title{width: 811px;margin: 0 auto;
}
.main .m-goods .m-g-title img{width: 100%;display: block;}
.main .m-goods .m-g-content{height: 1005px;width: 100%;height: 1005px;margin-top: 30px;/* background-color: rgb(226, 246, 136); */}
.main .m-goods .m-g-content .c-row {width: 1126px;height: 335px;
}
.main .m-goods .m-g-content .content-box{width: 268px;height: 268px;/* background-color: rgb(245, 137, 216); *//* display: flex;flex-wrap: wrap;justify-content: space-between; */float: left;/* 通过给卡片两边同时设置margin来调整之间的间距问题 */margin: 0 6px;margin-bottom: 60px;/* 同时作用给span标签和p标签里的文字 */text-align: center;}
.content-box p{font-size: 12px;/* text-align: center; */margin-bottom: 5px;
}
.content-box span{font-size: 14px;color: #a10000;
}
.main .m-goods .m-g-content .content-box img{width: 100%;display: block;
}.footer{height: 200px;/* background-color: tomato; */
}
.footer .f-top{height: 113px;/* background-color: aliceblue; */overflow: hidden;border-top: 1px solid #ccc;margin-top: 30px;
}
.footer .f-top .f-t-box{width: 1120px;height: 53px;/* background-color: rgb(30, 160, 160); */margin: 0 auto;margin-top: 30px;
}
.footer .f-top .f-t-box .f-t-content{width: 279px;height: 100%;/* background-color: chocolate; *//* background-color: #eee; */text-align:center;float: left;border-right:1px solid #ccc}
.footer .f-top .f-t-box .f-t-content img{/* 调整图片的基线 */vertical-align: middle;}
.footer .f-top .f-t-box .f-t-content span{/* 调整文字的基线 */vertical-align: middle;}
.footer .f-top .f-t-box .f-t-content-n-border{width: 280px;border: none;
}
.footer .f-top .f-t-box .f-t-content-n-border img{/* 调整图片的基线 */vertical-align: middle;margin-left: 10px;
}
.footer .f-top .f-t-box .f-t-content-n-border span{/* 调整文字的基线 */vertical-align: middle;margin-left: 10px ;
}
.footer .f-copyright{height: 87px;width: 100%;/* border: 2px solid tomato; */background-color: #000;text-align: center;font-size: 12px;color: #fff;/* line-height: 100px; */padding-top: 18px;box-sizing: border-box;
}三、HTML 代码如下
<!DOCTYPE html>
<html lang="cn-ZH">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>公众号@李桥桉-出品</title><link rel="stylesheet" href="E:\AAA_hailsham\1283646852\FileRecv\20230304\20230304\homepage.css">
</head>
<body><div class="header"><div class="h-logo" ><div class="h-l-content"><div class="logo-box"><img src="./imgs/logo.png" alt=""></div><div class="search-box"><div class="s-login" ><a href="#">登录</a><span>|</span><a href="#">注册</a></div><div class="s-input"><!--placeholder 设置输入框的提示文字 --><input type="text" placeholder="热门搜索：@李桥桉"><img src="./imgs/ss.png" alt=""></div><div class="s-icon"><a href="#"><img src="./imgs/gt3.png" alt=""></a><a href="#"><img src="./imgs/gwc.png" alt=""></a></div></div></div></div><div class="h-nav"><ul div class="h-menu"><a href="#" >首页</a><a href="#" >所有商品</a><a href="#" >装饰摆件</a><a href="#" >布艺软饰</a><a href="#" >墙饰壁挂</a><a href="#" >蜡艺香薰</a><a href="#" >创意家居</a> </ul></div></div><div class="main"><div class="m-banner" ><div class="m-box"><div class="m-picture"><img src="./imgs/banner1.jpg" alt=""></div></div></div><div class="m-entry" ><div class="m-entry-box"><img src="./imgs/i1.jpg" alt=""></div><div class="m-entry-box"><img src="./imgs/i2.jpg" alt=""></div><div class="m-entry-box"><img src="./imgs/i3.jpg" alt=""></div></div><div class="m-goods" ><div class="m-g-title"><img src="./imgs/ih3.jpg" alt=""></div><div class="m-g-content"><div class="content-box"><div class="c-row"><div class="content-box"><img src="./imgs/s1.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div><div class="content-box"><img src="./imgs/s12.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div><div class="content-box"><img src="./imgs/s3.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div><div class="content-box"><img src="./imgs/s4.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div></div><div class="c-row"><div class="content-box"><img src="./imgs/s5.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div><div class="content-box"><img src="./imgs/s6.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div><div class="content-box"><img src="./imgs/s7.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div><div class="content-box"><img src="./imgs/s8.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div></div><div class="c-row"><div class="content-box"><img src="./imgs/s9.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div><div class="content-box"><img src="./imgs/s10.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div><div class="content-box"><img src="./imgs/s11.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div><div class="content-box"><img src="./imgs/s12.jpg" alt=""><p>【最家】壁饰墙饰软装@李桥桉</p><span>￥668.00</span></div></div></div></div></div><div class="footer"><div class="f-top"><div class="f-t-box"><div class="f-t-content"><img src="./imgs/foot1.png" alt=""><span>7天无理由退货</span></div><div class="f-t-content"><img src="./imgs/foot2.png" alt=""><span>15天免费换货</span></div><div class="f-t-content"><img src="./imgs/foot3.png" alt=""><span>满599包邮</span></div><div class="f-t-content f-t-content-n-border"><img src="./imgs/foot4.png" alt=""><span>手机特色服务</span></div></div></div><div class="f-copyright"><p>"家居网页©2022-2023版权所有@李桥桉 京ICP备080100-xx号</p><p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p></div>
</div>
</body>
</html>
四 、完整“．ｃｓｓ”／＂．ｈｔｍｌ＂文件及图片获取
搜索公粽号＠李桥桉，回复【家居网首页①】即可ｇｅｔ．
注：图片素材来源于蜗牛学苑