Practical Training 课三-专辑页面(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; }
标签:content,Training,787878,10.26,WJPLEASE,迷你,50,五辑,Practical 来源: https://www.cnblogs.com/zky1012/p/15465977.html