CSS浮动+背景图片+边框+文字排版+段落设置
最新推荐文章于 2024-05-24 18:21:52 发布
pigpigpi
最新推荐文章于 2024-05-24 18:21:52 发布
阅读量3.9k
收藏
59
点赞数
5
最新推荐文章于 2024-05-24 18:21:52 发布
阅读量3.9k
收藏
59
点赞数
5
一.CSS浮动
1.简介
默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动
float属性
属性值 说明
left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动
浮动意思是取消原来所占的一行,让浮动标签后面的一个标签样式接上浮动标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div {
/* float: left; */
/* margin-left: 100px; */
}
/* 浮动意思是取消原来所占的一行,让浮动标签后面的一个标签样式接上浮动标签的样式 */
#div1 {
/* left表示左浮动
right表示右浮动
none表示不浮动
*/
float: left;
}
#div2 {
float: left;
}
#div3 {
float: left;
}
</style>
</head>
<body>
<div id="div1" class="div" style="background-color: red;">
芜湖,起飞
</div>
<div id="div2" class="div" style="background-color: yellow;">
啊哈,金色传说
</div>
<div id="div3" class="div" style="background-color: aqua;">
这把我门就遇到了高手了
</div>
<!-- 清除浮动 -->
<div id="div4" class="div" style="clear: both;">
外币外币,外币巴布
</div>
</body>
</html>
2.CSS浮动图片
当对图片进行浮动时,图片会取消边框,按照浮动顺序排列;
当调整窗口时,图片大小不变,会自动调整位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css浮动图片</title>
<style type="text/css">
img{
float: left;
}
</style>
</head>
<body>
<img src="img/girl1.jpg" width="400px" height="300px">
<img src="img/girl2.jpg" width="400px" height="300px">
<img src="img/girl3.jpg" width="400px" height="300px">
<img src="img/girl4.jpg" width="400px" height="300px">
</body>
</html>
3.边框塌陷
作用:清除浮动
属性值 说明
left 在左侧不允许出现浮动元素
right 在右侧不允许出现浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css清除浮动</title>
<style type="text/css">
img {
float: left;
margin-left: 20px;
}
#div2{
clear: both;
}
</style>
</head>
<body>
<div id="div1">图片</div>
<img src="img/girl1.jpg" width="400px" height="300px">
<img src="img/girl2.jpg" width="400px" height="300px">
<!-- 清除浮动
如果不添加clear,文字会出现在图片右侧
-->
<div id="div2">图片2</div>
<img src="img/girl3.jpg" width="400px" height="300px">
<img src="img/girl4.jpg" width="400px" height="300px">
<img src="img/girl5.jpg" width="400px" height="300px" >
</body>
</html>
4.display属性
属性值 说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none 设置元素不会被显示
块元素排在一起有两种方法：
inline-block
float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display属性</title>
<style type="text/css">
p{
background-color: red;
display: inline;
}
</style>
</head>
<body>
<p>芜湖起飞</p>
<p>外币外币</p>
</body>
</html>
二.CSS属性
1.字体的设置
1.font-family设置字体形式,如黑体隶书楷书等
2.font-size:绝对尺寸/关键字/相对尺寸/百分比
关键字:xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
3.font-style 设置字体的样式
font-style 设置字体的样式（设置字体是否为斜体字）
normal----正常显示字体
italic---斜体字
oblique--歪斜体（倾斜角度大一点）
4.font-weight 设置字体的加粗
取值：
normal ---- 正常显示
bold ----粗体（数字700粗细值）
bolder ---加粗
lighter ---细体（比正常字体稍微细一点）
number ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）
5.text-shadow设置字体的阴影
从左到右依次为阴影的左右距离,上下距离,阴影范围,阴影颜色
6.font-variant 设置字体的变体
设置字体是否显示为小型的大写字母
主要用于设置英文字体
normal --正常字体
small-caps 表示英文字母显示为小型的大写字母
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
color: red;
font-family: 楷体;
font-style: normal;
font-weight: bold;
/* text-shadow设置字体的阴影 */
/* 左右位置 上下位置 阴影范围 阴影颜色 */
text-shadow: 1px 1px 5px aqua;
}
h2{
/* font-size设置字体大小 */
font-size: 100px;
color: #000000;
font-style: italic;
font-weight: normal;
}
div{
font-size: x-large;
font-style: oblique;
font-weight: lighter;
}
#div2{
font-variant: small-caps;
}
#div3{
font-variant: normal;
}
</style>
</head>
<body>
<h1>芜湖起飞</h1>
<h2>外币外币</h2>
<p>啊哈,金色传说</p>
<div id="div1">
这把我们就遇到了高手了
</div>
<div id="div2">
HelloWorld!
</div>
<div id="div3">
buffterflaay
</div>
</body>
</html>
2.颜色的设置
1.color 设置颜色
2.background-color设置背景颜色
3.background-image设置背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颜色的设置</title>
<style type="text/css">
#div1{
color:red;
}
#div2{
background-color: #FFD700;
}
.div{
background-image: url(img/girl1.jpg);
}
</style>
</head>
<body>
<div id="div1">
外币外币,外币巴布
</div>
<div id="div2">
飞吧
</div>
<div id="div3" class="div">
芜湖
</div>
<div id="div4" class="div">
起飞
</div>
</body>
</html>
3.背景的设置
(1)背景的颜色+图片+尺寸
1.background-color设置背景颜色
2.background-image设置背景图片
3.background-size设置背景图片的尺寸,第一个参数表示左右拉伸,第二个参数表示上下拉伸
4. background-repeat设置背景图片是否重复
设置背景图片总是在水平和垂直方向重复显示铺平整个网页。
repeat 背景图片在水平和垂直方向平铺
repeat-x 背景图片在水平方向平铺
repeat-y 背景图片在垂直方向平铺
no-repeat 背景图片不平铺
5.background-attachment设置背景图片是否随着滚动条的滚动而滚动
scroll ---表示背景图片随着滚动条的移动而移动
fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景的设置</title>
<style type="text/css">
body{
background-image: url(img/girl3.jpg);
/* 是否随着滚动条的滚动而滚动 */
background-attachment: scroll;
/* 设置图片不平铺 */
background-repeat: no-repeat;
/* 设置图片尺寸 */
background-size: 800px 1800px;
}
/* 字出现在图片上,且字和图片一起随着滚动条的滚动而滚动 */
#div1{
height: 50rem;
}
</style>
</head>
<body>
<div id="div1">
芜湖
</div>
</body>
</html>
(2)背景图片的位置
background-position:
关键字 百分比 位置说明
top left 0% 0% 左上位置
top center 50% 0% 靠上居中
top right 100% 0% 右上位置
left center 0% 50% 靠左居中
center center 50% 50% 正中位置
right center 100% 50% 靠右居中
bottom left 0% 100% 左下位置
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 1400px;
height: 1100px;
background-image: url(img/bb.png);
background-repeat: no-repeat;
border: 1px #00FFFF solid;
/* 设置图片的位置 */
background-position: right center;
}
</style>
</head>
<body>
<div id="div1" style="height: 800px;">
</div>
</body>
</html>
4.边框的设置
(1)边框的基本设置
边框线条的粗细 边框的颜色 边框的粗细
border: 1px black solid;
1.边框的宽度
border-width
基本语句：
border-width
border-top-width 上宽
border-bottom-width 下宽
border-left-width 左宽
border-right-width 右宽
取值；
thin ----细边框
medium ---中等边框
thick--粗边框
长度---数字
2.边框的颜色
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
3.边距
border
边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离
上边距 margin-top
下边距 margin-bottom
左边距 margin-left
右边距 margin-right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1 {
width: 300px;
height: 400px;
/* border: 1px red solid; */
border-width: 10px;
border-color: red;
border-style: solid;
/* 上边框的宽 */
border-top-width: 1px;
/* 下边框的颜色 */
border-bottom-color: #FFD700;
/* 左边框的格式 */
border-left-style: none;
/* 上边距 */
margin-top: 100px;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
(2)边框的圆角和阴影
border-radius设置边框圆角,注意先把边框设置后再设置圆角
div { border:2px solid; border-radius:25px; }
box-shadow设置边框阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 300px;
height: 400px;
border: 1px darkred solid;
background-image: url(img/girl2.jpg);
background-repeat: no-repeat;
/* 设置边框的圆角 */
border-radius: 10px;
/* 设置边框的阴影 */
box-shadow: 1px 1px 1px #8B0000
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
(3)内边距
用来设置边框和其内部的元素之间的空白距离
上边距 padding-top距离顶部的距离
下边距 padding-bottom
左边距 padding-left
右边距 padding-right
注意:
添加距离后,会把原有的边框进行扩大
如果想要不扩大原有的边框,通过设置box-sizing为:border-box即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 400px;
height: 300px;
border: 1px #000000 solid;
/* 外边距 */
margin-top: 100px;
/* 内边距 */
padding-left: 100px;
padding-top: 100px;
/* 不扩大原有的边框 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="div1">
芜湖,起飞
</div>
</body>
</html>
5.CSS对文字的排版
1.letter-spacing,调整字符间距,用来控制字符之间的间距，这个间距实际上就是在浏览器
中所显示的字符间的空格距离。
取值：
normal ---表示正常显示（默认）
长度--可以使用负数，带上单位
单位px(像素)
2.添加下划线+删除线等
text-decoration
属性的取值：
underline----添加下划线
overline---添加上划线
line-through--添加删除线
blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）
none--没有任何的修饰
3.文本的对齐方式
text-align
用来控制文本的排列和对齐方式
属性的取值：
left--左对齐
right--右对齐
center--居中对齐
justify--两端对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
/* letter-spacing,调整字符间距 */
letter-spacing: 2px;
/* 添加下划线 */
/* text-decoration: underline; */
/* 添加删除线 */
text-decoration: line-through;
/* 文本的对齐方式 */
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
出题人一到店，所有喝酒的人便都看着他笑，有的叫道，“出题人，你又出景点了！
”他不回答，对柜里说，“温两碗酒，要一叠景点报告。”便排出九张试卷。他们又故意
的高声嚷道，“你一定又欺负高考考生了！“出题人睁大眼睛说，“你怎么这样凭空污
人清白……”“什么清白？我昨天亲眼见你偷偷溜进胡夫金字塔，被巴耶克吊着打。”
出题人便涨红了脸，额上的青筋条条绽出，争辩道，“偷入景点不能算偷……潜入！
……读书人的事，能算偷么？”接连便是难懂的话，什么“葛军我大哥”，什么“巴黎圣母
院”之类，引得众人都哄笑起来：店内外充满了快活的空气。
</div>
</body>
</html>
6.字母大小写转换
text-transform: uppercase;转换为大写
text-transform: lowercase;转换为小写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
/* text-transform: uppercase; */
text-transform: lowercase;
}
</style>
</head>
<body>
<div id="div1">
With the rapid development of computer technology, information security has become a major problem in the
development of the Internet. Secret sharing is an important guarantee mechanism to ensure information security. It
can share secrets among a group of participants and provide a good security mechanism for the confidentiality of the
key, so it has been widely used.
</div>
</body>
</html>
7.段落的设置
text-indent
用来控制每个段落的首行缩进的距离。
属性取值：
长度（数字）带上单位
百分比相对于上一级元素的宽度
em 倍数
对p标签中的文本进行首行缩进
line-height: 2em;设置行高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p1{
/* 首行缩进两个字符 */
text-indent: 2em;
}
#p2{
/* 设置行高 */
line-height: 2em;
}
</style>
</head>
<body>
<p id="p1">美国参众两院于 1948 年 6 月同意美国加入世卫组织时的联合决议案（joint
resolution）中其实有相关规定。
</p>
<p id="p2">决议案的第四条款提到：因应世卫组织章程没有关
于退会之条文，美国保留退出组织之权利，但需在一年前提出（one year
notice），且美国应已付清对世卫组织的一切债务。这是当时美国加入世卫组织时，
认可的条款。也就是说即使美国国会应特朗普要求，同意通过退出世卫组织，也至少是
2021年7月以后。并且付清对世卫组织的一切债务。美国人在世卫组织有一万多员工，
世卫组织的费用都是用来发工资，做研究烧钱。其中很大一部分是被美国人拿走了，
包括工资和研发经费。不可能这么轻易一句话就退出，我无法猜测如果美国真的这么轻
飘飘的拍拍屁股走人，世界会怎么看待美国加入的组织，后面大家都会后怕，你美国
人来拿工资，烧研发经费，又不付清债务就跑了。
</p>
</body>
</html>
扫一扫
266
暂无认证
到【灌水乐园】发言
CSDN-Ada助手: Python入门 技能树或许可以帮到你：https://edu.csdn.net/skill/python?utm_source=AI_act_python
小冷swz: 写的很好，但我就是没找到自己需要的那部分 如何让html浮动在背景图片之后
清澈的水……: 能给一份吗？谢谢
若曦2725: 周阳老师嘛
爱编程的大李子: 学到了
期待回访交流