CSS自定義消息提示_ZenDei技術網路在線

CSS自定義消息提示

-Advertisement-

1.效果 2.源碼 ...

1.效果

2.源碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <style type="text/css">
        #confirm{
            position: absolute;
            z-index: 1;
            display: inline-block;
            border: 1px solid black;
            background-color: gray;
            width: 50px;
            height:40px;
            border-radius: 10px;
            -webkit-box-shadow: 3px 3px 3px #adadad;
            -moz-box-shadow: 3px 3px 3px #adadad;
            box-shadow: 3px 3px 3px #adadad;
            text-align: center;
            line-height: 40px;
            color: red;
        }
        #triangle{
            position: absolute;
            z-index: 2;
            top: 44px;
            left: 26px;
            display: inline-block;
            border-bottom:1px solid black;
            border-right:1px solid black;
            background-color: gray;
            width: 10px;
            height:10px;
            -webkit-transform: rotateZ(45deg);
            -moz-transform: rotateZ(45deg);
            -ms-transform: rotateZ(45deg);
            -o-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
            -webkit-box-shadow: 3px 3px 3px #adadad;
            -moz-box-shadow: 3px 3px 3px #adadad;
            box-shadow: 3px 3px 3px #adadad;
        }
    </style>
</head>
<body>
<div id="confirm">提示</div>
<div id="triangle"></div>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

scss的使用方式（環境搭建）

我用的是Koala。 IDE是intellij_idea（其他IDE也可） 2.安裝（選好位置，下一步即可） 3.打開Koala，創建項目 ==》創建css文件夾==》創建XXX.scss文件，拖到Koala中 4.寫sccs代碼，便可自動變成css代碼。具體見下一篇：scss牛刀小試：解決css中 ...
利用 html+css 畫同心圓（concentric circles）——絕對佈局

一、css 繪製圓 key: 1、width = height 相當於畫一個正方形 2、border-radius > 0.5*width （border-radius：圓角半徑）二、absolute構成同心圓繪製外面的圓： key: 1、margin: auto 使圓居中顯示 2、外部圓的半 ...
vue.js和vue-router和vuex快速上手知識

我希望能通過這篇文章能讓大家迅速上手vue的全家桶。從入門到放棄，只在一念之間。 ...
ajax獲取跨域數據

1.效果圖 2.源碼 ...
mui 頁面無法下滑拖拽主要體現在華為手機瀏覽器

項目做到中期遇到一個問題，華為手機有些頁面顯示不全且無法下滑。因為之前一直用的Google瀏覽器的模擬模式進行開發和調試的，一直未發現這個問題。剛開始選用mui的下拉刷新上拉載入的方式來進行頁面配置。忙活半天總算是把android的問題給解決了。然後轉頭去os上看看。果然ios又出問題了。 ...
react中的DOM操作

[1]使用場景 [2]ref [3]非受控組件 [4]ReactDOM ...
js+css模仿打字效果

1.效果 2.源碼 ...
根據HTML5的新方法 drag & drop 方法實現表格拖拽實例

上一次學習了html5的drag和drop方法，傳送門就自己寫了個例子加深自己對drag和drop的理解。不過一開始不是很簡單，遇到了不少問題。還好網路萬能的，什麼都能查到，總算完成了。說明和詳解都在代碼里。 html和css代碼如下： <table> <thead> <tr> <th>年齡</ ...