投稿
  1. 首页
  2. html-js-css

element UI 学习

code • 2022-5-17 • html-js-css • 阅读 79

element UI 学习,第1张

记录下，自己搭建这个 网站(古典小说网) 初始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

 
 	
 	
	
 	古典小说网

2、VUE

二、布局

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


  Header
  Main
  Footer

不加样式的话，

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

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

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

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

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

 Element - The world's most popular Vue UI framework

		
			
				首页
				
				  
				  传世经典
				  古书拾遗
				  古典言情
				  
					
					选项1
					选项2
					选项3

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

效果如下：

2、发现有一个白线，下面是去掉白线的样式 
	/* 去除白线 */
	.el-menu.el-menu--horizontal{  
     border: none;
    }

效果如下：

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

比如 ，想呈现如下效果

只需设置下li的样式

li {
	display: inline-block;
}
4、界面边距

左侧与浏览器边界有边距

	 body{
		 margin:0;
	 }

消除边距

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

效果如下：

 实现如下：

		
			
				首页
				
				  
				  传世经典
				  古书拾遗
				  古典言情
				  
					
					选项1
					选项2
					选项3
				  
				
				
				
			  

			  
				  
					
头条号：古典小说

					
公众号：古典小说网

				  	
				  
					
千年千本古典小说，本网站整理近六百本古典小说资源，并提供有声聆听方式，欢迎咨询下载 QQ群号：252380640

这里需要注意的是：

行高                    line-height:20px;

字体大小             font-size:14px;

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

等设置

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

              

                  
					
头条号：古典小说

					
公众号：古典小说网

                  
                  
                                

             

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

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

display:flex;

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

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

				  
					
千年千本古典小说，本网站整理近六百本古典小说资源，并提供有声聆听方式，欢迎咨询下载 QQ群号：252380640

五、图片显示部分

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

实现效果如下：

1、布局

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

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

    new Vue({
      el: '#app',
      data: function() {
        return { 
			activeIndex: '1',
			youshengURL: 'assets/img/有声小说.png',
			fit:'contain'
		 }
      },

效果如下：

3、图片下面加个文字 说明  1）比如加个 软件名称 ： 有声小说书屋 
				
					
                     
                     		
				
					有声小说书屋

效果如下：

2）设置标题格式 
.section-title {
	position: relative;
}

.section-title h6 {
	color: #00B965;
	font-size: 17px;
	letter-spacing: 4px;
}

效果如下：

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

下载的排列效果：

将其改为：

实现方式：

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

				
					
                     
							
					
					  有声小说书屋

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

六、文字段落介绍部分

左侧图片，右侧文字介绍

1、标题样式 
.section-title h2 {
	font-size: 50px;
	font-weight: 500;
	line-height: 60px;
	letter-spacing: 1px;
	margin: 20px 0;
}

.section-title h2 b {
	color: #FFD857;
}

p {
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 32px;
	position: relative;
	color: #686868;
}

						
							听听书 打发无聊时光
						

						
也许是 电脑上最实用的 看书、听书、藏书的软件

					   
					   
						怎么使用？
					    
					   
1、txt小说，直接拖入软件中，便可 自动划分章节

					   
2、epub格式小说，直接拖入软件中， 便可自动解析章节

					   
3、提供丰富的配色方案， 个性化阅读体验

					   
4、自动记录阅读位置，下次打开时，自动定位到具体章节中

					   
5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱

					   
6、提供书签功能，方便定位

					   
7、提供标注功能，方便标注重点

					   
8、提供编辑功能，方便修改

					   
9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 

					   
从此，只需要听就可以，而且听得内容完全是自己选择的。

效果：

 2、文字左对齐 
				

						
							听听书 打发无聊时光
						

						
也许是 电脑上最实用的 看书、听书、藏书的软件

					   
					   
						怎么使用？
					    
					   
1、txt小说，直接拖入软件中，便可 自动划分章节

					   
2、epub格式小说，直接拖入软件中， 便可自动解析章节

					   
3、提供丰富的配色方案， 个性化阅读体验

					   
4、自动记录阅读位置，下次打开时，自动定位到具体章节中

					   
5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱

					   
6、提供书签功能，方便定位

					   
7、提供标注功能，方便标注重点

					   
8、提供编辑功能，方便修改

					   
9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 

					   
从此，只需要听就可以，而且听得内容完全是自己选择的。


					   本地下载 
						网盘下载 
					   
 提取码：0000

3、设置padding

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

				
					
						
							听听书 打发无聊时光
						

						
也许是 电脑上最实用的 看书、听书、藏书的软件

					   
					   
						怎么使用？
					    
					   
1、txt小说，直接拖入软件中，便可 自动划分章节

					   
2、epub格式小说，直接拖入软件中， 便可自动解析章节

					   
3、提供丰富的配色方案， 个性化阅读体验

					   
4、自动记录阅读位置，下次打开时，自动定位到具体章节中

					   
5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱

					   
6、提供书签功能，方便定位

					   
7、提供标注功能，方便标注重点

					   
8、提供编辑功能，方便修改

					   
9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 

					   
从此，只需要听就可以，而且听得内容完全是自己选择的。


					   本地下载 
						网盘下载 
					   
 提取码：0000

4、设置按钮样式 
/*Button Style */

.main-btn {
	display: inline-block;
	background: #FFD857;
	color: #191919;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 6px;
	text-transform: capitalize;
	padding: 14px 28px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 5px;
	-webkit-transition: .3s;
	transition: .3s;
	width: 100px;
	height: auto;
}


a {
	text-decoration: none;
	cursor: pointer;
	font-family: "Poppins", serif;
}


button,
input,
textarea,
a:hover,
a:focus,
a:visited {
	text-decoration: none;
	outline: none;
	outline-width: 0 !important;
}

效果：

从网上又找了按钮样式：

a{
    display: block; 
    line-height: 100px; 
    text-align: center;
}

.main-btn {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
	width: 200px;
	height: 100px;
	color: #fff;
	background-color: #6496c8;
	border: none;
	border-radius: 15px;
	box-shadow: 0 10px #27496d;
	letter-spacing: 6px;


}

效果如下：

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

		
			
				
					
                     
							
					
					  有声小说书屋
					

				
				
					
						
							听听书 打发无聊时光
						

						
也许是 电脑上最实用的 看书、听书、藏书的软件

					   
					   
						怎么使用？
					    
					   
1、txt小说，直接拖入软件中，便可 自动划分章节

					   
2、epub格式小说，直接拖入软件中， 便可自动解析章节

					   
3、提供丰富的配色方案， 个性化阅读体验

					   
4、自动记录阅读位置，下次打开时，自动定位到具体章节中

					   
5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱

					   
6、提供书签功能，方便定位

					   
7、提供标注功能，方便标注重点

					   
8、提供编辑功能，方便修改

					   
9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 

					   
从此，只需要听就可以，而且听得内容完全是自己选择的。

					   
					   下载 		
					   							
				
			
			
			
				
					
                     
							
					
					  快乐课堂
					

				
				
					
					
						快乐课堂
						 寓教于乐小组、个人 完善积分机制
					

					
老师评价：

					
很好，很有创意

					
这软件确实很实用

					
学生很感兴趣

					
这个软件在小组教学中，很有帮助

					
					本地下载 	
											
				
			
			
			
				
					
                     
							
					
					  任性动图
					

				
				
					
						任性动图
						 简简单单 傻瓜式创作动图 就是这么任性
					

					
文字、诗词生成动图，照片添加文字、生成动图，动图修改、添加文字等
	
					
						本地下载

这里设置下el-row样式

	.el-row{
		margin: 100px 60px;

    }

el-row 之间加了 分隔符

八、Footer

想打造成以下样式

1、友情链接 
		
         
			 
				友情链接				
				
					
						ZOL软件下载
						华军软件园
						非凡软件站

去掉下划线等样式

a {
	text-decoration: none;
	cursor: pointer;
	font-family: "Poppins", serif;
}

.footer-area ul li a {
	line-height: 50px;
	display: block;
	color: #eee;
    
}

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

效果如下：

2、页脚底部 版权信息 
.footer-bottom {
	padding: 0px 0;
	border-top: 1px solid #898b8e;
}

.footer-bottom a {
      color: #007bff;
}

		 
					
© 古典小说网 版权所有 京ICP备18035962号-4

效果如下：

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

九、首页代码 1、HTML 
 
 

 
 	
 	
	 


 	

 	古典小说网
 
 
 

    
		


		
			
				首页
				
				  
				  传世经典
				  古书拾遗
				  古典言情
				  史书戏曲
				
				
				
			  

			  
				  
					
						
头条号：古典小说

						
公众号：古典小说网

					
				  	
				  
					千年千本古典小说，本网站整理近六百本古典小说资源，并提供有声聆听方式，欢迎咨询下载 QQ群号：252380640
				  				  
			 

		
		
			
				
					
                     
							
					
					  有声小说书屋
					

				
				
					
						
							听听书 打发无聊时光
						

						
也许是 电脑上最实用的 看书、听书、藏书的软件

					   
					   
						怎么使用？
					    
					   
1、txt小说，直接拖入软件中，便可 自动划分章节

					   
2、epub格式小说，直接拖入软件中， 便可自动解析章节

					   
3、提供丰富的配色方案， 个性化阅读体验

					   
4、自动记录阅读位置，下次打开时，自动定位到具体章节中

					   
5、可以作为自己的藏书库，把喜欢的图书 导入进来，不断扩充书库，资料不再凌乱

					   
6、提供书签功能，方便定位

					   
7、提供标注功能，方便标注重点

					   
8、提供编辑功能，方便修改

					   
9、最重要的，提供语音朗读功能，利用win10自带的语音包 或 自己下载的语音包  进行小说朗读， 并提供方便的语速调整功能。 

					   
从此，只需要听就可以，而且听得内容完全是自己选择的。

					   
					   下载 		
					   							
				
			
			
			
				
					
                     
							
					
					  快乐课堂
					

				
				
					
					
						快乐课堂
						 寓教于乐小组、个人 完善积分机制
					

					
老师评价：

					
很好，很有创意

					
这软件确实很实用

					
学生很感兴趣

					
这个软件在小组教学中，很有帮助

					
					本地下载 	
											
				
			
			
			
				
					
                     
							
					
					  任性动图
					

				
				
					
						任性动图
						 简简单单 傻瓜式创作动图 就是这么任性
					

					
文字、诗词生成动图，照片添加文字、生成动图，动图修改、添加文字等
	
					
						本地下载 	
						
				
				
			
		
		
         
			 
				友情链接				
				
					
						ZOL软件下载
						华军软件园
						非凡软件站
					
				
			 
		 
		 
					
© 古典小说网 版权所有 京ICP备18035962号-4

2、CSS 
.about-content {
	margin-top: 30px;
}

/* Common CSS 
============== */

html,
body {
	height: 100%;
}

body {
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	position: relative;
	z-index: 1;
	background: #fff;
	color: #191919;
	overflow-x: hidden;
}


h1,
h2,
h3,
h4,
h5,
	{
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	margin: 0;
	color: #191919;
}

h6 {
	font-family: "Poppins", serif;
}


a{
	text-decoration: none;
    line-height: 100px; 
    text-align: center;
    font-family: "Poppins", serif;
}

p {
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 32px;
	position: relative;
	color: #686868;
}


button,
input,
textarea,
a:hover,
a:focus,
a:visited {
	text-decoration: none;
	outline: none;
	outline-width: 0 !important;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
	color: transparent;
}

img {
	display: inline-block;
	max-width: 100%;
}

i,
span,
a {
	display: inline-block;
	text-align: left;
}

ul {
	list-style:none;
	margin: 0px;
	padding: 0px;
}

li {
	display: inline-block;

}

/*Section Padding CSS*/

.section-padding {
	padding: 120px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.section-padding {
		padding: 80px 0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.section-padding {
		padding: 60px 0;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-padding {
		padding: 50px 0;
	}
}

@media (max-width: 575px) {
	.section-padding {
		padding: 50px 0;
	}
}

/*Margin & Padding */

.pad-top-0 {
	padding-top: 0;
}

.pad-bot-0 {
	padding-bottom: 0;
}

.pad-top-20 {
	padding-top: 20px;
}

.pad-bot-20 {
	padding-bottom: 20px;
}

.pad-top-30 {
	padding-top: 30px;
}

.pad-bot-30 {
	padding-bottom: 30px;
}

.pad-top-40 {
	padding-top: 40px;
}

.pad-bot-40 {
	padding-bottom: 40px;
}

.pad-top-50 {
	padding-top: 50px;
}

.pad-bot-50 {
	padding-bottom: 50px;
}

.mar-tp-30 {
	margin-top: 30px;
}

.mar-bt-30 {
	margin-bottom: 30px;
}

.mar-tp-50 {
	margin-top: 50px;
}

.mar-bt-50 {
	margin-bottom: 50px;
}

.mar-tp-100 {
	margin-top: 100px;
}

.mar-bt-100 {
	margin-bottom: 100px;
}

/*Section Title */


.section-title {
	position: relative;
}

.section-title h2 {
	font-size: 50px;
	font-weight: 500;
	line-height: 60px;
	letter-spacing: 1px;
	margin: 20px 0;
}

.section-title h2 b {
	color: #FFD857;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-title h2 {
		font-size: 40px;
		line-height: 55px;
		margin: 10px 0;
		margin-bottom: 20px;
	}
}

@media (max-width: 575px) {
	.section-title h2 {
		font-size: 35px;
		line-height: 45px;
		margin: 8px 0;
		margin-bottom: 15px;
	}
}

.section-title h5 {
	font-size: 18px;
	letter-spacing: 2px;
}

.section-title h6 {
	color: #00B965;
	font-size: 17px;
	letter-spacing: 4px;
}

/* Bacground Color CSS 
============== */

.gray-bg {
	background: #f6f6f6;
}

.white-bg {
	background: #fff;
}

/* Causes Section CSS 
======================= */

p.pInfo {
	margin: 0px;
	color: #00B965;
}

/*Button Style */


.main-btn {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
	width: 200px;
	height: 100px;
	color: #fff;
	background-color: #6496c8;
	border: none;
	border-radius: 15px;
	box-shadow: 0 10px #27496d;
	letter-spacing: 6px;


}

/* Footer Area CSS 
============== */

.footer-area {
	background: #13303e;
	color: #fff;
}

.footer-area .logo .navbar-brand {
	color: #fff;
}

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

.footer-area p {
	color: #eee;
	margin-top: 20px;
}

.footer-area ul li a {
	line-height: 50px;
	display: block;
	color: #eee;
    
}

.footer-area ul li a:hover {
	color: #EFC94C;
}

.footer-up {
	padding: 80px 0;
}

.footer-bottom {
	padding: 0px 0;
	border-top: 1px solid #898b8e;
}

.footer-bottom a {
      color: #007bff;
}

p.privacy {
	text-align: right;
}

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/939768.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表（0条）

保存