3

更新时间:2023-04-03 20:52:33 阅读：评论：0

常见图片格式的区别

svg:适合简单的图形（怎么放大都不会失帧）

背景图的使用

会发现整个屏幕都是重复的图片【是因为默认的图片是平铺的】

body{background-image: url(/d/file/titlepic/error.html background-repeat: no-repeat;}

** background-repeat: no-repeat;**

background-position: right bottom; 在右下方

background-position: center center;

代码：

<!DOCTYPE html><html><head><meta chart="utf-8"><title>15背景图片的使用</title><style type="text/css"> html,body{  margin: 0; height: 100%; } /* 当不需要图片平铺时，设置 background-repeat:no-repeat;*/ body{  background-image: url(/d/file/titlepic/error.html background-repeat: no-repeat; background-position: center center; } /*但是有些网站如果需要一张图片平铺整个页面，比如网格这种*/ /*body{ background-image: url(/d/file/titlepic/error.html } */ </style></head><body><世界社会主义五百年/body></html>

元素的浮动布局1

要实现：

元素的浮动布局2

①其他元素被浮动的元素遮挡

代码：

<!DOCTYPE html><html><head><meta chart="utf-8"><title>17元素的浮动布局2</title><style> .a{  width: 20%; background-color: red; } .b{  width: 60%; background-color: green; } .c{  width: 20%; background-color: blue; } .a,.b,.c{  float: left; height: 200px; } .hh{  height: 360px; background:#222222; } </style></head><body><div class="a"></div><div class="b"></div><div class="c"></div><div class="hh"></div></body></html>

效果图：[下面的黑色部分被上面的浮动元素遮住了一些]

加一个父元素

然后不设置父元素高度发现父元素的高度为0

所以：要么给父元素：
①加高度height:200px;
或者
②overflow:af音标uto;

.outer{border-width: 5px;border-color: black;border-style: dashed;/* height: 200px; */overflow: auto;}

所有的代码：

<!DOCTYPE html><html><head><meta chart="utf-8"><title>17元素的浮动布局2</title><style> .a{  width: 20%; background-color: red; } .b{  width: 60%; background-color: green; } .c{  width: 20%; background-color: blue; } .a,.b,.c{  float: left; height: 200px; } .hh{  height: 360px; background:#222222; } .outer{  border-width: 5px; border-color: black; border-style: dashed; /* height: 200px; */ overflow: auto; } </style></head><body><!--为了使a,b,c的浮动不影响hh,不遮挡hh--> <!--将父元素设置下--> <div class="outer"><div class="a"></div><div class="b"></div><div class="c"></div></div><div class="hh"></div></body></html>

效果图：

②做一个聊天对话框

做一个聊天框

<!DOCTYPE html><html><head><meta chart="utf-8"><title>聊天对话框</title><style> ul{  width: 300px; height: 500px; border-width: 1px; border-style: solid; border-color: black; } li{  clear: both; width: 100px; height: 50px; text-align: center; font-size: 28px; font-family: "blackadder itc"; text-decoration: none; background-color: dimgray; } .right{  float: right; } .left{  float: left; } </style></head><body><center><h4>页面效果</h4><ul><li class="left">你好</li><li class="right">hello!</li><li class="left">i miss u</li><li class="righ办公室文员的工作内容t">10-4</li></ul></div></center></body></html>

元素的浮动布局3

为什么需要盒模型1

怎么让元素之间产生一定的距离？

元素本身：

边框+元素本身：

元素本身+边框+边距：

<!DOCTYPE html><html><head><meta chart="utf-8"><title>盒子模型</title><style type="text/css"> *{  margin: 0;/*将所有元素的边距设置成0*/ } #box{  width: 750px; overflow: auto; margin:auto ; /*让父元素自动设置边限，左右边距相等，即可达到居中效果，水平*/ } .item{  width:210px; height: 136px; margin: 20px; float: left; } </style></head><body><div id="box"><div class="item" style="background:url(005百度云盘目录/img/doc.png);"></div><div class="item" style="background:url(005百度云盘目录/img/doc.png);"></div><div class="item" style="background:url(005百度云盘目录/img/doc.png);"></div></div></body></html>

为什么需要盒模型2

布局练习

一致的宽度

再第一个左填充去掉，把最后一个的右填充去掉

<!DOCTYPE html><html><head><meta chart="utf-8"><title>20布局练习</title><style> *{  margin: 0; padding: 0; } #header{  height: 50px; background:#E83828; } #header .head{  width: 1005px; height: 50px; background:#D1D3D6; margin: auto;/*居中显示*/ } #banner{  height: 500px; background: slateblue; } #category{  width: 1005px; height: 200px; margin: auto;/*居中显示*/ background: #FF359A; } #category .item{  width:125px; height: 165px;/*设置大小*/ padding-left: 25px;/*左填充*/ padding-right: 25px;/*右填充*/ 五福盈门padding-bottom: 25px;/*下填充*/ padding-top: 10px;/*上填充*/ border-right:1px dashed black ;/*右边距，1像素，虚线，黑色*/ float: left;/*左浮动*/ } #category .item.first{  padding-left: 0;/*取消左填充*/ } #category .item.last{  padding-right: 0;/*取消左填充*/ border: 0; } #ca{  height: 490px; background: #eeeeee; } #ca .title-text{  width:1005px; margin:auto; /*水平居中*/ padding-top: 20px;/*上填充*/ padding-bottom: 10px;/*下填充*/ font-size: 45px; /*字体大小*/ } #ca .item-wrapper{  width:1000px; margin: auto; /*水平居中*/ overflow: auto; /*自动设置高度，防止因子元素浮动而高度塌陷*/ } #ca .item-wrapper .item{  width: 320px; height: 330px; background: #9ACD32; float: left; /*左浮动*/ } #ca .item-wrapper .item.mg{  margin-left: 20px; margin-right: 20px; /*左右边距*/ } #ca p{  width:1005px; height: 40px; margin-left: auto; margin-right: auto;/*水平居中*/ margin-top: 15px;/*上边距*/ line-height: 40px;/*行高和高度一致时，文字垂直居中*/ text-align: center;/*文字水平居中*/ font-size: 30px;/*字体大小*/ color: dimgray;/*字体颜色*/ } </style></head><body><div id="header"><div class="head"></div></div><div id="banner"></div>我孙子市<div id="category"><div class="item first"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item last"></div></div><div id="ca"><div class="title-text">Ca</div><div class="item-wrapper"><div class="item"></div><div class="item mg"></div><div class="item"></div></div><p>查看更多+</p></div></body></html>