跟着黑马学CSS打卡第二天(设置前端和版权）

米库打油

已于 2023-10-16 13:09:10 修改

阅读量77

点赞数

分类专栏： css学习打卡文章标签： css 前端

于 2023-10-16 13:08:37 首次发布

本文链接：https://blog.csdn.net/m0_74385740/article/details/133855898

版权

css学习打卡专栏收录该内容

8 篇文章 0 订阅

订阅专栏

提示：个人记录学习使用

前言

第四天写博客，小网页今日完结

一、设置前端区域整体布局

一、设置背景和行内格式

1、index.html

    <!-- 前端 -->
    <div class="wrapper">
            <!-- 标题 -->
            <div class="hd">
                <h3>前端开发工程师</h3>
                <ul>
                    <li><a href="#" class="active">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <a href="#" class="more">查看全部</a>
            </div>
            <div class="bd">
                <div class="left">
                    <img src="./uploads/web_left.png" alt="">
                </div>
                <div class="right">
                    <div class="top">
                        <img src="./uploads/web_top.png" alt="">
                    </div>
                    <div class="bottom">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="pic"><img src="./uploads/web01.png" alt=""></div>
                                    <div class="text">
                                        <h4>JS高级javaScript进阶面向对象ES6</h4>
                                        <p><span>高级</span> . <i>101934</i>人在学习</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="pic"><img src="./uploads/web02.png" alt=""></div>
                                    <div class="text">
                                        <h4>零基础玩转微信小程序</h4>
                                        <p><span>高级</span> . <i>114514</i>人在学习</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="pic"><img src="./uploads/web03.png" alt=""></div>
                                    <div class="text">
                                        <h4>JavaScript基础——语法解析+项目实战</h4>
                                        <p><span>高级</span> . <i>1919</i>人在学习</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="pic"><img src="./uploads/web04.png" alt=""></div>
                                    <div class="text">
                                        <h4>前端框架Vue2+Vue3全套视频</h4>
                                        <p><span>高级</span> . <i>810</i>人在学习</p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    </div>

2、index.css

1、.hd ul

/* 前端 */
/* 标题整体样式 */
.hd ul {
    display: flex;
}

二、设置标题的 li 样式

1、.hd ul li

/* 小 li 样式 */
.hd ul li {
    margin-right: 60px;
    font-size: 16px;
}

2、 .hd ul li .active, .hd ul li a:hover

/* 鼠标悬停状态 */
.hd ul li .active,
.hd ul li a:hover {
    color: #00a4ff;
}

三、设置内容标签样式

一、整体样式

1、.bd

/* 内容标签 */
.bd {
    display: flex;
    /* 主轴对齐方式 左右对齐 中间隔开 */
    justify-content: space-between;
}

二、内容样式

2、.bd .left

/* 左边区域 */
.bd .left {
    width: 228px;
    /* background-color: pink; */
}

3、 .bd .right

/* 内容区域 */
.bd .right {
    width: 957px;
    /* background-color: pink; */
}

4、.bd .right .top

/* 头区域 */
.bd .right .top {
    /* 外边距 */
    margin-bottom: 15px;
    height: 100px;
}

四、设置版权区域整体样式

一、设置背景和行内样式

1、index.html

    <!-- 版权 -->
     <div class="footer">
        <div class="wrapper">
            <div class="left">
                <a href="#"><img src="./images/logo.png" alt=""></a>
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#" class="download">下载APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
            </div>
        </div>
     </div>

2、index.css

1、.footer

/* 版权 */
.footer {
    /* 外边距 */
    margin-top: 60px;
    /* 内边距 */
    padding-top: 60px;
    height: 273px;
    background-color: #fff;
}

2、 .footer .wrapper

/* 版权版心样式 */
.footer .wrapper {
    display: flex;
    justify-content: space-between;
}

二、设置左标签样式

1、.footer .left

/* 左标签样式 */
.footer .left {
    width: 440px;
    /* background-color: pink; */
}

2、.footer .left p

/* 左标签文本样式 */
.footer .left p {
    margin-top: 24px;
    margin-bottom: 14px;

    font-size: 12px;
    line-height: 17px;
    color: #666;
}

3、.footer .left .download

/* 左标签下载按钮样式 */
.footer .left .download {
    display: block;
    width: 120px;
    height: 36px;
    border: 1px solid #00a4ff;

    text-align: center;
    line-height: 34px;

    font-size: 16px;
    color: #00a4ff;
}

三、设置右标签

1、.footer .left .download

/* 左标签下载按钮样式 */
.footer .left .download {
    display: block;
    width: 120px;
    height: 36px;
    border: 1px solid #00a4ff;

    text-align: center;
    line-height: 34px;

    font-size: 16px;
    color: #00a4ff;
}

2、 .footer .wrapper .right

/* 右标签样式 */
.footer .wrapper .right {
    display: flex;
}

3、 .footer .wrapper .right dl

/* 右标签大盒子样式 */
.footer .wrapper .right dl {
    margin-right: 130px;
}

4、 .footer .wrapper .right dl dt

/* 右标签小盒子样式 */
.footer .wrapper .right dl dt {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 23px;
}

5、 .footer .wrapper .right a

/* 右标签样式 */
.footer .wrapper .right a {
    font-size: 14px;
    color: #666;
    line-height: 24px;
}

五、最终效果图

总结

分享歌词：
うたううた　うたういま　ああ届いて，
我正唱着诗，在此刻唱着，传达出去吧，
君の胸に　まだ間に合うかい，
现在还来得及传到你心中吗？
こころを叫ぶ，
呼喊出我的心声，
言葉を超えるため　(僕には)，
为了超越千言万语（对我来说），
たったひとつのやりかただから　ああ，
因为我就只有这个方法了。
分享MyGO!!!!!的单曲《詩超絆 (TV动画《BanG Dream! It's MyGO!!!!!》第十话插入曲)》