案例一:
需求:
1.用户登录
2、设置外边框圆角
3、设置样式
效果图如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="margin-top:20px;margin-left: auto;margin-right:auto;border:1px solid black;border-radius: 8px; width: 280px;text-align: center;">
<span style="color: blue; font-family: 黑体; "><strong>用户登录</strong></span>
<form>
<table style="margin-right: auto;margin-left: auto;">
<tr>
<td>用户名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td></td>
<td><button style="background-color: blue;margin-top: 20px;"><font color="white">登录</font></button><input type="reset" value="重置" style="margin-left:50px;"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
知识点总结
1.CSS三种引入方式
在HTML网页中根据编写CSS方式的不同可以将CSS分为三类:行内样式、内部(嵌)样式、外部样式
行内样式
行内样式通过style属性直接编写在标签中,多个样式规则之间使用分号隔开
语法:
<p style="样式规则"></p>
注意:行内样式只对当前标签生效
<p style="color: red; font-size: 20px;">大家好</p>
内嵌样式
内嵌样式一般写在<head>部分
语法:
<style type="text/css">
选择器selector {样式规则;}
</style>
注意:内嵌样式在当前页面中有效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>大家好</p>
</body>
</html>
外部样式
外部样式定义在单独的*.css 文件中,一般放置在站点一个CSS目录中,通过<link>标签在<head>部分引用。一般外部样式的文件名和网页名称一致
语法:
<link href="外部样式路径" rel="stylesheet">
注意:外部样式可以用在同一个网站的多个网页中,只需要在各个页面中去引用外部样式即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入外部样式-->
<link href="css/index.css" rel="stylesheet"/>
</head>
<body>
<p>大家好</p>
</body>
</html>
样式使用规则
不同的规则,该如何选择和取舍呢?
行内样式表、内嵌样式表、外部样式表各有优势,实际的开发中常常需要混合使用:
- 1.有关整个网站统一风格的样式代码,放置在独立的样式文件*.css
- 2.某些样式不同的页面,除了链接外部样式文件,还需定义内嵌样式
- 3.某张网页内,部分内容”与众不同“,采用行内样式
2、盒子模型
2.1、外边距
-上下外边距重叠
-左右外边距相加
-margin : 上右下左 [或者margin-top:x;margin-left:y;…]
2.2、内边距
-块内部的内容是否顶着边框,看内边距.
-padding : 上右下左 套路与margin相同
2.3、居中
-块居中(横向居中) : margin:0 auto
-块内内容居中 : text-align:center
页面中的所有元素都可以看成一个盒子,占据着一定的页面空间。一个盒子的完整大小由:内容content+内边距padding+边框border+外边距margin组成
外边距相关属性
margin:外间距,边框和边框外层的元素的距离
margin写法:
margin:10px;上下左右四个方向距离相同
margin: 10px 20px 30px 40px;四个方向:上,右,下,左(顺时针)
margin: 10px 20px;*四个方向:上下,右左(顺时针)
margin:10px 20px 30px; 第一个用于上,第二个用于右-左,第三个用于下
属性名 | 描述 | 取值 |
---|---|---|
margin | 四个方向的距离 | top;right;bottom;left |
margin-top | 上间距 | 数值 |
margin-bottom | 下间距 | 数值 |
margin-left | 左间距 | 数值 |
margin-right | 右间距 | 数值 |
如果想让一个元素居中显示,只需设置:margin:0 atuo;即可
内边距相关属性
padding:内间距,元素内容和边框之间的距离((top right bottom left))
用法与margin相同
属性名 | 描述 | 取值 |
---|---|---|
padding | 四个方向的距离 | top;right;bottom;left |
padding-top | 上间距 | 数值 |
padding-bottom | 下间距 | 数值 |
padding-left | 左间距 | 数值 |
padding-right | 右间距 | 数值 |
3、浮动
设置浮动可以让两个控件紧密排列在同一行,清除浮动就会正常产生换行
清除浮动:
clear: both
- both:左右浮动都清除
- left:仅
<div style="background-color:red;width: 200px;height: 200px;float: left;border: 1px solid black">恭</div>
<div style="background-color:hotpink;width: 200px;height: 200px;float: left;border: 1px solid black">囍</div>
实现效果如如下: