寫套件的時候，程式設計師最怕的畫畫面!
我來挑戰你了!
昨天講到要來分享CSS的相關知識
我寫套件的時候，不是常常會先用CSS畫畫面嗎?
那就會有一些心得
一起努力學習吧! 不過我對CSS不算很精通@_@
此篇文章主要分兩部分。
一個是一個檔案，大概我會載入哪些CSS
一個是我作一個dialog版型時遇到的問題
首先我都會先針對專案，載入一份reset的CSS
最基本的reset.css我會設定
sheephead081
* {
margin:0px ;
padding:0px ;
}
不過網路上很多。大家自己斟酌 (關鍵字 css reset)
有些人會把css reset 跟 css hack 兩個觀念混淆。
實際上是不同的
css reset 是希望，儘量消滅各瀏覽器對初始設定值的差異。
而css hack而是藉由某瀏覽器獨特的語法或是...BUG
變成，該瀏覽器才讀取得到的修飾。
接下來就是針對各種不同功用，分門別類，分別載入CSS
例如說
button.css 專門在修飾此專案按鈕的CSS
套件.css 可能你有載入一些套件，可能有必須要有的CSS設定
最後會有一個 page.css 就是針對該一頁面才需要存在的CSS
但是我覺得如果還可以接受的話，page.css直接寫到htm檔案裡面也很好
所以大概會載入3-4個css以上
1.reset.css
2.sys.css 常用的CSS
3.套件1.css
4.套件2.css
5.page.css 該頁的CSS
< dialog 測試頁 >
在這一分測試頁中，我的page.css裡面沒有東西
因為沒有確定的東西我都會直接放到htm裡面，方便修改。
我以前學到的經驗是
如果你一個div裡面包了三個東西。
那你最好多包一層，變成這樣
<div 原本的div>
<div 多包的div>
element1
element2
element3
</div>
</div>
這樣你不但可以用你原本預想的方式使用原來的DIV
也可以用多包的DIV來控管裡面的元素
於是 我的dialog結構長這樣
<div class="ryDlog-widget">
<div class="ryDlog-zone">
<div class="ryDlog-top">
<div class="ryDlog-top-title">
</div>
<div class="ryDlog-top-btn">
</div>
</div>
<div class="ryDlog-content">
</div>
<div class="ryDlog-footer">
</div>
</div>
</div>
我的習慣是這樣，如果這個東西
會在畫面上出現不只一次，那我會把該單位叫widget
!!!接下來這個部分真的很需要前輩指正
因為我的套件可以依照事件變大變小。
所以我在設計的時候，我只在乎ryDlog-widget
而且在這個例子，我只在乎它的高
因為他的高要注意三個元素的堆疊，寬則單純的多
我的策略是top 跟 bottom高度是不變的。
但是content要隨著整個widget的高度有所改變。
我打算用JS用算的，CSS我不會這樣設定自動化。
以下是我的公式
.ryDlog-widget - height : 250
.ryDlog-content - height :166
然後，在圓角的部分
.rouncConer { -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ -khtml-border-radius: 10px; /* Konqueror */ border-radius: 10px; /* Opera 10.50 and later (CSS3 standard) */ behavior: url(border-radius.htc); /* IE6, IE7, IE8 */}
.rouncConer-top {-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.rouncConer-bottom {-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}
.rouncConer-left {-webkit-border-top-left-radius: 10px;-webkit-border-bottom-left-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomleft: 10px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}
.rouncConer-right {-webkit-border-top-right-radius: 10px;-webkit-border-bottom-right-radius: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-bottomright: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
要有五個，原因是因為如果你的.ryDlog-top套圓角
那跟.ryDlog-content接觸的地方就破功啦，因為連下端都圓角了
同理可套在.ryDlog-footer，只能套用.rouncConer-bottom
讓下擺變成圓角即可。
最後在按鈕ryDlog-top-btn的地方，放上按鈕。
<script>
$(function()
{
$('.ry-state-default').hover(
function(){ $(this).addClass('ry-state-hover'); },
function(){ $(this).removeClass('ry-state-hover'); }
);
$('.ry-state-default').click(function(){
$(this).toggleClass('ry-state-active');
});
}) ;
</script>
<style>
* {
border: 0px solid gray ;
}
.ryDlog-widget {
position:absolute ;
top: 0px;
left: 0px ;
min-width:200px ;
min-height:170px ;
height:250px ;
width:350px ;
border: 1px solid gray ;
opacity: 0.9 ;
}
.ryDlog-zone {
margin: 2px ;
height: 246px ;
width: 346px ;
background-color: white ;
}
.ryDlog-top {
height: 25px ;
padding: 5px ;
background: #ccc ;
}
.ryDlog-footer {
height: 25px ;
padding: 5px ;
background: #aaa ;
}
.ryDlog-top-title {
font-weight:bolder ;
float: left ;
padding-left:5px ;
height:inherit ;
}
.ryDlog-top-btn {
float: right ;
padding-right:5px ;
height:inherit ;
}
.ryDlog-content {
height: 166px;
/*
.ryDlog-widget - height : 250
- .ryDlog-zone - margin : 2x2
- .ryDlog-top - padding : 5*2
- .ryDlog-top - height : 25
- .ryDlog-footer - padding : 5*2
- .ryDlog-footer - height : 25
- .ryDlog-content - padding : 5*2
--------------------------------------
166
*/
padding: 5px;
background: #bbb ;
}
</style>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<div class="ryDlog-widget rouncConer">
<div class="ryDlog-zone rouncConer">
<div class="ryDlog-top rouncConer-top">
<div class="ryDlog-top-title">
測試標題
</div>
<div class="ryDlog-top-btn">
<div class="ry-state-default ry-corner-all" ><span class="ry-icon ry-icon-minus"></span></div>
<div class="ry-state-default ry-corner-all" ><span class="ry-icon ry-icon-newwin"></span></div>
<div class="ry-state-default ry-corner-all" ><span class="ry-icon ry-icon-arrow-4"></span></div>
<div class="ry-state-default ry-corner-all" ><span class="ry-icon ry-icon-close"></span></div>
</div>
</div>
<div class="ryDlog-content">
content
</div>
<div class="ryDlog-footer rouncConer-bottom">
footer
</div>
</div>
</div>
這樣就大功告成了!
http://ry.url.tw/wp/doc/a15.htm
iThome鐵人賽
看影片追技術