2022年11月23日 星期三
台灣被中共自閉長城封鎖、通過的網站
・www.comparitech.com
・www.chinafirewalltest.com
・viewdns.info
・www.websitepulse.com
◆ 商人無祖國,台灣非常被爭議的企業
・旺旺集團(維基百科)
・旺旺中時媒體集團 (現任董事長蔡衍明、副董事長周錫瑋、總裁蔡紹中)(維基百科)
◆ 被通過之網站
● 2024-07-26
・中時新聞網 (www.chinatimes.com)(旺旺集團控制)
・中視新聞網 (www.ctv.com.tw)(旺旺集團控制)
・中天新聞網 (www.ctnews.tw)(旺旺集團控制)
・中天電視 (www.ctitv.com.tw)(旺旺集團控制)
・線上看新聞 (tv2.wfuapp.com) (2022/11被禁現在卻放行,難道老板或高層被阿共仔滲透了嗎?)
・ETtoday新聞雲 (www.ettoday.net)(東森新媒體控股(股)控制;嘿〜八封網站阿共仔也愛看,還是王令麟已經xxx?)
◆ 被封鎖之網站
● 2024-07-26
・聯合新聞網 (www.udn.com)
・自由時報電子報 (www.ltn.com.tw)
・Yahoo奇摩新聞 (tw.yahoo.com)
・中央社CNA (www.cna.com.tw)
・TVBS新聞網 (news.tvbs.com.tw)
・民視新聞網 (www.ftvnews.com.tw)
・三立新聞網 (www.setn.com)
・台視新聞網 (news.ttv.com.tw)
・華視新聞網 (news.cts.com.tw)
・公視新聞網 (news.pts.org.tw)
・年代電視及年代新聞網 (http://www.eracom.com.tw/)
・蘋果新聞網 (www.appledaily.com.tw)
・東森電視 (www.ebc.net.tw)
・東森新聞 (news.ebc.net.tw)
・台灣英文新聞 (www.taiwannews.com.tw) (Taiwan News)
・蕃新聞 (n.yam.com)(舊名:蕃薯新聞網)
・NOWnews今日新聞 (www.nownews.com)
・Google台灣新聞網 (news.google.com.tw)
・鏡新聞 (www.mnews.tw)
・工商時報 (ctee.com.tw)
2022年9月17日 星期六
從 Javascript 修改 CSS
<!DOCTYPE html>
<html><head></head>
<body>
<p id="foo">hello world</p>
<script>
var foo = document.getElementById('foo');
foo.style.color = 'blue';
foo.style.fontWeight="bold";
foo.style.fontSize="20px";
// 函數-橫槓式
// foo.style.setProperty("background-color","lightblue");
// 函數-簡寫式
// foo.style.setProperty("background","lightblue");
// 函數-駝峰式(失敗,無此方式)
// foo.style.setProperty("backgroundColor","lightblue");
// 陣列-橫槓式
// foo.style['background-color'] = '#ddd';
// 陣列-駝峰式
// foo.style['backgroundColor'] = 'lightyellow';
// 陣列-簡寫式
// foo.style['background'] = 'blue';
// 橫槓式 (失敗,無此方式)
// foo.style.background-color = "#eeb";
//駝峰式
// foo.style.backgroundColor = 'yellow';
//簡寫式
// foo.style.background = 'rgb(200,150,100)';
</script>
</body>
</html>
2022年9月16日 星期五
CSS background 3個應用範例
CSS 參考來源:點閱
CSS3 參考來源:點閱
現在大部份人使用 background 都是一個一個設定它的其它屬性,但若不涉及CSS3新增的屬性時,它其實可一次設定完畢!
-----------------------------------------------------
1、不同 Background 的宣告方式
-----------------------------------------------------
<!DOCTYPE html>
<html><head></head>
<body>
<style>
div{
border:1px solid red;
width:200px;
height:200px;
}
.test1{
/* 原始大小 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
}
.test2{
/* 新舊語法混合用,圖像最大化且不失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:contain;
}
.test3{
/* 新舊語法混合用,圖像最大化,要固定在div背面時,「卻穿透粘在body背景」 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat fixed;
background-size:contain;
}
.test4{
/* 新舊語法混合用,圖像最大化且失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:cover;
}
.test5{
/* 只用新語法,圖像最大化且不失真 */
background-image:url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me');
background-repeat:no-repeat;
background-size:contain;
background-attachment:;
}
</style>
第一個(原始大小)<br/>
<div class="test1"></div>
<p><br/>
第二個(一個 background 把各屬性全宣告完畢,結果正常)<br/>
<div class="test2"></div>
<p><br/>
第三個(要固定在div背面時,「卻穿透粘在body背景」)<br/>
<div class="test3"></div>
<p><br/>
第四個(background-size:cover 使底端不能正常顯示)<br/>
<div class="test4"></div>
<p><br/>
第五個(使用多個屬性才宣告完畢,結果也是正常)<br/>
<div class="test5"></div>
</body>
</html>
----------------------------------------------------------
2、background 上傳圖片及設定之運用
----------------------------------------------------------
<!DOCTYPE html>
<html><head></head>
<body>
<style>
div{
border:1px solid red;
width:200px;
height:200px;
}
.test1{
/* 使用原始大小 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
}
.test2{
/* 新舊語法混合用,圖像最大化且不失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:contain;
}
.test3{
/* 新舊語法混合用,Div 背景圖像最大化,固定在背景時『卻穿透粘在body背景上』*/
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat fixed;
background-size:contain;
}
.test4{
/* 新舊語法混合用,圖像最大化且失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:cover;
}
.test5{
/* 只用新語法,圖像最大化且不失真 */
background-image:url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me');
background-repeat:no-repeat;
background-size:contain;
background-attachment:;
}
</style>
<div class="test1"></div>
<p>
<div class="test2"></div>
<p>
<div class="test3"></div>
<p>
<div class="test4"></div>
<p>
<div class="test5"></div>
</body>
</html>
-----------------------------------------------------
3、background 之二圖片合併應用
-----------------------------------------------------
<!DOCTYPE html>
<html><head></head>
<body>
<style>
#example1 {
margin-top:0px;
background: url(https://drive.google.com/uc?export=view&id=1-J20rOq4FT45R9Fqe1PJmahdBwnX5zZ0) right bottom no-repeat, url(https://drive.google.com/uc?export=view&id=1W-VLYg2ZvLcyvcrw2bOMWKYDd7Lc12Lg) left top repeat;
padding: 15px;
}
</style>
<div id="example1">
<h1>不是痛苦,只是不痛快</h1>
<p>一些官員只求自己職位,疏忽了人民需求,不是停用就是搞網軍。若一個國家會衰敗,這些蠹蟲是禍首!</p>
<p>我自反省,由於已看透這些爪耙子的底細,因他們而導致國民之損失,我並不感覺痛苦,只是心中不痛快而已~</p>
</div>
</body>
</html>
2022年7月18日 星期一
w3schools.com CSS 174種範本展示
・CSS accent-color:三個物件,Checkbox、Radiobutton、Range
・CSS align-content:文字列的排列方式
・CSS align-items:Flexbox 的上下排列方式
・CSS align-self:Flexbox 的自訂排列的方式 (algin-self 取代 Flexbox 預設的排列方法)
・CSS backdrop-filter:背景瀘鏡的運用(濾鏡功能,可把前景物件變透明)
OWDL - Language List
○ HTML 常用網頁字符
○ HTML 全部字符
・(英) HTML4,5 Entity Name (字符) A~Z - w3schools.com
・(繁) HTML 4, 5 Entity Name (字符) A~Z - w3big.com
◆ Javascript
○ CSS
・從 Javascript 修改 CSS
・
・
・
・
◆ CSS
・CSS background 3個應用範例
・
・
・
◆ JCH5 綜合範本 (Javascript, CSS, HTML5)
○ CSS 174種範本展示 - w3schools.com
2022年7月15日 星期五
常用網頁字符
字 符 | HTML Name | HTML Code | CSS Code | 說 明 | ||||
× | × | × | \00D7 | 乘法的叉叉,右上方關閉視窗的通用叉叉 | ||||
✕ | 空 | ✕ | \2715 | 網頁顯示中,大「乘法叉」近一半。在一般記事本則只略大一小點,近乎相同 | ||||
‹ | ‹ | ‹ | \2039 | 微 | ||||
› | › | › | \203A | 微 | ||||
❬ | 細 | |||||||
❭ | 細 | |||||||
❮ | 中 | |||||||
❯ | 中 | |||||||
❰ | 粗 | |||||||
❱ | 粗 | |||||||
« | « |
« | \00AB | 放大至50px就會順眼 | ||||
» | » | » | \00BB | 放大至50px就會順眼 | ||||
✖ | 空 | ✖ | \2716 | 粗體的叉叉字符 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 | ||||
○ | 空 | � | \0000 | 空白 |
※ 背誦字符的簡單方式:
・記下它的 「 Unicode Number 」,它通常等同 CSS Code,或八進位的編號。
・八進位的背誦方式,是加一個「 x 」,以✖為例是 「 &#x 」 加上 「 2716; 」
※ 全部字符:
・(英) HTML4,5 Entity Name (字符) A~Z - w3schools.com
・(繁) HTML 4, 5 Entity Name (字符) A~Z - w3big.com
2022年1月28日 星期五
保全個人隱私,勿用抖音(TikTok)及中國所有軟體
吳介聲 29 Sep, 2021