整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ext-shadow
text-shadow支持文字陰影功能，簡單利用CSS3屬性增加文字的質感而不須使用任何圖片
語法： text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平陰影的位置。允許負值。(正右負左)
v-shadow 必需。垂直陰影的位置。允許負值。(正下負上)
blur 可選。模糊的距離。
color 可選。陰影的顏色。
text-shadow: 3px 3px 3px #999999;所有主流瀏覽器都支持 text-shadow 屬性。
注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。(IE最新的版本IE11)
/*text-shadow: 水平偏移量(正右負左) 垂直偏移量(正下負上) 陰影模糊半徑 陰影顏色;*/
/*基本使用*/
text-shadow: -10px -10px 1px orange;
/*類似發光字*/
text-shadow: 0 0 5px red;
/*多重陰影*/
text-shadow: 0 0 10px red,0 0 30px green,0 0 50px orange;
/*取消陰影*/
text-shadow: none;background-image ：設置元素的背景圖像。
CSS3支持多重背景圖,只要加上一個url指定圖片路徑,并用逗號(,)將兩組url分隔就可以了
background-image:url(a.jpg),url(b.jpg);background-size: 設置背景尺寸
background-size是CSS3新增的屬性,以前的背景圖無法重設大小,這個新屬性能夠讓我們設置背景圖的尺寸。
語法:
background-size: length|percentage|cover|contain;
background:60px 80pxcover:把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
box-shadow
box-shadow語法是為圖像制造影子，CSS3的box-shadow有點兒類似于text-shadow, 只不過box-shadow是給對象實現圖層陰影效果。
語法： box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊距離。
spread 可選。陰影的尺寸。
color 可選。陰影的顏色。
inset 可選。將外部陰影 (outset) 改為內部陰影, 默認值: outset。
實例：
-moz-box-shadow: 10px 10px 15px 2px #666;
-webkit-box-shadow: 10px 10px 15px 2px #666;
-ms-box-shadow: 10px 10px 15px 2px #666;
-o-box-shadow: 10px 10px 15px 2px #666;
box-shadow: 10px 10px 15px 2px #666;目前大部分瀏覽器新版的主流瀏覽器已支持box-shadow語法，但由于CSS3還在規劃中、尚未定案，所以有些瀏覽器會使用自己的語法，
Firefox使用-moz-box-shadow, safari與chrome則使用-webkit-boxshadow。
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。
/*box-shadow: 水平偏移量 垂直偏移量 陰影模糊半徑 陰影拓展半徑 顏色 投影方式(inset);*/
box-shadow: -10px 50px 1px 10px green;
box-shadow: -10px 50px 1px 10px green,5px -20px 5px 0px blue;border-radius
border-radius就是給圖像制造圓角。CSS2.0要做圓角，必須把圖像切成小塊，再用div將這些小塊圖像接回。
實例：
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。(IE9已支持)
border-radius:50% 圓形
/*左上角開始順時針旋轉： 水平彎曲程度/垂直彎曲程度*/
border-radius: 100px 20px 30px 40px/50px 60px 70px 80px;
border-radius: 10px 30px 50px 70px;/*上右下左*/
border-radius: 50px/100px;/*水平都是50px 垂直都是100px*/
border-radius: 50px;border-image花樣邊框
border-image可以做出頁面花邊的效果,語法如下
border-image:source slice width repeat;
source:指定圖片路徑(必填)
slice: 切出圖片使用的邊框線(必填)
width: 圖片的寬度(可省略)
repeat: 圖片填充方式(可省略),設置值有stretch、repeat和round
stretch: 把圖片拉伸到整個邊框區域
repeat：重復填充
round：重復填充并自動調整圖片大小
border-image是CSS3的新增功能,目前IE和Firefox不支持,不推薦使用
border-collapse
為表格設置合并邊框模型：
table,td{
border-collapse:collapse; //邊框重疊
}separate 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse 如果可能, 邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit 規定應該從父元素繼承 border-collapse 屬性的值。
opacity
設置 div 元素的不透明級別：
div{
opacity:0.5; /* 取值范圍0-1 */
}
div{
opacity:0.5;
filter:Alpha(opacity=10); //IE8早期版本 取值范圍1-100
}text-overflow 屬性規定當文本溢出包含元素時發生的事情。
clip 修剪文本。
ellipsis 顯示省略符號來代表被修剪的文本。
string 使用給定的字符串來代表被修剪的文本。
div.test{
text-overflow:ellipsis;
}實例: 在標題欄中如何實現, 當標題文本超長時，就會自動截斷：
這三條語句組合使用, 就可以對單行超長文本做截斷, 并且在截斷的地方自動補充省略號。
數據分析中，將數據以表格的形式呈現出來是必不可少的環節，Pandas 是一個非常強大的數據分析庫，提供了很多方便的方法來處理和展示數據。今天，我們將學習如何使用 Pandas 自定義表格樣式并將其導出為 HTML 格式。
通過這種方式，我們可以更好地組織和展示數據，并在網頁上共享我們的分析結果，并且，掌握Pandas數據存儲和表格樣式自定義的方式，在日常工作過程中有更多應用和實踐意義，將拓展我們的數據分析思路。
首先，導入pandas庫，并為其設置別名pd，使用pandas的read_excel函數讀取指定路徑下的Excel文件，并將其內容存儲在DataFrame對象df中。
import pandas as pd
df=pd.read_excel(r'C:\Users\shangtianqiang\Desktop\2023年胡潤百富榜.xlsx')
#默認顯示DataFrame的前五行。
df.head()df.info()顯示DataFrame的簡要信息，包括索引、列名、數據類型和每列的非空值數量，這里顯示該數據表含有1241行數據。
#數據預覽
df.info()使用iloc方法篩選DataFrame的前100行數據。
df=df.iloc[:100,:]#篩選前100行數據
df定義一個樣式對象style，該對象用于生成HTML的樣式，這里對篩選出來的前100行的數據進行了樣式設置，它定義了一個居中的標題（h1標簽），一個表格（table標簽），以及表格中的表頭（th標簽）和單元格（td標簽）。
# 定義CSS樣式，添加標題“2023年胡潤百富榜”
style="""
<style>
h1 {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
<head><title>2023年胡潤百富榜</title></head>
<h1>2023年胡潤百富榜</h1>
""" 將DataFrame轉換為HTML代碼，并添加樣式，index=False來去除行索引 。
# 將DataFrame轉換為HTML代碼，并添加樣式
html=style + df.to_html(index=False) # 使用index=False來避免顯示行索引 將生成的HTML內容寫入到名為'2023年胡潤百富榜.html'的文件中。
# 將HTML代碼寫入文件或打印到控制臺
with open('2023年胡潤百富榜.html', 'w') as file:
file.write(html) # 將HTML代碼寫入文件output.html完整版的代碼如下所示。
import pandas as pd
df=pd.read_excel(r'C:\Users\shangtianqiang\Desktop\2023年胡潤百富榜.xlsx')
df=df.iloc[:100,:]#篩選前100行數據
# 定義CSS樣式，添加標題“2023年胡潤百富榜”
style="""
<style>
h1 {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
<head><title>2023年胡潤百富榜</title></head>
<h1>2023年胡潤百富榜</h1>
"""
# 將DataFrame轉換為HTML代碼，并添加樣式
html=style + df.to_html(index=False) # 使用index=False來避免顯示行索引
# 將HTML代碼寫入文件或打印到控制臺
with open('2023年胡潤百富榜.html', 'w') as file:
file.write(html) # 將HTML代碼寫入文件output.html導出的HTML表格樣式如下所示，整體圖表風格較為簡潔。
html的格式數據也是數據存儲的一種方式，使用read_html命令可以將其很便捷地導入，從而進行接下來的數據分析。
import pandas as pd
df_html=pd.read_html('2023年胡潤百富榜.html',encoding='gbk')[0]
df_html通過學習如何使用 Pandas 自定義表格樣式并將其導出為 HTML 格式，我們掌握了更豐富的數據處理和展示技巧，并且，還可以根據實際業務需求來自定義表格樣式，實現與他人共享數據的目的。
本文主要記錄常用的html標簽使用說明，用起來的時候偶爾查查。
標簽 | 英文全拼 | 作用 | 特點 |
?<html></html>?? | html | 網頁的根標簽 | 所有的標簽都要寫在這一對根標簽里面 |
??<head></head>?? | head | 網頁的頭標簽 | 包括完檔的屬性和信息 |
??<body></body>?? | body | 網頁的主題 | 包含文檔的所有內容 |
??<div></div>?? | division | 定義一個區域 | 瀏覽器通常會在??<div>??前后放置一個換行符 |
??<!-- 注釋 -->?? | - | 注釋 | 單標簽 |
??<br>或<br/>?? | break | 換行 | 單標簽，不會在其前后創建空白行 |
??<hr>或<hr/>?? | horizontal rule | 添加水平線 | 單標簽 |
??<img src="">?? | image | 添加圖片 | 單標簽 |
??<embed src="">?? | embed | 嵌入外部應用 | 單標簽 |
??<meta>?? | meta | 提供有關頁面的元信息 | 單標簽，??<meta>???標簽通常位于??<head>??區域內 |
??<link>?? | link | 定義文檔與外部資源的關系 | 單標簽，??<link>???標簽只能存在于??<head>??區域內，不過它可出現任何次數。 |
??<p></p>?? | paragraph | 定義段落 | 自動在其前后創建空白行 |
??<h1> to <h6>?? | Header 1 to Header 6 | 定義標題 | h1在一個頁面里只能出現一次 |
??<strong></strong>?? | strong | 文本加粗 | 加粗標記該文本 |
??<b></b>?? | bold | 文本加粗 | 加粗顯示文本，不推薦使用 |
??<em></em>?? | emphasize | 文本傾斜 | 傾斜標記文本 |
??<i></i>?? | italic | 文本傾斜 | 傾斜顯示文本，不推薦使用 |
??<del></del>?? | delete | 文本添加刪除線 | - |
??<s></s>?? | strike | 文本添加刪除線 | 不推薦使用 |
??<ins></ins>?? | insert | 文本添加下劃線 | - |
??<u></u>?? | underline | 文本添加下劃線 | 不推薦使用 |
??<a href="">填寫內容</a>?? | anchor | 添加超鏈接 | 最好使用CSS來改變鏈接的樣式 |
??<ul></ul>?? | unordered list | 定義無序列表 | 通常與??<li>??標簽一起使用 |
??<ol></ol>?? | ordered list | 定義有序列表 | 通常與??<li>??標簽一起使用 |
??<li></li>?? | list item | 創建列表項 | 可與各種列表定義標簽一起使用 |
??<dl></dl>?? | definition list | 定義描述列表 | 通常與??<dt>???和??<dd>??一起使用 |
??<dt></dt>?? | definition term | 定義條目 | 定義描述列表的項目 |
??<dd></dd>?? | definition description | 定義描述 | 對描述列表中的項目進行描述 |
??<table></table>?? | table | 定義HTML表格 | 盡可能通過樣式改變表格外觀 |
??<tr></tr>?? | table row | 定義表格的行 | 一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽 |
??<th></th>?? | table headline | 定義表格每一列的標題 | 該標簽的文本通常呈現為粗體且居中 |
??<td></td>?? | table data | 定義表格中的單元格數據 | 該標簽的文本呈現為普通且左對齊 |
??<caption>表格標題</caption>?? | caption | 定義整個表格的標題 | ??<caption>???標簽必須直接放在??<table>??標簽后 |
??<input type="">?? | input | 定義輸入控件 | 輸入字段可通過多種方式改變，取決于type屬性 |
??select?? | select | 定義下拉列表 | ??<select>???中的??<option>??標簽定義了列表中的可用選項 |
??<option></option>?? | option | 定義下拉列表中的可用項 | ??<option>??標簽不可自由定義寬高 |
??<optgroup></optgroup>?? | options group | 定義選項組 | ??<optgroup>??標簽用于把相關的選項組合在一起 |
??<textarea></textarea>?? | textarea | 定義多行的文本輸入控件 | 文本的默認字體是等寬字體 |
??<form></form>?? | form | 定義表單 | ??<form>??可以包含多個元素 |
??<fieldset></fieldset>?? | field set | 定義圍繞表單中元素的邊框 | ??<legend>???為??<fieldset>??定義標題 |
??<legend></legend>?? | legend | 為??<fieldset>??定義標題 | ??<legend>??通過css設定樣式 |
??<progress></progress>?? | progress | 定義運行中的任務進度 | ??<progress>???是HTML5中的新標簽，??<progress>??標簽不適合用來表示度量衡 |
??<meter></meter>?? | meter | 度量衡 | ??<meter>???是HTML5的新標簽，??<meter>??標簽不適合用來表示進度條 |
??<audio></audio>?? | audio | 添加音頻 | ??<audio>??標簽是HTML5的新標簽 |
??<video></video>?? | video | 添加視頻 | ??<video>??標簽是HTML5的新標簽 |
??<source>?? | source | 定義媒介資源 | ??<source>??標簽是HTML5中的新標簽 |
普通用法
錨點鏈接
錨點鏈接通過點擊超鏈接，自動跳轉到我們設置錨點的位置，類似于word的目錄導航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉本頁面元素，其他頁面跳轉自行搜索。
具體做法如下：
示例如下。為了顯示效果，通過使用lorem自動生成隨機文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復lorem15次。
<a href="#id2">a</a>
<p id="id1">
(lorem*15)
</p>
(lorem*15)
<p id="id2">
(lorem*15)
</p>超鏈接全局設置
在頁面head中寫入代碼可以設置超鏈接的全局跳轉設置
<head>
<!-- 讓頁面所有的超鏈接新頁面打開 -->
<base target="_blank">
</head>charset編碼
name
網頁自動跳轉
無序列表
無序列表使用粗體圓點進行標記。簡單示例如下。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
...
</ul>有序列表
有序列表使用數字進行標記，我們可以通過整數值start指定列表編號的起始值。簡單示例如下。
<ol start="2">
<li>a</li>
<li>b</li>
<li>c</li>
...
</ol>描述列表
通過描述列表自定義列表，列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。
<dl>
<dt>A</dt> <!-- 小標題 -->
<dd>A1</dd> <!-- 解釋標題 -->
<dd>A2</dd> <!-- 解釋標題 -->
<dt>B</dt> <!-- 小標題 -->
<dd>B1</dd> <!-- 解釋標題 -->
<dd>B2</dd> <!-- 解釋標題 -->
</dl>基礎表格
簡單示例如下。
<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標題</caption> <!-- 定義表格標題 -->
<tr>
<!-- 定義表格的行 -->
<td>A1</td> <!-- 定義表格該行第一列中的數據 -->
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<!-- 定義表格的行 -->
<th>A</th> <!-- 定義表格每一列的標題 -->
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</table>單元格合并
簡單示例如下。
<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
<tr height="100">
<!-- 定義表格的行 -->
<td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
<td>B1</td>
</tr>
<tr height="100">
<td>A2</td>
<td>B2</td>
<td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>
<tr height="100">
<td>A3</td>
<td>B3</td>
</tr>
</table>對于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
文本輸入框
簡單示例如下。
<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">密碼輸入框
簡單示例如下。
<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">單選框
示例一，兩個單選框都可以被選中
<div>
<input type="radio" name="man" checked="checked">男
</div>
<div>
<input type="radio" name="woman">女
</div>示例二，兩個單選框只能有一個被選中
<div>
<input type="radio" name="gender" checked="checked">男
</div>
<div>
<input type="radio" name="gender">女
</div>下拉列表
??<select>??
??<optgroup>??
??<option>??
示例一，單選下拉列表
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected='selected'>c</option> <!-- 默認選中 -->
</select>示例二，帶組合的單選下拉列表
<select>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1">b1</option>
<option value="b2">b2</option>
</optgroup>
</select>示例三，帶組合的多選下拉列表
<select multiple=”multiple”>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1" selected='selected'>b1</option>
<option value="b2">b2</option>
</optgroup>
</select>多選框
簡單示例如下。
<input type="checkbox" checked="checked">A
<input type="checkbox">B文本框
簡單示例如下。
<textarea cols="5" rows="2" placeholder="text"></textarea>文本上傳控件
簡單示例如下。
<input type="file" accept="image/gif, image/jpeg"/>其他類型按鈕
<input type="submit">文件提交按鈕
<input type="button" value="">普通按鈕
<input type="image" src="">圖片按鈕
<input type="reset">重置按鈕
<input type="url">網址控件
<input type="date">日期控件
<input type="time">時間控件
<!--email提供了郵箱的完整驗證，必須包含@和后綴，如果不滿足驗證，會阻止表單提交-->
<input type="email">郵件控件
<input type="number" step="3">數字控件
<input type="range" step="100">滑塊控件
<input type="color">顏色控件表單
示例一，普通表單
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>示例二，帶分組信息表單
<form>
<fieldset>
<legend>Personalia:</legend>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</fieldset>
First nameA: <input type="text" name="fname"><br>
Last nameB: <input type="text" name="lname"><br>
</form>??<progress>???與??<meter>??主要區別和用法見??HTML5 progress和meter控件??
??<progress>??
簡單示例如下。
<progress value="60" max="100"></progress>??<meter>??
簡單示例如下
<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>??<audio>??
簡單示例如下
<audio src="demo.mp3" controls autoplay></audio>??<video>??
簡單示例如下
<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>??<source>??
簡單示例如下
<video controls>
<source src="demo.mp3" type="audio/mp3">
<source src="demo.mp4" type="video/mp4">
您的瀏覽器不支持video元素。
</video>??HTML特殊字符編碼對照表??
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
