資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 建立不同裝置的外觀（智慧手機、平板電腦和筆記型電腦）？
智慧手機、移動裝置或桌面檢視的外觀可以使用 CSS輕鬆建立。在我們的示例中，我們將建立一個移動裝置（即智慧手機）外觀，並在其中開啟一個隨機網站。我們將建立一個類似移動裝置的結構，並使用 iframe 新增網站連結。讓我們看看如何在網頁上建立類似智慧手機的外觀。
建立移動裝置的容器
建立一個父 div 容器 -
<div class="mobileDevice">
<div class="screen">
<iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" />
</div>
</div>
設定 iframe
建立一個子容器並將 <iframe> 放入其中 -
<div class="screen"> <iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" /> </div>
定位移動裝置的容器
要定位裝置的容器，請使用 position 屬性並將其設定為 relative，還要設定寬度和高度。此外，以使其看起來像智慧手機的方式設定邊框屬性。為此，border-top-width 和 border-bottom-width 屬性非常有效。此外，border-radius 屬性可以使它具有完美的圓角，就像智慧手機一樣 -
.mobileDevice {
position: relative;
width: 360px;
height: 400px;
margin: auto;
border: 16px rgb(7, 80, 35) solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}
在智慧手機上建立一個按鈕
要在智慧手機設計上顯示按鈕，請使用 content 屬性和 transform 屬性。對於圓形結構，將 border-radius 設定為 50%。此外，要完美定位，請使用 left 和 bottom 屬性 -
.mobileDevice:after {
content: '';
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
border:2px solid rgb(200, 255, 0);
}
示例
要使用 CSS 建立類似智慧手機的外觀，程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
.mobileDevice {
position: relative;
width: 360px;
height: 400px;
margin: auto;
border: 16px rgb(7, 80, 35) solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}
.mobileDevice:after {
content: '';
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
border:2px solid rgb(200, 255, 0);
}
.mobileDevice .screen {
width: 360px;
height: 400px;
background: white;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Device look example </h1>
<div class="mobileDevice">
<div class="screen">
<iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" />
</div>
</div>
</body>
</html>
更新於：2023年12月14日
650 次瀏覽
廣告