学成在线

学成在线/CSS第五天-学成在线.md

@@ -0,0 +1,239 @@
+# 1. 学成在线页面制作
+
+### 目标
+
+- **理解**
+  - 能够说写单页面我们基本的流程
+  - 能说出常见的css初始化语句
+  - **能说出我们CSS属性书写顺序**
+- **应用**
+  - 能利用ps切图
+  - 能引入外部样式表
+  - 能把psd文件转换为html页面
+
+学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。
+
+**pink老师：**
+
+取义**学有所成**，为师之期望，君等成才者也，故曰学成网是也~~
+
+## 1.1 前期准备素材
+
+* 学成在线PSD源文件
+* 开发工具  =  PS（切图） +  sublime（代码） + chrome（测试）
+
+## 1.2 前期准备工作
+
+欲先善其事，必先利其器。 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。
+
+1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)
+2. study目录内新建images 文件夹 用于保存图片。
+3. 新建index.html 首页html 文件（以后我们的网站首页统一规定为index.html)
+4. 新建style.css 样式文件。 我们本次采用外链样式表。
+5. 将样式引入到我们HTML页面文件中。
+6. 样式表写入 清除内外边距样式，来检测样式表是否引入成功。
+
+## 1.2 CSS属性书写顺序(重点)
+
+建议遵循以下顺序：
+
+1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
+2. 自身属性：width / height / margin / padding / border / background
+3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
+4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
+
+```css
+.jdc {
+    display: block;
+    position: relative;
+    float: left;
+    width: 100px;
+    height: 100px;
+    margin: 0 10px;
+    padding: 20px 0;
+    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+    color: #333;
+    background: rgba(0,0,0,.5);
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -o-border-radius: 10px;
+    -ms-border-radius: 10px;
+    border-radius: 10px;
+}
+```
+
+## 1.3 布局流程
+
+为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：
+
+1、必须确定页面的版心（可视区）， 我们测量可得知。
+
+2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成
+
+3、制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
+
+4、然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
+
+## 1.4 页面制作
+
+这个页面的版心是 1200像素   每个版心都要水平居中对齐，所以，我们干脆把版心定义为：
+
+~~~css
+.w {
+    width: 1200px;
+    margin: auto;
+}
+~~~
+
+#### 1) 头部制作
+
+结构图如下：
+
+<img src="media/1.png" />
+
+* 1号是版心盒子header  1200 *  42 的盒子水平居中对齐, 上下给一个margin值就好了。
+* 版心盒子 里面包含 2号盒子 logo
+* 版心盒子 里面包含 3号盒子 nav导航栏
+* 版心盒子 里面包含 4号盒子 search搜索框
+* 版心盒子 里面包含 5号盒子 user个人信息
+* 注意，要求里面的 4个盒子 必须都浮动
+
+#### 2）banner制作
+
+结构图如下：
+
+<img src="media/2.png" />
+
+
+
+* 1号盒子是通栏的大盒子banner， 不给宽度，给高度，给一个蓝色背景。
+* 2号盒子是版心， 要水平居中对齐。
+* 3号盒子版心内，左对齐 subnav侧导航栏。
+* 4号盒子版心内，右对齐  course 课程。
+
+#### 3）课程表模块
+
+结构图如下：
+
+ <img src="media/6.png" />
+
+* 1号盒子 是  228 * 300 的盒子 右浮动  注意 浮动的元素 不会有外边距塌陷的问题
+* 1号盒子内 分为 上下 两个 子盒子
+* 2号子盒子是 上部分  我们命名为 course-hd    (hd  是  head  的简写 头部的意思，我们经常用)
+* 3号子盒子是 下部分  我们命名为 course-bd    (bd  是  body  的简写 主体的意思，我们经常用)
+
+#### 4）精品推荐小模块
+
+结构图如下：
+
+<img src="media/3.png" />
+
+* **复习点：**  因为里面三个盒子都要垂直居中，我们利用 继承性，给 最大的盒子 一个垂直居中的代码就好了，还记得 那些 样式可以继承吗？？？ font-  line-  text- color
+* 大盒子水平居中 goods  精品 ，注意此处有个盒子阴影
+* 1号盒子是标题 H3  左侧浮动
+* 2号盒子 里面放链接  左侧浮动  goods-item    距离可以控制链接的 左右外边距（注意行内元素只给左右内外边距）
+* 3号盒子 右浮动 mod 修改
+
+
+
+####  5）精品推荐大模块
+
+结构图如下：
+
+<img src="media/4.png" />
+
+* 1号盒子为最大的盒子 box  版心水平居中对齐
+* 2号盒子为上面部分 box-hd  -- 里面   左侧标题H3 左浮动   右侧 链接 a 右浮动
+* 3号盒子为底下部分 box-bd --- 里面是无序列表 有 10个 小li 组成
+* 小li 外边距的问题， 这里有个小技巧。  给box-hd 宽度为 1215 就可以一行装开5个 li了
+* 复习点：  我们用到清除浮动  因为 box-hd 里面的盒子个数不一定多少，我们就不给高度了，但是里面的盒子浮动了， 影响下面的布局，此时需要浮动
+
+#### 6） 底部模块制作
+
+结构图如下：
+
+<img src="media/5.png" >
+
+* 1号盒子通栏大盒子 底部 footer  给高度  底色是白色
+* 2号盒子版心水平居中
+* 3号盒子版权 copyright  左对齐 
+* 4号盒子 链接组 links  右对齐
+
+
+# 2. chrome调试工具
+
+“工欲善其事，必先利其器”
+
+Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie，还可以模拟手机进行调试。我们现在只是使用html和css，我们先讲一下现在常用的调试。
+
+## 2.1 怎样打开Chrome的开发者工具？
+
+直接在页面上点击右键，然后选择  “检查”     快捷键    F12  或者   ctrl+shift+i
+
+ <img src="media/chrome1.png" />
+
+基本的结构布局是左边html 右边是 css
+
+<img src="media/chrome2.png" />
+
+### chrome调试数值
+
+可以鼠标点击后面的数值，  按下键盘  上箭头 是 调大 数值， 下箭头是 调小数值
+
+<img src="C:\Users\itcast\Desktop\前端基础CSS第五天\笔记\media\chrome5.png" />
+
+
+
+
+
+### 快速定位css所在行数
+
+<img src="C:\Users\itcast\Desktop\前端基础CSS第五天\笔记\media\chrome6.png" />
+
+
+
+
+
+## 2.2 Chrome提示的常见布局错误
+
+### 1). css单词书写错误提示
+
+用下图所示的黑色箭头，点击我们需要的 html 元素。
+
+<img src="media/chrome3.png" />
+
+### 2). css无显示
+
+声明类名和html调用名不一致   或者   css文件引入不对  或者  这个样式的前面 多余了一些符号影响的
+
+<img src="media/chrome4.png" />
+
+### 3). html 结构不匹配(重要) 
+
+左侧   展开可以看到html 标签是否匹配
+
+ <img src="media/chrome7.png" />
+
+### 4). 通过颜色判断盒子
+
+蓝色是 盒子的 宽度高度     青色是 内边距     橙色 是外边距   通过这个很方便的看到盒子给的范围
+
+ <img src="media/chrome8.png" />
+
+### 5）看看你有如下错误吗
+
+ <img src="media/a.png" />
+
+ <img src="media/b.png" />
+
+ <img src="media/c.png" />
+
+ <img src="media/d.png" />
+
+
+
+ <img src="media/e.png" />
+
+
+
+

学成在线/style.css

@@ -0,0 +1,264 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+.w {
+	width: 1200px;
+	margin: auto;
+}
+li {
+	list-style: none;
+}
+a {
+	text-decoration: none;
+}
+.clearfix:before,
+.clearfix:after {
+	content: "";
+	display: table;
+}
+.clearfix:after {
+	clear: both;
+}
+.clearfix {
+	*zoom: 1;
+}
+.header {
+	height: 42px;
+	/*background-color: pink;*/
+	margin: 30px auto;
+}
+.header img {
+	float: left;
+	margin-right: 10px;
+}
+body {
+	background-color: #f3f5f7;
+}
+.nav ul li a {
+	float: left;
+	line-height: 42px;
+	margin-left: 45px;
+	font-size: 18px;
+	color: #050505;
+}
+.nav ul li a:hover {
+    border-bottom: 2px solid #00a4ff;
+}
+.search input {
+	float: left;
+	height: 38px;
+	width: 360px;
+	margin-left: 95px;
+	border: 1px solid #00a4ff;
+	border-right: 0px;
+}
+.search button {
+	float: left;
+	border: none;
+	height: 40px;
+	width: 50px;
+    background: url(images/04.jpg);
+}
+.user {
+	float: left;
+	font-size: 14px;
+	border-left: 30px;
+	margin-left: 35px;
+	color: #00a4ff;
+	line-height: 40px;
+	color: #00a4ff;
+}
+.banner {
+	height:420px;
+	background: #1c036c url(images/06.jpg) no-repeat top center;
+}
+.left {
+	float: left;
+	width: 150px;
+	height: 420px;
+	padding: 0 20px;
+	background: rgba(0,0,0,.3);
+}
+.left ul li {
+	height: 45px;
+	line-height: 45px;
+}
+.left ul li a {
+	color: #fff;
+	font-size: 14px;
+}
+.left ul li span {
+	float: right;
+}
+.left ul li a:hover {
+	color: #00a4ff;
+}
+.right {
+	float: right;
+	width: 230px;
+	height: 300px;
+	margin-top: 50px;
+	background: #fff;
+}
+.right .hd {
+	height: 48px;
+	background: #9bceea;
+	line-height: 48px;
+	text-align: center;
+	font-size: 18px;
+	font-weight: 700;
+	color: #fff;
+}
+.bd ul li {
+	padding: 15px 20px;
+	border-bottom: 1px solid #a5a5a5; 
+
+}
+.bd h4 {
+	font-size: 14px;
+	font-weight: 400;
+	color: #000;
+}
+.bd p {
+	font-size: 12px;
+	color: #a5a5a5;
+}
+.bd a {
+	display: block;
+	font-size: 16px;
+	font-weight: 700;
+	color: #00a4ff;
+	height: 38px;
+	width: 198px;
+	line-height: 38px;
+	text-align: center;
+	margin: 0px auto;
+	margin-top: 6px;
+	border: 2px solid  #00a4ff;
+}
+.bd a:hover {
+	background: #00a4ff;
+	color: #fff;
+}
+.goods {
+	margin-top: 10px;
+	height: 60px;
+	line-height: 60px;
+	background: #fff;
+}
+.goods .J {
+	color: #ccc;
+}
+.goods .jing a {
+	float: left;
+	font-weight: 700;
+	font-size: 16px;
+	padding: 0px 32px;
+	color: #00a4ff;
+}
+.goods ul li {
+	float: left;
+}
+.goods ul li a {
+    padding: 0px 36px;
+    font-size: 16px;
+    color: #6d6d6d;
+}
+.goods ul li a:hover {
+	color: #00a4ff;
+}
+.change a {
+	float: right;
+	color : #00a4ff;
+	font-size: 14px;
+	padding-right: 25px;
+}
+.box-hd {
+    height: 20px;
+    margin: 25px 0px;
+}
+.box .one {
+	float: left;
+	font-size: 20px;
+	color: #6d6d6d;
+}
+.box .two {
+	float: right;
+	padding-top: 10px;
+	font-size: 12px;
+	color: #a5a5a5;
+}
+.box-bd {
+	width: 1215px;
+}
+.box-bd li {
+	float: left;
+	width: 228px;
+	height: 270px;
+	margin-right: 15px;
+	margin-bottom: 15px;
+	background: #fff;
+}
+.box-bd h4 {
+	font-size: 14px;
+	margin: 20px;
+	font-weight: 400;
+}
+.box-bd li p {
+	font-size: 12px;
+	margin-left: 20px;
+	color: #ccc;
+}
+.box-bd p span {
+    color: orange;
+}
+.footer {
+	height: 415px;
+	background-color: #fff;
+}
+.footer .left {
+	width: 430px;
+	background: #fff;
+}
+.footer .left img {
+	margin: 25px 0px;
+}
+.footer .left p {
+	font-size: 12px;
+	color: #666;
+}
+.footer .left a {
+	display: block;
+	width: 118px;
+	height: 34px;
+	line-height: 34px;
+	margin: 20px 0 0 0;
+	text-align: center;
+	color: #00a4ff;
+	border: 2px solid #00a4ff;
+}
+.footer .left a:hover {
+	color: #fff;
+	background: #00a4ff;
+}
+.footer .right {
+	float: right;
+	width: 500px;
+}
+.footer .right dl {
+	float: left;
+	margin-left: 100px;
+}
+.footer .right dt {
+	height: 35px;
+	font-size: 16px;
+	color: #333;
+}
+.right dd a{
+	font-size: 12px;
+	color: #333;
+}
+.right dd a:hover {
+	color: #00a4ff;
+}

学成在线/学成在线.html

@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+	<meta charset="UTF-8">
+	<title>学成在线</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<!-- head start -->
+	<div class=" header w">
+		<img src="images/03.jpg">
+		<div class="nav">
+			<ul>
+				<li><a href="#">首页</a></li>
+				<li><a href="#">课程</a></li>
+				<li><a href="#">职业规划</a></li>
+			</ul>
+			<div class="search">
+				<input type="text" >
+			<button></button>
+			<div class="user">
+				<img src="images/05.jpg">
+				xiaoming
+			</div>
+			</div>
+		</div>
+	</div>
+	<!-- head end -->
+	<!-- banner start -->
+	<div class="banner ">
+		<div class="w">
+		    <div class="left">
+			    <ul>
+				    <li><a href="#">前端开发<span>></span></a></li>
+				    <li><a href="#">后端开发<span>></span></a></li>
+				    <li><a href="#">移动开发<span>></span></a></li>
+				    <li><a href="#">人工智能<span>></span></a></li>
+				    <li><a href="#">商业预测<span>></span></a></li>
+				    <li><a href="#">云计算&大数据<span>></span></a></li>
+				    <li><a href="#">运维&从测试<span>></span></a></li>
+				    <li><a href="#">UI设计<span>></span></a></li>
+				    <li><a href="#">产品<span>></span></a></li>
+			    </ul>
+		    </div>
+		    <div class="right">
+		    	<div class="hd">
+		    		我的课程表
+		    	</div>
+		    	<div class="bd">
+		    		<ul>
+		    			<li>
+		    				<h4>继续学习 程序语言设计</h4>
+		    				<p>正在学习-使用对象</p>
+		    			</li>
+		    			<li>
+		    				<h4>继续学习 程序语言设计</h4>
+		    				<p>正在学习-使用对象</p>
+		    			</li>
+		    			<li>
+		    				<h4>继续学习 程序语言设计</h4>
+		    				<p>正在学习-使用对象</p>
+		    			</li>
+		    		</ul>
+		    		<a href="#">全部课程</a>
+		    	</div>
+		    </div>
+		</div>
+	</div>
+	<!-- banner end -->
+	<!-- 导航栏start -->
+	<div class="goods w">
+		<div class="jing">
+			<a href="#">精品推荐</a>
+		</div>
+	    <div class="J">
+	    	<ul>
+	    	<li>
+	    	|	<a href="">JQuery</a>
+	    	</li>
+	    	<li>
+	    	|	<a href="">Spark</a>
+	    	</li>
+	    	<li>
+	    	|	<a href="">MySQL</a>
+	    	</li>
+	    	<li>
+	        | 	<a href="">JavaWeb</a>
+	    	</li>
+	    	<li>
+	        |	<a href="">MySQL</a>
+	    	</li>
+	    	<li>
+	    	|	<a href="">JaveWeb</a>
+	    	</li>
+	    </ul>
+	    </div>
+	    <div class="change">
+	    	<a href="#">修改兴趣</a>
+	    </div>
+	</div>
+	<!-- 导航栏end -->
+	<!-- box start -->
+	<div class="box w">
+		<div class="box-hd">
+		    <div class="one">精品推荐</div>
+		    <div class="two">查看全部</div>
+	    </div>
+	    <div class="box-bd clearfix">
+	    	<ul>
+	    		<li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>
+	    		<li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>
+                <li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>
+                <li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>                
+	    		<li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>
+                <li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>                <li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>	 
+                <li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>                
+	    		<li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>
+	    		<li>
+	    			<img src="images/07.jpg">
+	    			<h4>Angular 2 最新框架+主流技术+项目实战</h4>
+	    			<p><span>高级</span>·1125人在学习</p>
+	    		</li>	    	
+	    	</ul>
+	    </div>
+	</div>
+	<!-- box end -->
+	<!-- footer start -->
+	<div class="footer">
+		<div class="w">
+			<div class="left">
+			    <img src="images/08.jpg">
+			    <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
+                 © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
+			    <a href="#">下载APP</a>
+		    </div>
+		    <div class="right">
+		    	<dl>
+		    		<dt>关于学习网</dt>
+		    		<dd><a href="#">关于</a></dd>
+		    		<dd><a href="#">管理团队</a></dd>
+		    		<dd><a href="#">工作机会</a></dd>
+		    		<dd><a href="#">客户服务</a></dd>
+		    		<dd><a href="#">帮助</a></dd>
+		    	</dl>
+		    	<dl>
+		    		<dt>新手指南</dt>
+		    		<dd><a href="#">如何注册</a></dd>
+		    		<dd><a href="#">如何选课</a></dd>
+		    		<dd><a href="#">如何拿到毕业证</a></dd>
+		    		<dd><a href="#">学分是什么</a></dd>
+		    		<dd><a href="#">考试未通过怎么办</a></dd>
+		    	</dl>
+		    </div>
+		</div>
+	</div>
+	<!-- footer end -->
+</body>
+</html>