css学习知识总结

一、css与html连接：

可以将css语句放在html内部，一般放在<head>之下，定义在<style>中，格式一般是一个“.”然后加上一个“名称”再加上一个“{}”，再在“{}”内部定义具体的语句。

二、调整元素

2.1 字体类:

2.1.1 front-size:

调节字体大小。如：font-size: 200%;

2.1.2 front-weight:

调节字体粗细。如：font-weight: bold;

2.1.3 font-family:

font-family:sans-serif, '黑体';

2.2 方位类：

2.2.1 text-align：

调节组件的方位。如：text-align: right; text-align: center; 让组件居于右侧：text-align: right;

2.2.2 top:

调节组件上侧方位。如：top: 50%;

2.2.3 left:

调节组件左侧方位。如：left:50%;

2.2.4 transform:

从组件当前位置进行变换，第一个参数是横移，第二个参数是竖移。transform: translate(20%,0%);

2.2.5 margin:

调节组件间的距离，调节距离边界的距离。如：margin: 18px 0。让组件距离右边界60px：margin-right: 60px

2.2.6 改变两个组件横向距离：

.sub {
    padding-left: 0px;
}

.sub input {
    margin-right: 100px;
}

2.3 颜色类：

2.3.1 background-color:

调节元素背景颜色。如：background-color: yellow;

2.3.2 color:

调节元素颜色。如： color: red;

2.3.3 background：

用于调节背景颜色。background: rgba(0, 0, 200, 0.3);

2.4 装饰类：

2.4.1 border:

设置边框。如：1px solid #000000; 第一个参数是粗细，第二个参数是颜色。

2.4.2 display:

将外部边框包围文字。display: inline-block;

2.4.3 box-shadow:

给组件制造阴影。box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);

2.4.4 border-radius:

给方形制造圆角。border-radius: 10px;

2.5交互类：

2.5.1 cursor:

鼠标移动到组件上形成箭头。cursor: pointer;

三、现成代码

将两个button类型的按钮隔开一定的距离：

.mm {
    display: flex;
    justify-content: space-between;
    margin: 0 5px;
}

第一步：搭建界面（css+html）

如何让组件到达我们预想的位置（例如中央），如何进行组件内部的对齐。

第二步：用flask对各个组件点击事件进行关联

跳转首页，跳转登录界面

如何实现点击某个按钮然后实现跳转？

第三步：存取数据

1、从网页读取到数据，然后存入数据库。

2、回应网页端，从数据库中取出数据，然后显示在网页上。

第四步：页面实时更新

第五步：美化完善

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/40113.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！