Css的用法

最新推荐文章于 2024-07-31 14:35:30 发布

KBkongbaiKB

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量150

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/KBkongbaiKB/article/details/140762001

版权

现在，假设你已经有了如下的html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>质量检测系统登录</title>
</head>

<body>
    <div class="login">
        <div class="top">
            <h2 class="h2">质量检测系统登录</h2>
        </div>
        <div class="item">
            <form>
                <div class="item_t">
                    <input type="text" class="account" placeholder="账号">
                </div>
                <div class="item_t">
                    <input type="text" class="password" placeholder="密码">
                </div>
                <div class="identity">
                    身份
                    <select class="op">
                        <option>学生</option>
                        <option>老师</option>
                    </select>
                </div>
                <div class="item_t">
                    <input type="text" class="confirm" placeholder="验证码">
                    <img src="getCaptcha" class="captcha">
                </div>
            </form>
        </div>
        <div class="botton">
            <div class="bo_enroll">
                <input type="button" class="enroll" value="登 录">
            </div>
            <div class="bo_text">
                <a href="index.html" class="text">没有账号，点击注册？</a>
            </div>
        </div>
    </div>
</body>

</html>

运行结果如下：

将上图装饰成下图就是css的功能。

css其实非常简单，你只需要记住几个你写css常用的代码就行，以我为比喻。

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100vh;
}

这串代码是每个css开头我都会写的，不用管他它的意思，写的时候就直接复制粘贴上去就行。

当然了，能弄懂它的意思更好，我这里就不进行讲解了。

那么我常用的css有哪些呢：

width:  宽
height: 高
background-color: 背景颜色
display: 对其位置
padding： 移动目标
font： 调整字体

没错，就这么多，甚至还可以更少。很显然，这么一点东西是不足以让我们设计好一个页面的，那么我们该怎么做呢，查，没错，去网上找。

当然了，查是需要你有一定的css基础的，怎么说呢，比如：

上面图中，你只需要知道这个是按钮就行，那么我们接下来需要做的就是：

然后随便找一个网站进去：

找到你想要的功能，以此类推。

你得知道，代码那么多，不是每个你都能记住的，你所需要记住的是有这个功能的存在，再打个比喻，你现在想移动这个按钮的位置，你得知道先要将这个按钮居中，再进行微调。怎么居中呢，搜索“css 居中”，怎么微调呢，搜索“css 移动位置”，好，现在问题来了，你搜索后获发现获有很多不同的代码

这些都可以写了可以居中对齐，选哪一个呢，随便拿一个用嘛，不行咱再换一个啊，又不要钱。

好，上面的办法我们可以完成一个样式了，那为什么说我们还是需要记住一些我们自己常用的css代码呢，全部上网搜不就行了吗。这就是你写代码所要迈出的重要一步，规范。

width:  宽
height: 高
background-color: 背景颜色
display: 对其位置
padding： 移动目标
font： 调整字体

在上面代码中，你得知道，display能用来居中对齐，那么我们搜索的内容就应该是，“css display 居中”，那么，你所要找的就应该是带有display的代码。

那么我们又怎么知道哪些css是我们常用的呢，这就需要你随便去找一个网课跟着老师从头到尾完整的敲几个css代码了。

补充：

方便调节css：

在这个地方进行调节，调整完后把代码复制到css里面即可。

KBkongbaiKB

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Css的用法

你得知道，代码那么多，不是每个你都能记住的，你所需要记住的是有这个功能的存在，再打个比喻，你现在想移动这个按钮的位置，你得知道先要将这个按钮居中，再进行微调。怎么居中呢，搜索“css 居中”，怎么微调呢，搜索“css 移动位置”，好，现在问题来了，你搜索后获发现获有很多不同的代码。在上面代码中，你得知道，display能用来居中对齐，那么我们搜索的内容就应该是，“css display 居中”，那么，你所要找的就应该是带有display的代码。当然了，能弄懂它的意思更好，我这里就不进行讲解了。
复制链接

扫一扫