HTML的简单操作2
CSS浮动和定位
主要描述浮动、定位、伪类等概念和示例
块级元素和行内元素
块级元素：div、h、ul、li、p
独占一行（独占的不是body的一行，而是父容器的一行），不能与其他任何元素并列。能够设置宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。 行内元素：span、a、input、u、i、img
与其他行内元素可以并排。不能设置宽、高。默认的宽度、高度，就是文字的宽度、高度。 块级元素和行内元素的相互转换块级元素可以设置为行内元素
行内元素可以设置为块级元素
用display进行转换
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">div {display: inline;background-color: #55ff7f;}span {display: block;background-color: #4169E1;width: 500px;height: 500px;}</style></head><body><div>div1</div><div>div2</div><div>div3</div><span>span</span></body> </html>
123456789101112131415161718192021222324252627这里我们可以看到，代码中body写入了3个div块，在没有转换的情况下应该是 3个块各占一行，显示出颜色、按照设置显示出正方形区块，但是在转换后3个div仅占一行。
所以，一旦给块级元素设置这个“inline”标签将立即变为行内元素。此时它和一个span无异：此时这个div不能设置宽度、高度；
同理：“block”让标签变为块级元素。此时这个标签，和一个div无异：此时这个span能够设置宽度、高度；行内元素占一整行，别人无法和他并排；如果不设置宽度，将撑满父亲
浮动
定义浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框脱离DOM流，父级元素会表现的浮动框不存在一样。
可以想象为：没有设置浮动的元素是在水面下的，而“浮动”后的元素飘起来脱离了父级元素。
浮动的元素浮满一行自动到下一行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .fl { float: left; } .fr { float: right; } .clear { clear: both; } /* container中只写和这个相关的,不写其他的 */ .container { width: 1000px; margin: 0 auto; } .company .item { width: 244px; height: 200px; margin: 3px; background-color: greenyellow; } .bg-pink { background-color: pink; } .service .item { width: 162px; height: 250px; margin: 2px; background-color: skyblue; } .company .title { height: 50px; background-color: darkblue; } .service .title { height: 50px; margin-top: 20px; margin-bottom: 20px; background-color: red; } .bg-orange { background-color: orange; } /* .service { padding-top: 20px; } */ </style> </head> <body> <div class="bg-pink company"> <div class="container"> <div class="title">标题</div> <div class="list"> <div class="item fl">1</div> <div class="item fl">2</div> <div class="item fl">3</div> <div class="item fl">4</div> <div class="item fl">5</div> <div class="item fl">6</div> <div class="item fl">7</div> <div class="item fl">8</div> <div class="clear"></div> </div> </div> </div> <div class="bg-orange service"> <div class="container"> <div class="title">标题</div> <div class="list"> <div class="item fr">1</div> <div class="item fr">2</div> <div class="item fr">3</div> <div class="item fr">4</div> <div class="item fr">5</div> <div class="item fr">6</div> <div class="clear"></div> </div> </div> </div> </body> </html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
左浮动和右浮动可以同时出现以满足需求。
1、clear 属性规定元素的哪一侧不允许其他浮动元素。
clear:消除浮动对自己的影响，当前元素会移动到浮动元素的下方。
2、浮动和清除浮动成对出现
3、清除浮动一般放在最靠近浮动元素的尾部，清除浮动只对同级元素有效
浮动和清除浮动要配套出现
运用浮动网页模板制作
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.fl {float: left;}.fr {float: right;}.clean {clear: both;}.bg-pink {width: 970px;background-color: pink;margin-bottom: 10px;}.container {width: 970px;margin: 0 auto;}.logo {width: 277px;height: 103px;background-color: red;}.select {width: 679px;height: 46px;margin-top: 8px;margin-left: 14px;background-color: #ADFF2F;}.language {width: 137px;height: 49px;margin-left: 556px;background-color: #ADFF2F;}.picture {width: 310px;height: 435px;background-color: orange;}.middle {width: 450px;height: 400px;margin-bottom: 10px;margin-left: 10px;}.bottom {width: 650px;height: 25px;background-color: #008000;}.hot {width: 190px;height: 400px;margin-bottom: 10px;margin-left: 10px;background-color: purple;}.middle .news {width: 450px;height: 240px;margin-bottom: 10px;background-color: #0000FF;}.middle .notices {width: 450px;height: 110px;margin-bottom: 10px;background-color: #0000FF;}.middle .messages {width: 450px;height: 30px;background-color: #0000FF;}.address {width: 970px;height: 35px;background-color: #00008B;}</style></head><body><div class="bg-pink"><div class="container"><div class="logo fl">标题</div><div class="fr"><div class="language">language</div><div class="select">select1</div></div><div class="clean"></div></div></div><div class="bg-pink"><div class="container"><div class="hot fr">hot</div><div class="middle fr"><div class="news">news</div><div class="notices">notices</div><div class="messages">massages</div></div><div class="bottom fr">select2</div><div class="picture">picture</div></div></div><div class="bg-pink"><div class="container"><div class="address">address</div></div></div></body> </html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122定位
定位的分类（5类）: 默认的定位默认的块元素垂直排列（div，p，h，ul，uo），行内元素左右排列（img，a，span，input）
这种默认的排列方式成为流定位。
标准流里面限制非常多，在做界面布局时候经常需要下面这种需求： 让块级元素既能设置宽和高，又能左右排列
特殊的定位（4种） 浮动定位（浮动）：可以让块元素左右排列（没有失去块级元素可以设置宽和高的优点）。相对定位：可以让元素以自身为目标产生微小的偏移（鼠标悬停是图片偏移等）。绝对定位：可以让元素以父类为目标产生很大的偏移。固定定位：可以让元素以窗口为目标产生很大的偏移。后面三种定位都是以某元素为目标产生偏移。 它们的区别
1、他们的共同点：
都是要设置偏移，并且设置偏移的方式是一样的；设置偏移的语法也是一样的；以任意边为基准，向中心方向偏移为整数。2、他们的不同
相对定位：relative定位
参照物：自身存在DOM流中，占据原先的空间必须配合top/bottom/left/right四个方位才能生效上下选一个，左右选一个微调某一个元素的位置，常被用来作为绝对定位元素的参照物；position:relative鼠标在li上悬停时候,让li向右上方各偏移2px
绝对定位：absolute定位
参照物：最靠近的已定位（fixed/relative/absolute）祖先元素，如果没有已定位的祖先元素，那么它的位置相对于或者定位;脱离DOM流，不占据空间。必须配合top/bottom/left/right四个方位才能生效上下选一个，左右选一个常用作动画结构，position:absolute固定定位:fixed定位
参照物：浏览器窗口脱离DOM流，不占据空间必须配合top/bottom/left/right四个方位才能生效上下选一个，左右选一个除非特殊用途，定位的时候，不要用marginposition:fixed 练习<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>*{margin: 0px;padding: 0px;}body{background-color: aliceblue;}.fl { float: left;}.fr { float: right;}.clean { clear: both;}.container { width: 730px; margin: 0px auto;}.pic-box ul {border: 2px dashed skyblue;/* 去掉小圆点 */list-style-type: none;}.pic-box img {width: 200px;height: 200px;}.pic-box p{position: absolute;bottom: 30px;color: white;/* 文字居中 */text-align: center;}.pic-box ul li {/* 相对定位 */position: relative; border: 1px dotted darkblue; padding: 10px; margin: 10px;}/* 移动 */.pic-box ul li:hover {position: relative;left: 2px;top: -2px;}.jump-top {width: 100px;height: 30px;/* 固定定位，使回到顶点一直固定而不随滚动条的移动而移动 */position: fixed;/* 设置距离右边和下边父类的距离 */right: 20px;bottom: 20px;background-color: white;/* 文字居中 */text-align: center;}.jump-top a:link {color: blue;}.jump-top a:hover {color: aqua;}.jump-top a:visited {color: blue;}</style></head><body><div class="pic-box"><div class="container"><ul><li class="fl"><img src="../img/01.jpg"/><p>风景1</p></li><li class="fl"><img src="../img/02.jpg"/><p>风景2</p></li><li class="fl"><img src="../img/03.jpg"/><p>风景3</p></li><li class="fl"><img src="../img/04.jpg"/><p>风景4</p></li><li class="fl"><img src="../img/05.jpg"/><p>风景5</p></li><li class="fl"><img src="../img/06.jpg"/><p>风景6</p></li><div class="clean"></div></ul></div><div class="jump-top"><a href="#">回到顶部</a></div></div></body> </html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
相关知识
HTML做一个简单漂亮的宠物网页（纯html代码）
制作一个简单HTML宠物猫网页（HTML+CSS）
静态网页设计——HTML做一个简单漂亮的宠物网页（纯html代码）
【html网页设计】
一个简单的网页制作作业，宠物html静态网页制作成品代码(学生网页设计作业源码)
使用HTML制作静态宠物网站——蓝色版爱宠之家(HTML+CSS)
分享15个精美的html网页模板，快速建站必备 ！
简单宠物网页设计作业 静态HTML动物介绍网页作业 DW宠物网站模板下载 大学生简单野生动物网页作品代码
基于html宠物用品商城项目的设计与实现(学生网页设计作业源码)
猫咪网 宠物动物 网页设计 html源码 大作业
网址: HTML的简单操作2 https://m.mcbbbk.com/newsview177296.html
| 上一篇: 奈夫宠物零食是什么品牌的 |
下一篇: 特殊需求儿童应该怎么教？这个经典 |
