人生 第一页HTML
人生 第一頁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{
}
.h-top .search .inp-r{
}
.h-top .user{
}
.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;
}
.rm-nav .rm-a{
}
.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{
}
.ms-box a{
float: left;
background: #E7E7E7;
width: 248px;
height: 320px;
margin: 30px 52px 0 0 ;
text-align: center;
}
.ms-box a img{
}
.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{
}
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 {
}
.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{
}
.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，存有瑕疵。如有意向，有幸被指點，也是博主之幸運。
——————————小清流吖————————————
第一次發博客，排版可能存有問題，還望各位大佬見諒。 ——————————小清流吖————————————
總結
以上是生活随笔為你收集整理的人生 第一页HTML的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pdf介绍及pdf相关软件（内容来自百度
- 下一篇： html编码写出滚动字幕,HTML滚动字