3|the summary of web study
程序员文章站
2022-07-10 12:59:35
CSS文本属性...
常见图片格式的区别
svg:适合简单的图形（怎么放大都不会失帧）
背景图的使用
会发现整个屏幕都是重复的图片【是因为默认的图片是平铺的】
body{
background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3278720085,289405952&fm=26&gp=0.jpg);
background-repeat: no-repeat;
}
** background-repeat: no-repeat;**
background-position: right bottom; 在右下方
background-position: center center;
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>15背景图片的使用</title>
<style type="text/css">
html,body{
margin: 0;
height: 100%;
}
/* 当不需要图片平铺时，设置 background-repeat:no-repeat;*/
body{
background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3278720085,289405952&fm=26&gp=0.jpg);
background-repeat: no-repeat;
background-position: center center;
}
/*但是有些网站如果需要一张图片平铺整个页面，比如网格这种*/
/*body{
background-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2655185056,1615742939&fm=26&gp=0.jpg);
}
*/
</style>
</head>
<body>
</body>
</html>
元素的浮动布局1
要实现：
元素的浮动布局2
①其他元素被浮动的元素遮挡
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="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:auto;
.outer{
border-width: 5px;
border-color: black;
border-style: dashed;
/* height: 200px; */
overflow: auto;
}
所有的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="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 charset="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="right">10-4</li>
</ul>
</div>
</center>
</body>
</html>
元素的浮动布局3
为什么需要盒模型1
怎么让元素之间产生一定的距离？
元素本身：
边框+元素本身：
元素本身+边框+边距：
<!DOCTYPE html>
<html>
<head>
<meta charset="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
s
布局练习
一致的宽度
再第一个左填充去掉，把最后一个的右填充去掉
<!DOCTYPE html>
<html>
<head>
<meta charset="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;
}
#case{
height: 490px;
background: #eeeeee;
}
#case .title-text{
width:1005px;
margin:auto; /*水平居中*/
padding-top: 20px;/*上填充*/
padding-bottom: 10px;/*下填充*/
font-size: 45px; /*字体大小*/
}
#case .item-wrapper{
width:1000px;
margin: auto; /*水平居中*/
overflow: auto; /*自动设置高度，防止因子元素浮动而高度塌陷*/
}
#case .item-wrapper .item{
width: 320px;
height: 330px;
background: #9ACD32;
float: left; /*左浮动*/
}
#case .item-wrapper .item.mg{
margin-left: 20px;
margin-right: 20px; /*左右边距*/
}
#case 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="case">
<div class="title-text">
Case
</div>
<div class="item-wrapper">
<div class="item"></div>
<div class="item mg"></div>
<div class="item"></div>
</div>
<p>查看更多+</p>
</div>
</body>
</html>
css属性的简写
本文地址：https://blog.csdn.net/weixin_43846020/article/details/109252881