Practical Training 課三-專輯頁面（10.26）
阿新 • • 發佈：2021-10-26
今日收穫具體程式碼如下，新知快捷鍵：Ctrl+h、替換內容；Ctrl+k、整理程式碼。哦耶耶！
但是有不理想的部分，害羞羞、愛心圖片、文欄位落的小小不理想哦。加油。小張同學！你會更好的。
HTML內容部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>專輯</title> <link rel="stylesheet" type="text/css" href="css/list.css" /> </head> <body><div class="content"> <div class="type-container"> <p class="zj">專輯</p> <!-- type-container--type的容器--container --> <div class="type"> <!-- ctrl+(shift+f)/k整理程式碼 --> <dl> <dt>分類</dt> <dd> <!-- ul>li*6 --> <ul> <li>原版</li> <li>簽名版</li> <li>內地引進版</li> <li>演唱會DVD/LIVE</li> <li>限量版</li> <li>貼紙/資料夾/筆記本</li> </ul> </dd> </dl> <dl> <dt>公司</dt> <dd> <!-- ul>li*6 --> <ul> <li>MBK Entertainment</li> <li>環球唱片</li> <li>藝人工作室</li> <li>英皇娛樂</li> <li>Fantagio</li> <li>Woolim</li> <li>WM Entertainment</li> <li>相信音樂</li> <li>TS Entertainment</li> <li>環球中國</li> <li>華納唱片</li> <li>天娛傳媒</li> <li>LOSE Entertainment</li> </ul> </dd> </dl> </div> </div> <!-- 以下為列表 --> <div class="list"> <!-- ul>(li>a>img+span.title+div>span.money+img+span.num)*15 --內容的所有框架縮寫---> <ul> <li><a href=""> <img src="img/pro/1.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <!-- <span class="love"></span> --> <!-- 全部替換 替換區 ctrl+h--替換文字 --> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/2.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/3.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/4.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/5.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/6.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/7.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/8.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/9.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/1.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/2.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/3.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/4.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/5.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> <li><a href=""> <img src="img/pro/6.jpg" alt=""> <p class="title">宇宙少女 迷你五輯《WJPLEASE?》</p> <div> <span class="money">￥50</span> <span class="love"></span> <span class="num">787878</span> </div> </a></li> </ul> </div> </div> <div class="tp"> <img src="img/footer_v180123.png" > </div> </body> </html>
CSS內容部分：
*{ /* margin: 0px; */ padding: 0px; } .content{ background-color: #CCCCCC; } /* .content .bg{ background-color: #FFFFFF; } */ .content .type-container{ background-color: white; height: 260px; } .content .type-container .zj{ margin-left: 150px; font-weight: 545; } .content .type{ border: 1px solid #ccc; width: 1042px; margin: 0 auto; padding: 10px 20px; height: 170px; /* 1上下左右 2 上下 左右 3、左上、右上、右下 */ } .content .type dl { /* display: inline-table; */ position: relative;/* 相對定位 */ } .content .type dl:first-child{ padding-bottom: 18px;/* padding-bottom: 18px;--向下的距離 */ border-bottom: 1px dotted #ccc;/* dotted 虛線 */ } .content .type dt{ font-size: 16px; font-weight: bolder; } .content .type dd{ font-size: 14px; color: #666; /* #333-#666-#999 字型的顏色逐步減輕 */ position: absolute; top: -15px; line-height: 30px; padding-left: 10px; } .content .type dd ul li{ display: inline-table; width: 160px; /* height: 50px; */ } .content .list{ width: 1084px; margin: 0 auto; } .content .list ul{ padding-left: 0; } .content .list a{ text-decoration: none; } .content .list ul li{ width: 160px; display: inline-table; background-color: #FFFFFF; margin: 20px;/* 距離 */ padding: 10px; } .content .list ul li:nth-child(5n+1){ margin-left: 0; } .content .list ul li:nth-child(5n){ margin-right: 0; } .content .list img{ width: 160px; } .content .list .title{ display: block; font-size: 14px; color: #666; } .content .list div{ text-align: center; margin-top: 15px; } .content .list div .money{ color: #DE4767; } .content .list div .love{ height: 12px; width: 12px; display: inline-block; background-image: url(../img/icon/ico.png); background-repeat: no-repeat; background-position: 1px -73px; margin: 0px 5px; } .content .list div .num{ color: #999; } /* 頁尾圖片 */ .tp img{ margin-top: 20px; margin-left: 100px; }