CSS_0702作业 - CSS学习 - php中文网博客

首页 > 博客列表 > CSS_0702作业

博主信息

博文 19

粉丝 0

访问量 13314

专题推荐

更多>

1. 制作一个在线QQ客服的固定定位(QQ客服用图片就行);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #image {
            position: fixed;
            top: 5rem;
            left: 10rem;
            width: 10px;
            height: 150px;
            }
        </style>
    </head>
    <body>
        <div id="image">
             <img src="./12.PNG" >
        </div>

2. 仿课堂案例写一个三行三列的定位布局, 色块或边框代表内容就可以;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-size: 16px;
            }
            header,footer {
                height: 5em;
                background-color: darkseagreen;
            }
            .container {
                position: relative;
                width: 1200px;
                height: 500px;
                margin: 0 auto;
            }
            .container aside:first-of-type {
                position: absolute;
                left: 0;
                top: 0;
                width: 320px;
                height: 500px;
                background-color: royalblue;
            }
            .container aside:last-of-type {
                position: absolute;
                right: 0;
                top: 0;
                width: 320px;
                height: 500px;
                background-color: royalblue;
            }
            .container main {
                position: absolute;
                left: 320px;
                top: 0;
                width: 560px;
                height: 500px;
                background-color: rosybrown;
            }
        </style>
    </head>
    <body>
        <header>页眉</header>
        <div class="container">
            <aside>内容1</aside>
            <main>内容</main>
            <aside>内容2</aside>
        </div>
        <footer>页脚</footer>
    </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0628前端作业

2021-07-02 14:41:20