CSS使网页适应不同屏幕大小
1.Width定义和用法
定义和用法:属性设置元素的宽度
取值和描述:
auto:默认值。浏览器可计算出实际的宽度。
length:使用 px、cm 等单位定义宽度。
%:定义基于包含块(父元素)宽度的百分比宽度。
inherit:规定应该从父元素继承 width 属性的值。
2.设置width属性值为百分比,简易实现适应不同屏幕大小。
3.实例
html文件:
html><</span>html lang="en"><</span>head>
<</span>meta charset="UTF8">
<</span>title>index</</span>title>
<</span>style>
.header{
width: 100%;
background-color: #0c0c0c;
height: 60px;
}
.header ul li{
padding-top:15px ;
float: left;
width: 60px;
color: #fff;
}
</</span>style>
</</span>head>
<</span>body>
<</span>div class="header">
<</span>ul>
<</span>li>首页</</span>li>
<</span>li>Link1</</span>li>
<</span>li>Link2</</span>li>
</</span>ul>
</</span>div>
</</span>body>
</</span>html>
效果图