<style>
body {
margin:0;
padding:0;
background: #000 url(http://i.imgur.com/ITBRn1L.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
} </style>
範例：Google、MEGA
2. CSS特效
<div style="border:5px green solid;border-radius:10px;width:460px;height:50px;background-color:#eee;">圓角特效</div><br><div style="box-shadow:8px 8px 30px pink;width:460px;line-height:50px;text-align:center;">外陰影效果</div><br><div style="box-shadow:inset 3px 3px 12px gold;width:200px;line-height:100px;text-align:center;">內陰影效果</div><br><img src="圖片網址" style="box-shadow:3px 3px 12px gold;padding:3px;"><br><input type="button" style="background-color:#FFF0D4" value="這是背景顏色為 #FFF0D4 的按鈕"><br><input type="button" style="background-color:#FFFF78" value="這是背景顏色為 #FFFF78 的按鈕"><br><input type="button" style="background-color:#FFD4D4" value="這是背景顏色為 #FFD4D4 的按鈕"><br><input type="button" style="background-color:#C9FFC9" value="這是背景顏色為 #C9FFC9 的按鈕"><br><input type="button" style="background-color:#C2C2FF" value="這是背景顏色為 #C2C2FF 的按鈕"><br>
範例：Google、MEGA
3. 側邊浮動選單
<style>#menu1 {position: fixed; /*固定在網頁上不隨卷軸移動，若要隨卷軸移動用absolute*/top: 30%; /*設置垂直位置*/right: -100px; /*設置水平位置，依所放的內容多寡需要自行手動調整*/background: #eee; /*背景顏色*/padding: 10px 20px;border-radius: 10px; /*圓角*/-moz-border-radius: 10px;-webkit-border-radius: 10px;}#menu1:hover { /*當滑鼠移至此區塊時，伸縮區塊*/right: -10px;}#menu1 #title {padding-right: 5px; /*讓標題與連結中間有空隙*/}#menu2 {position: fixed; /*固定在網頁上不隨卷軸移動，若要隨卷軸移動用absolute*/top: 35%; /*設置垂直位置*/right: -100px; /*設置水平位置，依所放的內容多寡需要自行手動調整*/background: #eee; /*背景顏色*/padding: 10px 20px;border-radius: 10px; /*圓角*/-moz-border-radius: 10px;-webkit-border-radius: 10px;}#menu2:hover { /*當滑鼠移至此區塊時，伸縮區塊*/right: -10px;}#menu2 #title {padding-right: 5px; /*讓標題與連結中間有空隙*/}#menu3 {position: fixed; /*固定在網頁上不隨卷軸移動，若要隨卷軸移動用absolute*/top: 40%; /*設置垂直位置*/right: -100px; /*設置水平位置，依所放的內容多寡需要自行手動調整*/background: #eee; /*背景顏色*/padding: 10px 20px;border-radius: 10px; /*圓角*/-moz-border-radius: 10px;-webkit-border-radius: 10px;}#menu3:hover { /*當滑鼠移至此區塊時，伸縮區塊*/right: -10px;}#menu3 #title {padding-right: 5px; /*讓標題與連結中間有空隙*/}</style>
<div id="menu1">
<span id="title">Google</span>
<a target="_blank" href="https://www.google.com.tw/">Click</a>
</div>
<div id="menu2">
<span id="title">Youtube</span>
<a target="_blank" href="https://www.youtube.com/">Click</a>
</div>
<div id="menu3">
<span id="title">Yahoo</span>
<a target="_blank" href="https://tw.yahoo.com/">Click</a>
</div>
範例：Google、MEGA
4. 上固定選單
<style>#menu {position: fixed;top: 0%;left: 0%;font-family: Georgia, "Times New Roman", Times, serif;font-size: 16px;background-color: #99C;float: left;list-style-type: none;margin: 0px;padding: 0px;font-weight: bolder;text-align: center;vertical-align:middle;display: flex;z-index:999}#menu li {margin:0 auto;float: left;padding: 0px 10px 10px 10px;width: 265px;letter-spacing: 2px;text-align: center;border-left-width: 1px;border-left-style: solid;border-left-color: #fff;list-style-type: none;vertical-align:middle;height: 25px;flex-grow: 1;flex-basis: 0;}#menu li a {text-align: center;margin: 0px;line-height: 1.5em;color: #fff;text-decoration: none;display: block;vertical-align:middle;width: 265px;height: 25px;}#menu li a:hover {text-align: center;margin: 0px;color: #0F9;background-color: #FF3;bottom:-10px;vertical-align:middle;width: 265px;height: 25px;}</style>
<ul id="menu"><li><a href="https://www.google.com.tw/">Google</a></li><li><a href="https://www.youtube.com/">Youtube</a></li><li><a href="http://www.phnvs.cy.edu.tw/">華商</a></li><li><a href="http://learn.hnvs.cy.edu.tw/">學習網</a></li><li><a href="https://tw.yahoo.com/">Yahoo</a></li></ul>
範例：Google、MEGA
※ 以上資料僅用於個人學習用途，若有任何問題請告知。
沒有留言:
張貼留言