学写网页 #03# 固定在某个角落

scss 是什么？

一些 css 编码规范

SCSS 有那些优势，是否可以全面取代CSS？

CSS的华丽转身：SASS/SCSS浅述及入门

它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。 --- from 知乎 wikies

 

效果

如右

 

My Console

源代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>#####</title>
        <style type="text/css">
        .console-panel {
                /* 固定长宽*/
                width: 16vw;
                height: 20vw;
                padding: 1vw;
                /* 固定位置 */
                float: right;
                position: fixed;
                right: 0px;
                top: 0px;
                z-index: 20;
                border: 2px solid #69c;
                position: absolute;
                /* 特效 */
                background: #FFF;
                transition: 7.7s ease-in-out;
            }
            
            .console-panel:hover {
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
                transition: 0.9s ease-in-out;
            }
            
            .my-ul {
                list-style: none;
            }
            
            .my-btn {
                width: 120px;
                padding: 8px;
                background-color: #428bca;
                border-color: #357ebd;
                color: #fff;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                /* future proofing */
                text-align: center;
                vertical-align: middle;
                border: 1px solid transparent;
                font-weight: 900;
                font-size: 125%
            }
        }
        </style>
    </head>

    <body>
        <div class="console-panel">
            <ul class="my-ul">
                <h4>My Console</h4>
                <li>
                    <button class="my-btn">display</button>
                </li>
            </ul>
        </div>
    </body>

</html>

 补充固定在视窗的某个角落（来自网络）：

width:100px;
float:right;
position:fixed;
right:0px;
bottom:0px;
z-index:20;
border:2px solid #69c;
_position:absolute; /* position fixed for IE6 */

 

posted @ 2018-03-10 15:47  xkfx  阅读(200)  评论(0)  编辑  收藏  举报