我们先来看看效果图
是不是心动了呢,小伙伴们
我们先来看看做项目之前的准备吧:
1.新建一个文件夹:m-bilibili
记得在m-bilibili里面建好相应的文件夹;例如css文件夹,less文件夹,images文件夹,以及字体图标文件夹fonts或者leb也行
2.打开软件vscode,导入项目m-bilibili
3.看效果图分结构模块:
头部盒子:
主体区域:
最后是底部模块哦,注意哦,最后是用到一个固定定位哦:
好那么在vscode中用代码来实现吧:
注意在写代码之前要引入相应的css哦:
<link rel="stylesheet" href="./fonts/iconfont.css">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
搭建结构:
<body>
<!-- 头部盒子开始 -->
<div class="m-header">
<!-- 头部导航栏 -->
<div class="m-navbar">
<!-- logo -->
<a href="#" class="logo">
<i class="iconfont Navbar_logo"></i>
</a>
<!-- 右边盒子 -->
<div class="right">
<a href="#" class="search">
<i class="iconfont ic_search_tab"></i>
</a>
<a href="#" class="face">
<img src="./images/login.png" alt="">
</a>
<div class="nav-openapp">
<img src="./images/download.png" alt="">
</div>
</div>
</div>
<!-- 菜单频道盒子 -->
<div class="channel-menu">
<!-- tab栏盒子 -->
<div class="tabs">
<!-- 1.让a不要换行显示 弹性容器,a标签为弹性
盒子
2.文字不能换行显示 white-space:
nowrap;文字强制不换行
3.让文字上下垂直居中 ,行高,左右距离使用padding撑开
最低0.47元/天 解锁文章
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
