頻道欄目
首頁 > 資訊 > HTML 5 > 正文

HTML5設置div標簽以及其內容均為居中顯示以及添加陰影實例講解

18-06-02        來源:[db:作者]  
收藏   我要投稿

先看看效果圖片:

我們將div這一塊設置為水平方向居中顯示,以及調整其與上邊框的距離。

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>陰影內容相關</title>  
        <style>  
            *{  
                margin: 0;  
                padding: 0;//  
            }  
            .div{  
                width: 300px;  
                height: 300px;  
                background-color: red;  
                margin: 0 auto;  
                /*設置div為水平居中顯示*/  
                text-align: center;  
                /*設置div里面的內容為居中顯示*/  
                line-height: 200px;  
                /*設置div里面的內容向下200px*/  
                margin-top:100px ;  
                /*設置div離頂部距離為100px*/  
                box-shadow: 10px 5px 6px 5px black;  
            }  
        </style>  
    </head>  
    <body>  
        <div class="div">  
            我是div里面的內容  
        </div>  
    </body>  
</html>  

補充的知識點:

1.外邊距:標簽與標簽之間的距離就是外邊距

格式;

margin-top: ;

margin-right: ;

margin-left: ;

margin-bottom: ;

連寫格式: margin: 上 右 下 左;

margin屬性本質上用于控制兄的關系之間的間隙 padding 一般用于控制父子關系(嵌套模型)

margin: 0 auto; //設置里面的盒子本身為水平居中顯示 :注:此方法對垂直方向無效;

//設置為水平和垂直 均為居中顯示: margin: 150px auto; (150px舉例)

margin: 0 auto; //設置盒子本身為水平居中;

2.內邊距: 邊框和內容之間的距離即為內邊距

格式:

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

連寫格式: padding: 上 右 下 左;

省略時的規律:

上 右 下 -> 左邊的取值和右邊的一樣

上 右 -> 左邊的取值與右邊的一樣 下邊的取值與上邊一樣

上 -> 其他三邊取值與上邊一樣

給標簽設置完內邊距之后,標簽占有的寬度以及高度會發生變化

3.部分div相關內容 :

    <div>標簽內設置字體、行高、間距等
	div 簡寫形式
		div.box$*5   即出現5個名稱分別為box1 box2 ....的div   tab鍵
	    <div>
		height: 100px;
		background-color: skyblue;		
		margin-top: 100px;//設置此板塊里面內容距離上邊界的距離
		text-align: center;//設置div里面的內容為居中顯示
		line-height:100px;//設置div里面的內容距離div上邊界的距離


		display:inline block;  //行內塊元素
	  </div>

		margin: 10px 20px; //設置當前所在標簽(自身)的上下間距以及左右間距

4.添加陰影部分:

給盒子添加陰影:

格式: box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴展 陰影顏色 內外陰影

(默認情況下為外陰影)

相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片