网站首页 > 技术教程正文

博客首页制作如何制作博客网页

goqiw 2024-10-13 04:53:57 技术教程 10 ℃ 0 评论

第二篇比预期来的要慢，让大家久等了，一方面呢是工作太忙，领导给我临时插任务，另一方面呢还是对前端知道太少，经过我这几天的恶补，终于做出了一个页面（泪奔...）。前端大神轻喷
注: 今天目标是写博客的首页。对前端熟悉的同学可以帮我这个小白指点一下该怎么做，不熟悉的童鞋呢，搬好小板凳，跟我一起去踩坑吧。

博客首页制作

先给大家看下效果

有点丑有木有（），其实是背景图片没有设置，还有一些色彩配色没处理

不管怎样总算有个雏形了，也是我手底下亲手诞生的小 “生命” 了。

废话少说，往下看。

我使用的是element-UI框架，下载安装命令是：

cnpm install --save element-ui

公共头部的制作

老规矩，直接上代码。

在components文件夹下新建一个Head.vue, 添加下列代码<template>
 <div id="header">
 <div class="search">
 <img src="../assets/title.png">
 <div id="head_right">
 <form id="head_right1">
 <input type="text" class="input_text" placeholder="请输入关键字">
 <input class='input_submit' type="submit" value="搜索">
 </form>
 </div>
 </div>
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
 <el-menu-item index="0" @click="$router.push('/')"><a href=""><img src="../assets/logo.png" height="30" width="30"></a></el-menu-item>
 <el-menu-item index="1" @click="$router.push('/')">首页</el-menu-item>
 <el-menu-item index="2" @click="$router.push('/page2')">python</el-menu-item>
 <el-menu-item index="3">linux</el-menu-item>
 <el-menu-item index="4">归档</el-menu-item>
 <el-menu-item index="5" @click="$router.push('/life')">生活</el-menu-item>
 <el-menu-item index="6" @click="$router.push('/aboutme')">关于我</el-menu-item>
 </el-menu>
 </div>
</template>
<script>
 export default {
 name: "Head",
 }
</script>
<style scoped>
 .el-menu{
 margin: 10px 0;
 padding-left: 50px;
 /*background-color: #EEF1F6;*/
 background-color: rgba(0, 0, 0, 0);
 border: #cccccc;
 font-size:18px;
 }
 .el-menu-item {
 color:black !important;
 }
 .el-menu-item:hover{
 background-color: rgba(0, 0, 0, 0) !important;
 color:blue !important;
 }
 .el-menu-item:focus{
 background-color: rgba(0, 0, 0, 0) !important;
 }
 .input_text {
 padding-left: 5px;
 border: 1px solid #ccc;
 border-radius: 2px;
 width: 158px;
 height: 26px;
 line-height: 26px;
 background-color: #e5e5e5;
 }
 .input_submit {
 background-color: #333;
 color: #FFF;
 margin-left: 5px;
 width: 50px;
 border: none;
 cursor: pointer;
 height: 28px;
 line-height: 28px;
 border-radius: 5px;
 }
 .search {
 display: flex;
 height: 100px;
 align-items: center;
 justify-content: space-between;
 }
</style>

其中，网站名称是一个img标签，输入框和按钮是input 标签，它有个属性type,当type的值为text时，它就显示的是一个输入框，当type的值为submit时，他就显示一个button。至于布局，三言两语说不清楚，希望大家能自己多看看css相关知识，目前能理解我写的代码就行。其中的小知识我简单罗列一下，这些都是我一个一个整了好久才弄明白的，毕竟自己动手才记忆深刻

div居中效果的实现方法

<body>
 <div class="content">
 </div>
</body>
.content {
 width: 1200px;
 margin: 0 auto;
}

啥意思呢，就是给里面的div设置一个宽度，让后让这个div的外边距的左右边距自动分布。

2. div左右分布并垂直居中的实现

<body>
 <div class="left_content">
 </div>
 <div class="right_content">
 </div>
</body>
body {
 display:flex;
 align-items: center;
 justify-content: space-between;
}

网上说好多方法实现，这里不管它什么方法，先用一个目前能懂得。上面这段代码的意思是

设置父元素浮动布局 display:flex; 同时让父元素内的子元素垂直居中 align-items:center; 并且一左一右分布 justify-content: space-between;原理呢咱们小白就不用管了，先能用起来再说。

菜单是通过el-menu 来实现的, 通过mode="horizontal" 指定菜单的方向是横向分布还是垂直分布的

el-menu-item 通过 @click="$router.push() "来指定点击需要跳转的url.

在src文件夹下新建一个views文件夹，用来写具体页面的

注： components用来放公共组件部分的代码

views下用来放具体页面的代码。

首页

在views下新建Index.vue 用来表示首页的

公共头部已经写好了，所以我们只关注内容就行了，Index.vue如下

<template>
 <div id="inner">
 <Card></Card>
 <Card></Card>
 <Card></Card>
 <Card></Card>
 <Card></Card>
 <Card></Card>
 <Card></Card>
 <Card></Card>
 <Card></Card>
 </div>
</template>
<script>
 import Card from "../components/Card"
 export default {
 name: "Index",
 components: {Card},
 comments:{
 Card
 }
 }
</script>
<style scoped>
 #inner {
 width: 1170px;
 margin: 0 auto;
 background-color: rgba(0, 0, 0, 0);
 display: grid;
 grid-template-columns: repeat(auto-fill, 200px);
 grid-gap: 10px 10px;
 justify-content: space-around;
 }
</style>

其中 Card 是我自己创建的组件, card的均匀分布是怎么处理的呢

这里有个难点，我自己也是找了好久才找到一种答案。

就是把父元素设置为grid布局，通过grid-template-columns属性设置列宽为200px ，自动填充。重点是这四句话

display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 10px 10px;
justify-content: space-around;

在compentents下新建Card.vue，添加以下代码：

<template>
 <div class="card">
 <img src="../assets/girl.jpg" class="img-title">
 <a>个人blog</a>
 <p>个人实现的博客,无抄袭,纯手工打造,主要用于学习,想快速建站请绕行
 个人实现的博客,无抄袭,纯手工打造,主要用于学习,想快速建站请绕行</p>
 </div>
</template>
<script>
 export default {
 name: "Card"
 }
</script>
<style scoped>
 .card {
 background-color: rgba(0, 0, 0, 0);
 text-align: center;
 margin: 0;
 border: 1px solid #ccc;
 border-radius: 2px;
 height: 300px;
 }
 .img-title {
 display: block;
 width: 100%;
 height: 200px;
 }
 .card a {
 display:block;
 margin-top: 5px;
 font-weight: bold;
 }
 .card p {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
 }
</style>

这里牵扯到一个知识点，就是多行文本如何规定只显示有限行文字，多余的文字用省略号代替呢, 秘密就是下面这四句话

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; 子元素垂直显示
-webkit-line-clamp: 2; 最多两行
overflow: hidden; 多余的省略

公共底部

compentents下新建Foot.vue, 添加以下代码：

<template>
 <div id="foot">
 <p class="foot">?2017 ping 苏ICP备xxxxxx号 All rights reserved.</p>
 </div>
</template>
<script>
 export default {
 name: "Foot"
 }
</script>
<style scoped>
 .foot {
 text-align: center;
 background-color: #333333;
 }
</style>

这里没什么好说的，当前页面简单，目前不准备添加什么花里胡哨的功能。

各个组件都已经写好，那么如何把他们整合起来呢，首先我们修改App.vue

添加以下代码：

<template>
 <div id="app">
 <Head></Head>
 <router-view></router-view>
 <Foot></Foot>
 </div>
</template>
<script>
import Head from "./components/Head";
import Foot from "./components/Foot"
export default {
 name: 'App',
 components: {
 Head,
 Foot
 }
}
</script>
<style>
 #app {
 width: 1170px;
 margin: auto;
 }
</style>

这里我们可以看到，App.vue把公共头部，路由部分，公共底部整合起来，这样当

我们点击各个菜单得时候，变化的只是中间部分，公共头部和公共底部始终保持不

变。可能讲解的有点粗糙，大家可以到我的github上去看源代码，亲自动手去看一

下效果，github上少上传了package.json文件，不过没关系，通过初始化一个项

目，然后把生成的package.json拷过来就可以用了。

想看作者是如何一步一步实现博客的老铁点个关注，我们下期见。

(吐槽一下：代码布局支持真的不友好，我使出浑身解数了)

网站首页 > 技术教程正文

博客首页制作如何制作博客网页

博客首页制作

公共头部的制作

首页

公共底部

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 技术教程 正文

博客首页制作 如何制作博客网页

博客首页制作

公共头部的制作

首页

公共底部

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 技术教程正文

博客首页制作如何制作博客网页

取消回复欢迎你发表评论: