1分钟带你做出登陆页面——初识区块，样式的设计，样式表（CSS）的引入

最新推荐文章于 2024-07-25 11:52:08 发布

低调的丶行者

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量1.7k

点赞数 2

分类专栏： html+css+js笔记文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_74794442/article/details/127703304

版权

html+css+js笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

常用样式

案例一：

需求：

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">

样式表文件和HTML文件

注意：外部样式可以用在同一个网站的多个网页中，只需要在各个页面中去引用外部样式即可

<!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>