运用css3做一个模仿移动端页面的项目
时间: 2023-10-09 16:06:14 浏览: 44
好的,我可以给你提供一个简单的例子,你可以通过这个例子来学习如何使用CSS3制作移动端页面。
首先,我们需要一个HTML页面,可以使用以下代码作为模板:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>这是头部</header>
<nav>这是导航</nav>
<main>
<section>
<h2>这是第一部分</h2>
<p>这是第一部分的内容</p>
</section>
<section>
<h2>这是第二部分</h2>
<p>这是第二部分的内容</p>
</section>
</main>
<footer>这是底部</footer>
</body>
</html>
```
接下来,我们需要一个CSS文件来为页面添加样式,可以使用以下代码:
```css
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
header, nav, main, section, footer {
box-sizing: border-box;
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
}
nav {
background-color: #eee;
padding: 1rem;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 1rem;
}
section {
background-color: #f2f2f2;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
margin-bottom: 1rem;
padding: 1rem;
width: calc(50% - 1rem);
}
@media screen and (max-width: 640px) {
header {
font-size: 1.5rem;
}
nav {
font-size: 1.2rem;
}
main {
padding: 0.5rem;
}
section {
width: 100%;
}
}
```
通过以上代码,我们实现了以下功能:
1. 设置了全局样式,包括字体和盒模型。
2. 为header、nav、main、section和footer设置了盒模型。
3. 为header和nav设置了背景色和文字颜色,并且为header设置了内边距。
4. 为main设置了flex布局和内边距,将section元素分为两列,并且设置了元素之间的间距。
5. 为section设置了背景色、边框、圆角和阴影,并且设置了元素之间的间距。
6. 使用@media查询,为小屏幕设备设置了不同的样式,包括字体大小和内边距,并且将section元素设为100%宽度。
你可以根据以上例子进行实践,并且根据自己的需要添加更多的CSS3特性。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)