分享一个可以“趁别人喝咖啡的功夫“”写的一个静态网页,纯纯练手小项目,适合前端刚入门的小白练练手。
@前端练手静态页面
实现效果图展示
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-文本格式化、特殊标签、锚点、字体图标;等。
完整代码文件及图片获取
搜索公粽号@李桥桉,回复【家居网首页①】即可get.
二、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>
四 、完整“.css”/".html"文件及图片获取
搜索公粽号@李桥桉,回复【家居网首页①】即可get.
注:图片素材来源于蜗牛学苑