数据结构
网络
关系数据库管理系统 (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 次浏览
广告