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

迈不过友情╰ 2023-07-03 12:05 55阅读 0赞

写在开始

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

渐变效果

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

1.线性渐变

a.默认（从上至下）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>CSS渐变</title>
  5.     <style type="text/css">
  6.     #grad{
  8.         width: 400px;
  9.         height: 400px;
  10.         background-image: linear-gradient(#e056fd, #9198e5);
  11.     }
  12.     </style>  
  13. </head>
  14. <body>
  15.    <div id="grad"></div>
  16. </body> 
  17. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>CSS渐变</title>
  5.     <style type="text/css">
  6.     #grad{
  8.         width: 400px;
  9.         height: 400px;
  10.         background-image: linear-gradient(to right, #e056fd, #9198e5);
  11.     }
  12.     </style>  
  13. </head>
  14. <body>
  15.    <div id="grad"></div>
  16. </body> 
  17. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>CSS渐变</title>
  5.     <style type="text/css">
  6.     #grad{
  8.         width: 400px;
  9.         height: 400px;
  10.         background-image: linear-gradient(to bottom, #e056fd, #9198e5);
  11.     }
  12.     </style>  
  13. </head>
  14. <body>
  15.    <div id="grad"></div>
  16. </body> 
  17. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>CSS渐变</title>
  5.     <style type="text/css">
  6.     #grad{
  8.         width: 400px;
  9.         height: 400px;
  10.         background-image: radial-gradient(#7ed6df,#4834d4, #9198e5);
  11.     }
  12.     </style>  
  13. </head>
  14. <body>
  15.    <div id="grad"></div>
  16. </body> 
  17. </html>

在这里插入图片描述

取色网站

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

总结

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

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

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

结语

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

发表评论

表情：
评论列表 （有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读