“圖片滑動樣式”修改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），比如大?。╯ize）…

而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小時內與您取得聯系。

整合營銷服務商