add file:CSS基础练习:JD首页的制作(顶部和底部)
This commit is contained in:
@@ -75,7 +75,7 @@ p{
|
||||
font-size:50px; /*字体大小*/
|
||||
line-height: 30px; /*行高*/
|
||||
font-family:幼圆,黑体; /*字体类型:如果没有幼圆就显示黑体,没有黑体就显示默认*/
|
||||
font-style:italic ; /*斜体*/
|
||||
font-style:italic ; /*italic表示斜体,normal表示不倾斜*/
|
||||
font-weight:bold; /*粗体:属性值写成bolder也可以*/
|
||||
font-variant:small-caps; /*小写变大写*/
|
||||
}
|
||||
@@ -103,12 +103,28 @@ p{
|
||||
font-family:"宋体";
|
||||
```
|
||||
|
||||
上面这三个属性,我们可以使用一行代码来实现:(字号 font-size、行高 line-height、字体 font-family)
|
||||
是否加粗属性以及上面这三个属性,我们可以连写:(是否加粗、字号 font-size、行高 line-height、字体 font-family)
|
||||
|
||||
格式:
|
||||
|
||||
|
||||
```
|
||||
font: 14px/24px “宋体”;
|
||||
font: 加粗 字号/行高/ 字体
|
||||
|
||||
```
|
||||
|
||||
举例:
|
||||
|
||||
```
|
||||
font: 400 14px/24px “宋体”;
|
||||
```
|
||||
|
||||
PS:400是nomal,700是bold。
|
||||
|
||||
上面这几个属性可以连写,但是有一个要求,font属性连写至少要有**字号和字体**,否则连写是不生效的(相当于没有这一行代码)。
|
||||
|
||||
|
||||
|
||||
**2、字体属性的说明:**
|
||||
|
||||
(1)网页中不是所有字体都能用,因为这个字体要看用户的电脑里面装没装,比如你设置:
|
||||
@@ -181,7 +197,7 @@ CSS样式中,常见的文本属性有以下几种:
|
||||
|
||||
- `letter-spacing: 0.5cm ;` 单个字母之间的间距
|
||||
- `word-spacing: 1cm;` 单词之间的间距
|
||||
- `text-decoration: underline;` 字体修饰:**underline下划线**、line-through中划线、overline上划线
|
||||
- `text-decoration: none;` 字体修饰:none去掉下划线、**underline下划线**、line-through中划线、overline上划线、
|
||||
- `text-transform: lowercase;` 单词字体大小写。uppercase大写、lowercase小写
|
||||
- `color:red;` 字体颜色
|
||||
- `text-align: center;` 在当前容器中的对齐方式。属性值可以是:left、right、center(<font color="#0000FF">**在当前容器的中间**</font>)、justify
|
||||
|
||||
@@ -218,6 +218,8 @@ PS:padding的区域也是有背景图的。
|
||||
|
||||
比如说,`right center`表示将图片放到右边的中间;`center center`表示将图片放到正中间。
|
||||
|
||||
比如说,`bottom`表示图片的底边和父亲**底边贴齐**(好好理解)。
|
||||
|
||||
位置属性有很多使用场景的。我们来举两个例子。
|
||||
|
||||
场景1:(大背景图)
|
||||
|
||||
@@ -223,6 +223,8 @@ css中一共有三种手段,使一个元素脱离标准文档流:
|
||||
|
||||
上图中,我们发现:**div挡住了p,但不会挡住p中的文字**,形成“字围”效果。
|
||||
|
||||
总结:**标准流中的文字不会被浮动的盒子遮挡住**。(文字就像水一样)
|
||||
|
||||
关于浮动我们要强调一点,浮动这个东西,为避免混乱,我们在初期一定要遵循一个原则:**永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动。**
|
||||
|
||||
|
||||
|
||||
@@ -333,7 +333,7 @@ p将无视父亲的padding,在border内侧为参考点,进行定位:
|
||||
|
||||
我们知道,如果想让一个**标准流中的盒子居中**(水平方向看),可以将其设置`margin: 0 auto`属性。
|
||||
|
||||
可如果盒子是绝对定位的,此时已经脱标了,如果还想让其居中,可以这样做:
|
||||
可如果盒子是绝对定位的,此时已经脱标了,如果还想让其居中(位于父亲的正中间),可以这样做:
|
||||
|
||||
```
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user