本章内容:

1.font字体属性设置
2.img标签
3.position定位属性
4.网页添加ico图标
5.表单form标签
6.transform属性

1.font字体属性

文本对齐方式

1
2
3
4
5
text-align: left	    把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
  • color:设置字体颜色
  • letter-spacing:字母间距(正为间距增大,负为间距缩小)

设置字体大小:

方式一:1em的默认大小是16px
方式二:px(像素)
方式三:百分比
————————————————
px : 我们最基础的单位(像素)
em : 相对于当前父节点字体的大小 —- 1em = 父节点字体大小
rem: 相对于当前根节点字体的大小 —- 1rem = 根(html)节点字体大小
vw: 当前视窗宽度 —- 1vw = 1%视窗宽度
vh: 可以理解成当前一个屏幕高度(一页高度) —- 1vh = 1%视窗宽度
vmin: vw和vh中较小的那个
vmax: vw和vh中较大的那个

拓:HTML中设置字体样式
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style> 
@font-face
{
/*设置字体名称*/
font-family: myFirstFont;
/*导入字体url*/
src: url("./sansation_light.woff");
}

div
{
font-family:myFirstFont;
}
</style>

2.<img>标签

-和h系列标签/p标签还有hr标签不一样,img标签不会独占一行,如果我们手动指定了img标签显示的图片的宽度和高度,有可能会导致图片变形,那么如果又想指定宽度和高度,
<img src=”当前电脑图片的路径” width=”200px” height=”200px” />

又不想让图片发生变形,我们可以只指定宽度或者高度其中的一个值即可

-只要指定了宽度,系统会自动根据宽度计算出高度,只要指定了高度,系统会自动根据高度计算出宽度,并且都是等比拉伸的,也就是说不会变形:
<img src=”当前电脑图片的路径” width=”200px” />
<img src=”当前电脑图片的路径” height=”200px” />

利用border属性来创建缩略图:

1
2
3
4
5
6
7
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 40%;
}
/*<img src="paris.jpg" alt="Paris">*/

3.position定位属性

        postion:relative是相对定位:是相对于前面的容器定位的。这个时候不能用top left在定位,应该用margin。它可以随窗口大小变化。但大小仍然不会变。要是你设置成width:100%;height:100%;这样就会随着窗口变大变小
        postion:absolute是绝对定位:是相对于浏览器的定位,释放自己的位置,以网页坐标原点做一个新的坐标,它不会随着窗口大小变化,只是固定在一个特定的坐标轴上。比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

        position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position属性对应的值有:

  • position: static;
  • position: inherit;
  • position: relative;
  • position: absolute;
  • position: fixed;
  • position: sticky;(新的属性值)
  1. position:static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

  1. position: relative

相对定位,相对于自己的初始位置,不脱离文档流。也就是说元素框偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留

举个例子说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<head>
<style>
.container{
background-color: #868686;
width: 100%;
height: 300px;
}
.content_0{
background-color: yellow;
width: 100px;
height: 100px;
}
.content_1{
background-color: red;
width: 100px;
height: 100px;
position: relative;/* 这里使用了relative */
}
.content_2{
background-color: black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="content_0">
</div>
<div class="content_1">
</div>
<div class="content_2">
</div>
</div>
</body>

这时没有设置left、top等属性时,正常出现在normal flow中的位置。
接着添加left,top属性:

1
2
3
4
5
6
7
8
.content_1{
background-color: red;
width: 100px;
height: 100px;
position: relative;/* 这里使用了relative */
left: 40px;
top: 40px;
}

可以看到,元素(content_1)的位置相对于原位置进行了移动,但原本所占的空间仍占有,position:relative相对定位可适用于微调,微微调动一点

  1. position: absolute

        绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(生成绝对定位的元素,其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。注意:是除了static外)。
        MDN描述位:绝对定位不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margin),且不会与其他边距合并

绝对定位会脱离文档流

举例说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<head>
<style>
.box{
width: 100px;
height: 100px;
background-color: darkgreen;
}
.container{
background-color: #868686;
width: 100%;
height: 300px;
}
.content_0{
background-color: yellow;
width: 100px;
height: 100px;
}
.content_1{
background-color: red;
width: 100px;
height: 100px;
position: absolute;
/* 这里使用了绝对定位absolute:绝对定位的元素的位置相对于最近的已定位祖先元素,绝对定位可以使用margin属性,也会脱离文档流
这里不仅相对于box1设置left=40px的基础上,再设置了margin-left:100px,即相对于父类box1向左偏了140px
这里不仅相对于box1设置top=40px的基础上,即相对于父类box1向上偏了40px
*/
top: 40px;
margin-left: 100px;
left: 40px;
}
.content_2{
background-color: black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container">
<div class="content_0">
</div>
<div class="content_1">
</div>
<div class="content_2">
</div>
</div>
</body>
  1. position:fixed
    fixed属性会固定元素定位,也会使得元素脱离文档流
    1
    2
    3
    4
    5
    6
    7
    .box1{
    position: fixed;
    right: 2em;
    bottom: 2em;
    width: 15em;
    height: 15em;
    }

随着页面的滑动,元素仍然固定,始终保持在距离right,bottom为2em位置处,展示效果如下:

position定位属性小结:

  1. 偏移量(top,bottom,left,right)当元素开启定位(即position属性设置不为static时)以后,通过使用偏移量来设置元素位置,如果开启定位时使用margin或者padding属性的话,则会出错,会带动其它div联动。偏移量top,bottom,left,right,仅在开启定位后才会生效

  2. relative相对定位不会脱离文档流,是相对于元素自身在文档中的原来位置进行偏移

  3. absolute绝对定位会脱离文档流,绝对定位的原点是父元素中最近的一个开启了相对定位的左上角,若父元素都没有开启相对定位,则以根元素(即html标签元素)为参照点

  4. fixed固定定位是一种特殊的绝对定位,也会脱离文档流。唯一不同的是,固定定位永远参照于浏览器的视口进行定位,固定定位不会随着网页的滚动条而滚动

  5. 一旦开始position定位元素后,必须使用偏移量(top,bottom,left,right)元素来调整div的位置,绝对不能使用margin,padding

4.网页添加icon图标

在head标签中添加:href表示icon文件的相对路径
<link rel=”Bookmark” type=”image/x-icon” href=”b/img/icon/favicon.ico” />
<link rel=”icon” type=”image/x-icon” href=”b/img/icon/favicon.ico” />
<link rel=”shortcut icon” type=”image/x-icon” href=”b/img/icon/favicon.ico” />(推荐)

shortcut icon,特指浏览器中地址栏左侧显示的图标,一般大小为16x16,后缀名为.icon;
icon,指的是图标,格式可为PNG\GIF\JPEG,尺寸一般为16x16、24x24、36x36等。把这个图标放到网站的根目录下就可以了,页面加载时浏览器会自动检索这个图标然后把它加到标题上(当然也可以放在一个页面可以请求到的目录下)。
Bookmark,当网站收藏到收藏夹中时,显示在前面的图标。


readme文件的伪徽章样式,参考代码

实际样式

5.表单form标签

<input>标签 定义通用的表单元素,其type类型为:

  • type=”text” 定义单行文本输入框
  • type=”password” 定义密码输入框
  • type=”radio” 定义单选框
  • type=”checkbox” 定义复选框
  • type=”file” 定义上传文件 form表单需要加上属性enctype=”multipart/form-data”
  • type=”submit” 定义提交按钮
  • type=”reset” 定义重置按钮
  • type=”button” 定义一个普通按钮

相关属性介绍:

  • value属性: 定义表单元素的值,此值是数据提交时键的值
  • name属性: 定义表单元素的名称,此名称是提交数据时的键名
  • checked: radio 和 checkbox 默认被选中
  • readonly: 只读. text 和 password
  • disabled: 对所用input都好使.

高级用法:
placeholder:
1.input类型的文本框提供一种提示(hint)
2.可以描述文本框期待用户输入何种内容
3.提示语默认显示,当文本框中输入内容时提示语消失
4.适合于input标签:text、search、url、email和password等类型

required:

1.规定文本框填写内容不能为空,否则不允许用户提交表单
2.适合于input标签:text、search、url、email、password、number、checkbox、radio、file等类型

举一个案例:比较标准的表单格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
<!--action 定义表单数据提交地址-->
<form action="http://127.0.0.1:8000/post_info" method="post" enctype="multipart/form-data">
<!--单行文本框--> <!--设置了required就要求此表单为必填项-->
<input type="text" name="username" placeholder="请输入账号" required><br><br>
<!--密码框-->
<input type="password" name="password" placeholder="请输入密码"><br><br>
<!-- 邮箱Email-->
<input type="email" name="email" id="Email" placeholder="请输入邮箱"><br><br>
<!--单选框-->
性别:<label><input type="radio" name="sex" value="1"></label>
<label><input type="radio" name="sex" value="2"></label>
<!--多选框-->
<br><br>
最喜欢的游戏:
<label><input type="checkbox" name="fav" value="LOL" checked>英雄联盟</label> <!---默认选中 -->
<label><input type="checkbox" name="fav" value="shoot" disabled>喷射战士</label> <!---无法选择 -->
<label><input type="checkbox" name="fav" value="zelda">塞尔达传说</label>
<label><input type="checkbox" name="fav" value="mario">马里奥</label>
<!--上传图片-->
<br><br>
<input type="file" name="pic">
<!--多行文本框-->
<br><br>
<textarea name="text" cols="30" rows="10"></textarea>
<!--下拉列表-->
<br><br>
<select name="city">
<option value="gz" selected>广州</option> <!-- 表示默认选中 -->
<option value="sz" disabled>深圳</option> <!-- 表示无法选择 -->
<option value="zh">中山</option>
<option value="hz">杭州</option>
<option value="cd">成都</option>
</select>
<!--提交表单-->
<input type="submit" value="提交">
<!--重置表单-->
<input type="reset" value="重置">
</form>
</body>
<!--- 点击提交到目标网址后:http://localhost:63343/FioraLove_Blog/demo.html?username=AhriLove&password=chen654321&sex=1&fav=shoot&pic=&text=hello+world&city=gz-->

tips:
1.HTML下的表单标签中的<input>便签的value属性:定义表单元素的值,此值是数据提交时键的值
2.单选框radio与多选框checkbox的name,type属性必须要全部一样,value值可以不一样,因为value值定义表单元素的值,此值是数据提交时键的值


6.transform属性

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
语法:transform:none|transform-function (紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号)

1
2
3
4
5
6
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* 在IE 9 浏览器上生效 */
-webkit-transform:rotate(7deg); /* 在Safari and Chrome上生效 */
}

-webkit、-ms-transform常见属性:

  • none:定义不进行转换
  • rotate(30deg):旋转角度
  • translate(50px,200px);定义2D转换,进行平移
  • scale():进行缩放

 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议