css3的@media属性实现页面响应式布局示例代码

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

以最简单的header为例直接上代码

复制代码

代码如下:

<!DOCTYPE HTML>
<head>
<script src="jquery-1.8.2.min.js"></script>
<style>

{
margin:0;
padding:0;
}
.ul {
background-color:rgb(134, 170, 209);
height: 55px;
}
.ul li {
float:left;
list-style: none;
background-color:rgb(134, 170, 209);
width: 20%;
height: 100%;
}
.item {
display: block;
text-align:center;
line-height: 49px;
height: 100%;
transition: all 0.5s;
-moz-transition: all 0.5s; / Firefox 4 /
-webkit-transition: all 0.5s; / Safari 和 Chrome /
-o-transition: all 0.5s;
cursor:pointer;
}
.item:hover {
background-color:rgb(168, 209, 253);

}
@media only screen and (max-width: 400px) {
.ul li {
width: 100%;
height: 100%;
}
}
</style>
<script>

</script>
</head>
<body class="sapUiBody">
<header>
<ul class="ul">
<li><a class="item">Home</a></li>
<li><a class="item">First</a></li>
<li><a class="item">Second</a></li>
<li><a class="item">Thirdly</a></li>
<li><a class="item">Fourth</a></li>
</ul>
</header>
</body>

注意的是@media属性必须写在狼蚁网站SEO优化，从而覆盖上面的css

上一篇：css3 给页面加个半圆形导航条主要利用旋转和倾斜下一篇：使用font-face改变字体即加载外部字体

css3的@media属性实现页面响应式布局示例代码

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

css3的@media属性实现页面响应式布局示例代码

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设