css3

基礎

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>style</title><!-- link（外部樣式）和style（內部樣式）優先級相同，重復寫會覆蓋 --><link rel="stylesheet" href="main.css"/><style>/* 標簽選擇器 */h1 {background-color: aquamarine;/* !important 表示優先級最高 */color: black !important;}/* 類選擇器 */.class1{color: red;}/* id選擇器 */#id1{color: blue;}/* 后代選擇器：#id2內所有的p標簽 */#id2 p{color: royalblue;}/* 子代選擇器：#id2的第一級子標簽 */#id2 > p{text-decoration-line: underline;}/* 偽類選擇器：需要有a的選擇器 */a{}/* 鼠標置于a標簽，顏色改變 */a:hover {color: red;}a:link{color: yellow;}a:visited{color: green;}a:active{color: blue;}body{background-color: aliceblue;background-image: url("../img/demo2.png");background-repeat: no-repeat;background-size: 200px 200px;/* 背景固定 */background-attachment: fixed;/* 背景隨滾動條滾動 *//* background-attachment: scroll; */background-position-x: center;background-position-y: center;/* xy軸占比 */background-position: 10% 10%;}span{/* font-size: 20px;font-family: "Microsoft YaHei UI";font-weight: bold;font-style: italic; *//* 連寫要注意順序 */font: italic bold 30px "Microsoft YaHei UI";}p{font-size: 16px;width: 120px;color: crimson;line-height: 24px;/* 縮進 */text-indent: 1em;}</style></head><body><!-- 行內樣式優先級高于內部樣式 --><h1 style="background-color: aqua; text-align: center;">111</h1><h1 class="class1">222</h1><h1 id="id1">333</h1><div id="id2"><p>p1</p><div><p>p2</p></div></div><a href="">百度</a></body>
</html>

計時器

<h1 id="clock"></h1>
<script>const formatTime = n => n < 10 ? '0' + n : n;function updateClock(){const date = new Date();const hours = formatTime(date.getHours());const minutes = formatTime(date.getMinutes());const seconds = formatTime(date.getSeconds());const clock = document.getElementById("clock");clock.textContent = `${hours}:${minutes}:${seconds}`;}setInterval(updateClock,1000);
</script>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/160207.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/160207.shtml
英文地址，請注明出處：http://en.pswp.cn/news/160207.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！