2018-09-19-day3作业
2018-09-19 本文已影响0人
fanzl
/*1.字体相关的属性
* 字体颜色:color
* 字体大小:font-size
* 字体名:font-family
* 字体加粗:font-weight(bolder(更粗的)/bold（加粗）/normal（常规）/100—900)
* 字体倾斜：font-style(italic/oblique/normal)
*/
p{
font-family:"微软雅黑";
font-weight: 100;
font-style: italic;
}
/*2.对齐方式:text-align
* left:左对齐
* right:右对齐
* center: 水平方向居中
*/
p{
text-align: left;
}
/*3.行高：line-height
* 设置一行的高度
*/
p{
/*一行内容在垂直方向上居中，可以通过将line-height的值设置为和height的值一样*/
line-height: 100px;
}
/*4.文本修饰：text-decoration
* none: 取消修饰
* underline:下划线
* overline:上划线
* line-through:删除线
*/
a,p{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: red;
}
/*5.首行缩进：text-indent
* 注意单位是：em（表示空格）
*/
p{
text-indent: 2em;
}
/*6.字间距：letter-spacing
* 单位可以是：px,em
*/
p{
letter-spacing: 2px;
}
/*7.列表相关的*/
ul{
/*margin-left: 100px;*/
/*list-style-type: none;*/
list-style-image:url(img/luffy2.png);
list-style-position:inside;
}
/*8.背景图片
* background:图片地址 是否平铺 x方向的坐标 y方向的坐标 背景色
*/
#div{
width: 300px;
height: 200px;
/*background-image: url(img/luffy4.jpg);*/
background: url(img/luffy2.png) no-repeat center 0px yellow;
}
/*9.设置圆角*/
#div{
/*border-bottom-left-radius: 10px;
border-radius: 30px;*/
border-radius: 10px 100px;
border:3px solid red;
}
```
网页结果
