下面两个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，线代，离散，高数
