Web前端二级导航栏设计
下面两个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，线代，离散，高数
