内联样式

最新推荐文章于 2022-08-09 15:10:00 发布
最新推荐文章于 2022-08-09 15:10:00 发布
阅读量635 收藏
点赞数
分类专栏： Vue笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44753550/article/details/105414619
版权

内联样式的基本语法： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div style="width: 100px;height: 100px;background: blue;"></div>
			
			<!-- CSS内联样式变量拼接 -->
			<div style="width: 100px;height: 100px;background: blue;" 
			:style="{border:borderw+'px solid red',padding:paddingw+'px'}"></div>
			
			<!-- CSS内联样式放置对象 -->
			<div :style="styleoObj"></div>
			
			<!-- CSS数组方式拼接 -->
			<div :style="styleArr"></div>

		</div>
		
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					borderw:50,
					paddingw:20,
					styleoObj:{
						width:"200px",
						height:"300px",
						padding:"50px",
						"background-color":"yellow"
					},
					styleArr:[
						{
							width:"200px",
							height:"300px",
							padding:"50px",
							"background-color":"blue"
						},
						{
							border:"30px solid red"
						}
					]
				}
			})
		</script>
	</body>
</html>

侧边栏class 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				box-sizing: border-box;
			}
			.page{
				width: 100vw;
				height: 100vh;
				background-color: bisque;
				position: fixed;
				left: 0;
				top: 0;
			}
			.rMenu{
				width: 50vw;
				height: 100vw;
				position: fixed;
				left: 0;
				top: 0;
				background-color: aqua;
				transform: translateX(100vw);
				transition: transform 0.5s;
			}
			.active{
				transform: translateX(80vw);
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div class="page">
				首页
				<button @click="toggleMenu" type="button">侧边栏</button>
			</div>
			<div class="rMenu" :class="{active:isShow}">
				侧边栏
			</div>
		</div>
		
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					toggleMenu:function(){
						this.isShow = !this.isShow
					}
				}
			})
		</script>
	</body>
</html>

侧边栏style 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				box-sizing: border-box;
			}
			.page{
				width: 100vw;
				height: 100vh;
				background-color: bisque;
				position: fixed;
				left: 0;
				top: 0;
			}
			.rMenu{
				width: 50vw;
				height: 100vw;
				position: fixed;
				left: 0;
				top: 0;
				background-color: aqua;
				transform: translateX(100vw);
				transition: transform 0.5s;
			}
			/* .active{
				transform: translateX(80vw);
			}
			 */
		</style>
	</head>
	<body>
		<div id="app">
			<div class="page">
				首页
				<button @click="toggleMenu" type="button">侧边栏</button>
			</div>
			<div class="rMenu" :style="{transform: 'translateX('+men+'vw)'}">
				侧边栏
			</div>
		</div>
		
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					men:100
				},
				methods:{
					toggleMenu:function(){
						if(this.men==100){
							this.men = 80
						}else{
							this.men = 100
						}
					}
				}
			})
		</script>
	</body>
</html>

 

 

 

爱～做梦的～猪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何去掉内联样式 通过style属性定义的(element.style)
09-22
element.style定义样式的优先级别超过style.css引用文件的样式，怎样能使级别超越element.style呢？在css属性值后面加上！important即可实现
CSS—内联样式（行内样式）、内部样式、外部样式、选择器
Natural_mengniu的博客
06-24 2万+
文章目录CSS简介使用CSS修改元素样式方式方式一（==内联样式或行内样式==）方式二（==内部样式表==）方式三（==外部样式表==）全场最佳语法选择器元素选择器id选择器（id不能重复，即使出现相同效果）类选择器（class：与id作用相似，但是可重复）通配选择器交集选择器并集选择器（选择器分组）关系选择器子元素选择器后代元素选择器兄弟选择器属性选择器伪类选择器声明块 网页分为： 结构（html） 表现（CSS） 行为（JavaScript） CSS 简介 层叠样式表 网页实际时一个多层的结构，通过C
CSS样式(内联、内部、外部)
xiji333的博客
12-16 1万+
文章目录1.内联样式2.内部样式3.外部样式 1.内联样式   内联样式，又称行内样式。在标签内部通过stylestylestyle属性来设置元素的样式。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个网页</title> </head> <body> <h
三种CSS样式实现（内联样式、内联样式表、外联样式表）
comegoing_xin_lv的博客
07-11 8014
内联样式、内联样式表、外联样式表
css 样式相关
i_Satan的博客
06-05 1419
css样式相关
CSS学习笔记-【内联样式、内部样式、外部样式表】 AND 2018-11-21（21:18）
weixin_43680500的博客
11-21 1万+
一、内联样式 1.在DIV标签中添加内联样式。 添加style属性 。 在style中属性和值得表示方法为： style=“属性:值;属性:值”; 例如： &amp;amp;lt;div style=&amp;quot;Color: red;border: 1px dashed black&amp;quot; &amp;amp;gt;内联样式表&amp;amp;lt;/div&amp;amp;gt; 二、内部样式 &amp;amp;
Vue绑定内联样式问题
10-17
主要介绍了Vue绑定内联样式的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
js获取内联样式的方法
10-24
主要介绍了js获取内联样式的方法,针对标准浏览器与IE浏览器进行不同的判断与获取,具有一定参考借鉴价值,需要的朋友可以参考下
详解react内联样式使用webpack将px转rem
10-18
主要介绍了详解react内联样式使用webpack将px转rem，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用内联样式
weixin_30275415的博客
09-24 629
1. 直接在元素上通过 `:style` 的形式，书写样式对象```<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>``` <div class="box"> <!-- 内联样式书写为对象形式 其中font-size 必须加引号 ...
CSS学习1（内联样式，内部样式，外部样式,选择器）
a1436237789的博客
08-09 1127
CSS学习1（内联样式，内部样式，外部样式,选择器）
零基础CSS入门教程(24)–内联/内部/外部样式
程序员大阳
11-10 1231
点此查看全部文字教程、视频教程、源代码 本教程已配套视频教程，点此查看 本文目录1. 前言2. 内联样式3. 内部样式表4. 外部样式表5. 完整实例6. 小结 1. 前言 本篇比较轻松，没有具体的CSS样式语法，只是介绍下CSS代码的存放位置。来吧，跟我了解下。 2. 内联样式 内联样式，通过元素的style属性，直接在元素上编写： <!-- 内联样式 --> <div style="color:blue;font-size:2em;"> 努力努力再
html内联样式（表），外部样式表
Sudley的博客
12-13 8100
介绍内联样式及外部样式表
html css 内联样式_内联CSS指南–如何直接设置HTML标签的样式
08-17 9168
html css 内联样式You’ve written some HTML and now need to style it with CSS. One way is to use inline styles, which is what this article is about. 您已经编写了一些HTML，现在需要使用CSS对其进行样式设置。 一种方法是使用内联样式，这就是本文的目的。 &l...
【web前端】table的border属性解析（内联样式表和内部样式表中的区别）
Cassie_zkq的博客
11-18 5042
今天做实验的时候被table的border属性搞的眩晕(´･Д･)」特此总结一下。 （我不去学前端框架那些高级知识在纠结这些大作业用不到的基础东西干啥。。） 一、内部样式表中内table的border属性测试 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
vue 2.5 超100讲 从0入门vue2基础知识
08-27
本课程是vue的基础课程，主要学习对象是对vue2感兴趣的同学们为什么要学习本课程呢1 很多项目还是vue2书写，学习vue2可以看懂大部分的项目代码2 vue2中很多内容是和vue3重复的，学好了vue2 vue3一点就通3 课程分为五大部分超过100个视频，主要内容是结合官方文档讲解的，让同学们未来阅读官方文档更加通俗易懂
HTML CSS 学习记录（一）
little_w98biubiu的博客
05-09 363
CSS：层叠样式表 层叠：网页实际上是立体的结构，是一层压着一层的多层结构 。CSS可以为网页的每一层设计样式，最终我们看到的只有网页最上面的这一层。 CSS中有各种模块，不同的模块的版本可能不相同。 1、内敛样式 2、内部样式表 3、外部样式表（开发时的最佳方法，可以最大限度使用浏览器缓存机制，加快网页加载速度） 其中的内敛样式只对所在的元素起作用，内部样式表只对所在的页面起作用，且内部样式表不会覆盖内联样式信息，通过外部样式表可以实现样式的多页面复用。 style标签内部的内.
css选择器，css引入方式，div+css布局
weixin_44992737的博客
06-10 568
css选择器，css引入方式，div+css布局
CSS的组成,三种样式(内联式,嵌入式,外部式),优先级
热门推荐
chq11106004389的博客
01-14 3万+
--------------------------------------------------------------------------------------------------------------------------------------内联式CSS ---来自慕课----------------------------------------------------
html 内联样式 animation
最新发布
09-05
HTML 内联样式 animation 是一种在 HTML 元素内部直接添加动画效果的方法。通过在元素的 style 属性中使用 animation 相关的属性和值，可以实现各种动画效果。 首先，要创建一个内联样式动画，需要使用 `@keyframes` 规则来定义动画的关键帧。关键帧指定了动画的不同阶段的样式。例如，要创建一个淡入动画效果，可以使用以下代码: ```HTML <div style="animation-name: fade-in;"> 这是一个淡入动画 </div> <style> @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } </style> ``` 在上面的代码中，我们创建了一个名为 "fade-in" 的关键帧，其中在开始时设置元素的透明度为 0，在结束时将透明度设置为 1。然后，在要应用动画效果的 div 元素中使用 `style` 属性设置 `animation-name` 为 "fade-in"。 除了 `animation-name`，我们还可以使用其他属性来配置动画。以下是一些常用的属性： - `animation-duration`：动画的持续时间。 - `animation-timing-function`：动画的时间函数。 - `animation-delay`：动画延迟开始的时间。 - `animation-iteration-count`：动画的重复次数。 - `animation-direction`：动画播放的方向。 - `animation-fill-mode`：动画结束后元素的样式状态。 这些属性可以通过在 `style` 属性中添加相应的属性和值来设置。例如，要将动画持续时间设置为 2 秒，并在每次播放结束后重新开始，可以使用以下代码： ```HTML <div style="animation-name: fade-in; animation-duration: 2s; animation-iteration-count: infinite;"> 这是一个持续淡入动画 </div> ``` 通过 HTML 内联样式 animation，我们可以在不需要额外的 CSS 文件的情况下，直接在 HTML 文件中创建简单的动画效果。但需要注意的是，内联样式的优先级比外部 CSS 样式低，因此在有其他样式定义的情况下，可能需要通过提高内联样式的具体性来确保动画效果生效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值