Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
生活随笔
收集整理的這篇文章主要介紹了
Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
一.目的
1.想：學習前端知識
2.想：記錄筆記，下次不用看視頻，直接看筆記就可以快速回憶。
二.參考
?1.我自己代碼的GitHub網址
1.SIKI學院:我參考此視頻實操
1.w3school官網:當做字典使用
1.菜鳥教程：當做字典使用
三.注意
四.操作:1:成功:505-SiKi學院首頁布局分析+506-開發右側學習中心鏈接樣式
1.運行結果：成功：
四.操作:2:成功:507-切分SiKi學院的布局?
1.運行結果：成功：
四.操作:3:成功:508-開發SiKi學院的導航按鈕
1.運行結果：成功：
一.目的
1.想：學習前端知識
2.想：記錄筆記，下次不用看視頻，直接看筆記就可以快速回憶。
二.參考
?1.我自己代碼的GitHub網址
?????GitHub - xzy506670541/WebTest: SIKI學院的Web前端
1.SIKI學院:我參考此視頻實操
Web前端第二季（CSS） - SiKi學院 - 生命不息，學習不止！
1.w3school官網:當做字典使用
w3school 在線教程
1.菜鳥教程：當做字典使用
菜鳥教程 - 學的不僅是技術，更是夢想！
三.注意
四.操作:1:成功:505-SiKi學院首頁布局分析+506-開發右側學習中心鏈接樣式
1.運行結果：成功：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">body{margin: 0px;padding: 0px;}.bar_menu{width: 35px;background-color: #FFFFFF;position: fixed;top: 0px;bottom: 0px;right: 0px;border-left: 1px solid aliceblue; }.bar_menu a{display: block;margin-top: 100px;width: 35px;text-align: center;color: #616161;font-size: 14px;padding: 20px 0px;}/* 偽類 */.bar_menu a:hover{cursor: :pointer;/* 移動上面鼠標圖標變換 */background-color: #43bc60;color: white;/* 字體白色 */}</style></head><body><div class="bar_menu"><a>學<br/>習<br/>中<br/>心<br/></a></div></body> </html>四.操作:2:成功:507-切分SiKi學院的布局?
1.運行結果：成功：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">body{margin: 0px;padding: 0px;}.bar_menu{width: 35px;background-color: #FFFFFF;position: fixed;top: 0px;bottom: 0px;right: 0px;border-left: 1px solid aliceblue; }.bar_menu a{display: block;margin-top: 100px;width: 35px;text-align: center;color: #616161;font-size: 14px;padding: 20px 0px;}/* 偽類 */.bar_menu a:hover{cursor: :pointer;/* 移動上面鼠標圖標變換 */background-color: #43bc60;color: white;/* 字體白色 */}.nav{height: 56px;padding: 0px 10px;background-color: #212121; }.slider{height: 451px;}.course_list{min-height: 500px;}.class_list{min-height: 500px;}.introduction{height: 422px;background-color: #43bc60;}.footer_link{height: 254px;background-color: #2e2e2e;}.copyright{height: 105px;background-color:#212121 ;}</style></head><body><div class="bar_menu"><a>學<br/>習<br/>中<br/>心<br/></a></div><div class="nav"></div><div class="slider"></div><div class="course_list"></div><div class="introduction"></div><div class="footer_link"></div><div class="copyright"></div></body> </html>四.操作:3:成功:508-開發SiKi學院的導航按鈕
1.運行結果：成功：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">body {margin: 0px;padding: 0px;}.bar_menu {width: 35px;background-color: #FFFFFF;position: fixed;top: 0px;bottom: 0px;right: 0px;border-left: 1px solid aliceblue;}.bar_menu a {display: block;margin-top: 100px;width: 35px;text-align: center;color: #616161;font-size: 14px;padding: 20px 0px;}/* 偽類 */.bar_menu a:hover {cursor: :pointer;/* 移動上面鼠標圖標變換 */background-color: #43bc60;color: white;/* 字體白色 */}.nav {height: 56px;padding: 0px 10px;background-color: #212121;}.nav_left {height: 56px;float: left;}.nav_left img {height: 50px;margin-top: 3px;margin-left: 5px;display: block;float: left;}.nav_left ul {/* 有序列表不顯示圓點 */list-style-type: none;float: left;/* 上下居中 */margin: 0px;padding: 0px 0px 0px 40px;}.nav_left ul li { float: left;font-size: 14px;color: #fff;line-height: 56px;/* 上下居中 */margin: 0px 40px 0px 0px;padding: 0px;}.nav_right {width: 56px;float: right;}.slider {height: 451px;}.course_list {min-height: 500px;}.class_list {min-height: 500px;}.introduction {height: 422px;background-color: #43bc60;}.footer_link {height: 254px;background-color: #2e2e2e;}.copyright {height: 105px;background-color: #212121;}</style></head><body><div class="bar_menu"><a>學<br />習<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"></div><div class="course_list"></div><div class="introduction"></div><div class="footer_link"></div><div class="copyright"></div></body> </html>總結
以上是生活随笔為你收集整理的Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 发布个人项目jar包到maven中央仓库
- 下一篇： ppt html结构,HTML文档的基本