深度理解CSS樣式表，內有彩蛋....

-Advertisement-

樣式表的幾點常用：background-color：背景顏色 background-image：url 設置圖片背景 background-repeat平鋪 repeat-x 橫向平鋪 background-position：center 背景居中 background-position：righ ...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>CSS樣式表</title>
    	<style type="text/css">
			.divclassB{
				width:100px;
				height:100px;
				border:1px green dotted;
				background:#0F0	;
				margin-top:10px;			
				}
					
		*{
			font:"黑體";
			margin:0px;
			padding:0px;}
		div{
			background-color:#C00}
		#DD{
				width:100px;
				height:100px;
				border:1px green dotted;
				background:#0F0	;
				margin-top:10px;
			}
        	
        
        </style>
    	<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>
    
    <body>
    	<div class="divclassA" style="width:100px; height:100px; border:1px red solid;">內聯樣式表</div>
        <div class="divclassB">內嵌樣式表</div> 
        <div class="divclassC"></div>
        <div class="divclassD" id="DD" name="dd"></div>
    
    
    
    </body>
</html>

　　樣式表的幾點常用：background-color：背景顏色

background-image：url 設置圖片背景

background-repeat平鋪 repeat-x 橫向平鋪

background-position：center 背景居中

background-position：right top 圖片在右上角

font-family 字體

font-weight：bold 加粗

font-style：italic 傾斜

text-decoration：underline下劃線

text-align：center 水平居中對齊 left right

vertical-align：middle 垂直居中 top bottom

{margin in：opx auto；}自動居中

hover 滑鼠移上去

position與absolute

外層沒有position：absolute（或relative），div相對於瀏覽器定位。有的話，div相對於邊框定位

.divclassA :hover{cursor:pointer}有小手

a{ text-decoration：none}有下劃線

a：hover{text-decoration：underline}滑鼠移上去有下劃線

a：active{background：black}點擊一瞬間背景變黑

a：visited 所有被訪問的鏈接

導航欄簡易製作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
	<style type="text/css">
    	#nav{
			width:800px;
			height:100px;
			border:1px solid black;
			margin:0px auto;
			}
		.nav-banner{
			text-align:center;
			line-height:100px;
			width:20%;
			height:100px;
			float:left;
			position:relative;			
			}
    	.nav-banner:hover{
			background-color:#0F9;
			color:#F00;
			cursor:pointer;			
			}
    
    
    
    
    
    </style>
</head>

<body>
	<div id="nav">
    	<div class="nav-banner">第一導航</div>
        <div class="nav-banner">第二導航</div>
        <div class="nav-banner">第三導航</div>
        <div class="nav-banner">第四導航</div>
        <div class="nav-banner">第五導航</div>
    </div>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

PetaPojo —— JAVA版的PetaPoco

背景由於工作的一些原因，需要從C#轉成JAVA。之前PetaPoco用得真是非常舒服，在學習JAVA的過程中熟悉了一下JAVA的數據組件： MyBatis 非常流行，代碼生成也很成熟，性能也很好。但是DEBUG的時候不方便，且XML寫SQL也不是很適應，尤其是團隊比較小沒有專職DBA的情況下。 H ...
EC筆記：第3部分：15、對原始資源的訪問

使用對象來管理資源，可以避免因個人疏忽帶來的一些低級錯誤，但是不是每件事都是稱心如意的。一些函數依然使用原始的資源對象，那麼我們就需要為這些函數提供一個介面，讓他們可以獲取到原始對象。繼續拿13節的智能指針說事，先上代碼： //SFAutoPtr.h #pragma once template ... ...
Java集合框架之List介面

在上一篇Java集合框架之Collection介面中我們知道List介面是Collection介面的子介面，List介面對Collection進行了簡單的擴充，List介面中的元素的特點為有序，可重覆，允許null值，因為List繼承了Collection介面，所以繼承自Collection介面中的 ...
Python 3 利用 subprocess 實現管道( pipe )交互操作讀/寫通信

這裡我們用Windows下的shell來舉例：為了方便你理解，我們用一個很簡單的一段代碼來說明：可以看見我們利用Popen實例化了一個p，創建了子程式cmd.exe，然後我們給他的的Stdin（標準輸入流）Stdout（標準輸出流）; 同時使用了subprocess.PIPE 作為參數，這個是一 ...
[APUE]文件和目錄

一、APUE這一章中的各種晦澀名詞我在讀這一章時遇到了各種ID，根據名字完全不清楚什麼意思，幸好看到了這篇文章，http://blog.csdn.net/ccjjnn19890720/article/details/6990656，總結一下每一個進程其實對應了6個以上的ID，它們分別是：實際用戶 ...
無表頭單鏈表的總結----動態建立鏈表

1 #include "head.h" 2 struct Student *creat() 3 { 4 struct Student *head, *p1, *p2;// 先開闢三個結構體指針，*head,（作為返回的頭指針） 5 p1 = p2 =(struct Student *) malloc... ...
變數、緩衝值、編碼

變數、緩衝值、編碼 --道心變數聲明變數 eg: #!/usr/bin/env python # -*- coding: utf-8 -*- name = "DaoXin" 上述代碼聲明瞭一個變數，變數名為： name，變數name的值為："DaoXin" 變數的作用：昵稱，其代指記憶體里某個 ...
數組實現多項式的加減乘運算

"fatal.h"//頭文件 1 #include<stdio.h> 2 #include<stdlib.h> 3 #define Error(Str) FatalError(Str) 4 #define FatalError(Str) fprintf(stderr,"%s\n",Str),exit ...