一.目的

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学院的导航按钮相关推荐

Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
【Web前端】html+css+javascript
1 HTML 1.1. HTML基本概念 HTML:hyper text markup language 超文本标记语言,就是超出纯文本范畴的语言,其中既可以定义文本也可以定义图片,超链接等等非文本性 ...
web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
Web前端三剑客之CSS基础
文章目录常识简介 css概述 CSS作用 CSS代码主要组成部分在页面中使用CSS 内联样式表内部样式表注意外部样式表 CSS选择器元素选择器注意类(class)选择器 ID选择器后 ...
css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
【从零入门 Web 前端】HTML5 + CSS 简明教程
HTML + CSS 就是当代网页的基石.全世界的网站,无论其服务器端的语言是什么,前端都使用了 HTML + CSS. 随着互联网行业的快速发展,前端这一职位也越来越火热,前端工程师的高薪资,也让越 ...
Web前端：HTML~CSS~JS
Web前端网页主要由3部分组成:结构.表现.行为.目前网页的新标准是W3C,模式是HTML.CSS.JavaScript,这是前端开发最核心的3个技术.前2个技术的最新版本分别为HTML5.CSS3 ...
web前端基础与CSS入门
web前端基础 1.嵌套列表注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...

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.运行结果：成功：

Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮相关推荐

最新文章

热门文章