整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
出隱藏是指當(dāng)某個(gè)元素內(nèi)的內(nèi)容，超出該元素的邊界時(shí)，如何隱藏這些內(nèi)容。
overflow屬性用于設(shè)置元素內(nèi)容溢出時(shí)的處理方式。它有以下幾個(gè)可能的取值：
visible：默認(rèn)值，不進(jìn)行任何處理，超出部分直接顯示在邊界外。
hidden：隱藏溢出的內(nèi)容。
scroll：添加滾動(dòng)條以便瀏覽溢出內(nèi)容。
auto：如果需要，會(huì)添加滾動(dòng)條以便瀏覽溢出內(nèi)容。
如果要實(shí)現(xiàn)超出隱藏，我們就要用到overflow屬性，將其設(shè)置為hidden或者scroll。
text-overflow屬性用于控制文本的溢出方式。它有以下幾個(gè)可能的取值：
clip：默認(rèn)值，不顯示文本溢出的內(nèi)容，直接截?cái)唷?/p>
ellipsis：顯示一個(gè)省略號(hào)以指示文本溢出。
當(dāng)我們想要控制文本的溢出時(shí)，可以使用text-overflow屬性。
white-space屬性用于指定元素內(nèi)的空白符（空格、換行符等）如何處理。它有以下幾個(gè)可能的取值：
normal：默認(rèn)值，忽略多余的空白符，將連續(xù)的空白符合并為一個(gè)空格。
nowrap：不換行，每行的文本會(huì)持續(xù)向右溢出。
pre：保留所有的空白符，包括換行符和連續(xù)的空格。
pre-wrap：保留所有的空白符，但允許換行。
pre-line：合并多余的空白符，但保留換行符。
通過(guò)設(shè)置white-space屬性，我們可以控制元素內(nèi)文本的換行方式，進(jìn)而影響元素的大小和溢出狀態(tài)。
下面定義了一個(gè)名為 hidden-ellipsis 的 class，當(dāng)文本超出容器指定的寬度時(shí)，內(nèi)容會(huì)被截?cái)啵@示省略號(hào)。
<style type="text/css">
.hidden-ellipsis {
/* 隱藏溢出的內(nèi)容 */
overflow: hidden;
/* 用省略號(hào)表示內(nèi)容有溢出 */
text-overflow: ellipsis;
/* 強(qiáng)制文本不換行 */
white-space: nowrap;
}
</style>CSS
<style type="text/css">
.table {
width: 500px;
margin:0 auto;
}
.table th,
.table td {
max-width: 260px;
position: relative;
}
.table th {
background-color: #783d9f;
color: #ffffff;
position: relative;
}
.table th,
.table>tbody>tr>td:first-child {
text-align: center;
}
</style>HTML
<tr>
<td style="width:80px;">1</td>
<td style="width:160px;">title屬性顯示</td>
<td style="width:260px;">
<div class="hidden-ellipsis"
title="這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。"
>這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。
</div>
</td>
</tr>CSS
<style type="text/css">
.table td .move-show:hover {
position: absolute;
z-index: 999;
background-color: #fff;
border: 1px solid #ddd;
padding:5px;
margin-top:-6px;
margin-left:-6px;
border-radius:4px;
box-shadow: 0 0 10px 0 #999;
}
</style>HTML
<tr>
<td style="width:80px;">2</td>
<td style="width:160px;">單行顯示</td>
<td style="width:260px;">
<div class="hidden-ellipsis move-show">這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。</div>
</td>
</tr>CSS
<style type="text/css">
.table td .move-show:hover {
position: absolute;
z-index: 999;
background-color: #fff;
border: 1px solid #ddd;
padding: 5px;
margin-top: -6px;
margin-left: -6px;
border-radius: 4px;
box-shadow: 0 0 10px 0 #999;
}
.table td .move-show-rows:hover {
width: 100%;
white-space: normal;
}
</style>HTML
<tr>
<td style="width:80px;">3</td>
<td style="width:160px;">多行顯示</td>
<td style="width:260px;">
<div class="hidden-ellipsis move-show move-show-rows">
這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。</div>
</td>
</tr>HTML
<tr>
<td style="width:80px;">4</td>
<td style="width:160px;">彈窗顯示</td>
<td style="width:260px;">
<div class="hidden-ellipsis move-show-tips">
這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。</div>
</td>
</tr>JavaScript
let layerTipsIndex;
$('.move-show-tips').hover(function(e){
layerTipsIndex=layer.tips(e.target.innerHTML, e.target, { time: 10000 });
}, function(e){
layer.close(layerTipsIndex);
})我們搭配 layer 的 tips ，當(dāng)鼠標(biāo)移動(dòng)到被隱藏的單元格時(shí)，顯示完整內(nèi)容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demo</title>
<link href="/cdn/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<style type="text/css">
.hidden-ellipsis {
/* 強(qiáng)制文本不換行 */
white-space: nowrap;
/* 隱藏溢出的內(nèi)容 */
overflow: hidden;
/* 用省略號(hào)表示內(nèi)容有溢出 */
text-overflow: ellipsis;
}
.table {
width: 500px;
margin: 0 auto;
}
.table th,
.table td {
max-width: 260px;
position: relative;
}
.table th {
background-color: #783d9f;
color: #ffffff;
position: relative;
}
.table th,
.table>tbody>tr>td:first-child {
text-align: center;
}
.table td .move-show:hover {
position: absolute;
z-index: 999;
background-color: #fff;
border: 1px solid #ddd;
padding: 5px;
margin-top: -6px;
margin-left: -6px;
border-radius: 4px;
box-shadow: 0 0 10px 0 #999;
}
.table td .move-show-rows:hover {
width: 100%;
white-space: normal;
}
</style>
</head>
<body>
<script src="/cdn/libs/jquery/1.12.2/jquery.min.js" type="application/javascript"></script>
<script src="/cdn/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js" type="application/javascript"></script>
<script src="/cdn/libs/layer/3.5.1/layer.min.js" type="application/javascript"></script>
<div class="container mt-5">
<table class="table table-bordered">
<thead>
<tr>
<th>num</th>
<th>name</th>
<th>remark</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:80px;">1</td>
<td style="width:160px;">title屬性顯示</td>
<td style="width:260px;">
<div class="hidden-ellipsis" title="這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。">
這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。</div>
</td>
</tr>
<tr>
<td style="width:80px;">2</td>
<td style="width:160px;">單行顯示</td>
<td style="width:260px;">
<div class="hidden-ellipsis move-show">這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。
</div>
</td>
</tr>
<tr>
<td style="width:80px;">3</td>
<td style="width:160px;">多行顯示</td>
<td style="width:260px;">
<div class="hidden-ellipsis move-show move-show-rows">
這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。</div>
</td>
</tr>
<tr>
<td style="width:80px;">4</td>
<td style="width:160px;">彈窗顯示</td>
<td style="width:260px;">
<div class="hidden-ellipsis move-show-tips">
這是一段很的長(zhǎng)文字，我的父容器設(shè)置了寬度，并且設(shè)置了超出后需要隱藏內(nèi)容的樣式，現(xiàn)在您可以看到我的渲染效果了。</div>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
let layerTipsIndex;
$('.move-show-tips').hover(function (e) {
layerTipsIndex=layer.tips(e.target.innerHTML, e.target, { time: 10000 });
}, function (e) {
layer.close(layerTipsIndex);
})
</script>
</body>
</html>希望本文能夠?qū)δ兴鶐椭兄x您的閱讀！
人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。
html區(qū)塊
●區(qū)塊元素
大多數(shù)html元素被定義為塊級(jí)元素或內(nèi)聯(lián)元素.
塊級(jí)元素在瀏覽器顯示時(shí),通常以新行來(lái)開(kāi)始(和結(jié)束)
例如:<h1>,<p>,<ul>,<table>,<div>等
●內(nèi)聯(lián)元素
內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開(kāi)始
例如:<b>,<td>,<a>,<img>等
●div元素
html<div>元素是塊級(jí)元素,它可用于組合其他html元素的容器.
<div>元素沒(méi)有特定的含義.除此之外,由于它屬于塊級(jí)元素,瀏覽器會(huì)在其前后顯示折行.
如果與css一同使用,<div>元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性.
●<span>元素
html<span>元素是內(nèi)聯(lián)元素,可用作文本的容器.
<span>元素也沒(méi)有特定的含義.
當(dāng)與css一同使用時(shí),<span>元素可用于為部分文本設(shè)置樣式屬性.
二 html表單
html表單用于搜集不同類(lèi)型的用戶(hù)輸入.
<form>標(biāo)簽用于創(chuàng)建供用戶(hù)輸入的html表單.
<form>
...
</form>
使用action屬性規(guī)定:當(dāng)提交表單時(shí),向何處發(fā)送表單數(shù)據(jù).
<form action="url">
</form>
method屬性
method屬性指定在提交表單時(shí)使用的http方法:get或post
下面是兩個(gè)示例:
<form action="url" method="get">
<form action="url" method="post">
提示:
當(dāng)你使用get時(shí),表單數(shù)據(jù)將在頁(yè)面地址中使用.
如果表單正在更新數(shù)據(jù)或使用敏感信息(密碼),請(qǐng)使用post.post提供更好的安全性,因?yàn)樘峤坏臄?shù)據(jù)不會(huì)再頁(yè)面地址中顯示.
name屬性
name屬性指定表單的名稱(chēng)
要接手用戶(hù)的輸入,你需要相應(yīng)的表單元素,如文本字段.而輸入類(lèi)型是由類(lèi)型屬性(type)定義的,大多數(shù)經(jīng)常被用到的輸入類(lèi)型有:text,password,radio,checkbox,submit等
下面是一個(gè)請(qǐng)求用戶(hù)名和密碼的表單例子:
<form>
<input type="text" name="username" /><br/>
<input type="password" name="password" />
</form>
單選框
<input type="radio">標(biāo)簽定義了表單單選框選項(xiàng)
下面是一個(gè)單選框的例子:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
運(yùn)行效果如下:
注意:沒(méi)有結(jié)束標(biāo)簽,也能正常顯示,但是有時(shí)候會(huì)出現(xiàn)意想不到的情況.所以建議還是要加上結(jié)束標(biāo)簽.
復(fù)選框
<input type="checkbox">定義了復(fù)選框,用戶(hù)需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng).
下面是一個(gè)復(fù)選框的例子:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>
<input type="checkbox" name="vehicle" value="Car">I have a Car
</form>
運(yùn)行效果如下:
提交按鈕將表單提交到其action屬性:
<input type="submit" value="Submit">
運(yùn)行效果如下:
表單提交后,應(yīng)該使用服務(wù)器端語(yǔ)言(如php)進(jìn)行數(shù)據(jù)處理.當(dāng)完成html和css課程后,你可以試著學(xué)習(xí)php課程.
三 html顏色
html顏色由一個(gè)十六進(jìn)制符號(hào)來(lái)定義,這個(gè)符號(hào)由紅色,綠色和藍(lán)色的值組成(rgb)
rgb顏色的最小值是0(十六進(jìn)制:#000).最大值是255(十六進(jìn)制:#FFF)
四 html框架
通過(guò)使用框架,你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁(yè)面
<iframe>標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架
一個(gè)內(nèi)聯(lián)框架被用來(lái)在當(dāng)前html文檔中嵌入另一個(gè)文檔
標(biāo)記一個(gè)內(nèi)聯(lián)框架:
<iframe src="url"></iframe>
提示:你可以把需要的文本放置在<iframe>和</iframe>之間,這樣就可以應(yīng)對(duì)不支持<iframe>的瀏覽器.html5中不支持<frame>標(biāo)簽.
定義iframe標(biāo)簽的高度與寬度
height和width屬性用來(lái)定義iframe標(biāo)簽的高度與寬度.
屬性默認(rèn)以像素為單位,但是你可以指定其按比例顯示(如:80%)
下面是一個(gè)例子:
<iframe src="url" width="200" height="200"></iframe>
定義iframe表示是否顯示邊框
frameborder屬性用來(lái)定義iframe表示是否顯示邊框
設(shè)置屬性值為"0"移除iframe的邊框:
<iframe src="url" frameborder="0"></iframe>
Query修改CSS偽元素屬性的方法
CSS偽元素(pseudo elements)不是DOM元素, 因此你無(wú)法直接選擇到它們。
假設(shè)有如下HTML代碼：
<div class="techbrood" id="td_pseudo">techbrood introduction</div>和CSS代碼：
.techbrood:before {
width: 0;
}現(xiàn)在你想在某個(gè)元素的click事件中動(dòng)態(tài)的把techbrood:before的width屬性設(shè)置為100%,
有兩個(gè)方法, 一個(gè)是添加新的樣式：
$('head').append("<style>.techbrood::before{ width:100% }</style>");(注意該方法將影響所有的class為techbrood的元素)
另外一個(gè)方法是為該元素添加新類(lèi), 并通過(guò)設(shè)置新類(lèi)的屬性來(lái)達(dá)到改變偽元素屬性的效果：
.techbrood.change:before{
width: 100%;
}jQuery代碼：
$('#td_pseudo').addClass("change");*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
