🎉
不定期分享源码,关注不丢失哦
文章目录
- 一、作品介绍
- 二、作品演示
- 三、代码目录
- 四、网站代码
- HTML部分代码
- CSS部分代码
- 五、源码获取
一、作品介绍
🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面
。
🏷️想要获取本文源码,点击前往吧
二、作品演示
三、代码目录
四、网站代码
HTML部分代码
<div class="header">
<div class="logo">
<img src="./images/logo.png" alt="">
</div>
<div class="nav">
<a href="#">首页</a>
<a href="#">自行车简介</a>
<a href="#">自行车分类</a>
</div>
</div>
<div class="banner">
<img src="./images/banner.jpg">
</div>
CSS部分代码
@font-face {
font-family: 'SourceHanSerif';
src: url('../font/SourceHanSerif_Regular.woff2');
}
* {
margin: 0;
padding: 0;
}
body {
background: rgb(87, 206, 255);
}
.wrapper {
width: 980px;
margin: 0 auto;
background: #fff;
}
.header {
width: 100%;
padding: 5px 0;
text-align: center;
}
.logo {
width: 225px;
display: inline-block;
float: left;
}
.nav {
float: right;
margin-top: 28px;
padding-right: 40px;
}
.nav a {
margin-left: 60px;
text-decoration: none;
color: #333;
font-size: 18px;
font-weight: bold;
}
.banner {
width: 100%;
}
.banner img {
width: 100%;
}
五、源码获取
🥇 ~ 关注我,点赞博文~
每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]
三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧