首页 > 代码库 > HTML CSS 层叠样式表 四
HTML CSS 层叠样式表 四
一、页面布局：div+css布局
1.<style >
*{
margin:0px;
padding:0px;
}
#ad{
width:100px;
height:100px;
background-color:red;
position:fixed; 定位：固定定位，需要设置距离边框的距离；相对于浏览器窗口位置固定
right:0px;
top:100px;
}
.class{
float:left; 流式布局：从左往右。right从右往左。如果有序号，也会从右往左排。
position:relative; 定位：相对定位，相对于周边其他元素的定位；默认，一般不写，需要设置z-index分层时必须写。
}
.class2{
min-width:500px; 给流式布局设置一个外框宽度设置成百分比，然后给这个外框一个最小宽度，可以防止流式布局的元素发生换行。一般用于响应式布局，以适合不同的浏览器和设备。
}
.class3{
position:absolute; 定位：绝对定位；需要制定靠着谁,如果外层元素未定位会相对于浏览器定位。
right:0px;
bottom:0px;
z-index:-1; z轴定位，需要跟随定位
}
</style>
<div>
<div style="clear:both;"></div>
</div>
利用清除浮动属性将上层div撑开，有多高的元素上层div就多高；
二、课上练习
<style>
* {
margin:0px; /*去掉所有元素的内外边框*/
padding:0px;
}
#ad {
width:100px;
height:100px;
background-color:red;
position:fixed; /*绝对定位 以浏览器窗口作为基准*/
right:0px; /*离右侧0*/
top:100px; /*离上侧100*/
}
.item {
width:100px;
height:100px;
margin-right:10px;
color:blueviolet;
border:2px solid red; /*边框 2像素宽 实线 红色*/
float:right; /*流式布局 letf从左往右 right为从右往左*/
position:relative; /*相对定位 相对于周边其他元素*/
}
.container {
width:50%;
min-width:456px;
/*height:500px;*/
border:3px solid black;
position:relative;
z-index:10; /*Z轴定位 用于确定上下层关系 可以有负数 建议值10 20 30 方便后期改动*/
}
.sup {
width:100px;
height:100px;
border:2px solid blue;
position:absolute;
right:0px;
top:0px;
background-color:darkcyan;
z-index:-1;
}
</style>
<body>
<div id="ad"></div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="sup"></div>
<div style="clear:both"></div> <!--外部DIV不需要设置宽度，有多少内容就放多大-->
</div>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
</body>
三、网页效果图
HTML CSS 层叠样式表 四
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。