Practical Training Demo1-首页（10.27）

HTML内容部分：

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>
        <div class="content">
            <!-- 布局 -->
            <!-- banner 轮播图 -->
            <div class="banner">
                <!-- 图片 -->
                <img src="img/banner/1.jpg">
            </div>
            <!-- 追星必备 精灵图 -->
            <div class="star">
                <div class="title">
                    <!-- 精灵图 -->
                </div>
                <!-- ul>(li>img[src=img/necessary-$]+span)*5 直接插入 新增-添加img图片的生成 -->
                <ul>
                    <li><img src="img/necessary-1.png" alt=""><span>官方应援手灯专区</span></li>
                    <li><img src="img/necessary-2.gif" alt=""><span>官方应援手幅专区</span></li>
                    <li><img src="img/necessary-3.png" alt=""><span>签名商品专区</span></li>
                    <li><img src="img/necessary-4.gif" alt=""><span>官方DVD专区</span></li>
                    <li><img src="img/special.jpg" alt=""><span></span></li>
                </ul>
            </div>
            <div class="top">
                <div class="title">

                </div>
                <!-- ul>(li>img[srt=toplist_a0$.jpg])*8 直接生成 -->
                <ul>
                    <li><a href="list.html"><img src="img/top/a/toplist_a01.jpg" alt=""><span>薛之谦</span></a></li>
                    <li><a href="list.html"></a><img src="img/top/a/toplist_a02.jpg" alt=""><span>iKON</span></a></li>
                    <li><a href="list.html"><img src="img/top/a/toplist_a03.jpg" alt=""><span>鹿晗</span></a></li>
                    <li><a href="list.html"><img src="img/top/a/toplist_a04.jpg" alt=""><span>GOT7</span></a></li>
                    <li><a href="list.html"><img src="img/top/a/toplist_a05.jpg" alt=""><span>EXO</span></a></li>
                    <li><a href="list.html"><img src="img/top/a/toplist_a06.jpg" alt=""><span>Astro(韩国)</span></a></li>
                    <li><a href="list.html"><img src="img/top/a/toplist_a07.jpg" alt=""><span>Winner</span></a></li>
                    <li><a href="list.html"><img src="img/top/a/toplist_a08.jpg" alt=""><span>BigBang</span></a></li>
                </ul>
            </div>
            <div class="list">
                <div class="title2">

                </div>
                <!-- ul>(li>img[src=img/pro/$.jpg]+div.right>span.title+span.money+div>span.love+span.num)*9  直接生成-->
                <ul>
                    <li>
                        <img src="img/pro/1.jpg" alt="">
                        <div class="right">
                            <span class="title">【现货包邮】加一联创1more bear 万魔熊头</span>
                            <span class="money">￥50</span>
                            <div><span class="love"></span><span class="num">0</span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/2.jpg" alt="">
                        <div class="right">
                            <span class="title">【现货包邮】加一联创1more bear 万魔熊头</span>
                            <span class="money">￥50</span>
                            <div><span class="love"></span><span class="num">0</span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/3.jpg" alt="">
                        <div class="right">
                            <span class="title">【现货包邮】加一联创1more bear 万魔熊头</span>
                            <span class="money">￥50</span>
                            <div><span class="love"></span><span class="num">0</span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/4.jpg" alt="">
                        <div class="right">
                            <span class="title">【现货包邮】加一联创1more bear 万魔熊头</span>
                            <span class="money">￥50</span>
                            <div><span class="love"></span><span class="num">0</span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/5.jpg" alt="">
                        <div class="right">
                            <span class="title">【现货包邮】加一联创1more bear 万魔熊头</span>
                            <span class="money">￥50</span>
                            <div><span class="love"></span><span class="num">0</span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/6.jpg" alt="">
                        <div class="right">
                            <span class="title">【现货包邮】加一联创1more bear 万魔熊头</span>
                            <span class="money">￥50</span>
                            <div><span class="love"></span><span class="num">0</span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/7.jpg" alt="">
                        <div class="right">
                            <span class="title">【现货包邮】加一联创1more bear 万魔熊头</span>
                            <span class="money">￥50</span>
                            <div><span class="love"></span><span class="num">0</span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/8.jpg" alt="">
                        <div class="right">
                            <span class="title">【现货包邮】加一联创1more bear 万魔熊头</span>
                            <span class="money">￥50</span>
                            <div><span class="love"></span><span class="num">0</span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/9.jpg" alt="">
                        <div class="right">
                            <span class="title">【现货包邮】加一联创1more bear 万魔熊头</span>
                            <span class="money">￥50</span>
                            <div><span class="love"></span><span class="num">0</span></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tp">
            <img src="img/footer_v180123.png">
        </div>
    </body>
</html>

 

CSS内容部分：

 

/* 清东西  重置 */
* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #CCCCCC;
}

.content ul {
    /* padding-left: 0; */
}

/* 添加通用样式 */
.content ul li {
    /* 所有东西放一行 */
    display: inline-block;
}

.content {
    width: 1000px;
    margin: 0 auto;
}

.content .banner img {
    width: 1000px;
    /* margin: 0; */
}

.content .star {
    margin-top: 20px;
}

.content .star .title {
    background-image: url(../img/zhuxing.png);
    /* 重复：不重复 */
    background-repeat: no-repeat;
    height: 45px;
}

.content .star li {
    background-color: white;
    /* vertical-align: bottom; 水平对齐:顶部对齐、基线对齐、这次使用的是：底部对齐 */
    vertical-align: bottom;
}

.content .star li:last-child {
    height: 135px;
    margin-left: 20px;
    width: 220px;
}

.content .star li:last-child img {
    height: 135px;
    width: 220px;
}

.content .star li img {
    width: 180px;
}

/* .content .star li img:last-child{
    height: 135px;
} */
.content .star li span {
    padding: 10px;
    text-align: center;
    /* 更改为块级标签 */
    display: block;
    font-size: 12px;
    color: #999999;
}

.content .top {
    margin-top: 20px;
}

.content .top .title {
    height: 45px;
    background-image: url(../img/shop_title2.png);
    background-repeat: no-repeat;
    background-position: 0 -60px;
}

.content .top li {
    margin: 0 3px;
    width: 115px;
    height: 150px;
    background: #FFFFFF;
    text-align: center;
    /* background-color: #DE4767; */
}

.content .top a{
    text-decoration: none;
    color: #666666;
    vertical-align: bottom;
    font-size: 14px;
    
}

.content .top li:first-child {
    margin-left: 0;
}

.content .top li:last-child {
    margin-right: 0;
}

.content .top img {
    width: 115px;
}

/* 最后部分的内容 */

.content .title2 {
    height: 45px;
    background-image: url(../img/shop_title2.png);
    background-repeat: no-repeat;
    background-position: 0 -101px;
}

.content .list li {
    background-color: #fff;
    width: 323px;
    margin: 10px 5px;
    height: 154px;
}

.content .list li:nth-child(3n+1) {
    margin-left: 0;
}

.content .list li:nth-child(3n) {
    margin-right: 0;
}

.content .list img {
    /* 空白的部分是因为有空格存在  ---中间的东西是文本元素*/
    width: 154px;
    height: 154px;
}

/* 图片已完毕 */
/* 开始文字部分（右） */
.content .list .right {
    display: inline-block;
    vertical-align: top;
    /* vertical-align: middle; */
}

.content .list .right span {
    display: block;
    color: #999999;
    /* margin: 10px 5px; */
    width: 120px;
}

.content .list .right .title {
    margin-top: 30px;
    font-size: 14px;
    /* 以下为 css 省略号的内容写法 */
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.content .list .right .money{
    /* background-color: #DE4767; */
    color: #DE4767;
    margin-top: 10px;
}
.content .list .right div{
    margin-top: -8px;
}
.content .list .right div span{
    /* 更改这里的span 需要下一行 */
    display: inline-block;
}
.content .list .right .love{
    height: 12px;
    width: 12px;
    background-image: url(../img/icon/ico.png);
    background-position: 0 -74px;
    margin-top: 18px;
}
.content .list .right .num{
    margin-top: 10px;
    margin-left: 8px;
}
.content .list .right .love .num{
    width: 100px;
    vertical-align: top;
}

.tp{
    /* width: 1200px; */
    height: 80px;
    background: #FFFFFF;
}

.tp img {
    margin-top: 10px;
    margin-left: 150px;
    
}

 

posted @ 2021-10-27 17:26  小张同学的派大星吖  阅读(10)  评论(0)  编辑  收藏  举报