無商不雅

一個div常見的設定，這些設定熟了，套用在其它標籤也都差不多，
基本的CSS常用的設定語法可以從一個div學起，
稍作整理後筆記一下，以後也可以直接複製來改。
 

<div style="width:300px;           /*寬(可設百分比)*/           
            border:2px solid #ccc; /*框線的size、粗細、框線顏色*/
            height:150px;          /*高度(有時不設)*/
            line-height:50px;      /*行高*/    
            background:#FFE4E1;    /*背景顏色*/
            color:#D43FFF;         /*字體顏色*/
            font-size :16px;       /*字體大小*/
            margin:0 auto;         /*對上一層容器的置中*/
            text-align:center;     /*div中的內容置中*/
            padding :10px 10px 10px 20px;/*divc中的內容距此div的距離*/
            overflow-x:hidden;     /*橫捲軸隱藏*/
            overflow-y:auto;       /*直捲須要時才出現(此div須設高度)*/
            border-radius:12px;    /*圓角*/
            "> <p>我是div中的文字內容</p>
</div>

預覽結果如下:

 

---

另，我自己覺得用2個div分內與外來包成一個小區塊來呈現內容較美觀，筆記如下:

<div style="margin:0 auto;
	        width:600px;
	        border: 2px solid #eee;
	        background:#FFF8DC;
                font-weight:bold;
	        padding-left:20px;
	        padding-right:20px;
	        padding-bottom:15px;
	        border-radius:12px;
            "> 
            <p>我的標題</p>
<div style="background:#FFFFFF;
               font-size :16px;  
               font-weight:normal;
	       border:1px dotted #eee;
	       border-radius:12px;
	       padding:20px; ">
  <p>去年今日此門中，人面桃花相映紅;</p>
  <p>人面不知何處去，桃花依然笑春風。 </p>
</div>          
</div>

預覽結果如下: