css样式适应电脑屏幕代码
时间: 2023-12-20 07:28:49 浏览: 29
要让一张图片不失真的适应任何屏幕大小的电脑,可以使用以下CSS代码:
img {
max-width: 100%;
height: auto;
}
这将使图片的宽度最大为其容器的宽度,同时保持其高度比例不变,从而避免图片失真。
要做一个适应不同屏幕分辨率的左右布局网页,可以使用以下CSS代码:
html, body {
height: 100%;
width: 100%;
}
.left {
width: 30%;
float: left;
}
.right {
width: 70%;
float: left;
}
这将使左侧元素占据页面宽度的30%,右侧元素占据70%,并且两个元素都适应不同屏幕分辨率。
要做一个导航栏,可以使用以下CSS代码:
* {
margin: 0;
padding: 0;
border: 0;
}
.navbg {
background: red;
height: 50px;
}
.nav {
width: 980px;
height: 50px;
margin: 0 auto;
}
li {
float: left;
margin: 10px;
line-height: 30px;
}
<nav class="navbg">
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
这将创建一个带有红色背景的导航栏,其中链接以列表项的形式显示,并且在悬停时会有一些样式效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)