“图片滑动样式”修改HTML教程

友们，下午好！

都说一张美美的图能为文章增色三分！

那如果是一个交互的图片样式 + 几张美美图呢？这能为文章增色多少呢？

比如这种（样式ID：90298）

使用这种样式，即能有效的展示图片，还能缩小文章空间，而且还与读者存在互动交互，想不想知道这种样式怎么做出来呢？

上面两种样式都可以在样式中心输入ID搜索到。

但是，样式中心的原样式，都是四张图片滑动的，直接进行换图就可以使用了。

但如果要像三儿上面做的两个样式，一个是5张图，一个是9张图，就要进HTML进行修改了。

教程一（带图片说明的样式）

进入到“HTML”模式，找到<section .........> </section>这段代码，先选择Ctrl+C复制。

然后在此段代码结尾处敲回车键换行，再选择Ctrl+V粘贴。

粘贴几次，样式就会在原有四张的基础上多出几张，胖友们可以根据自己的需求进行多次粘贴。

教程二

进入到“HTML”模式，找到<img src=........./>这段代码，先选择Ctrl+C复制，然后在此段代码结尾处，再Ctrl+V粘贴。

同上个样式，粘贴几次，样式就会在原有四张的基础上多出几张，胖友们可以根据自己的需求进行多次粘贴。

为了样式的美感，还是有三点建议给大家。

1、图片请保持尺寸一致。否则会导致图片层次不齐。

2、尺寸请500x500以上。否则可能会使图片不清楚。

3、图片大小尽可能小点。否则浏览时加载会不流畅。

更多好玩样式，请进样式中心搜索“滚动”

好了，本次教程就到这里~bye

OM节点获取

var oLi = document.getElementsByTagName("li");
var oLi = document.getElementById("cssLi");
var oLi = document.getElementsByName("myInput");

操作属性：

document.getElementById(id).attribute=new value

实例

本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

操作内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性和innerText（IE支持） outerText outerHTML

区别描述如下：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

document.getElementById(id).innerHTML=new HTML

实例一

本例改变了 <p> 元素的内容：

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>

实例二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之间的区别</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
　　}
　　</script>
　　</head>
　　<body>
　　<ul>
　　<li id="id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

　　1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内外的文本(多个标签)。

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，

　　如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，

　　下面是一个简单的符合W3C标准的示例：

<a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

操作样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

CSS样式的个别属性采用驮峰式写法(如：backgroundColor), 且不带横线。

document.body.style.backgroundColor="red";

如：

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
document.getElementById(id).className="类名"；
document.getElementById(id).className="类名1 类名2"；
document.getElementById(id).className+=" 类名3"；//注意要留有空格

<!DOCTYPE HTML>
<html>
<head>
<title>追加CSS类别</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy = document.getElementsByTagName("ul")[0];
oMy.className += " myUL2"; //追加CSS类,注意要留有空格
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>

注意：追加CSS类,注意要留有空格;

ul标记已经设定了.myUL1类的样式的情况下,oMy.className = "myUL1 myUL2"不等同于oMy.className += " myUL2",

oMy.className = "myUL1 myUL2"表现形式与oMy.className = "myUL2"一样; 因此应当采用oMy.className += " myUl2";

改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>

注意:经过测试证明,para.appendChild(node);调换至最后一行,运行正常

最可行的方法:添加节点的顺序,由内到外(个人习惯);

天是刘小爱自学Java的第78天。

感谢你的观看，谢谢你。

话不多说，继续前端之CSS的学习：

其中在头条搜索中也有很多关于CSS的干货教程，专业又详细，点击下方卡片搜索“CSS”了解更多

一、CSS概述

CSS，全称是Cascading Style Sheet，翻译过来就是层叠样式表。

它有一个非常厉害的功能，就是美化网页。

本质上HTML也可以美化网页，但是CSS更加地强大，可以实现很多HTML不能实现的功能。

CSS有一个核心标签叫style，也就是样式的意思，CSS本身也就是可以设定各种各样的样式。

用一个例子来说明：

①h1的美化

如果纯用HTML，是没法对标题进行颜色设置的。

但使用CSS，就可以对标题进行各种样式的设置，上图只举了颜色这个例子。

②字体的美化

字体是可以在HTML中设置属性的，比如颜色（color），比如大小（size）…

而CSS等于是将这些属性抽取出去了，专门放在<style>标签中了。

这样有什么好处？

降低耦合度，分工更加地明确，CSS专门用来美化，HTML专门用于结构搭建，如果想设定格式，指定CSS就好了。

这个就有点类似于Java中方法的封装，或者说经典三层架构。

Service层专门负责具体的业务逻辑，Dao层专门负责数据库的查询，Service想访问数据库，调用Dao层就好了。

二、CSS的引入

CSS一共有三种引入方式。用例子说明：

①行内样式

直接在标签中添加style属性，也能起到引入CSS的效果。

但是为了降低耦合度，一般在HTML主干中只搭建结构，设定样式专门交给CSS来做。

②内部引入

也就是一开始的那个例子，sytle标签是放在head标签中的。

除了这两种，还有一种外部引入方式：

③外部引入（一）

可以自定义一个CSS文件，在里面写自定义的样式。

然后在HTML文件中使用style标签引入该CSS文件即可，其中引入格式如下：

@import+CSS文件路径。

和Java中的导包很类似，文件路径中的“..”表示回到上一层。

④外部引入（二）

除了使用style外，还可以使用link标签外部引入：

type属性：指定文本的类型。
rel属性：relation的简写，指定当前的HTML与CSS文件之间的关系。
href属性：CSS文件地址，上面两个属性都可以省略，但是href属性不能省略。

关于这三种引入方式的优先级：

行内引入是最优先的。

内部引入和外部引入，就看哪个离HTML文件主体近（就近原则）

三、基本选择器

选择器的作用在于：可以帮我们从页面上获得对应的标签。

其中有最基本的三种选择器：

①id选择器

格式为：#+id名{}

关于id我做了个测试，发现不能用纯数字，老实说我还挺奇怪的，一般id不都是纯数字么。

就当是CSS的命名规则好了，不能是纯数字，否则没有作用。

其中id选择器是唯一的，也就是一个id在一个HTML文件中只能有一个。

②类选择器

格式为：.+类名{}

类是可以有多个的，比如同样是font标签，相同的id只能有一个，但是相同的类可以有多个。

③标签选择器

格式为：标签名{}

HTML中是有很多标签的，可以直接使用过标签作为选择器，上图例子中是font标签。

关于这三种选择器的优先级：

id选择器最大，类选择器次之，标签选择器最小。

这其实也很好理解：

id选择器最精准，优先级越高（例子中①哪怕也是myClass类，标签也是font）,但样式还是按照id选择器设定的来。

四、拓展选择器

除了三种基本选择器外，还有好几种选择器：

①层级选择器

格式为：div+空格+标签名{}

标签与标签之间是用空格隔开的。

在HTML中有一个div标签，这个标签和CSS结合起来很有用。

比如上述例子中，同样是h1标签，但是只渲染div标签中的h1标签。

②并集选择器

格式为：div+逗号+标签名{}

标签与标签之间是用逗号隔开的，也就是相当于将标签选择器并起来了，同时修改多个标签的样式。

③属性选择器

格式为：标签名[属性名="对应的值"]{}

font标签中有很多属性，CSS可以指定其中对应的属性。

比如size=“3”的才修改样式，其中哪怕font默认字体size为3，但是没有写出size属性，也不会修改其样式。

④伪类选择器

格式为：标签名+冒号+对应的状态

link：也就是鼠标未点击时为黑色。
hover：悬浮的意思，也就是鼠标放在上面时为紫色。
active：行为的意思，也就是鼠标点击时的颜色为红色。
visited：访问过的意思，也就是鼠标点击后的颜色为蓝色。

所以为什么叫伪类？

并不是修改的某个具体的类修改，而是对标签对应的状态进行修改。

其中关于CSS选择器真的太多太多了，可以查询W3C官方文档，如下图：

这还是我截图的一小部分，其它的截不下了，一共有几十种。

想要完全把它学习下来真心需要花一定的时间，但我毕竟还是以学Java后台为主，对前端只做一个基本的了解。

以后有机会再做做总结什么的，估计也没什么机会了……

最后

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。

在线咨询

上一篇：HTML基础操作：图片显示
下一篇：大数据开发基础之HTML表格与表单

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商