人生第一页HTML

     茫茫网络，懵懵懂懂闯入CSDN社区，也想留下自己的一点足迹。

博主现就读于辽宁的某一所高校，在数字媒体技术专业勤勉探索者人生方向。
此篇博客也是博主第一次执念所文。抬起颤颤巍巍的双手，劈里啪啦地敲击着键盘，心中难免有所小激动。哈哈~
现已2020年的年初，按照常年计划现在已经踏上求学的旅途，但是由于新型冠状病毒疫情的缘故，推迟开学了，目前为止还未收到任何开学通知。湖北省及周围省份疫情十分严重，真的非常希望疫情能够快点结束，让正在一线奋战的医护人员能够放下担子，好好休息一番。但这仅是心中所想，不能为我所左右。在疫情发生期间，宅在家中，学习着WEB前端的浩瀚知识，盯着教程视频，像模像样的按照标签的属性，拼凑着属于自己的html理论体系，历时一个月左右的时间，学完了HTML+CSS基础，这看似时间很长。目前为止所接触的信息，得知有人在一个星期内能够入门，对于我自己的表现，似乎有点汗颜。自己又已极其缓慢的速度完成了HTML的第一次实战。完成之后，成就感十足，虽然感觉不是那么尽善尽美，但也是我的点滴之作。曾犹豫是否发布这糟粕之作，但是还是想借助网上工具，记录我成长的点滴。

*以下是博主实战51zxw.net首页HTML内容

!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>人生的第一页HTML</title><link rel="stylesheet" type="text/css" href="css/51zxw.css"/><link rel="stylesheet" type="text/css" href="css/reset.css"/></head><body><header><div class="content-box h-top"><a href="" class="logo"><img src="img/logo.png"/></a><form class="search"  method="post"><input class="inp-1 fl "  type="text" name="logo" placeholder="课程太多?搜一搜" /><input class="inp-r fl"  type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">注册/登录</a></div></div></header><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计课程</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav><!--导航结束--><!--幻灯片开始--><div class="hdp"><div class="content-box" ><div class="hdp-img"><a href=""><img src="img/201910101012295811.jpg" width="100%" height="100%"/></a></div><div class="wzgg"><h3>网站公告</h3><ul><li><a href="">★新版页面更新说明，欢迎测试使用</a></li></ul></div></div>    </div><!--幻灯片结束--><!--远程培训班开始-->      <div class="ycpxb content-box"><a class="a1" href="#"><span >远程培训班</span></a><a class="a2" href="#"><span class="span2">【与您同行】校园活动</span></a><a class="a3" href="#"><span >学习规划</span></a><a class="a4" href="#"><span >应聘讲师</span></a><a class="a5" href="#"><span >问答系统</span></a></div>
<!--远程培训班结束-->
<!--最新课程开始--><div class="zxkc content-box"><h3 class="m-title">最新课程</h3><div class="m-list zx-box clearfix"><a href="#"><img src="img/782.jpg"/><p>Excel VBA编程宝典1--初战篇</p></a><a href="#"><img src="img/781.jpg"/><p>HTML基础视频教程</p></a><a href="#"><img src="img/780.jpg"/><p>CREO 6.0视频教程</p></a><a href="#"><img src="img/779.jpg"/><p>UG NX12有限元分析视频教程</p></a><a href="#"><img src="img/778.jpg"/><p>出纳实训教程2019</p></a><a href="#"><img src="img/777.jpg"/><p>Hypermesh2017视频教程</p></a><a href="#"><img src="img/776.jpg"/><p>圆方软件教程--定制衣柜篇</p></a><a href="#"><img src="img/775.jpg"/><p>UE4蓝图交互教程--室内篇</p></a></div></div><!--最新课程结束-->
<!--热门推荐开始-->          <div class="zxtj content-box"><h3 class="m-title">热门推荐</h3><div class="rm-nav"><a href="#" class="rm-a">电脑办公</a><a href="#" class="rm-b">平面设计</a><a href="#" class="rm-b">室内设计</a><a href="#" class="rm-b">室外设计</a><a href="#" class="rm-b">影视动画</a><a href="#" class="rm-b">机械设计</a><a href="#" class="rm-b">工业自动</a><a href="#" class="rm-b">程序设计</a><a href="#" class="rm-b">网页设计</a><a href="#" class="rm-b">会计课程</a></div><div class="m-list rm-box clearfix"><a href="#"><img src="img/354.jpg"/><p>计算机基础知识教程</p></a><a href="#"><img src="img/649.jpg"/><p>Excel2016基础视频教程</p></a><a href="#"><img src="img/752.jpg"/><p>WPS2019视频教程（文字篇）</p></a><a href="#"><img src="img/676.jpg"/><p>PPT2016基础视频教程</p></a><a href="#"><img src="img/626.jpg"/><p>电脑打字完全教程</p></a></div></div>
<!--热门推荐结束-->
<!--课程分类开始--><div class="kcfl content-box"><h3 class="m-title">课程分类</h3>
<!--课程分类导航开始--><div class="kc-nav content-box"><a href="#" class="n-a">CorelDRAW</a><a href="#" class="n-a">Photoshop</a><a href="#" class="n-a">Illustrator</a><a href="#" class="n-a">InDesign</a><a href="#" class="n-a">ArtiosCAD</a><a href="#" class="n-a">方正飞腾</a><a href="#" class="n-a">服装设计/打版</a><a href="#" class="n-a">lightroom</a><a href="#" class="n-a">北京精雕</a><a href="#" class="n-a">彩铅手绘</a><a href="#" class="n-a">印刷制版</a><a href="#" class="n-a">单反相机</a><a href="#" class="n-a">SurfMill</a><a href="#" class="n-a">ArtForm</a><a href="#" class="n-a">Comicstudio</a><a href="#" class="n-a">ArtCAMUIVI</a><a href="#" class="n-a">Acrobat</a><a href="#" class="n-a">摄影修图</a><a href="#" class="n-b">更多>></a></div>
<!--课程分类导航结束--><div class="m-list kc-box clearfix"><a class="kc-a" href="#" ><img src="img/class1.jpg"/></a><a class="kc-b" href="#" ><img src="img/354.jpg"/><p>计算机基础知识教程</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>电脑打字完全教程</p></a><a class="kc-b" href="#"><img src="img/631.jpg"/><p>Word2016基础视频教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel2016基础视频教程</p></a>       </div></div>
<!--课程分类结束-->
<!--名师简介开始--><div class="msjj"  style="background: #FFFFFF;"><div class="content-box "><h3 class="m-title">名师简介</h3><p style="font-size: 20px;font-weight: 400;text-align: center;">专业讲师为你带来实用易懂的视频教程</p><div ><a href="#">更多>></a></div><div class="ms-box clearfix"><a href="#"><img src="img/t_lijiang.jpg" /><p class="p1">黄建彬 老师</p><p class="p2">自学网高级讲师，从事职业教育十多年<br />擅长Office软件的教学</p></a>                   <a href="#"><img src="img/t_huangjianbi.jpg" /><p class="p1">漓江 老师</p><p class="p2">10年教学与设计经验,功底深厚<br>学员遍布国内外</p></a><a href="#"><img src="img/t_tanying.jpg" /><p class="p1">谭应 老师</p><p class="p2">资深机械设计讲师<br />每套视频教程都有着相当高的人气</p></a><a href="#"><img src="img/t_xieling.jpg" /><p class="p1">谢灵 老师</p><p class="p2">从事室内装饰设计行业十多年，经验丰富<br />拥有多套高质量教程</p></a></div></div> </div><!--名师简介结束-->
<!--页面尾部开始--><footer class="content-box"><p class="f-p1"><b>网站信息</b><span>建站时间: 2007年6月7日</span><span>教程数量:88363</span><span>注册人数 :19694730</span></p><p class="f-p2"><b>友情链接</b><a href="#"><img src="img/baidu.png"/></a><a href="#"><img src="img/360.png"/></a><a href="#"><img src="img/rising_51.png"/></a><a href="#"><img src="img/rising_51.png"/></a><a href="#"><img src="img/baidu.png"/></a></p><p class="f-p3">                 <a href="#">大耳朵英语</></a><a href="#">上学吧</></a><a href="#">3d模型</></a>   <a href="#">中华室内设计网</></a><a href="#">UI制作者</a><a href="#">华图教育</a><a href="#">律师365</a><a href="#">高分网</a><a href="#">中华考试网</a><a href="#">百分网</a><a href="#">河源下载站</a><a href="#">读书人</a><a href="#">精英家教网</a><a href="#">漫漫看漫画</a>        <a href="#">2345导航</a><a href="#">FLVCD</a><a href="#">源码爱好者</a><a href="#">学习啦</a><a href="#">站长网</a><a href="#">考研网</a><a href="#">思缘设计论坛</a><a href="#">学习方法</a><a href="#">多多软件站</a><a href="#">中公教育</a><a href="#">电脑报在线</a><a href="#">数码资源网</a><a href="#">w3cschool</a><a href="#">新浪爱问分享</a><a href="#">Edong网</a></p>      <p class="f-p4">  <a href="#">关于网站</></a><a href="#">关于我们</a>   <a href="#">网站地图</a><a href="#">建议留言</a><a href="#">购买教程</a><a href="#">在线咨询</a><a href="#">业务合作</a></p><p class="f-p5"><span>我要自学网,版权所有.未经许可,本网站任何视频教程不得转载 法律顾问：刘炜律师 粤ICP备07074235号 公安局备案编号:4406043010753 客服电话: 4008-3232-13 </span><a href="#"><img src="img/pic.gif"/></a></p><div class="f-p6">  <a href="#"><img src="img/footPic1.png"/></a><a href="#"><img src="img/footPic2.png"/></a></div</footer><!--页面尾部结束-->
<!--快速跳转开始--><div class="kstz"><h4>快速跳转</h4><a class="active" href="#">最新<br />课程</a><a href="#">热门<br />推荐</a><a href="#">课程<br />分类</a><a href="#">热门<br />职业</a><a href="#">名师<br />简介</a>    </div>
<!--快速跳转结束-->
<!--右侧微信区块开始--><div class="ycwx"><a class="vx" href="#"><span>官方<br />微信</span><img src="img/wx.png"/></a><a class="qq" href="#"><span>官方<br />QQ</span></a><a class="app" href="#"><span>APP<br />下载</span></a></a><a class="top" href="#"><span>返回<br />顶部</span></a></div>
<!--右侧微信区块结束-->
<!--End--></body></html>

CSS文件

/公共样式/
.content-box{width: 1200px; margin: 0 auto;}
.m-title{
width:100% ;height: 110px;text-align: center;
background: url(…/img/redline.png) no-repeat center;
font-weight: 400px;
font-size: 30px;
padding: 35px;

}
.m-list a{
display: block;float: left;border-radius: 15px;
box-shadow: 0 0 10px #CCCCCC;
overflow: hidden;

}
.m-list a p:hover{
color: dodgerblue;
}
.m-list a img{
-webkit-filter: opacity(100%);
filter: opacity(100%);
}
.m-list a:hover img{
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
.m-list a p{
height: 30px;line-height:30px ;
overflow: hidden;
font-size: 13px;
}

/公共样式/

/header 开始/
/logo,搜索,用户信息开始/
.h-top{
height: 110px;position: relative;

}
.h-top .logo{
width: 270px;height: 70px;display: block;
position: absolute;left: 0;top: 20px;
}
.h-top .search{
width: 395px;height: 48px;
border-radius: 30px ;
border: 1px #CCCCCC solid;
background: #FFFFFF;
position: absolute;
left: 50%;margin-left: -165px;top: 27px;
overflow: hidden;

}
.h-top .search .inp-1{

width: 313px;height: 46px;
border: none;
font-size: 20px;
padding: 0 20px;

}
.h-top .search .inp-r{

width: 80px;height: 48px;
border-radius:30px ;
background: #ACCE22;

}
.h-top .user{

width: 200px;height: 25px;
line-height:25px ;position: absolute;right: 20px;top: 40px;

}
.h-top .user a{
display: inline;
line-height: 30px;
color: #000000;
width: 90px; height: 25px;
text-align: center;
font-size: 16px;

}
/logo,搜索,用户信息结束/
/导航开始/
nav{
background: #363636 ;
}
nav .nav-box{
height: 66px;line-height: 66px;

}
nav .nav-box .nav-l{
width: 850px;
}

nav .nav-box .nav-l a{
display: block;line-height: 66px;width: 85px;float: left;
color: #FFFFFF;

}
nav .nav-box .nav-l a:hover{
color: #00AEFF;
}
nav .nav-box a{
font-size: 16px;
}
nav .nav-box .nav-r{
width: 225px;
}
nav .nav-box .nav-r a{
display: block;line-height: 66px;width: 65px;float: left;
color: #FFFFFF;
text-align: center;
}
nav .nav-box .nav-r a:hover{
background: #CA3333;
}
/导航结束/
/幻灯片开始/
.hdp{
background: #FF9000 ;
position: relative;
}
.hdp-img a{
display: block;
width: 1200px;
height: 330px;
}

/幻灯片结束/

/网站公告开始/

.hdp .content-box .wzgg{
width: 275px ;height:300px ;
background: rgba(0,0,0,0.7);
border-radius: 15px;
padding: 15px;
position: absolute;
top: 10px;
right: 215px;

}
.hdp .content-box .wzgg h3{
text-align: center;
color: #FFFFFF;
}
.wzgg ul li{
list-style: disc;
color: #FFFFFF;
}
.wzgg ul li a{
color: #FFFFFF;
}
/网站公告结束/

/远程培训班开始/
.ycpxb{
height:200px ;
background: #FFFFFF;

}
.ycpxb a{
width: 200px;
height:140px ;
display: block;
float: left;
background: no-repeat 0 0/100% 100%;
border-radius: 17px;
margin: 30px 17px;
overflow: hidden;

}
.ycpxb .a1{
background-image: url(…/img/otherFun1.jpg);

}
.ycpxb .a2{
background-image: url(…/img/otherFun2.jpg);
}
.ycpxb .a3{
background-image: url(…/img/otherFun3.jpg);
}
.ycpxb .a4{
background-image: url(…/img/otherFun4.jpg);
}
.ycpxb .a5{
background-image: url(…/img/otherFun5.jpg);
}
.ycpxb a span{
text-align: center;
color: #FFFFFF;
font-weight: 700;
text-shadow: 2px 3px 4px black;
font-size: 24px;
line-height: 140px;
}
.ycpxb a span{
display: block;width: 100%;height: 100%;background: rgba(0,0,0,0.3);

}
.ycpxb a .span2{
line-height: normal;
padding: 28px;
}
.ycpxb a:hover{
background-size: 110% 110%;
}

/远程培训班结束/
/最新课程开始/
.zx-box{
width: 100%;height: 650px;
}
.zx-box a{
width: 270px;height: 280px;
border-radius: 10px;
margin: 15px 15px;

}
.zx-box a img{
width: 270px;height: 250px;

}
.zx-box a p{
height: 30px;line-height: 30px;
padding: 0 1em;
}

/最新课程结束/
/热门推荐开始/

.zxtj .rm-box{
width: 1200px;height:350px ;

}
.zxtj .rm-box a{
width: 210px;height: 211px;
float: left;
margin: 12px ;

}
.rm-box a img{
width:210px ;height: 191px;
}
.rm-box a p{
height: 20px;line-height: 20px;
padding: 0 1em;

}

.rm-nav a{
display: block;

margin: 30px;
height: 25px;
float: left;
line-height: 25px;
text-align: center;

}
.rm-nav .rm-a{

background: dodgerblue;
border-radius: 4px;
width: 65px;
height: 25px;
line-height: 25px

}
.rm-nav .rm-b:hover{
color: dodgerblue;
}
/热门推荐结束/

/课程分类导航开始/
.kcfl .kc-nav {
padding: 0px 150px 0px 15px;
position: relative;
word-break: keep-all;
}
.kcfl .kc-nav .n-a{
padding: 0px 20px 0px 0px;
}
.kcfl .kc-nav .n-b{
display: block;width:50px ;height: 25px;
line-height: 25px;
background: #00AEFF;
text-align: center;
border-radius: 5px;
position: absolute;
right: 25px;
bottom: 0px;

}

.kcfl .kc-nav .n-a:hover{
color: #0066CC;
}
/课程分类导航结束/
/课程分类开始/
.kcfl{
width: 1200px;
}

}

.kc-box a{
width:210px

}
.kc-box .kc-b{
height: 200px;
float: left;
margin:18px ;
}
.kc-box .kc-b img{
width: 210px;
height: 170px;

}
.kc-box .kc-b p{
padding: 0 1em;
}
.kc-box .kc-a{
height:160px ;
margin: 37px 18px;

}
.kc-box .kc-a img{
height:160px ;

}

/课程分类结束/
/名师简介开始/
.msjj{

padding-bottom:70px ;

}

.ms-box a{
float: left;
background: #E7E7E7;
width: 248px;
height: 320px;
margin: 30px 52px 0 0 ;
text-align: center;

}
.ms-box a img{

text-align: center;
border-radius: 50%;
margin-top: 40px ;

}
.ms-box a .p1{
font-weight: 400;
font-size: 20px;
padding-top: 20px;

}
.ms-box a .p2{
padding-top: 8px;
color: #6B6B6B;
font-size: 13px;

}

/名师简介结束/
/页面尾部开始/
footer{

padding: 10px 0 ;
background: #F3F3F3;

}
footer .f-p1 b{
display: inline-block;margin: 10px 30px;
text-align: center;
}
footer .f-p1 span{
margin: 0 5px;text-align: center;
}
footer .f-p2 b{
display: inline-block;margin: 10px 30px;text-align: center;
}
footer .f-p2 a{
padding: 0 10px;text-align: center;
}
footer .f-p2 a img{
height: 25px;
}
footer .f-p3 {
margin-left:128px ;
margin-top:10px;

}
footer .f-p3 a{
display: inline-block;
height: 25px;
line-height: 20px;
margin: 0 10px;
font-size: 13px;
}
footer .f-p3 a:hover{
color: #0066CC;
}
footer .f-p4{
margin-top: 25px ;
text-align: center;
}
footer .f-p4 a{
display: inline-block;
width: 65px;height: 20px;
line-height: 4px;
padding: 8px;
background: #3899DD;
border-radius: 4px;
font-size: 12px;
color:#FFFFFF;
}
footer .f-p5{
margin-top: 15px ;
text-align: center;
font-size: 12px;
}
footer .f-p5 a img{
display: inline-block;
height: 10px;
width: 50px;
vertical-align: middle;
}
footer .f-p6{
margin-top:10px;
text-align: center;
}
/页面尾部结束/
/快速跳转开始/
.kstz {

width: 90px;
text-align: center;
position: fixed;
top: 150px;
left:50px;

}
.kstz a{
display: block;
background: #FFFFFF;
border-radius: 50%;
margin: 15px;
height: 60px;
padding: 8px;
box-shadow: 0 0 6px;

}
.kstz h4{
color: #5A98DE;margin-bottom: 10px;
}

/快速跳转结束/
/右侧微信区块开始/
.ycwx{

position: fixed;top: 200px;
left: 50%;margin-left: 620px;

}
.ycwx a{
display: block;
width: 70px;
height: 70px;
margin-bottom:10px ;
background: #CCCCCC;
border-radius: 4px;box-shadow: 0 0 8px #ccc;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
.ycwx a span{
display: none;
font-weight: 500;
}
.ycwx .vx{
background: url(…/img/wxIcon.png) no-repeat center; position: relative;
}
.ycwx .qq{
background: url(…/img/qqIcon.png) no-repeat center;
}
.ycwx .app{
background: url(…/img/mobileIcon.png) no-repeat center;
}
.ycwx .top{
background: url(…/img/upArrowIcon.png) no-repeat center;
}

.ycwx img{
display: none;
}
.ycwx a:hover span{
display: block;
}
.ycwx a:hover{
background: none;
}
.ycwx .vx:hover img{
display: block;
}
.ycwx .vx img{
display: none;position: absolute;top: -10px;left: -180px;
}
/右侧微信区块结束/
/End/

css（reset文件）
*{margin: 0;padding: 0;
box-sizing: border-box;}
body{font-size: 14px;font-family: “微软雅黑”;color: #333333; background: #F3F3F3 ;}
b{font-weight: normal;}
i{font-style: normal;}
a,a:hover,a:active{text-decoration: none;color: #333333;}
input,textarea,select{outline:none}
img{border: none;vertical-align: top;}
li{list-style: none;}
.cl{clear: both;}
.clearfix::after{content: “”;display: table;clear: both;}
.fl{float: left;}
.fr{float: right;}

博主相信其中必定有bug，存有瑕疵。如有意向，有幸被指点，也是博主之幸运。

——————————小清流吖————————————
第一次发博客，排版可能存有问题，还望各位大佬见谅。 ——————————小清流吖————————————