今天学到了什么 CSS 样式CSS 样式 1 命名规范 2 背景
2.1背景重复backg round-repeat: no-repeat | repeat-x | repeat-y
div{
width: 200px;
height: 200px;
background-color: red;
background-image: url("images/mi-logo.png");
background-repeat: repeat;
background-position:center;
}
文章图片
背景重复.png
2.2 背景位置background-position-x:横坐标方向的位置
background-position-y:纵坐标方向的位置
//传参 top，right，bottom，left，center
2.3 背景简写background-position： x y;
/background-position-x: right;
background-position-y: bottom;
div{
width: 200px;
height: 200px;
/*
背景简写
background：color image repeat position
*/
background: red url("images/icon1.png");
}
2.4 背景吸附background - attachment: scroll | fixed;
.banner{
height: 468px;
background: red url("images/banner.png") no-repeat center top;
background-attachment:fixed;
}
.content{
height: 800px;
background:mediumturquoise;
}
2.5 背景大写背景大小
background-size：x y;
x-->width
y-->height
cover-->会覆盖整个div`特点：只能以大覆小`
div{
width: 600px;
height: 200px;
background: red url("images/banner.jpg") no-repeat center center;
background-size: 100% 100%;
}
3 文本
3.1 文本颜色
p{
color: blue;
}
3.1 文本对齐text-align:left|center|right
p{
text-align: center;
}
3.2 文本修饰text-decocration:none|under|over-line|line-through
a{
text-decoration: line-through;
}
3.3 文本缩进text-indent
3.4 文本转换【Day04】text-thransfomr
h4{
text-indent: 20px;
text-transform: capitalize;
}
4 字体
4.1 字体大小font-size
最小的字体-->不要小于12px
4.2 字体样式font-style：nomeal|italic
4.3字体的权重font-weight: bold|bolder|lighter
p{
font-size: 14px;
font-style: italic;
font-weight: lighter;
}
5 链接
link--> 没有访问的链接
`visited`--> 已经访问过的链接
` hover`--> 鼠标移入到链接上的状态
`active`--> 鼠标点击的那一刻
` tip`-->同时使用链接的这几种状态，顺序不打乱
a:link{
color: red;
}
a:visited{
color: rgba(196, 164, 223, 0.5);
}
a:hover{
color: green;
}
a:active{
color: blue;
}
文章图片
link.png
文章图片
hover.png
文章图片
active.png
文章图片
visited.png 6 列表
6.1 列表样式list-style:none;
6.2列表样式类型list-style-type：disc| circle|square
6.列表样式图片list-style-image
ul{
list-style-image: ("images/icon1.png")
}
7 表格
table,th,td{
width: 500px;
border: 1px solid #333;
}
table{
/*关键样式*/
border-collapse: collapse;
line-height: 50px;
text-align: center;
}
商城 手机
JD 苹果
Tmall 小米
苏宁 华为
文章图片
表格.png
7.1 跨越行row的表格
/* 技术要点：谁要跨越谁rowspan*/
table,td{
border: 1px solid rgb(221, 23, 23);
}
table{
text-align: center;
border-collapse: collapse;
width: 500px;
line-height: 50px;
}
文章图片
跨越行.png
