思酷素材-按钮样式
本页面CSS样式由本站思叔独立编写，主要用于本站视觉美化使用，如有喜欢这套样式的朋友，可以联系思叔本人获取CSS全套代码和使用教程的下载⬇️，可以在线辅导如何引用到自己的网站项目中，😄注：获取全套CSS文件，请加微信咨询：a54370478
渐变按钮
查看代码
<a class="btn btnr">红色渐变</a>
查看代码
<a class="btn btnt">橙色渐变</a>
查看代码
<a class="btn btny">黄色渐变</a>
查看代码
<a class="btn btng">绿色渐变</a>
查看代码
<a class="btn btnq">青色渐变</a>
查看代码
<a class="btn btnl">蓝色渐变</a>
查看代码
<a class="btn btnz">紫色渐变</a>
查看代码
<a class="btn btnh">粉色渐变</a>彩色按钮
查看代码
<a class="btn btn1">红色按钮</a>
查看代码
<a class="btn btn2">橙色按钮</a>
查看代码
<a class="btn btn3">红色按钮</a>
查看代码
<a class="btn btn4">绿色按钮</a>
查看代码
<a class="btn btn5">青色按钮</a>
查看代码
<a class="btn btn6">蓝色按钮</a>
查看代码
<a class="btn btn7">紫色按钮</a>
查看代码
<a class="btn btn8">青绿按钮</a>
查看代码
<a class="btn btn9">黄绿按钮</a>
查看代码
<a class="btn btn10">粉色按钮</a>
查看代码
<a class="btn btn11">黑色按钮</a>
查看代码
<a class="btn btn12">白色按钮</a>
查看代码
<a class="btn btn13">灰色按钮</a>边框按钮
查看代码
<a class="btn btn1a">红色按钮</a>
查看代码
<a class="btn btn2a">橙色按钮</a>
查看代码
<a class="btn btn3a">红色按钮</a>
查看代码
<a class="btn btn4a">绿色按钮</a>
查看代码
<a class="btn btn5a">青色按钮</a>
查看代码
<a class="btn btn6a">蓝色按钮</a>
查看代码
<a class="btn btn7a">紫色按钮</a>
查看代码
<a class="btn btn8a">青绿按钮</a>
查看代码
<a class="btn btn9a">黄绿按钮</a>
查看代码
<a class="btn btn10a">粉色按钮</a>TW按钮
查看代码
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">蓝色按钮</button>
查看代码
<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">绿色按钮</button>
查看代码
<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded">红色按钮</button>
查看代码
<button class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">黄色按钮</button>
查看代码
<button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded">紫色按钮</button>
查看代码
<button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded">粉色按钮</button>
查看代码
<button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded">靛蓝按钮</button>
查看代码
<button class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded">蓝绿按钮</button>
查看代码
<button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded">橙色按钮</button>
查看代码
<button class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded">灰色按钮</button>思酷素材-背景框样式
本页面CSS样式由本站思叔独立编写，主要用于本站视觉美化使用，如有喜欢这套样式的朋友，可以联系思叔本人获取CSS全套代码和使用教程的下载⬇️，可以在线辅导如何引用到自己的网站项目中，😄注：获取全套CSS文件，请加微信咨询：a54370478
文本框1
查看代码
<div class="box box1">box1是非常漂亮文本框</div> box1是非常漂亮文本框
box2是非常漂亮文本框
box3是非常漂亮文本框
box4是非常漂亮文本框
box5是非常漂亮文本框
box6是非常漂亮文本框
box7是非常漂亮文本框
box8是非常漂亮文本框
box9是非常漂亮文本框
box10是非常漂亮文本框
box11是非常漂亮文本框
box12是非常漂亮文本框
box13是非常漂亮文本框
box14是非常漂亮文本框
box15是非常漂亮文本框
box16是非常漂亮文本框
box17是非常漂亮文本框
box18是非常漂亮文本框
box19是非常漂亮文本框
box20是非常漂亮文本框
文本框2
查看代码
<div class="box box21">box21是非常漂亮文本框</div>box21是非常漂亮文本框
box22是非常漂亮文本框
box23是非常漂亮文本框
box24是非常漂亮文本框
box25是非常漂亮文本框
box26是非常漂亮文本框
box27是非常漂亮文本框
box28是非常漂亮文本框
box29是非常漂亮文本框
box30是非常漂亮文本框
box31是非常漂亮文本框
box32是非常漂亮文本框
box33是非常漂亮文本框
box34是非常漂亮文本框
box35是非常漂亮文本框
box36是非常漂亮文本框
box37是非常漂亮文本框
box38是非常漂亮文本框
box39是非常漂亮文本框
box40是非常漂亮文本框
文本框3
查看代码
<div class="box bjb1">bjb1是漂亮的文本框</div>bjb1是漂亮的文本框
bjb2是漂亮的文本框
bjb3是漂亮的文本框
bjb4是漂亮的文本框
bjb5是漂亮的文本框
bjb6是漂亮的文本框
bjb7是漂亮的文本框
bjb8是漂亮的文本框
bjb9是漂亮的文本框
bjb10是漂亮的文本框
bjb11是漂亮的文本框
bjb12是漂亮的文本框
bjb13是漂亮的文本框
bjb14是漂亮的文本框
bjb15是漂亮的文本框
bjb16是漂亮的文本框
bjb17是漂亮的文本框
bjb18是漂亮的文本框
bjb19是漂亮的文本框
bjb20是漂亮的文本框
bjb21是漂亮的文本框
bjb22是漂亮的文本框
bjb23是漂亮的文本框
bjb24是漂亮的文本框
bjb25是漂亮的文本框
文本框4
查看代码
<div class="box bjb26">bjb26是漂亮的文本框</div>bjb26是漂亮的文本框
bjb27是漂亮的文本框
bjb28是漂亮的文本框
bjb29是漂亮的文本框
bjb30是漂亮的文本框
bjb31是漂亮的文本框
bjb32是漂亮的文本框
bjb33是漂亮的文本框
bjb34是漂亮的文本框
bjb35是漂亮的文本框
bjb36是漂亮的文本框
bjb37是漂亮的文本框
bjb38是漂亮的文本框
bjb39是漂亮的文本框
bjb40是漂亮的文本框
bjb41是漂亮的文本框
bjb42是漂亮的文本框
bjb43是漂亮的文本框
bjb44是漂亮的文本框
bjb45是漂亮的文本框
bjb46是漂亮的文本框
bjb47是漂亮的文本框
bjb48是漂亮的文本框
bjb49是漂亮的文本框
bjb50是漂亮的文本框
思酷素材-表格样式
本页面CSS样式由本站思叔独立编写，主要用于本站视觉美化使用，如有喜欢这套样式的朋友，可以联系思叔本人获取CSS全套代码和使用教程的下载⬇️，可以在线辅导如何引用到自己的网站项目中，😄注：获取全套CSS文件，请加微信咨询：a54370478
表格样式1
查看代码
<table class="ui celled striped table">
<thead>
<tr>
<th colspan="3">定制项目设计费</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目设计费 | ||
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui striped table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
表格样式2
查看代码
<table class="ui selectable inverted celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable inverted red celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable inverted orange celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable inverted yellow celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
表格样式3
查看代码
<table class="ui selectable inverted olive celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable inverted green celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable inverted teal celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable inverted blue celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
表格样式4
查看代码
<table class="ui selectable inverted violet celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable inverted purple celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable inverted pink celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |
查看代码
<table class="ui selectable inverted brown celled table">
<thead>
<tr>
<th>定制项目</th>
<th>设计费</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>平面设计</td>
<td>500</td>
<td>查看案例</td>
</tr>
<tr>
<td>UI设计</td>
<td>800</td>
<td>查看案例</td>
</tr>
<tr>
<td>电商设计</td>
<td>900</td>
<td>查看案例</td>
</tr>
</tbody>
</table>| 定制项目 | 设计费 | 案例 |
|---|---|---|
| 平面设计 | 500 | 查看案例 |
| UI设计 | 800 | 查看案例 |
| 电商设计 | 900 | 查看案例 |