本次将要学习的是CSS如何操作图片与文字。
目录结构：
learning
--CSS
--learning.css
Images
--01.PNG
--02.PNG
--03.PNG
--04.PNG
--05.PNG
--06.PNG
--JS
--learning_js.js
--learning_html.html
内容1：learning_html.html
其他，都为空。
web展示：
〇、CSS初始化
1、去除默认的内边距和填充
ul{
padding-inline-start:0px;
}
2、去掉默认的标记
li{
list-style-type:none
}
3、去掉超链接的下划线
a{
text-decoration:none
}
4、如图：
一、行内块元素
1、display，设置将段落(如a和span)生成一个行内框
1.1、如，none，隐藏其中一行内容
1.2、如，inline属性值，可以将两行内容变成一行内容：
1.2、如，block属性值，常用于a和span等不是块级元素的元素：
A、不设置
B、设置了，有效果
C、设置了，去掉display属性值，没效果
如，inline-block属性值，就是综合了inline和block的内容。
2、当前代码和web展示：
二、调整尺寸
1、图片需要设置尺寸
.photo_pageli{
width:px;
height:px;
}
.photo_pageimg{
width:%;
height:%;
}
2、当前代码和web展示
三、定位的相对和绝对
1、position，定位
1.1、relative
相对定位，位置相对其原始位置
a{
position:relative
left:-20px
}
释义：a这个元素相对于原始位置向左减少20px，就相当于向左移动20px
b{
position:relative
left:20px
}
释义：b这个元素相对于原始位置向左增加20px，就相当于向右移动20px
菜鸟上说的更详细：
1.2、absolute
绝对定位，位置相对于最近已经定位的父元素，如果元素没有已定位的父元素，那么它的位置相对于html
a{
position:absolute;
letf:10px;
top:px
}
释义：a元素相对于html向左增加10px（也就是向右移动10px），相对于html向上增加px（也就是向下移动px）1.3、设置位置
.photo_pageli{
position:relative;
}
.photo_pageimg{
position:absolute;
}
.photo_pagea{
position:absolute;
}
2、当前代码和web展示
四、文字的位置
1、top
top属性，规定元素的顶部边缘。该属性定义了一个定位元素的上边距边界与其包含块上边界的偏移。如为px,就相当于从原来的位置向下偏移px，如为-px,就相当于从原来位置向上偏移px。当然，若position的属性值为static时，top就无效。
.photo_pageli{
position:relative;
}
.photo_pagea{
position:absolute;
top:px;
}
2、当前代码和web展示
五、文字等其他优化
1、大小
font-size:12px;
2、居中
text-alifb:center;
3、截断内容为省略号
width:%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
4、背景颜色
background-color:yellowgreen;
5、当前代码和web展示
六、新的挑战
1、html还有的东西
此篇结束，敬请期待下一篇。
预览时标签不可点收录于话题#个上一篇下一篇