站長之家-站標logo圖片
歡迎你來到站長之家!
攜手合作圖片
banner圖片
當前位置:站長之家 >> 網站技術 >>



站長之家提供幾個DIV+CSS制作網頁的使用技巧


【發布人:站長之家    發布日期:2014-11-05】

DIV+CSS是一種網站標準,是網頁布局的幾種較為流行的方法,也是站長們非常喜愛的一種網頁制作方法。目前,許多大中小型網站都已經開始采用DIV+CSS的框架布局來制作,這更加印證了DIV+CSS是大勢所趨。DIV+CSS布局方式的特點主要有這樣幾個:1、這種DIV+CSS布局的網頁更加符合W3C標準;2、這種DIV+CSS布局方法對于搜索引擎更加友好;3、使用DIV+CSS樣式布局在調整改變布局時更加方便自由;4、使用DIV+CSS布局的頁面,代碼量通常都比較少,從而使得DIV+CSS的頁面更加容易被瀏覽器加載。在這里,站長之家為各位站長們整理了一些使用DIV+CSS進行網頁布局的技術實現代碼,可供各位網站技術人員制作網頁時參考使用。

一、實現DIV盒子不獨占一行的顯示方法(即多個div盒子顯示在同一行上,由左至右排列):
在默認情況下,一個div盒子在網頁上是單獨占據一行的,其所占用的寬度是100%的。這樣的顯示方式對于網頁排版來說幾乎是沒有一點用的。要想使用DIV+CSS技術,我們必須在編碼時使用多個div占據一行的技術。要實現這一技術是非常簡單的,下面為您提供兩種解決方式來實現。

1、利用style里的 display:inline 屬性來實現:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>站長網實例:測試三個盒子是否顯示在同一行</title>
<style>
div{display:inline}
</style>
</head>
<body>
<div>這是第一個div盒子,看看是否橫向顯示在左邊位置</div>
<div>這是第二個div盒子,看看是否橫向顯示在中間位置</div>
<div>這是第三個div盒子,看看是否橫向顯示在右邊位置</div>
</body>
</html>

2、利用style里的 float:left 屬性來實現:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>實例:測試三個盒子是否顯示在同一行</title>
<style>
div{ float:left}
</style>
</head>
<body>
<div>這是第一個div盒子,看看是否橫向顯示在左邊位置</div>
<div>這是第二個div盒子,看看是否橫向顯示在中間位置</div>
<div>這是第三個div盒子,看看是否橫向顯示在右邊位置</div>
</body>
</html>

二、使用CSS技術實現當鼠標移動到鏈接上方時,會自動出現一個提示框的效果:
假設我們設置網頁上的鏈接為:<a class="tooltip" href="http://www.hdfwko.tw">站長之家<span>這里是提示文字:本網站是站長網的網站</span></a>,那么我們可以以下面的代碼來實現顯示提示框的效果:
CSS可以這樣寫:
a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;}
a.tooltip:hover span{display:inline; position:absolute;}

三、利用DIV+CSS技術設置網頁整體居中的代碼:
在默認情況下,DIV盒子是居左顯示的,下面的代碼可以讓DIV居中放置。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>實例:DIV+CSS技術設置網頁整體居中</title>
<style>
#layout{ width:778px; margin:0 auto; text-align:center; border:1px solid #44b6dc; background:#e1edfb; height:500px;}
</style>
</head>
<body>
<div id="layout">請看一下這個div盒子是否居中了</div>
</body>
</html>

四、利用DIV+CSS來設置DIV盒子中的內容上下垂直居中:
實例代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>實例:設置容器中的內容垂直居中</title>
<style>
#layout { width:778px; margin:0 auto; text-align:center; border:1px solid #44b6dc; background:#e1edfb; height:500px; line-height:500px;}
</style>
</head>
<body>
<div id="layout">請看一下這句文字是否垂直居中了</div>
</body>
</html>

五、利用CSS實現將超級鏈接的下劃線改成虛線的形式:
在瀏覽網頁時,經常可以看到鏈接的下劃線是虛線,或者在link與hover不同狀態,下劃線會從虛線到實線的變化。這樣的效果是如何實現的呢?其實這樣的效果,只需要設置text-decoration:none即可,也就是去除了鏈接的下劃線。然后再給鏈接加下邊框線,設置下邊框線不同的寬度、線型、顏色,就可以實現“下劃線”變成多樣效果,您也可以根據本代碼將超級鏈接的下劃線改成其他類型的線條。實例代碼如下:

<style type="text/css">
<!--
a.texta {
text-decoration:none;
border-bottom:1px dashed #ccc;
color:#c00;
}
a.texta:hover {
border-bottom:1px solid #c00;
color:#666;
}

a.textb {
text-decoration:none;
border-bottom:1px dashed #ccc;
color:#069;
}
a.textb:hover {
border-bottom:1px dashed #c00;
color:#000;
}
-->
</style>

<body>
<a href="http://www.hdfwko.tw" class="texta">實例測試</a>
<br><br>
<a href="http://www.hdfwko.tw/" class="textb">實例測試</a>
</body>

六、利用CSS來實現段落前面縮進兩個字的位置:
段落前面空兩個字的距離,不要再使用空格(&nbsp;)了。應該使用首行縮進text-indent。text-indent可以使得容器內首行縮進一定單位,比如中文段落一般每段前空兩個漢字。在這里我們需要用到一種長度單位em。em是相對長度單位的含義,相對于當前對象內文本的字體尺寸。我們中文段落一般每段前空兩個漢字。實際上,就是首行縮進了2em,實例代碼如下:

<style type="text/css">
<!--
p{
text-indent: 2em;
}
-->
</style>

七、利用用DIV+CSS技術把一段或一行文字的超出的部分變成省略號“...”:
提供的實例代碼如下:
<html>
<style>
.ellipsis span
{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
width:190px;
display:block;
}
.ellipsis {
clear:both;
}
.ellipsis span:after {
content: "...";
}
.ellipsis span {
max-width:180px;
width:auto !important;
float:left;
}
</style>
</html>

<body>
<div class="ellipsis">
<span>我們網站www.hdfwko.tw,是站長學習的平臺,上面主要是關于網站建設知識類的內容</span>
</div>
</body>
</html>

(本頁地址為:http://www.hdfwko.tw/tech/tech-2.html,請尊重別人勞動,不要復制和采集。轉載請注明本文出處)

信息顯示圖片
頁腳blank圖片

版權所有:站長之家【www.hdfwko.tw】

四川快乐12开奖号