【Day2】【Vue】前端博客从0到1（首页功能模块初步设计）

时间：2023-03-31 21:27:30 vue.js

h1,h2{font-weight:normal;}ul{list-style-type:none;填充：0；}li{显示：内联块；margin:010px;}a{color:#42b983;}/*carouselstylestart*/.el-carousel__itemh3{color:#475669;字体大小：18px；不透明度：0.75；行高：300px；margin:0;}.el-carousel__item:nth-child(2n){background-color:#99a9bf;}.el-carousel__item:nth-child(2n+1){background-color:#d3dce6;}/*结束轮播样式*/.intro-img{margin-top:20px;宽度：100%；}.nav{宽度：100%；背景und-color:#fff;}.body{宽度:1080px;边距：20px自动；显示：弹性；调整内容：空格；}.content{宽度：700px；}.function{宽度：360px；高度：300px;}经过上一节项目的简单搭建，我们开始基于项目完成HelloWorld.vue首页的整体设计。首先我们来看一下今天要完成的效果。当前首页主要分为4个部分：导航栏、图片区、博客区、功能区1.导航区导航区主要使用element-ui构建：导航菜单设计代码如下：主页个人空间Friends

其中:default-active属性表示默认选中的菜单栏，mode表示菜单是横向还是纵向，@select是设置选区时要执行的函数如下：

照片墙

3.播客区和功能区使用卡片代码如下：

博客区

功能区

4.首页整体设计已经简单设计完成，接下来完善各组件功能代码的整体代码：h1,h2{font-weight:normal;}ul{list-style-type:none;填充：0；}li{显示：内联块；margin:010px;}a{color:#42b983;}/*carouselstylestart*/.el-carousel__itemh3{color:#475669;字体大小：18px；不透明度：0.75；行高：300px；margin:0;}.el-carousel__item:nth-child(2n){background-color:#99a9bf;}.el-carousel__item:nth-child(2n+1){background-color:#d3dce6;}/*结束轮播样式*/.intro-img{margin-top:20px;宽度：100%；}.nav{宽度：100%；背景und-color:#fff;}.body{宽度:1080px;边距：20px自动；显示：弹性；调整内容：空格；}.content{宽度：700px；}.function{宽度：360px；高度：300px;}