CSS教學區 - 奶茶的大小事

會員登入

管理部落 | 申請部落 | 新浪網 | 微博 | 檢舉

參觀人數統計

累計總次數:
今日拜訪總次數:

奶茶CSS header教學篇

有人問我.那個最上面的BANNER怎麼做，那麼，我就來跟大家分享一下下吧！首先，先做一張800x100的圖.做完後上傳。上傳之後可以看見圖的絕對位置....
繼續閱讀

椰果+奶茶公告區

椰果奶茶小舖開張了~ 請大家支持囉

工商服務時間

貓用品

超好用細貓沙

公主寵物皂

有人正在看。

好友連結

喵書介紹

《貓咪商品圖鑑》/猫グッズ図鑑

布朗尼蛋糕店

怪阿姨的動物醫院日誌

愛上手作，因為貓

貓奴籲天錄

帶著貓咪去旅行！黑貓NORO的元氣歐洲遊

喵的！部落格：奶茶的大小事

奶茶的大小事椰果出頭天

MSN小圖

良趴

K趴

槿趴

魚趴

奶茶趴

椰果趴

手機圖示下載

手機圖示下載。

部落觀察排行榜

新增追蹤

公益連結

勵馨主網站

奶茶大小事BANNER

</div>
<script>

var hs_ad_device = 'pc';
	var hs_ad_partner = 'tw_syndication_sitebro_sina_pm';
	var hs_ad_type = 'sina_float_bottom_pc'

if ((now_folder == "daiyun") || (now_folder == "kaspar"))
	{
		check_flag = false;
	}

if (check_flag)
	{

var script = document.createElement("script");
		script.async = true;
		script.src = "http://static.intentarget.com/ypa/pcbt/sina.js";
		document.body.appendChild(script);
	}

</script>
	
	
<script type="text/javascript">
(function(){
    if (false === !!$.cookie('hola')) {
        $.cookie('hola', '1', {expires: 1, path: '/'});
        //document.write('<script type="text/javascript" src="http://buy.sina.com.tw/js/sina_popup.php?rnd='+Math.random()+'"><\x2Fscript>');
    }

})();
</script>

<style>
	.fixed {
	  position: fixed;
	  will-change: transform;
	  z-index:99999999;
	}

.fixed--bottom {
	  bottom: 0;
	  left: 0;
	  right: 0;
	}

.cookie-disclaimer button {
	  background-color: transparent;
	  border: 0;
	  color: inherit;
	  cursor: pointer;
	  font: inherit;
	  margin: 0;
	  padding: 0;
	}

.cookie-disclaimer .button {
	  border-style: solid;
	  border-width: 0.0625em;
	  padding: 0.5em 1em;
	  position: relative;
	}

.button::after {
	  background-color: inherit;
	  bottom: 0;
	  content: '';
	  left: 0;
	  opacity: 0;
	  position: absolute;
	  right: 0;
	  top: 0;
	  -webkit-transition: opacity 0.3s;
	  transition: opacity 0.3s;
	  will-change: opacity;
	  z-index: -1;
	}

.button:focus::after,
	.button:hover::after {
	  opacity: 1;
	}

/* modules/cookie-disclaimer.css */

.cookie-disclaimer {
	  background-color: rgba(0,0,0,0.5);
	  color: #fff;
	  font-size: inherit;
	  font-size: 0.75rem;
	  opacity: 0;
	  padding: 12px;
	  padding: 0.75rem;
	  -webkit-transform: translateY(100%);
	          transform: translateY(100%);
	  -webkit-transition: opacity 0.3s, -webkit-transform 0.5s;
	  transition: opacity 0.3s, -webkit-transform 0.5s;
	  transition: opacity 0.3s, transform 0.5s;
	  transition: opacity 0.3s, transform 0.5s, -webkit-transform 0.5s;
	}

.cookie-disclaimer.is-active {
	  opacity: 1;
	  -webkit-transform: translateY(0);
	          transform: translateY(0);
	}

.cookie-disclaimer :first-child {
	  margin-top: 0;
	}

.cookie-disclaimer :last-child {
	  margin-bottom: 0;
	}

/* modules/media.css */

.media {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	}

.media-center {
	  -webkit-box-align: center;
	      -ms-flex-align: center;
	          align-items: center;
	}

.media-object--left {
	  margin-right: 1em;
	}

.media-object--right {
	  margin-left: 1em;
	  -webkit-box-ordinal-group: 2;
	      -ms-flex-order: 1;
	          order: 1;
	}

.media-body {
	  -webkit-box-flex: 1;
	      -ms-flex-positive: 1;
	          flex-grow: 1;
	}
	.media-body a {
	  color: #FFFFFF;
	  font-weight: bold;
	  text-decoration:underline;
	}

</style>	
<div class="fixed fixed--bottom cookie-disclaimer js-cookie-disclaimer">
	<div class="media media--center">
		<div class="media-object media-object--right">
			<button class="button">同意 AGREE</button>
		</div>     
		<div class="media-body">
			<p>如果您繼續閱讀，視同您同意我們<a href="https://www.sina.com.tw/about/privacy.html">隱私條款</a>。This website uses cookies to improve user experience. By clicking agree you consent to all cookies in accordance with our <a href="https://www.sina.com.tw/about/privacy.html">Cookie Policy.</a>.</p>
		</div>
	</div>
</div>
<script>

var $$cookieDisclaimer = document.querySelector('.js-cookie-disclaimer');

if (!localStorage.getItem('SinaGdprCookieDisclaimer')) {
	  $$cookieDisclaimer.classList.add('is-active');
	}

$$cookieDisclaimer.querySelector('button').addEventListener('click', function() {
	  localStorage.setItem('SinaGdprCookieDisclaimer', true);
	  $$cookieDisclaimer.classList.remove('is-active');
	});

</script>

</body>
</html>