5個小巧的CSS技巧

周，我將進一步了解CSS魔術，以顯示改變您的網站是多么容易。坐下來，放松，讓我帶你走過九個簡單的（我真的是這個意思！）CSS技巧真正提升你的網頁。

這是一個簡單的網站。它非常好 - 簡單，信息豐富，可讀。它甚至還有一些漂亮的照片。

通過幾個簡單的技巧，我們將把簡單的Jane簡化為網頁設計師的夢想：

現在看起來很酷，不是嗎？從最初的網站到這里真的很容易，所以讓我們快速開始第一步吧！

1.文字選擇顏色

這可以在很少的代碼行中改變，但經常被忽視！最細微的細節計數，如果您將默認的選擇/突出顯示顏色更改為適合您要使用的主題的顏色，您的訪問者將會選擇并更好地瀏覽您的網站。

要更改選擇/突出顯示顏色和文本顏色，只需指定它們，如下所示：

::selection {
background-color: #013896;
color: #f1f1f1;
}

2.首字下沉

要獲得專業的文章/報紙外觀，您可以在文本的第一個字母上使用首字下沉。首字母是大寫字母，您可以根據自己喜歡的任何方式設置風格，以適應您網頁的主題。有幾種方法可以在CSS中實現drop cap。我正在做的事情非常簡單。

我將第一個字母放在span標簽中，如下所示：

<span class=”dropcap”>T</span>he places I dream of

然后使用CSS，我裝飾了drop cap類。

.dropcap {
 float: left;
 font-size: 400%;
 color: #cf142b;
 margin: -13px 7px -13px 0;
}

主要是，我需要確保將其設置為浮動對象。尺寸和顏色完全取決于你，并在這里包裝，只需調整邊距使其看起來完美。

一封信真的有所作為！

3.圖像疊加

當鼠標懸停在圖像上時，圖像疊加是一種視覺對待。它可以用于許多目的，從裝飾到顯示隱藏的元素，如按鈕。您可以在互聯網上找到很多樣式，在這里我選擇使用原始出版商徽標的圖像替換原始文章的URLlink。當鼠標懸停在該圖像上時，一個簡單的文本就會淡入。

<div class=”container”>
<a href=”https://luxurylondon.co.uk/travel/international/cambodia-luxury-hotels-review/"><img src=http://www.jungjaehyung.com/uploadfile/2024/1009/20241009022753732.png" alt=”Avatar” class=”image”></a>
<div class=”overlay”>
<div class=”text”>Go to site.</div>
</div>
</div>

我們的想法是將圖像和疊加（無論它可能是什么）放在彼此之上。除非鼠標懸停在疊加上，否則使疊加層不可見。這可以在opacity屬性中更改。為了使事情順利進行，也要指定過渡時間。請注意以下代碼中的過渡和不透明度：

.overlay {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100%;
 opacity: 0;
 transition: 0.5s ease;
 background-color: #cf142b;
}
.container:hover .overlay {
 opacity: 0.8;
 cursor: pointer;
}

4.在懸停時著色并放大圖像

這是我最喜歡的技巧之一。它將圖像從枯燥和靜態變為交互式。首先，您需要將圖像包裝在容器中。讓容器給出類名“image image-colorize”。必須將容器的overflow屬性設置為隱藏才能使效果生效。

訣竅實際上是圖像疊加技巧。默認情況下將圖像設置為灰度，然后在鼠標懸停在圖像上時取出該濾鏡。可以使用transform：scale（your_ratio）;來調整縮放。

.image {
width: 100%;
overflow: hidden;
}
.image-colorize img {
transition: transform .5s, filter 0.5s ease-in-out;
filter: grayscale(100%);
}
.image-colorize:hover img {
filter: grayscale(0);
transform: scale(1.1);
}

除了簡單的棕褐色和灰色規模之外，還有更多內容！查看這篇關于您可以使用這個巧妙技巧實現的各種其他樣式的優秀博客文章。

5.玩圖像遮罩

現在我們正在進入專業領域，但你不需要專業技能來實現這種效果。圖像蒙版是一種以特定形式裁剪圖像的方法。該形式由第二圖像確定，其中該圖像僅包含掩模的形狀，而其他所有圖像都是透明的。使用視覺效果更容易理解。

如果這是我的形象：

這是我的mask（白色部分實際上是透明的）：

那么這將是掩蓋圖像的結果：

遮蓋圖像的好處是圖像不是一個標準的矩形框，所以這給你提供了很多創意空間（從gif看）（想象一下在吳哥窟后面的太陽落山/升起！）。當然，除非你背后放置一些東西，否則沒有人會知道你的形象被掩蓋了！它看起來就像一個普通的白色背景。

正如您所看到的，我所做的就是在向下滾動時隱藏吳哥窟背后的“柬埔寨”文字。在原始版本中，如果向下滾動，“柬埔寨”就會消失在上面。所以我們需要防止這種情況。我們可以做的是粘貼文本，使其始終保持在視圖中，直到它消失在我們的圖像后面。

這是文本的樣式：

div.sticky {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 z-index: -999;
 padding: 50px;
 text-align: center;
 font-size: 150px;
 margin-bottom: -70px;
}

“position：sticky”是使該元素變得粘稠的原因。另一個重要的是z指數。z-index比其他東西更高的東西將在頂部看到。我們希望文本消失在圖像后面，因此我們將它的z-index設置為更小。（不必一直到-999）。

最后一步。將圖像和文本包裝在標題標記中，否則也會在主文章后面看到“柬埔寨”。

<header>
// all those mask tricks
</header>
// rest of document

結束

所有這些美麗的技巧不僅僅是美好的。如果您是剛剛開始的Web開發人員，那么使用CSS是了解CSS可能性和局限性的好方法，并且在此過程中享受設計過程。如果您想為您的企業建立一個網站，這些小細節將大大提升客戶體驗并吸引他們在您的網站上停留更長時間。我們今天使用的是純CSS，你可以很好地改進網站。合并Javascript將把它帶到一個全新的水平。有大量的在線學習資源，一旦你掌握了基礎知識，不要害怕深入了解需要更多技術知識的風格。

在此存儲庫中獲取之前和之后網站的源代碼：https://github.com/dalisc/css_tricks

翻譯自：https://medium.com/@9cv9official/5-little-css-tricks-to-make-your-website-go-a-long-way-7cda61fcd7d0

tml簡單教程

簡單登錄界面

以下是一個簡單的HTML登錄頁面的代碼，你可以根據自己的需要進行修改：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁面</title>
<style type="text/css">
body {
background-color: #f2f2f2;
}
.login {
width: 400px;
height: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}
.login h1 {
text-align: center;
font-size: 30px;
color: #333;
padding-top: 30px;
}
.login input[type="text"], .login input[type="password"] {
width: 300px;
height: 40px;
border-radius: 5px;
border: none;
outline: none;
margin-top: 30px;
margin-left: 50px;
padding-left: 10px;
font-size: 16px;
}
.login input[type="submit"] {
width: 300px;
height: 40px;
background-color: #f00;
border-radius: 5px;
border: none;
outline: none;
color:#fff;
font-size: 18px;
cursor:pointer; 
margin-top: 30px; 
margin-left:50px; 
}
</style>
</head>
<body>
<div class="login">
<h1>登錄</h1>
<form action="" method="post">
<input type="text" name="username" placeholder="請輸入用戶名"><br>
<input type="password" name="password" placeholder="請輸入密碼"><br>
<input type="submit" value="登錄">
</form>
</div>
</body>
</html>

這是一個簡單的登錄頁面，你可以根據自己的需要進行修改。如果你想了解更多關于HTML的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) HTML+CSS+JS實現十款好看的登錄注冊界面模板，趕緊收藏起來吧！好看的登錄界面王同學要努力的博客-CSDN博客. https://blog.csdn.net/m0_46374969/article/details/115906705. (2) HTML+CSS登錄界面html登錄頁面代碼桐艾的博客-CSDN博客. https://blog.csdn.net/tongai1/article/details/105954419. (3) 如何制作一個簡單的HTML登錄頁面（附代碼） - 知乎專欄. https://zhuanlan.zhihu.com/p/143671138.

發送get請求并顯示返回內容

當客戶端使用GET方法向服務器發送請求時，請求的數據會附加在URL的末尾。服務器可以使用相同的HTTP協議來回答請求。在客戶端，可以使用JavaScript來獲取GET請求的數據。以下是一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GET請求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("demo_test_get.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送 GET 請求</button>

</body>
</html>

在這個例子中，我們使用了jQuery庫來發送GET請求。當用戶點擊按鈕時，jQuery會向demo_test_get.asp發送GET請求，并將數據附加在URL的末尾。當服務器回答請求時，jQuery會調用回調函數，并將服務器返回的數據作為參數傳遞給它。

如果你想了解更多關于HTML、JavaScript和jQuery的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) 發送表單數據 - 學習 Web 開發 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data. (2) 純 HTML 頁面發請求獲取數據并渲染到頁面上 - CSDN博客. https://blog.csdn.net/LuckKing0925/article/details/111308084. (3) 使用Ajax發送http請求（get&post請求） - 千古壹號 - 博客園. https://www.cnblogs.com/qianguyihao/p/8485028.html.

發送post請求

在HTML中，可以使用form元素來創建一個表單，然后使用POST方法將表單數據發送到服務器。以下是一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST請求</title>
</head>
<body>
<form action="http://www.example.com/login" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>

在這個例子中，我們使用了form元素來創建一個表單，然后使用POST方法將表單數據發送到http://www.example.com/login。在表單中，我們使用了兩個input元素來接收用戶名和密碼。當用戶點擊提交按鈕時，表單數據將被發送到服務器。

如果你想了解更多關于HTML的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) POST - HTTP | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/web/http/methods/post. (2) HTML 請求方法 - w3school 在線教程. https://www.w3school.com.cn/tags/html_ref_httpmethods.asp. (3) jQuery post() 方法 | 菜鳥教程. https://www.runoob.com/jquery/ajax-post.html. (4) 發送表單數據 - 學習 Web 開發 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data.

接收post請求

當客戶端使用POST方法向服務器發送請求時，服務器會將請求的數據存儲在HTTP請求的請求主體中。服務器可以使用相同的HTTP協議來回答請求。在客戶端，可以使用JavaScript來獲取POST請求的數據。以下是一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST請求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("demo_test_post.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送 POST 請求</button>

</body>
</html>

在這個例子中，我們使用了jQuery庫來發送POST請求。當用戶點擊按鈕時，jQuery會向demo_test_post.asp發送POST請求，并將數據存儲在HTTP請求的請求主體中。當服務器回答請求時，jQuery會調用回調函數，并將服務器返回的數據作為參數傳遞給它。

如果你想了解更多關于HTML、JavaScript和jQuery的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) 發送表單數據 - 學習 Web 開發 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data. (2) javascript能否獲取到post請求內的數據? - SegmentFault 思否. https://segmentfault.com/q/1010000004523107. (3) ChatGPT流式streaming回復的實現 - 掘金. https://juejin.cn/post/7222440107214241829.

天給大家分享五個開源的博客系統，可用于免費創建自己的博客，也有大量精美的模板使用，也就是說你不懂技術，用了這五個開源系統也能創建自己的博客，至于創建博客的好處，想必大家都知道，可用戶記錄生活，分享技術，也能鍛煉一下自己的文筆。

一.wordpress

wordpress老牌博客系統，開源免費，有大量的精美模板，也有大量教程，可基于wordpress開發很多項目，博客也只是它的一部分。當然wp也有很多插件，生態比較成熟，使用起來方便。WordPress核心是使用標準的Web編碼語言-PHP和MYSQL構建的。前端頁面是HTML、CSS、JavaScript、jQuery和AJAX的組合。

二.emlog個人博客系統

emlog 是 every memory log 的簡稱，意即：點滴記憶。是一款基于PHP和MySQL的功能強大的博客及CMS建站系統。致力于為您提供快速、穩定，且在使用上又極其簡單、舒適的內容創作及站點搭建服務。emlog是國內一個php程序員開發的，年限也不少了，也有很多成熟的模板和插件，使用起來也很方便。

三.z-blog

Z-Blog既是博客程序，也是CMS建站系統。已走過十余年風雨的她們，有著強大的可定制性、豐富的插件接口和獨立的主題模板，致力于給國內用戶提供優秀的博客寫作體驗。期待她們能成為您寫博客的第一選擇,開源免費、小巧強大的博客程序與CMS建站系統,也有很多的模板和插件。

四.thinkcmf

ThinkCMF是一款基于ThinkPHP+MySQL開發的中文內容管理框架。ThinkCMF提出靈活的應用
機制，框架自身提供基礎的管理功能，而開發者可以根據自身的需求以應用的形式進行擴展。每個應用都能獨立的完成自己的任務，也可通過系統調用其他應用進行協同工作。在這種運行機制下，開發商城應用的用戶無需關心開發SNS應用時如何工作的，但他們之間又可通過系統本身進行協調，大大的降低了開發成本和溝通成本。

五.fastadmin

fastadmin一個快速的開發的后臺管理、會員中心、API接口、移動應用API等等功能，你可以在FastAdmin發布你開發的完整應用或插件，共享FastAdmin開放的生態資源。你可以在FastAdmin找到你需要的應用、小程序，快速部署你自己的完整網站、APP或小程序。

這五個開源的博客系統，都可以快速創建博客，如果你不知道怎么下載，安裝，可以私信我，我是專業的程序員，幫你來處理，歡迎大家一起交流。

歡迎關注云碼素材，交流分享! 云碼素材原創作品，更多精品資源下載，技術分享請關注，私信云碼素材！

在線咨詢

上一篇：SpringMVC批量上傳圖片，實現上傳前圖片預覽
下一篇：ASP.NET Web Pages-WebMail

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商