add file:CSS基础练习:JD首页的制作(顶部和底部)

This commit is contained in:
qianguyihao
2018-01-22 21:23:15 +08:00
parent 07173da520
commit b885dc88dd
11 changed files with 1223 additions and 52 deletions

View File

@@ -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 “宋体”;
```
PS400是nomal700是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

View File

@@ -218,6 +218,8 @@ PSpadding的区域也是有背景图的。
比如说,`right center`表示将图片放到右边的中间;`center center`表示将图片放到正中间。
比如说,`bottom`表示图片的底边和父亲**底边贴齐**(好好理解)。
位置属性有很多使用场景的。我们来举两个例子。
场景1大背景图

View File

@@ -223,6 +223,8 @@ css中一共有三种手段使一个元素脱离标准文档流
上图中,我们发现:**div挡住了p但不会挡住p中的文字**,形成“字围”效果。
总结:**标准流中的文字不会被浮动的盒子遮挡住**。(文字就像水一样)
关于浮动我们要强调一点,浮动这个东西,为避免混乱,我们在初期一定要遵循一个原则:**永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动。**

View File

@@ -333,7 +333,7 @@ p将无视父亲的padding在border内侧为参考点进行定位
我们知道,如果想让一个**标准流中的盒子居中**(水平方向看),可以将其设置`margin: 0 auto`属性。
可如果盒子是绝对定位的,此时已经脱标了,如果还想让其居中,可以这样做:
可如果盒子是绝对定位的,此时已经脱标了,如果还想让其居中(位于父亲的正中间),可以这样做:
```
<div>