求最長迴文子串
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> </title> <style type="text/css"> #div1{ width: 500px; height: 500px; background:lightblue; overflow: hidden; /*可以理解為固定再網頁的位置*/ /*border-top-width:5px ; border-top-color: red ; border-top-style:solid ;*/ border: 5px red solid; /*邊線寬度 顏色 樣式 去掉top為4邊都設定*/ /*樣式L: soild 實線 double 雙實線 dotted 點虛線 dashed 線段虛線*/ border-radius: 50%;/*變為弧度角 左上角 border-top-left-radius: ; 右上角 border-top-right-radius: ; 左下角 border-bottom-left-radius: ; 右下角 border-bottom-right-radius: ;*/ }#div2{ width: 100px; height: 100px; background: lightgreen; margin: 78px auto 50px; /*auto 只能運用與左右 上下能用auto*/ } </style> </head> <body> <div id="div1"> <div id="div2"></div> <div id="div3">drftghjnk</div> </div> </body> </html>
盒模型參考的資料有
寬 width 高 height
背景 background
1、背景顏色 2、背景滾動模式 3、背景裁剪4、背景圖片在加地址時用 url（）函式
5、背景來源6、背景圖片位置7、背景平鋪 8、背景大小
這些為背景屬性設定函式
overflow 溢位
border 邊框屬性
padding 內邊框屬性
overflow 塊級格式化上下
* 預設值。內容不會被修剪，會呈現在元素框之外 */
overflow: visible;
/* 內容會被修剪，並且其餘內容不可見 */
overflow: hidden;
/* 內容會被修剪，瀏覽器會顯示滾動條以便檢視其餘內容 */
overflow: scroll;
/* 由瀏覽器定奪，如果內容被修剪，就會顯示滾動條 */
overflow: auto;
/* 規定從父元素繼承overflow屬性的值 */
overflow: inherit;可以分別設定四周邊框的大小 樣式 border在設定時一般 顏色 畫素 樣式 一起設定border：1px botted red；
none: 預設無邊框
dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框。效果取決於邊框的顏色值
ridge: 定義3D脊邊框。效果取決於邊框的顏色值
inset:定義一個3D的嵌入邊框。效果取決於邊框的顏色值
outset: 定義一個3D突出邊框。 效果取決於邊框的顏色值
顏色
顏色的填寫方法；
1 顏色的英文名稱 lightPink
2 HexRGB #FFB6C1
3 red( xxx,xxx,xxx)255,182,193
border-”top“-“color”
border-radius: 50%;/*變為弧度角
左上角 border-top-left-radius: ;
右上角 border-top-right-radius: ;
左下角 border-bottom-left-radius: ;
右下角 border-bottom-right-radius: ;*/
margin外邊框屬性
margin: 50px 0 0 50px; 4值上 右 下 左 順時針標註
margin: 50px 0 50px; 3值. 上 左右 下
margin: 50px 50px; 2值 上下 左右
margin: 50px ; 4值. 上下左右 padding: ;border 數值排列順序相同
在margin中auto 只能運用與左右 上下能用auto*/
*/
盒子陰影 box-shadow：10px 10px 5px #999999 順時針填寫 四周 顏色
一般在盒子的佈局中常使用浮動的佈局方式
float
利用盒子做出
三角形
#div1{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: rgb(32, 55, 56);
}
操場
#div2{
width: 300px;
height: 100px;
background: lightgreen;
margin:30px 0 ;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius:50px ;
}
上扇形
#div3{
height:50px;width: 0;
font-size: 0;
over: hidden: 0;
line-height: 0;
border-radius: 200px;
border-color: red transparent transparent transparent;
border-style: solid dashed dashed dashed;
border-width: 200px;}
}
圓環
#div4{width:30px;
height:30px;
border: 50px solid red;
border-left-color: red;
border-bottom-color: red;
border-radius: 50%;
}
梯形
#div5{
width: 10px;
height: 0;
border: 100px solid transparent;
border-bottom-color: rgb(32, 55, 56);
}