欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3的@media屬性實現(xiàn)頁面響應式布局示例代碼

  發(fā)布時間：2014-02-10 15:53:52   作者：佚名   我要評論
使用css3的@media屬性可以實現(xiàn)頁面響應式布局，下面有個不錯的示例，大家可以參考下
以最簡單的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屬性必須寫在下面，從而覆蓋上面的css
 

相關文章

  • 詳解使用CSS3的@media來編寫響應式的頁面

    這篇文章主要介紹了詳解使用CSS3的@media來編寫響應式的頁面,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-01

  • css3 media 響應式布局的簡單實例

    下面小編就為大家?guī)硪黄猚ss3 media 響應式布局的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-03

  • css3media響應式布局實例

    下面小編就為大家?guī)硪黄猚ss3media響應式布局實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-08

  • 詳解CSS3媒體查詢響應式布局bootstrap 框架原理實戰(zhàn)(推薦)

    這篇文章主要介紹了詳解CSS3媒體查詢響應式布局bootstrap 框架原理實戰(zhàn)(推薦),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的
    2020-11-16

最新評論