devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

element UI 学习_el-row 行间距

作者：笔触狂放9 | 2024-02-20 04:04:02

赞

踩

el-row 行间距

记录下，自己搭建这个 网站(古典小说网) 初始elementUI版本的过程

目录

一、搭建环境

1、引入JS 、CSS

2、VUE

二、布局

三、导航

1、参考官网导航介绍，设置自己的导航 

2、发现有一个白线，下面是去掉白线的样式

3、想让二级菜单也是横排

4、界面边距

四、在header中添加相关公示信息

五、图片显示部分

1、布局

2、图片显示

3、图片下面加个文字 说明 

1）比如加个 软件名称 ： 有声小说书屋

2）设置标题格式

4、更改排列方式为 垂直居中

六、文字段落介绍部分

1、标题样式

 2、文字左对齐

3、设置padding

4、设置按钮样式

七、类似的把自己另二款软件介绍加进来

八、Footer

1、友情链接

2、页脚底部 版权信息

九、首页代码

1、HTML

2、CSS

一、搭建环境

1、引入JS 、CSS

elementUI官方网站：Element - The world's most popular Vue UI framework

VUE       官方网站：Vue.js

  1.  <head>
  2.  	<meta charset="utf-8">
  3.  	<meta name="viewport" content="width=device-width, initial-scale=1">
  4. 	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  5.  	<title>古典小说网</title>
  6.  </head>

  1.  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  2.  
  3.  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

2、VUE

  1.  <script>
  2.     new Vue({
  3.       el: '#app',
  4.       data: function() {
  5.         return {  }
  6.       },
  7.       methods:{
  8.       },
  9.       mounted(){
  10.       }
  11.       
  12.     })
  13.  
  14.   </script>

二、布局

根据自己网站，选择适合的容器布局

  1. <el-container>
  2.   <el-header>Header</el-header>
  3.   <el-main>Main</el-main>
  4.   <el-footer>Footer</el-footer>
  5. </el-container>

不加样式的话，

 官网上的示例，加了额外样式

  1. <style>
  2.   .el-header, .el-footer {
  3.     background-color: #B3C0D1;
  4.     color: #333;
  5.     text-align: center;
  6.     line-height: 60px;
  7.   }
  8.   
  9.   .el-aside {
  10.     background-color: #D3DCE6;
  11.     color: #333;
  12.     text-align: center;
  13.     line-height: 200px;
  14.   }
  15.   
  16.   .el-main {
  17.     background-color: #E9EEF3;
  18.     color: #333;
  19.     text-align: center;
  20.     line-height: 160px;
  21.   }
  22.   
  23.   body > .el-container {
  24.     margin-bottom: 40px;
  25.   }
  26.   
  27.   .el-container:nth-child(5) .el-aside,
  28.   .el-container:nth-child(6) .el-aside {
  29.     line-height: 260px;
  30.   }
  31.   
  32.   .el-container:nth-child(7) .el-aside {
  33.     line-height: 320px;
  34.   }
  35. </style>

这里需要注意的是，header高度默认60，

如果想改header高度，在样式里设置height没起作用

但是el-header 提供了height属性，可在属性里设置

		<el-header height='160px'>

三、导航

1、参考官网导航介绍，设置自己的导航 

 Element - The world's most popular Vue UI framework

  1. 		<el-header height='160px'>
  2. 			<el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff"   active-text-color="#ffd04b" >
  3. 				<el-menu-item index="1">首页</el-menu-item>
  4. 				<el-submenu index="2">
  5. 				  <template slot="title">古典小说</template>
  6. 				  <el-menu-item index="2-1">传世经典</el-menu-item>
  7. 				  <el-menu-item index="2-2">古书拾遗</el-menu-item>
  8. 				  <el-menu-item index="2-3">古典言情</el-menu-item>
  9. 				  <el-submenu index="2-4">
  10. 					<template slot="title">史书戏曲</template>
  11. 					<el-menu-item index="2-4-1">选项1</el-menu-item>
  12. 					<el-menu-item index="2-4-2">选项2</el-menu-item>
  13. 					<el-menu-item index="2-4-3">选项3</el-menu-item>
  14. 				  </el-submenu>
  15. 				</el-submenu>
  16. 				<!-- <el-menu-item index="3" disabled>消息中心</el-menu-item> -->
  17. 				<!-- <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
  18. 			  </el-menu>
  19. 		</el-header>
  20.

VUE 对应的data 和 选中某菜单事件方法

  1.  <script>
  2.     new Vue({
  3.       el: '#app',
  4.       data: function() {
  5.         return { 
  6. 			activeIndex: '1'
  7. 		 }
  8.       },
  9.       methods:{
  10. 		handleSelect(key, keyPath) {
  11.         console.log(key, keyPath);
  12.      	 }
  13.       },
  14.       mounted(){
  15.       }
  16.       
  17.     })
  18.  
  19.   </script>

效果如下：

2、发现有一个白线，下面是去掉白线的样式

  1. 	/* 去除白线 */
  2. 	.el-menu.el-menu--horizontal{  
  3.      border: none;
  4.     }

效果如下：

3、想让二级菜单也是横排

比如 ，想呈现如下效果

只需设置下li的样式

  1. li {
  2. 	display: inline-block;
  3. }

4、界面边距

左侧与浏览器边界有边距

  1. 	 body{
  2. 		 margin:0;
  3. 	 }

消除边距

四、在header中添加相关公示信息

效果如下：

 实现如下：

  1. 		<el-header height='160px'>
  2. 			<el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff"   active-text-color="#ffd04b" >
  3. 				<el-menu-item index="1">首页</el-menu-item>
  4. 				<el-submenu index="2">
  5. 				  <template slot="title">古典小说</template>
  6. 				  <el-menu-item index="2-1">传世经典</el-menu-item>
  7. 				  <el-menu-item index="2-2">古书拾遗</el-menu-item>
  8. 				  <el-menu-item index="2-3">古典言情</el-menu-item>
  9. 				  <el-submenu index="2-4">
  10. 					<template slot="title">史书戏曲</template>
  11. 					<el-menu-item index="2-4-1">选项1</el-menu-item>
  12. 					<el-menu-item index="2-4-2">选项2</el-menu-item>
  13. 					<el-menu-item index="2-4-3">选项3</el-menu-item>
  14. 				  </el-submenu>
  15. 				</el-submenu>
  16. 				<!-- <el-menu-item index="3" disabled>消息中心</el-menu-item> -->
  17. 				<!-- <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
  18. 			  </el-menu>
  19.  
  20. 			  <el-row style="line-height:20px;font-size:14px;margin-top:10px;margin-bottom:20px;">
  21. 				  <el-col :span="3" style="text-align:left; color:rgb(18, 228, 18);">
  22. 					<p>头条号：古典小说</p>
  23. 					<p>公众号：古典小说网</p>
  24. 				  </el-col>	
  25. 				  <el-col :span="21" style=" display: flex; font-size:16px; color:rgb(225, 237, 238); justify-content:flex-start;align-items:center;" justify="flex">
  26. 					<p>千年千本古典小说，本网站整理近六百本古典小说资源，并提供有声聆听方式，欢迎咨询下载 QQ群号：252380640</p>
  27. 				  </el-col>				  
  28. 			 </el-row>
  29.  
  30. 		</el-header>

这里需要注意的是：

行高                    line-height:20px;

字体大小             font-size:14px;

el-row行间距       margin-top:10px;margin-bottom:20px;

等设置

同时，行列布局采用的如下结构

  1.               <el-row>
  2.  
  3.                   <el-col :span="3">
  4. 					<p>头条号：古典小说</p>
  5. 					<p>公众号：古典小说网</p>
  6.                   </el-col>
  7.                   <el-col :span="21">
  8.                   </el-col>              
  9.  
  10.              </el-row>

第1列，放了两个段落，我想让第2列  水平居左，垂直居中显示

这里使用flex布局 方式  （Flex 布局语法教程 | 菜鸟教程）

display:flex;

justify-content: flex-start;    //水平居左对齐

align-items:center;              //垂直居中对齐

  1. 				  <el-col :span="21" style=" display: flex; font-size:16px; color:rgb(225, 237, 238); justify-content:flex-start;align-items:center;" >
  2. 					<p>千年千本古典小说，本网站整理近六百本古典小说资源，并提供有声聆听方式，欢迎咨询下载 QQ群号：252380640</p>
  3. 				  </el-col>

五、图片显示部分

打算将自己写的几款软件，在这里展示下

实现效果如下：

1、布局

采用一行两列模式，左边显示图片，右边是介绍

  1. 		<el-main>
  2. 			<el-row>
  3. 				<el-col :span="12">
  4. 				</el-col>
  5. 				<el-col :span="12"  >
  6. 				</el-col>
  7. 			</el-row>
  8. 		</el-main>

2、图片显示

  1.                      <el-image
  2. 					 style="padding-bottom:0px;"
  3. 				     :src="youshengURL"
  4. 					 :fit="fit"></el-image>

参数对应于VUE中的成员变量

  1.     new Vue({
  2.       el: '#app',
  3.       data: function() {
  4.         return { 
  5. 			activeIndex: '1',
  6. 			youshengURL: 'assets/img/有声小说.png',
  7. 			fit:'contain'
  8. 		 }
  9.       },

效果如下：

3、图片下面加个文字 说明 

1）比如加个 软件名称 ： 有声小说书屋

  1. 				<el-col :span="12"  >
  2. 					
  3.                      <el-image
  4. 			
  5. 				     :src="youshengURL"
  6. 					 :fit="fit">
  7.                      </el-image>		
  8. 				
  9. 					<h6 class="section-title">有声小说书屋</h6>
  10. 					
  11.  
  12. 				</el-col>

效果如下：

2）设置标题格式

  1. .section-title {
  2. 	position: relative;
  3. }
  4.  
  5. .section-title h6 {
  6. 	color: #00B965;
  7. 	font-size: 17px;
  8. 	letter-spacing: 4px;
  9. }

效果如下：

4、更改排列方式为 垂直居中

下载的排列效果：

将其改为：

实现方式：

将el-col改为flex弹性布局 （Flex 布局语法教程 | 菜鸟教程）

  1. 				<el-col :span="12"  style="display:flex;  flex-direction:column; justify-content:space-around;" >
  2. 					
  3.                      <el-image				
  4. 				     :src="youshengURL"
  5. 					 :fit="fit">
  6. 					</el-image>		
  7. 					<div class="section-title">
  8. 					  <h6 >有声小说书屋</h6>
  9. 					</div>
  10.  
  11. 				</el-col>

这样就实现了所希望的效果

六、文字段落介绍部分

左侧图片，右侧文字介绍

1、标题样式

  1. .section-title h2 {
  2. 	font-size: 50px;
  3. 	font-weight: 500;
  4. 	line-height: 60px;
  5. 	letter-spacing: 1px;
  6. 	margin: 20px 0;
  7. }
  8.  
  9. .section-title h2 b {
  10. 	color: #FFD857;
  11. }
  12.  
  13. p {
  14. 	font-family: 'Quicksand', sans-serif;
  15. 	font-size: 16px;
  16. 	font-weight: 500;
  17. 	line-height: 32px;
  18. 	position: relative;
  19. 	color: #686868;
  20. }

  1. 						<div class="section-title">
  2. 							<h2>听听书 <b>打发无聊时光</b></h2>
  3. 						</div>
  4.  
  5. 						<p>也许是 电脑上最实用的 看书、听书、藏书的软件</p>
  6. 					   <!-- <h1> 怎么使用？</h1> -->
  7. 					   <div class="section-title">
  8. 						<h2><b><i>怎么使用？</i></b></h2>
  9. 					    </div>
  10. 					   <p>1、txt小说，直接拖入软件中，便可 自动划分章节</p>
  11. 					   <p>2、epub格式小说，直接拖入软件中， 便可自动解析章节</p>
  12. 					   <p>3、提供丰富的配色方案， 个性化阅读体验</p>
  13. 					   <p>4、自动记录阅读位置，下次打开时，自动定位到具体章节中</p>
  14. 					   <p>5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱</p>
  15. 					   <p>6、提供书签功能，方便定位</p>
  16. 					   <p>7、提供标注功能，方便标注重点</p>
  17. 					   <p>8、提供编辑功能，方便修改</p>
  18. 					   <p>9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 </p>
  19. 					   <p>从此，只需要听就可以，而且听得内容完全是自己选择的。</p>

效果：

 2、文字左对齐

  1. 				<el-col :span="12" style="text-align: left;">
  2.  
  3. 						<div class="section-title">
  4. 							<h2>听听书 <b>打发无聊时光</b></h2>
  5. 						</div>
  6.  
  7. 						<p>也许是 电脑上最实用的 看书、听书、藏书的软件</p>
  8. 					   <!-- <h1> 怎么使用？</h1> -->
  9. 					   <div class="section-title">
  10. 						<h2><b><i>怎么使用？</i></b></h2>
  11. 					    </div>
  12. 					   <p>1、txt小说，直接拖入软件中，便可 自动划分章节</p>
  13. 					   <p>2、epub格式小说，直接拖入软件中， 便可自动解析章节</p>
  14. 					   <p>3、提供丰富的配色方案， 个性化阅读体验</p>
  15. 					   <p>4、自动记录阅读位置，下次打开时，自动定位到具体章节中</p>
  16. 					   <p>5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱</p>
  17. 					   <p>6、提供书签功能，方便定位</p>
  18. 					   <p>7、提供标注功能，方便标注重点</p>
  19. 					   <p>8、提供编辑功能，方便修改</p>
  20. 					   <p>9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 </p>
  21. 					   <p>从此，只需要听就可以，而且听得内容完全是自己选择的。</p>
  22.  
  23. 					   <a href="down/有声小说书屋V3.11.zip" target="_blank" class="main-btn" >本地下载 </a>
  24. 						<a href="https://pan.baidu.com/s/1gvAZKdxjWZmVnBQpXBjGgQ" target="_blank" class="main-btn" >网盘下载 </a>
  25. 					   <p> 提取码：0000</p>
  26.  
  27. 				</el-col>

3、设置padding

两列挨着太近了，设置下右侧col的padding-left

  1. 				<el-col :span="12" style="text-align: left;padding-left:40px;">
  2. 					
  3. 						<div class="section-title">
  4. 							<h2>听听书 <b>打发无聊时光</b></h2>
  5. 						</div>
  6.  
  7. 						<p>也许是 电脑上最实用的 看书、听书、藏书的软件</p>
  8. 					   <!-- <h1> 怎么使用？</h1> -->
  9. 					   <div class="section-title">
  10. 						<h2><b><i>怎么使用？</i></b></h2>
  11. 					    </div>
  12. 					   <p>1、txt小说，直接拖入软件中，便可 自动划分章节</p>
  13. 					   <p>2、epub格式小说，直接拖入软件中， 便可自动解析章节</p>
  14. 					   <p>3、提供丰富的配色方案， 个性化阅读体验</p>
  15. 					   <p>4、自动记录阅读位置，下次打开时，自动定位到具体章节中</p>
  16. 					   <p>5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱</p>
  17. 					   <p>6、提供书签功能，方便定位</p>
  18. 					   <p>7、提供标注功能，方便标注重点</p>
  19. 					   <p>8、提供编辑功能，方便修改</p>
  20. 					   <p>9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 </p>
  21. 					   <p>从此，只需要听就可以，而且听得内容完全是自己选择的。</p>
  22.  
  23. 					   <a href="down/有声小说书屋V3.11.zip" target="_blank" class="main-btn" >本地下载 </a>
  24. 						<a href="https://pan.baidu.com/s/1gvAZKdxjWZmVnBQpXBjGgQ" target="_blank" class="main-btn" >网盘下载 </a>
  25. 					   <p> 提取码：0000</p>
  26. 				
  27. 				</el-col>

4、设置按钮样式

  1. /*Button Style */
  2.  
  3. .main-btn {
  4. 	display: inline-block;
  5. 	background: #FFD857;
  6. 	color: #191919;
  7. 	font-size: 16px;
  8. 	font-weight: 500;
  9. 	letter-spacing: 6px;
  10. 	text-transform: capitalize;
  11. 	padding: 14px 28px;
  12. 	text-align: center;
  13. 	vertical-align: middle;
  14. 	cursor: pointer;
  15. 	border-radius: 5px;
  16. 	-webkit-transition: .3s;
  17. 	transition: .3s;
  18. 	width: 100px;
  19. 	height: auto;
  20. }
  21.  
  22.  
  23. a {
  24. 	text-decoration: none;
  25. 	cursor: pointer;
  26. 	font-family: "Poppins", serif;
  27. }
  28.  
  29.  
  30. button,
  31. input,
  32. textarea,
  33. a:hover,
  34. a:focus,
  35. a:visited {
  36. 	text-decoration: none;
  37. 	outline: none;
  38. 	outline-width: 0 !important;
  39. }

效果：

从网上又找了按钮样式：

  1. a{
  2.     display: block; 
  3.     line-height: 100px; 
  4.     text-align: center;
  5. }
  6.  
  7. .main-btn {
  8.     display: table-cell;
  9.     text-align: center;
  10.     vertical-align: middle;
  11. 	width: 200px;
  12. 	height: 100px;
  13. 	color: #fff;
  14. 	background-color: #6496c8;
  15. 	border: none;
  16. 	border-radius: 15px;
  17. 	box-shadow: 0 10px #27496d;
  18. 	letter-spacing: 6px;
  19.  
  20.  
  21. }

效果如下：

七、类似的把自己另二款软件介绍加进来

  1. 		<el-main>
  2. 			<el-row>
  3. 				<el-col :span="12"  style="display:flex; height:800px; flex-direction:column; justify-content: flex-end;" >
  4. 					
  5.                      <el-image				
  6. 				     :src="youshengURL"
  7. 					 :fit="fit">
  8. 					</el-image>		
  9. 					<div class="section-title">
  10. 					  <h6 >有声小说书屋</h6>
  11. 					</div>
  12.  
  13. 				</el-col>
  14. 				<el-col :span="12" style="text-align: left;padding-left:40px;">
  15. 					
  16. 						<div class="section-title">
  17. 							<h2>听听书 <b>打发无聊时光</b></h2>
  18. 						</div>
  19.  
  20. 						<p>也许是 电脑上最实用的 看书、听书、藏书的软件</p>
  21. 					   <!-- <h1> 怎么使用？</h1> -->
  22. 					   <div class="section-title">
  23. 						<h2><b><i>怎么使用？</i></b></h2>
  24. 					    </div>
  25. 					   <p>1、txt小说，直接拖入软件中，便可 自动划分章节</p>
  26. 					   <p>2、epub格式小说，直接拖入软件中， 便可自动解析章节</p>
  27. 					   <p>3、提供丰富的配色方案， 个性化阅读体验</p>
  28. 					   <p>4、自动记录阅读位置，下次打开时，自动定位到具体章节中</p>
  29. 					   <p>5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱</p>
  30. 					   <p>6、提供书签功能，方便定位</p>
  31. 					   <p>7、提供标注功能，方便标注重点</p>
  32. 					   <p>8、提供编辑功能，方便修改</p>
  33. 					   <p>9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 </p>
  34. 					   <p>从此，只需要听就可以，而且听得内容完全是自己选择的。</p>
  35. 					   <div style="display:flex;justify-content:space-around;">
  36. 					   <a href="down/有声小说书屋V3.11.zip" target="_blank" class="main-btn" >下载 </a>		
  37. 					   </div>							
  38. 				</el-col>
  39. 			</el-row>
  40. 			<el-divider></el-divider>
  41. 			<el-row>
  42. 				<el-col :span="12"  style="display:flex;  flex-direction:column; justify-content:space-around;" >
  43. 					
  44.                      <el-image				
  45. 				     :src="ketangURL"
  46. 					 :fit="fit">
  47. 					</el-image>		
  48. 					<div class="section-title">
  49. 					  <h6 >快乐课堂</h6>
  50. 					</div>
  51.  
  52. 				</el-col>
  53. 				<el-col :span="12" style="text-align: left;padding-left:40px;">
  54. 					
  55. 					<div class="section-title">
  56. 						<h6>快乐课堂</h6>
  57. 						<h2> 寓教于乐<b>小组、个人 完善积分机制</b></h2>
  58. 					</div>
  59.  
  60. 					<p>老师评价：</p>
  61. 					<p>很好，很有创意</p>
  62. 					<p>这软件确实很实用</p>
  63. 					<p>学生很感兴趣</p>
  64. 					<p>这个软件在小组教学中，很有帮助</p>
  65. 					<div style="display:flex;justify-content:space-around;">
  66. 					<a href="down/快乐课堂V7.4.3.zip" target="_blank" class="main-btn" >本地下载 </a>	
  67. 					</div>						
  68. 				</el-col>
  69. 			</el-row>
  70. 			<el-divider></el-divider>
  71. 			<el-row>
  72. 				<el-col :span="12"  style="display:flex;  flex-direction:column; justify-content:space-around;" >
  73. 					
  74.                      <el-image				
  75. 				     :src="renxingURL"
  76. 					 :fit="fit">
  77. 					</el-image>		
  78. 					<div class="section-title">
  79. 					  <h6 >任性动图</h6>
  80. 					</div>
  81.  
  82. 				</el-col>
  83. 				<el-col :span="12" style="text-align: left;padding-left:40px;">
  84. 					<div class="section-title">
  85. 						<h6>任性动图</h6>
  86. 						<h2> 简简单单 傻瓜式创作动图<b> 就是这么任性</b></h2>
  87. 					</div>
  88.  
  89. 					<p>文字、诗词生成动图，照片添加文字、生成动图，动图修改、添加文字等</p>	
  90. 					<div style="display:flex;justify-content:space-around;">
  91. 						<a  href="down/任性动图V9.8.1.zip" target="_blank" class="main-btn" >本地下载 </a>	
  92. 					</div>	
  93. 				
  94. 				</el-col>
  95. 			</el-row>
  96. 		</el-main>

这里设置下el-row样式

  1. 	.el-row{
  2. 		margin: 100px 60px;
  3.  
  4.     }

el-row 之间加了 分隔符

	<el-divider></el-divider>

八、Footer

想打造成以下样式

1、友情链接

  1. 		<el-footer height="auto" class="footer-area">
  2.          <el-row >
  3. 			 <el-col :span="8" >
  4. 				<h5>友情链接</h5>				
  5. 				<ul >
  6. 					<li>
  7. 						<a href="http://xiazai.zol.com.cn/" target="_blank">ZOL软件下载</a>
  8. 						<a href="https://www.onlinedown.net/" target="_blank">华军软件园</a>
  9. 						<a href="https://www.crsky.com/" target="_blank">非凡软件站</a>
  10. 					</li>
  11. 				</ul>
  12. 			 </el-col>
  13. 		 </el-row>
  14. 		</el-footer>

去掉下划线等样式

  1. a {
  2. 	text-decoration: none;
  3. 	cursor: pointer;
  4. 	font-family: "Poppins", serif;
  5. }
  6.  
  7. .footer-area ul li a {
  8. 	line-height: 50px;
  9. 	display: block;
  10. 	color: #eee;
  11.     
  12. }

  1. .footer-area h5 {
  2. 	font-size: 20px;
  3. 	font-weight: 500;
  4. 	margin: 4px 0;
  5. 	color: #FFD857;
  6. }

效果如下：

2、页脚底部 版权信息

  1. .footer-bottom {
  2. 	padding: 0px 0;
  3. 	border-top: 1px solid #898b8e;
  4. }
  5.  
  6. .footer-bottom a {
  7.       color: #007bff;
  8. }

  1. 		 <div class="footer-bottom">
  2. 					<p>&copy; 古典小说网 版权所有 <a target="_blank" href="http://www.beian.miit.gov.cn">京ICP备18035962号-4 </a></p>		
  3. 		</div>

效果如下：

自此，首页就差不多写好了，在细节上微调下，这一版便可以了 。

九、首页代码

1、HTML

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.  	<meta charset="utf-8">
  6.  	<meta name="viewport" content="width=device-width, initial-scale=1">
  7. 	 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8. <!-- Style CSS -->
  9.  
  10.  	<link href="assets/css/myGudianxiaoshuoStyle.css" rel="stylesheet">
  11.  
  12.  	<title>古典小说网</title>
  13.  </head>
  14.  <style>
  15. 	 body{
  16. 		 margin:0;
  17. 	 }
  18. 	.el-header, .el-footer {
  19. 	  background-color: #13303e;
  20. 	  color: #333;
  21. 	  text-align: center;
  22. 	  line-height: 60px;
  23. 	}
  24. 	.el-footer {
  25. 	    color: #fff;
  26. 	}
  27.  
  28. 	
  29. 	.el-aside {
  30. 	  background-color: #D3DCE6;
  31. 	  color: #333;
  32. 	  text-align: center;
  33. 	  line-height: 200px;
  34. 	}
  35. 	
  36. 	.el-main {
  37. 		padding-top:60px;
  38. 	  background-color: #E9EEF3;
  39. 	  color: #333;
  40. 	  text-align: center;
  41. 	  line-height: 160px;
  42. 	}
  43. 	
  44. 	body > .el-container {
  45. 	  margin-bottom: 40px;
  46. 	}
  47. 	
  48. 	.el-container:nth-child(5) .el-aside,
  49. 	.el-container:nth-child(6) .el-aside {
  50. 	  line-height: 260px;
  51. 	}
  52. 	
  53. 	.el-container:nth-child(7) .el-aside {
  54. 	  line-height: 320px;
  55. 	}
  56. 	/* 去除白线 */
  57. 	.el-menu.el-menu--horizontal{  
  58.      border: none;
  59.     }
  60. 	.el-row{
  61. 		margin: 100px 60px;
  62.     }
  63.  
  64.  
  65.  
  66.   </style>
  67.  <body>
  68.  
  69.     <div id="app">
  70. 		<el-container>
  71.  
  72.  
  73. 		<el-header height='160px'>
  74. 			<el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect" background-color="#13303e" text-color="#fff"   active-text-color="#ffd04b" >
  75. 				<el-menu-item index="1">首页</el-menu-item>
  76. 				<el-submenu index="2">
  77. 				  <template slot="title">古典小说</template>
  78. 				  <el-menu-item index="2-1">传世经典</el-menu-item>
  79. 				  <el-menu-item index="2-2">古书拾遗</el-menu-item>
  80. 				  <el-menu-item index="2-3">古典言情</el-menu-item>
  81. 				  <el-menu-item index="2-4">史书戏曲</el-menu-item>
  82. 				</el-submenu>
  83. 				<!-- <el-menu-item index="3" disabled>消息中心</el-menu-item> -->
  84. 				<!-- <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
  85. 			  </el-menu>
  86.  
  87. 			  <el-row style="line-height:20px;font-size:14px;margin-top:10px;margin-bottom:20px;">
  88. 				  <el-col :span="3" style="text-align:left; color:rgb(18, 228, 18);">
  89. 					<div class="section-title">
  90. 						<p class="pInfo">头条号：古典小说</p>
  91. 						<p class="pInfo">公众号：古典小说网</p>
  92. 					</div>
  93. 				  </el-col>	
  94. 				  <el-col :span="21" style=" display: flex; font-size:16px; color:rgb(225, 237, 238); justify-content:flex-start;align-items:center;">
  95. 					<sapn>千年千本古典小说，本网站整理近六百本古典小说资源，并提供有声聆听方式，欢迎咨询下载 QQ群号：252380640</sapn>
  96. 				  </el-col>				  
  97. 			 </el-row>
  98.  
  99. 		</el-header>
  100. 		<el-main>
  101. 			<el-row>
  102. 				<el-col :span="12"  style="display:flex; height:800px; flex-direction:column; justify-content: flex-end;" >
  103. 					
  104.                      <el-image				
  105. 				     :src="youshengURL"
  106. 					 :fit="fit">
  107. 					</el-image>		
  108. 					<div class="section-title">
  109. 					  <h6 >有声小说书屋</h6>
  110. 					</div>
  111.  
  112. 				</el-col>
  113. 				<el-col :span="12" style="text-align: left;padding-left:40px;">
  114. 					
  115. 						<div class="section-title">
  116. 							<h2>听听书 <b>打发无聊时光</b></h2>
  117. 						</div>
  118.  
  119. 						<p>也许是 电脑上最实用的 看书、听书、藏书的软件</p>
  120. 					   <!-- <h1> 怎么使用？</h1> -->
  121. 					   <div class="section-title">
  122. 						<h2><b><i>怎么使用？</i></b></h2>
  123. 					    </div>
  124. 					   <p>1、txt小说，直接拖入软件中，便可 自动划分章节</p>
  125. 					   <p>2、epub格式小说，直接拖入软件中， 便可自动解析章节</p>
  126. 					   <p>3、提供丰富的配色方案， 个性化阅读体验</p>
  127. 					   <p>4、自动记录阅读位置，下次打开时，自动定位到具体章节中</p>
  128. 					   <p>5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱</p>
  129. 					   <p>6、提供书签功能，方便定位</p>
  130. 					   <p>7、提供标注功能，方便标注重点</p>
  131. 					   <p>8、提供编辑功能，方便修改</p>
  132. 					   <p>9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 </p>
  133. 					   <p>从此，只需要听就可以，而且听得内容完全是自己选择的。</p>
  134. 					   <div style="display:flex;justify-content:space-around;">
  135. 					   <a href="down/有声小说书屋V3.11.zip" target="_blank" class="main-btn" >下载 </a>		
  136. 					   </div>							
  137. 				</el-col>
  138. 			</el-row>
  139. 			<el-divider></el-divider>
  140. 			<el-row>
  141. 				<el-col :span="12"  style="display:flex;  flex-direction:column; justify-content:space-around;" >
  142. 					
  143.                      <el-image				
  144. 				     :src="ketangURL"
  145. 					 :fit="fit">
  146. 					</el-image>		
  147. 					<div class="section-title">
  148. 					  <h6 >快乐课堂</h6>
  149. 					</div>
  150.  
  151. 				</el-col>
  152. 				<el-col :span="12" style="text-align: left;padding-left:40px;">
  153. 					
  154. 					<div class="section-title">
  155. 						<h6>快乐课堂</h6>
  156. 						<h2> 寓教于乐<b>小组、个人 完善积分机制</b></h2>
  157. 					</div>
  158.  
  159. 					<p>老师评价：</p>
  160. 					<p>很好，很有创意</p>
  161. 					<p>这软件确实很实用</p>
  162. 					<p>学生很感兴趣</p>
  163. 					<p>这个软件在小组教学中，很有帮助</p>
  164. 					<div style="display:flex;justify-content:space-around;">
  165. 					<a href="down/快乐课堂V7.4.3.zip" target="_blank" class="main-btn" >本地下载 </a>	
  166. 					</div>						
  167. 				</el-col>
  168. 			</el-row>
  169. 			<el-divider></el-divider>
  170. 			<el-row>
  171. 				<el-col :span="12"  style="display:flex;  flex-direction:column; justify-content:space-around;" >
  172. 					
  173.                      <el-image				
  174. 				     :src="renxingURL"
  175. 					 :fit="fit">
  176. 					</el-image>		
  177. 					<div class="section-title">
  178. 					  <h6 >任性动图</h6>
  179. 					</div>
  180.  
  181. 				</el-col>
  182. 				<el-col :span="12" style="text-align: left;padding-left:40px;">
  183. 					<div class="section-title">
  184. 						<h6>任性动图</h6>
  185. 						<h2> 简简单单 傻瓜式创作动图<b> 就是这么任性</b></h2>
  186. 					</div>
  187.  
  188. 					<p>文字、诗词生成动图，照片添加文字、生成动图，动图修改、添加文字等</p>	
  189. 					<div style="display:flex;justify-content:space-around;">
  190. 						<a  href="down/任性动图V9.8.1.zip" target="_blank" class="main-btn" >本地下载 </a>	
  191. 					</div>	
  192. 				
  193. 				</el-col>
  194. 			</el-row>
  195. 		</el-main>
  196. 		<el-footer height="auto" class="footer-area">
  197.          <el-row  style="margin:20px 100px;" justify="start">
  198. 			 <el-col :span="24" style="text-align:left;" >
  199. 				<h5>友情链接</h5>				
  200. 				<ul >
  201. 					<li>
  202. 						<a href="http://xiazai.zol.com.cn/" target="_blank">ZOL软件下载</a>
  203. 						<a href="https://www.onlinedown.net/" target="_blank">华军软件园</a>
  204. 						<a href="https://www.crsky.com/" target="_blank">非凡软件站</a>
  205. 					</li>
  206. 				</ul>
  207. 			 </el-col>
  208. 		 </el-row>
  209. 		 <div class="footer-bottom">
  210. 					<p>&copy; 古典小说网 版权所有 <a target="_blank" href="http://www.beian.miit.gov.cn">京ICP备18035962号-4 </a></p>		
  211. 		</div>
  212. 		</el-footer>	
  213. 	</el-container>
  214. 	</div>
  215.  
  216.  
  217.  </body>
  218.  
  219.  
  220.  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  221.  
  222.  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  223.  
  224.  <script>
  225.     new Vue({
  226.       el: '#app',
  227.       data: function() {
  228.         return { 
  229. 			activeIndex: '1',
  230. 			youshengURL: 'assets/img/有声小说.png',
  231. 			ketangURL:'assets/img/kuaileketang.png',
  232. 			renxingURL:'assets/img/renxingdongtu.png',
  233. 			fit:'contain'
  234. 		 }
  235.       },
  236.       methods:{
  237. 		handleSelect(key, keyPath) {
  238.         console.log(key, keyPath);
  239.      	 }
  240.       },
  241.       mounted(){
  242.       }
  243.       
  244.     })
  245.  
  246.   </script>
  247.  </html>
  248.

2、CSS

  1. .about-content {
  2. 	margin-top: 30px;
  3. }
  4.  
  5. /* Common CSS 
  6. ============== */
  7.  
  8. html,
  9. body {
  10. 	height: 100%;
  11. }
  12.  
  13. body {
  14. 	font-family: 'Quicksand', sans-serif;
  15. 	font-size: 16px;
  16. 	line-height: 1.5;
  17. 	font-weight: 400;
  18. 	position: relative;
  19. 	z-index: 1;
  20. 	background: #fff;
  21. 	color: #191919;
  22. 	overflow-x: hidden;
  23. }
  24.  
  25.  
  26. h1,
  27. h2,
  28. h3,
  29. h4,
  30. h5,
  31. 	{
  32. 	position: relative;
  33. 	font-family: 'Quicksand', sans-serif;
  34. 	font-weight: 600;
  35. 	margin: 0;
  36. 	color: #191919;
  37. }
  38.  
  39. h6 {
  40. 	font-family: "Poppins", serif;
  41. }
  42.  
  43.  
  44. a{
  45. 	text-decoration: none;
  46.     line-height: 100px; 
  47.     text-align: center;
  48.     font-family: "Poppins", serif;
  49. }
  50.  
  51. p {
  52. 	font-family: 'Quicksand', sans-serif;
  53. 	font-size: 16px;
  54. 	font-weight: 500;
  55. 	line-height: 32px;
  56. 	position: relative;
  57. 	color: #686868;
  58. }
  59.  
  60.  
  61. button,
  62. input,
  63. textarea,
  64. a:hover,
  65. a:focus,
  66. a:visited {
  67. 	text-decoration: none;
  68. 	outline: none;
  69. 	outline-width: 0 !important;
  70. }
  71.  
  72. input:focus::-webkit-input-placeholder,
  73. textarea:focus::-webkit-input-placeholder {
  74. 	color: transparent;
  75. }
  76.  
  77. img {
  78. 	display: inline-block;
  79. 	max-width: 100%;
  80. }
  81.  
  82. i,
  83. span,
  84. a {
  85. 	display: inline-block;
  86. 	text-align: left;
  87. }
  88.  
  89. ul {
  90. 	list-style:none;
  91. 	margin: 0px;
  92. 	padding: 0px;
  93. }
  94.  
  95. li {
  96. 	display: inline-block;
  97.  
  98. }
  99.  
  100. /*Section Padding CSS*/
  101.  
  102. .section-padding {
  103. 	padding: 120px 0;
  104. }
  105.  
  106. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  107. 	.section-padding {
  108. 		padding: 80px 0;
  109. 	}
  110. }
  111.  
  112. @media only screen and (min-width: 768px) and (max-width: 991px) {
  113. 	.section-padding {
  114. 		padding: 60px 0;
  115. 	}
  116. }
  117.  
  118. @media only screen and (min-width: 576px) and (max-width: 767px) {
  119. 	.section-padding {
  120. 		padding: 50px 0;
  121. 	}
  122. }
  123.  
  124. @media (max-width: 575px) {
  125. 	.section-padding {
  126. 		padding: 50px 0;
  127. 	}
  128. }
  129.  
  130. /*Margin & Padding */
  131.  
  132. .pad-top-0 {
  133. 	padding-top: 0;
  134. }
  135.  
  136. .pad-bot-0 {
  137. 	padding-bottom: 0;
  138. }
  139.  
  140. .pad-top-20 {
  141. 	padding-top: 20px;
  142. }
  143.  
  144. .pad-bot-20 {
  145. 	padding-bottom: 20px;
  146. }
  147.  
  148. .pad-top-30 {
  149. 	padding-top: 30px;
  150. }
  151.  
  152. .pad-bot-30 {
  153. 	padding-bottom: 30px;
  154. }
  155.  
  156. .pad-top-40 {
  157. 	padding-top: 40px;
  158. }
  159.  
  160. .pad-bot-40 {
  161. 	padding-bottom: 40px;
  162. }
  163.  
  164. .pad-top-50 {
  165. 	padding-top: 50px;
  166. }
  167.  
  168. .pad-bot-50 {
  169. 	padding-bottom: 50px;
  170. }
  171.  
  172. .mar-tp-30 {
  173. 	margin-top: 30px;
  174. }
  175.  
  176. .mar-bt-30 {
  177. 	margin-bottom: 30px;
  178. }
  179.  
  180. .mar-tp-50 {
  181. 	margin-top: 50px;
  182. }
  183.  
  184. .mar-bt-50 {
  185. 	margin-bottom: 50px;
  186. }
  187.  
  188. .mar-tp-100 {
  189. 	margin-top: 100px;
  190. }
  191.  
  192. .mar-bt-100 {
  193. 	margin-bottom: 100px;
  194. }
  195.  
  196. /*Section Title */
  197.  
  198.  
  199. .section-title {
  200. 	position: relative;
  201. }
  202.  
  203. .section-title h2 {
  204. 	font-size: 50px;
  205. 	font-weight: 500;
  206. 	line-height: 60px;
  207. 	letter-spacing: 1px;
  208. 	margin: 20px 0;
  209. }
  210.  
  211. .section-title h2 b {
  212. 	color: #FFD857;
  213. }
  214.  
  215. @media only screen and (min-width: 576px) and (max-width: 767px) {
  216. 	.section-title h2 {
  217. 		font-size: 40px;
  218. 		line-height: 55px;
  219. 		margin: 10px 0;
  220. 		margin-bottom: 20px;
  221. 	}
  222. }
  223.  
  224. @media (max-width: 575px) {
  225. 	.section-title h2 {
  226. 		font-size: 35px;
  227. 		line-height: 45px;
  228. 		margin: 8px 0;
  229. 		margin-bottom: 15px;
  230. 	}
  231. }
  232.  
  233. .section-title h5 {
  234. 	font-size: 18px;
  235. 	letter-spacing: 2px;
  236. }
  237.  
  238. .section-title h6 {
  239. 	color: #00B965;
  240. 	font-size: 17px;
  241. 	letter-spacing: 4px;
  242. }
  243.  
  244. /* Bacground Color CSS 
  245. ============== */
  246.  
  247. .gray-bg {
  248. 	background: #f6f6f6;
  249. }
  250.  
  251. .white-bg {
  252. 	background: #fff;
  253. }
  254.  
  255. /* Causes Section CSS 
  256. ======================= */
  257.  
  258. p.pInfo {
  259. 	margin: 0px;
  260. 	color: #00B965;
  261. }
  262.  
  263. /*Button Style */
  264.  
  265.  
  266. .main-btn {
  267.     display: table-cell;
  268.     text-align: center;
  269.     vertical-align: middle;
  270. 	width: 200px;
  271. 	height: 100px;
  272. 	color: #fff;
  273. 	background-color: #6496c8;
  274. 	border: none;
  275. 	border-radius: 15px;
  276. 	box-shadow: 0 10px #27496d;
  277. 	letter-spacing: 6px;
  278.  
  279.  
  280. }
  281.  
  282. /* Footer Area CSS 
  283. ============== */
  284.  
  285. .footer-area {
  286. 	background: #13303e;
  287. 	color: #fff;
  288. }
  289.  
  290. .footer-area .logo .navbar-brand {
  291. 	color: #fff;
  292. }
  293.  
  294. .footer-area h5 {
  295. 	font-size: 20px;
  296. 	font-weight: 500;
  297. 	margin: 4px 0;
  298. 	color: #FFD857;
  299. }
  300.  
  301. .footer-area p {
  302. 	color: #eee;
  303. 	margin-top: 20px;
  304. }
  305.  
  306. .footer-area ul li a {
  307. 	line-height: 50px;
  308. 	display: block;
  309. 	color: #eee;
  310.     
  311. }
  312.  
  313. .footer-area ul li a:hover {
  314. 	color: #EFC94C;
  315. }
  316.  
  317. .footer-up {
  318. 	padding: 80px 0;
  319. }
  320.  
  321. .footer-bottom {
  322. 	padding: 0px 0;
  323. 	border-top: 1px solid #898b8e;
  324. }
  325.  
  326. .footer-bottom a {
  327.       color: #007bff;
  328. }
  329.  
  330. p.privacy {
  331. 	text-align: right;
  332. }

后继：

       Vue CDN 有时候挂掉， 最后把VUE 放在服务器上  不使用CDN方式引入了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/118314
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号