静态网页入门讲解，制作属于你自己的网页（七）

最新推荐文章于 2024-04-29 09:17:59 发布

职业工具人

最新推荐文章于 2024-04-29 09:17:59 发布

阅读量469

点赞数 5

本文链接：https://blog.csdn.net/weixin_44018540/article/details/104194094

版权

写在开始

CSS的讲解的博客这是第五篇，前四篇的链接为
静态网页入门讲解，制作属于你自己的网页（三）
静态网页入门讲解，制作属于你自己的网页（四）
静态网页入门讲解，制作属于你自己的网页（五）
静态网页入门讲解，制作属于你自己的网页（六）

渐变效果

渐变效果分为两种：线性渐变、径向渐变

1.线性渐变

a.默认（从上至下）

<!DOCTYPE html>
<html>
<head>
    <title>CSS渐变</title>
    <style type="text/css">
    #grad{
        width: 400px;
        height: 400px;
        background-image: linear-gradient(#e056fd, #9198e5);
    }
    </style>  
</head>
<body>
   <div id="grad"></div>
</body> 
</html>

在这里插入图片描述
b. to right 从左至右

<!DOCTYPE html>
<html>
<head>
    <title>CSS渐变</title>
    <style type="text/css">
    #grad{
        width: 400px;
        height: 400px;
        background-image: linear-gradient(to right, #e056fd, #9198e5);
    }
    </style>  
</head>
<body>
   <div id="grad"></div>
</body> 
</html>

在这里插入图片描述
c. to bottom right 从左上至右下

<!DOCTYPE html>
<html>
<head>
    <title>CSS渐变</title>
    <style type="text/css">
    #grad{
        width: 400px;
        height: 400px;
        background-image: linear-gradient(to bottom, #e056fd, #9198e5);
    }
    </style>  
</head>
<body>
   <div id="grad"></div>
</body> 
</html>

在这里插入图片描述
2.径向渐变

<!DOCTYPE html>
<html>
<head>
    <title>CSS渐变</title>
    <style type="text/css">
    #grad{
        width: 400px;
        height: 400px;
        background-image: radial-gradient(#7ed6df,#4834d4, #9198e5);
    }
    </style>  
</head>
<body>
   <div id="grad"></div>
</body> 
</html>

在这里插入图片描述

取色网站

那么，这里就要用到各种颜色了，小伙伴问这个颜色怎么取呢？博主推荐两个取色网站
1.Flat UI Color
链接
在这里插入图片描述
2.material design palette
链接

总结

CSS常用的功能点都已经讲完啦，各位小伙伴可以尝试去设计属于自己的网页啦！

各位小伙伴可以尝试去写一个登陆界面，算是看完HTML+CSS部分的小作业啦！只有动手尝试，才能发现自己的不足。

接下来会进入简单的JS（JavaScript）的讲解，让静态网页拥有一些简单的交互功能！

结语

如果说这篇文章有让你学到一定的知识的话，不妨点个赞和关注，让博主能够看到。如果讲解中有什么错误和疏忽，也劳烦在评论中指出或提问，博主会第一时间进行更新和答复，谢谢！

职业工具人

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
静态网页入门讲解，制作属于你自己的网页（七）

写在开始CSS的讲解的博客这是第五篇，前四篇的链接为静态网页入门讲解，制作属于你自己的网页（三）静态网页入门讲解，制作属于你自己的网页（四）静态网页入门讲解，制作属于你自己的网页（五）静态网页入门讲解，制作属于你自己的网页（六）渐变效果渐变效果分为两种：线性渐变、径向渐变1.线性渐变a.默认（从上至下）<!DOCTYPE html><html>&lt...
复制链接

扫一扫