【前端】学过一天的HTML+CSS后，能做出什么有趣的项目？

柔情只为你懂 2023-02-13 14:38 137阅读 0赞

以下内容为本人原创，欢迎大家观看学习，禁止用于商业及非法用途，谢谢合作！

**·作者：@Yhen  
·原文网站：CSDN  
·原文链接：https://blog.csdn.net/Yhen1/article/details/106426348**  
**转载请说明此出处，侵权必究！谢谢合作！**  
大噶好！我是Yhen！好久不见哈哈哈 ，今天给大家分享的是一个前端项目。有看过我之前文章的朋友可能会了解我之前都是玩python，那么为什么突然玩起了前端呢？

哈哈哈是这样的，其实早就想试试自己写网页了，然后发现python的django框架是做网站的，于是就去django了，学了一会发现，django是做后端的哦，好像不是写网页的hhh…我傻了，还有网站≠网页。

于是为了写网页，我开始学习前端…前天学习了一些基础的标签和css样式后，为了巩固我的知识和把它们套现，我就想用我所学到的前端知识做一些项目呢？

沉思片刻后，灵光一闪~对哇，我可以做一个调查问卷呀。

于是说干就干，昨天晚上开始着手制作，到今天下午制作完成.

## 一.思路分析 ##

首先我在问卷星官网找一篇调查问卷作为模板进行模仿实现

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 1]

原网页一共有17题  
共涉及到的表单有 单选 多选 文本框 和文本输入框

可以用以下表单样式实现

单选

多选

输入框

文本输入框（忘记是不是叫这个名字了，反正就是一个大框框）

## 二.效果展示 ##

这是我实现的效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 5]  
做出来的效果和原来的还是略显有点丑的  
但是毕竟还是小菜鸡嘛，还有很多要学习的  
能实现出来我已经很开心了

另外我在原来的基础上加了个重置按钮  
让用户操作更加便利

## 三.往期文章回顾 ##

[【爬虫+数据可视化】Yhen手把手带你爬取CSDN博客访问量数据并绘制成柱状图][Yhen_CSDN]

[【爬虫】Yhen手把手带你爬取去哪儿网热门旅游信息（并打包成旅游信息查询小工具][Yhen]

[【爬虫】Yhen手把手带你用python爬小说网站，全网打尽，想看就看！（这可能会是你看过最详细的教程）][Yhen_python]

[【实用小技巧】用python自动判断并删除目录下的空文件夹（超优雅）][python]

[【爬虫+数据库操作】Yhen手把手带你用pandas将爬取的股票信息存入数据库！][Yhen_pandas]

[【selenium爬虫】  
Yhen手把手带你用selenium自动化爬虫爬取海贼王动漫图片][selenium_ Yhen_selenium]

[【爬虫】秀才不出门，天下事尽知。你也能做到！Yhen手把手带你打造每日新闻资讯速达小工具。][Yhen 1]

[【爬虫】Yhen手把手带你用python爬取知乎大佬热门文章][Yhen_python 1]

[【爬虫】Yhen手把手教你爬取表情包，让你成为斗图界最靓的仔][Yhen 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200529155141146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200529155246531.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200529155641987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200529155701665.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200529155725627.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020052915574335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1loZW4x,size_16,color_FFFFFF,t_70
[Yhen_CSDN]: https://blog.csdn.net/Yhen1/article/details/105931210
[Yhen]: https://blog.csdn.net/Yhen1/article/details/105460969
[Yhen_python]: https://blog.csdn.net/Yhen1/article/details/105345343
[python]: https://blog.csdn.net/Yhen1/article/details/106231563
[Yhen_pandas]: https://blog.csdn.net/Yhen1/article/details/105882754
[selenium_ Yhen_selenium]: https://blog.csdn.net/Yhen1/article/details/105585188
[Yhen 1]: https://blog.csdn.net/Yhen1/article/details/105633416
[Yhen_python 1]: https://blog.csdn.net/Yhen1/article/details/105412841
[Yhen 2]: https://blog.csdn.net/Yhen1/article/details/105475370