下面两个100行代码，注释详实易懂，主要靠gpt，这么说，是不是，只要某些游戏网站是开源的，我把网址给gpt，它也能给我找来，并在每一行注释，然后我各种搜资料，那么是不是可以几天速成制作精美而新潮的网页
当然框架，数据库也得学， 道阻且长啊
目录
🌼前言
🍉代码之导航栏
👊效果
🍉代码之二级导航栏
👊效果
🌼学习方法
🌼前言
初学web前端，发现gpt特别好用
gpt给C++代码debug还是很好用的，虽然说给一道稍微需要思考变通的算法题，它很拉跨
gpt在前端方面（文科）还不错，在后端（理科）方面就有点蠢了
🍉代码之导航栏
以下代码的img随便找点资源，复制粘贴过来即可
注意的是，img和index.html要在同一项目下并列
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航栏</title> <style> *{ margin:0px; padding:0px; } .container{ width:700px; height:500px; background-color:#cccccc; margin:0 auto; /* 元素水平居中对其 */ } .nav{ width:100%; height:50px; background-color:greenyellow; /* 背景颜色能看到布局 */ } .nav ul{ margin-left:100px; } .nav li{ /* 该导航栏下的li */ font-weight: bolder; list-style-type:none; width:100px; height:50px; line-height:50px; /* 行高 */ float:left; /* 列浮动变行 */ background-color: antiquewhite; text-align:center; /* 文本居中 */ transition: all .3s ease-out; /* 鼠标悬停效果 */ /* all所有属性都添加悬停效果 .3s过渡效果持续0.3s ease-out过渡效果 } .nav a{ font-weight:bold; /* 加粗,棕色*/ color:brown; } .lefNav{ width:220px; background-color:#DEB887; } .lefNav li:not(.title){ height:40px; width:220px; line-height:40px; /*list-style-image: url(img/gray_dot.gif);*/ list-style-position: inside; background-image: url(img/arrow_r.jpg); background-repeat: no-repeat; background-position: right; border-bottom: 1px dashed #aa00ff; border-right: 1px dashed #55aa00; } .lefNav .title{ text-align:center; font-weight:bold; /* 加粗,棕色*/ list-style-type: none; width:220px; height:40px; line-height: 40px; background-image: url(img/left_navbg.jpg); background-repeat: no-repeat; } .lefNav li:hover:not(.title){ /* hover悬停 */ color: red; background-image: url(img/arrow.gif); background-repeat: no-repeat; background-position: right; } </style> </head> <body> <div class=container> <div class=nav> <ul> <li> <a href=http://oj.ecustacm.cn/problemset.php>NewOj</a> </li> <li> <a href=https://www.luogu.com.cn/>洛谷</a> </li> <li> <a href=https://www.lanqiao.cn/cup/?sort=students_count&category_id=3>蓝桥杯</a> </li> <li> <a href=https://www.acwing.com/activity/content/2869/>AcW</a> </li> <li> <a href=https://blog.csdn.net/csdner250?type=blog>CSDN</a> </li> </ul> </div> <div class=bottom> <div class=lefNav> <ul> <li class=title>按码龄</li> <li>1周</li> <li>1月</li> <li>3月</li> <li>1年</li> <li>3年</li> <li class=title>按技术</li> <li>1万行入门</li> <li>10万行精通</li> </ul> </div> <div class=main></div> </div> </div> </body> </html>
👊效果
代码看着长，120行，其实啥也没干
🍉代码之二级导航栏
100行，非常丑
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二级导航栏</title> <style> /* 定义CSS样式 */ *{ /* 重置元素默认样式 */ margin:0px; /* 去除外边距 */ padding:0px; /* 去除内边距 */ } .container{ /* 对整个容器.container进行设置 */ width:400px; height: 45px; background-color: #550000; position: relative; /* 相对定位 */ margin:0 auto; /* 左右自动居中 */ } .firseNav>li{ float:left; /* 列表左浮动，实现水平排列 */ list-style-type: none; /* 去除列表项默认圆点标记 */ height:45px; line-height:45px; /* 列表项行高 */ padding:0 30px; /* 列表项内边距-左右 */ color:#FFFFFF; /* 字体白色 */ position: relative; /* 相对定位 */ cursor: pointer; /* 鼠标放上变为手型 */ } .firseNav>li:hover{ /* 鼠标放上时显示样式 */ background-color:#6c6e0a; } .secondeNav{ position:absolute; /* 绝对定位，相对于父元素.container */ left:0; /* 距离父元素左边位置为0 */ top:45px; /* 距离父元素顶部位置45px */ background-color:#550000; display:none; /* 初始隐藏 */ min-width: 150px; /* 最小宽度 */ } .secondeNav>li{ position:relative; /* 相对定位 */ background-color: #00557f; color:#FFFFFF; /*字体颜色*/ padding:10px;/*内边距*/ text-align:center; height:45px; cursor:pointer; } .secondeNav>li:hover{ /* 鼠标放上显示样式 */ background-color: #fbd7b3; background-image: url(img/arrow.gif); background-repeat:no-repeat; } .threeNav{ /* 三级栏目 */ position:absolute; /* 绝对定位，相对父元素.secondeNav */ left:150px; /* 相对二级栏目左偏移150 */ top:0px; /* 距离父元素顶部位置为0 */ background-color: #aa998f; display:none; /* 初始隐藏 */ min-width:150px; /* 最小宽度 */ } .threeNav>li{ position:relative; /* 相对定位 */ padding:10px; /* 内边距 */ cursor:pointer; /*鼠标放上变手型*/ color:#FFFFFF; } .threeNav>li:hover{ background-color: #3B3B3B; } .firseNav>li:hover .secondeNav{ /* 鼠标放上显示样式 */ display:block; /* 显示下一级导航 */ } .secondeNav>li:hover .threeNav{ display:block; /*显示下一级导航*/ } </style> </head> <body> <!-- 网页主体 --> <div class=container> <!-- 容器.container，用于包含导航栏 --> <ul class=firseNav> <!-- 一级导航 --> <li>编程比赛 <ul class=secondeNav> <!-- 二级导航 --> <li><a href="https://blog.csdn.net/csdner250?type=blog">蓝桥杯</a> <!-- 第一个列表项 --> <ul class=threeNav> <!-- 无序列表必须放到li里嵌套 --> <li><a href="https://blog.csdn.net/csdner250/article/details/128796755?spm=1001.2014.3001.5502">目标省二</a></li> <li><a href="https://blog.csdn.net/csdner250/article/details/128963370?spm=1001.2014.3001.5502">力争省三</a></li> </ul> </li> <li>天梯赛</li> <li>挑战杯</li> <li>字节春招</li> </ul> </li> <li>asd</li> <li>gkg</li> <li>uyiy</li> </ul> </div> </body> </html>
👊效果
🌼学习方法
没有好的学习方法，多敲才对，然后多找些优秀案例，结合gpt，弄懂优秀案例中每一行代码，然后自己找点任务，去做自己喜欢的界面和文字
然而时间真的不够啊，要学（最近真的好忙，每天只能玩2个小时了。。。）
1，C++面向对象
2，前端（html5, css, javascript, vue）
3，Python机器学习
4，蓝桥杯
5，天梯赛
6，挑战杯（最近一周需2万字论文立项）
7，足球比赛
8，斯巴达勇士赛
9，线代，离散，高数
