siki学院首页仿写
生活随笔
收集整理的這篇文章主要介紹了
siki学院首页仿写
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這次的網頁是跟著siki學院的視頻寫的，自認為網頁技術不太行，所以專門利用假期的一段時間來學習一下，先上兩張我的作品圖
網頁地址：siki學院首頁仿寫
在這次仿寫中我學到了新的知識，特地整理出來，為了以后可以方便復習
1.右側菜單欄
這里要注意不能將高度設成百分比的形式，比如說100%，因為屏幕的高度是不確定的。
可以這樣設置，將菜單欄設置成固定定位，并且將上下右邊距top，bottom，right都設為0px
2.導航欄
導航欄是分左右兩個部分的，左邊是siki的logo還有一些文字，右邊是搜索框和用戶頭像。 這里只說左部分的制作方法。因為logo的圖片高度跟導航欄的高度不一樣，所以我們要將logo的高度設置跟導航欄的高度一致或者更小，同時logo圖片的寬度會等比例縮放，因為圖片與上下都有邊距，所以我們將高度設置的更小一些50px，margin=3px，兩者之和恰好等于56px。注意img標簽是行內元素，但是margin是塊元素的屬性，所以要將img標簽設置為block屬性。 左部分的文字部分我們采用無序列表的形式，但是發現文字豎向排列，因為li標簽是塊類元素，如何讓塊類元素橫向排列，在ul li 標簽下可以設置display：inline-block，也可以設置成float：left，讓塊元素向左浮動。3.滑動圖片
滑動圖片這一部分，為了讓圖片居中，不能使用text-align：center，要使用屬性margin：0px auto。同時要將display設置為block
4.整體布局
除了以上說的，還有course_list, class_list，我將他們的最小高度設置成500px，然后在course_list中加入課程信息，按計劃說，course_list的高度會被撐大，但是結果顯示課程信息占據了下方class_list的位置，這是因為float屬性使塊類元素脫離普通文檔流，呈現浮動效果，要想清除浮動的影響，就要在最后一個course下面加上一個clear類的div，設置clear：both
下面是代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">body{padding: 0px;margin: 0px;background-color: #f5f8fa;}.bar_menu{background-color:#ffffff;width:35px;/*height: 100%;*/position: fixed;top: 0px;bottom: 0px;right: 0px;border: 1px solid gray;}.bar_menu a{display: block;margin-top: 100px;width: 35px;text-align: center;color: #616161;font-size: 10px;padding: 20px 0px;}.bar_menu a:hover{background-color: #43bc60;cursor: pointer;/*padding: 20px auto;*/color: white;}.nav{background-color: #212121;padding:0px 10px;height: 56px;}.nav_left{height: 56px;float: left;}.nav_left img{display: block;float: left;height: 50px;margin: 3px;}.nav_left ul{list-style-type: none;float: left;margin: 0px;padding: 0px;margin: 0px 0px 0px 40px;/*display: inline-block;*/}.nav_left ul li{margin: 0px 40px 0px 0px;padding: 0px;/*float: left;*/display: inline-block;font-size: 14px;color: #C1C1C1;line-height: 56px;}.nav_right{height: 56px;float: right;}.slider{height: 451px;background-color: #3b369c;}.slider img{display: block;height: 451px;/*text-align: center;*/margin: 0px auto;}.course_list{min-height: 500px;}.course_list h2{font-size: 32px;color: #313131;font-weight: 500;text-align: center;margin-top: 50px;margin-bottom: 10px;}.course_list h4{font-size: 16px;color: #919191;text-align: center;font-weight: 400;/*margin-top: 0px;*/}.course_nav{width: 1170px;margin: 40px auto 0px;/*color: #616161;font-size: 14px;*/height: 80px;}.course_nav a{margin-right: 30px;padding: 10px 15px 10px 15px;border-radius: 3px;color: #616161;font-size: 14px;cursor: pointer;}.selected{background-color: #43bc60;color: white !important;}.course_nav a:hover{background-color:#e1e1e1;}.course_container{width: 1170px;min-height: 30px;margin: 0px auto;/*background-color: blue;*/}.course{width: 248px;margin: 0px 10px;padding: 0px 10px;height: 230px;/*background-color: green;*/border: 1px solid #E1E1E1;border-radius: 5px;background-color: white;float: left;margin-top: 30px;}.course img{width: 248px;margin-top: 10px;}.course_title{display: block;font-size: 14px;color: #616161;margin-top: 20px;}.course .person{width: 20px;height: 20px;margin-top: 10px;}.course .number{font-size: 14px;color: #c1c1c1;position: relative;bottom:6px ;}.class_list{min-height: 500px;}.introduction{height: 329px;background-color: green;}.foot_link{height: 254px;background-color: #2e2e2e;}.copyright{height: 105px;background-color: #212121;}.clear{clear: both;}</style></head><body><div class="bar_menu"><a>學<br/>習<br/>中<br/>心</a></div><div class="nav"><div class="nav_left"><img src="img/logo.png" /><ul><li>首頁</li><li>全部課程</li><li>Unity</li><li>虛幻</li><li>關于我們</li></ul></div><div class="nav_right"></div></div><div class="slider"><img src="img/a.png" /></div><div class="course_list"><h2>網校課程</h2><h4>精選網校課程，滿足你的學習興趣。</h4><div class="course_nav"><a class="selected">全部課程</a><a>Unity</a><a>Unreal</a><a>JavaEE</a></div><div class="course_container"><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="course"><img src="img/c.png" /><span class="course_title">C#編程-第一季-編程基礎</span><img class="person" src="img/person.png" /><span class="number">233</span></div><div class="clear"></div></div></div><div class="class_list"></div><div class="introduction"></div><div class="foot_link"></div><div class="copyright"></div></body> </html>總結
以上是生活随笔為你收集整理的siki学院首页仿写的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Checksum算法
- 下一篇： adwcleaner_Malwareby