この効果はブラウザ ページで最もよく見られます。まずは効果の画像をご覧ください。 上の図に示すように、CSS を使用して上記の 3 つのボタンを描画します。 <テンプレート> <div class="windowAction"> <button class="min">ズームアウト</button> <button class="fullpage">拡大</button> <button class="close">閉じる</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { flag_fullpageWebView: 1 }; } }; </スクリプト> <style lang="scss" スコープ> .windowAction { 上マージン: -5px; -webkit-app-region: ドラッグなし; 最小幅: 70px; テキスト配置: 右; ボタン { &:ホバー{ 色: #a8aabd; } } .分{ 幅: 14px; 高さ: 14px; 背景色: 透明; フォントサイズ: 0; 右マージン: 18px; 位置: 相対的; 色: #878896; &:後 { コンテンツ: ""; 幅: 100%; 位置: 絶対; 左: 0; 下部: 0; 下境界線: 2px 実線; } } .フルページ{ 幅: 16px; 高さ: 16px; 色: #878896; 境界線: 2px 実線; 背景色: 透明; フォントサイズ: 0; 右マージン: 18px; } 。近い { 幅: 18px; 高さ: 18px; フォントサイズ: 0; 背景色: 透明; 位置: 相対的; 色: #878896; 変換: 回転(45度) 移動(-2px, 2px); &:前に、 &:後 { コンテンツ: ""; 位置: 絶対; } &:前に { 幅: 100%; 左: 0; 上位: 50%; 変換: translateY(-50%); 上境界線: 2px 実線; } &:後 { 高さ: 100%; 左: 50%; 上: 0; 変換: translateX(-50%); 左境界線: 2px 実線; } } } </スタイル> 要約する 上記は、エディターが導入したズームイン、ズームアウト、閉じるボタンの CSS 実装です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
コンテナの自動起動Docker は、コンテナが終了したとき、または Docker が再起動されたとき...
2 つのパラメータ innodb_flush_log_at_trx_commit と sync_bi...
オペレーティング システム win10 MySQL は、公式 Web サイトからダウンロードした 6...
<br />インターネットは絶えず変化しており、BusinessWeek.com は専門...
この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...
<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...
ベンダープレフィックスとは何ですか?ベンダー プレフィックス - ブラウザー エンジン プレフィック...
NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...
目次HTML ページの作成js部分の機能を実装する1. 左ボタンと右ボタン2. 小さな円を動的に生成...
ページドメインの関係:メインページ a.html はドメイン A: www.jb51.net に属し...
最近の事例をお話ししましょう。オンライン Alibaba Cloud RDS 上のゲーム ログ ライ...
この記事では主にDockerを使ってElasticSearch:バージョン6.8.4をデプロイする方...
序文テーブルを削除するには、無意識に思い浮かぶコマンドは、DROP TABLE "テーブル...
私はここでCentOS 7 64ビットシステムを使用しています。CentOS 64ビットシステムを試...
目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...