lesson11-网页编写完善
--------------------------------------------------------------
总结：
一、分析
1. 整体布局（三部分：head、content、foot），整个页面的主心骨就是div+css，为了布局和样式操作方便，
使用背景色或者边框确定位置，在全部页面完成设置后，再删除这些设置。
2. 五个页面的共同部分，使用同一个css文件（共同样式设置）
3.在设置css时，通常都是使用类选择器class
4.辅助注释（各部分起始标注）
二、css重置
网页链接： https://meyerweb.com/eric/tools/css/reset/index.html
三、头部
1. 重点：div居中（外部设置div，定义宽度，设置margin：0 auto）
2.头部菜单内部文字使用无序列表+float：left
3.去掉列表前点：list-style：none；下划线/去掉：text-decoration：underline/none；
4.文字居中：div设置高度，文字line-height设置同样高度；
四、阿里图标（小人+微信+微博+qq等）
1. 链接：http://www.iconfont.cn/
2.搜索目标添加入库添加项目font class更新代码复制代码html中link引入
3.
五、补充知识点
1. box-sizing：border-box；/*实现下边框显示在盒子内*/
2. vertical-align: top;/middle;/baseline;/bottom; /*实现图标和文字对齐*/
3. **：hover img{transform：scale(1.2)}+img{transition:all 500ms} /*实现图片放大*/
4. 省略号
网页编写图片素材一
图片地址：
1.src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"
2. src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"
3. src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"
4. src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"
网页编写图片素材二
图片地址：https://res.shiguangkey.com//file/201806/01/20180601202006677835073.png
网页编写图片素材三
图片地址：https://www.python.org/static/img/python-logo.png
图片地址：https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg
图片地址：https://res.shiguangkey.com//file/201804/24/20180424095709160023055.jpg!mall_course_a
网页编写图片素材四
图片地址：http://qpic.cn/c5WlGbF6e
-------------------------------------
视频1-网页编写1-1
多文件，
css重置--ppt
//潭州网页编写，图标保存到购物车--http://www.iconfont.cn/
css文件夹：
common.css //基本公共布局
reset.css //重置导入css
jq文件夹：
未写
index.html：主页
course.html：在线课堂
login.html：登录
regist.html：注册
search.html：搜索
------------------------
写代码过程 1，主页面公共布局 1-1，div分3层：上中底 1-2，底层又分2层：bot1，bot2 //上层 <div class="top"> 1-3，上层分为：logo+menu+登录/注册 <div class="logo"></div> python图标 //阿里图标 <ul class="menu"> 1-4，菜单层下有4个a标签 首页 //点击后指向html页面 在线课堂 付费咨询 搜索 <div class="reg-log"> 1-5，注册层下有2个a标签 user图标 //阿里图标 登录 //点击后可以分别指向html页面 注册 //中层 <div class="middle"> <div class="mid-con"></div> //底层 <div class="bottom"> <div class="bot1"> 1-6，bot1分3层：logo+p标签+p标签 <div class="logo"></div> <p class="link-con"> 1-7，分2层：5个a标签+about <span class="link"> 潭州官网 //点击后可以分别指向html页面 SEO研究中心 潭州商城 潭州天猫旗舰店 安全中心 <span class="about-me"> 关于我： 图标 //阿里图标 haha <p class="addr-con"> 版权所有：湖南时光钥匙网络有限公司 客服热线：4001-567-315 <div class="bot2"> 1-8， <div class="bot2-con"> p标签 <p>Copyright © 2017 All Rights Reserved </p> 2，css样式 2-1， /*top star*/ div上层的css样式：颜色背景位置浮动等 /*top end*/ /*middle star*/ div中层的css样式：颜色背景位置浮动等 /*middle end*/ /*bottom star*/ div底层的css样式：颜色背景位置浮动等 /*bottom end*/ 3，js动画
--------------------------------------------------------------
//index.html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <!--css样式：重置和页面公共布局和图标--> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/common.css"> 9 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 10 11 </head> 12 <body> 13 <!--top star上层div--辅助注释--> 14 <div class="top"> 15 <div class="top-con"> 16 <div class="logo"></div> 17 <ul class="menu"> 18 <li class="show"><a href="javascript:void(0);">首页</a></li> 19 <li><a href="course.html">在线课堂</a></li> 20 <li><a href="javascript:void(0);">付费咨询</a></li> 21 <li><a href="search.html">搜索</a></li> 22 </ul> 23 <div class="reg-log"> 24 <!--阿里图标名：icon-user--> 25 <i class="iconfont icon-user"></i> 26 <a href="regist.html">注册</a>/ 27 <a href="login.html">登录</a> 28 </div> 29 </div> 30 </div> 31 <!--top end--> 32 33 <!--middle star--> 34 <div class="middle"> 35 <div class="mid-con"></div> 36 </div> 37 <!--middle end--> 38 39 <!--bottom star--> 40 <div class="bottom"> 41 <div class="bot1"> 42 <div class="bot1-con"> 43 <div class="logo"></div> 44 <p class="link-con"> 45 <span class="link"> 46 <a href="javascript:void(0);">潭州官网</a> | 47 <a href="javascript:void(0);">SEO研究中心</a> | 48 <a href="javascript:void(0);">潭州商城</a> | 49 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 50 <a href="javascript:void(0);">安全中心</a> 51 </span> 52 <span class="about-me"> 53 关于我： 54 <!--阿里图标名：icon-weixin--> 55 <i class="iconfont icon-weixin"> </i> 56 feifei 57 </span> 58 </p> 59 <p class="addr-con"> 60 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 61 <span class="tel"> 62 客服热线：4001-567-315 63 </span> 64 </p> 65 </div> 66 </div> 67 <div class="bot2"> 68 <div class="bot2-con"> 69 <p>Copyright © 2017 All Rights Reserved </p> 70 </div> 71 </div> 72 </div> 73 <!--bottom end--> 74 75 </body> 76 </html>
--------------------------------------------------------------
//common.css代码 <!--基本公共布局-->
1 /*top star*/ 2 .top{ 3 width:100%; 4 height:65px; 5 background: #141414;/*上层黑*/ 6 } 7 .top .top-con{ 8 width:1200px; 9 height:65px; 10 background: #141414; 11 margin:0 auto;/*自适应居中*/ 12 text-align: center;/*文本居中*/ 13 line-height: 65px;/*统一高度*/ 14 color:white; 15 } 16 .top .top-con .logo{ 17 height:100%; 18 width:235px; 19 /*logo背景图片-不平铺-位置*/ 20 background: url("https://www.python.org/static/img/python-logo.png") no-repeat 0 -6px; 21 float:left;/*左浮动，列变行显示*/ 22 margin-right:60px;/*右外间距60px*/ 23 } 24 .top .top-con .menu li{ 25 float:left; 26 margin-left:20px; 27 /*让下划线出现在盒子内部*/ 28 height:65px; 29 box-sizing: border-box; 30 } 31 .top .top-con .menu li a{ 32 display: inline-block;/*行内元素变块级元素--具有设置宽高*/ 33 height:65px; 34 width:60px; 35 color:inherit; /*继承父级颜色*/ 36 font-size: 15px; 37 } 38 .top .top-con .menu li.show{ 39 border-bottom:4px solid greenyellow;/*class="show"时底部4px绿色下划线*/ 40 } 41 .top .top-con .menu li:hover{ 42 border-bottom:4px solid greenyellow;/*鼠标滑入盒子时当前对象底部4px绿色下划线*/ 43 } 44 .top .top-con .reg-log{ 45 float:right;/*-位置右浮动--*/ 46 /*color:inherit;*/ 47 font-size:18px; 48 } 49 .top .top-con .reg-log a{ 50 color:inherit; 51 } 52 .top .top-con .reg-log i{ 53 font-size: 30px; 54 vertical-align: middle;/*垂直对齐*/ 55 } 56 /*top end*/ 57 58 /*middle star*/ 59 .middle{ 60 width:100%; 61 height: 800px; 62 } 63 .middle .mid-con{ 64 width:1200px; 65 height:800px; 66 background: #52a6f7; 67 margin:0 auto; 68 } 69 /*middle end*/ 70 71 /*bottom star*/ 72 .bottom{ 73 color:white; 74 } 75 .bottom .bot1{ 76 width:100%; 77 height: 120px; 78 background: grey; 79 } 80 .bottom .bot1 .bot1-con{ 81 width:1200px; 82 height:120px; 83 background: grey; 84 margin:0 auto; 85 } 86 .bottom .bot1 .bot1-con .logo{ 87 background: url("https://www.python.org/static/img/python-logo.png") no-repeat 0 15px; 88 width:248px; 89 height:100%; 90 float:left; 91 } 92 .bottom .bot1 .bot1-con .link-con{ 93 padding-top:30px;/*上填充30px*/ 94 } 95 .bottom .bot1 .bot1-con p{ 96 line-height: 30px; 97 text-align: center; 98 } 99 .bottom .bot1 .bot1-con .link-con .link a{ 100 /*padding:0 5px;*/ 101 } 102 .bottom .bot1 .bot1-con .link-con .link, 103 .bottom .bot1 .bot1-con .addr-con .addr{ 104 margin-right:20px; 105 } 106 .bottom .bot2{ 107 width:100%; 108 height:60px; 109 background-color: #141414; 110 } 111 .bottom .bot2 .bot2-con{ 112 width:1200px; 113 height:60px; 114 background: #141414; 115 margin:0 auto; 116 line-height: 60px; 117 } 118 .bottom .bot2 .bot2-con p{ 119 text-align: center; 120 color:inherit; 121 } 122 /*bottom end*/
--------------------------------------------------------------
//reset.css代码： <!--重置导入css-->
1 /* http://meyerweb.com/eric/tools/css/reset/ 2 v2.0 | 20110126 3 License: none (public domain) 4 */ 5 6 html, body, div, span, applet, object, iframe, 7 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 a, abbr, acronym, address, big, cite, code, 9 del, dfn, em, img, ins, kbd, q, s, samp, 10 small, strike, strong, sub, sup, tt, var, 11 b, u, i, center, 12 dl, dt, dd, ol, ul, li, 13 fieldset, form, label, legend, 14 table, caption, tbody, tfoot, thead, tr, th, td, 15 article, aside, canvas, details, embed, 16 figure, figcaption, footer, header, hgroup, 17 menu, nav, output, ruby, section, summary, 18 time, mark, audio, video { 19 margin: 0; 20 padding: 0; 21 border: 0; 22 font-size: 100%; 23 font: inherit; 24 vertical-align: baseline; 25 } 26 /* HTML5 display-role reset for older browsers */ 27 article, aside, details, figcaption, figure, 28 footer, header, hgroup, menu, nav, section { 29 display: block; 30 } 31 body { 32 line-height: 1; 33 background: #e8dede;/*zj*/ 34 } 35 ol, ul { 36 list-style: none; 37 } 38 blockquote, q { 39 quotes: none; 40 } 41 blockquote:before, blockquote:after, 42 q:before, q:after { 43 content: ''; 44 content: none; 45 } 46 table { 47 border-collapse: collapse; 48 border-spacing: 0; 49 } 50 a{ 51 text-decoration: none;/*zj*/ 52 color:white; 53 }
--------------------------------------------------------------
视频2-网页编写1-2
菜单之间跳转 首页，在线课堂，付费咨询，搜索 注册/登陆
index.html：主页
course.html：在线课堂
login.html：登录
regist.html：注册
search.html：搜索
1，在线课堂，搜索html修改代码：<title>course</title>标题和<li class="show">下划线
2，点击菜单可以跳转页面
3，login和regist需要打开一个新页面：设置target="_blank
------------------------------------------
视频3-完善
页面切换代码完善
后续增加各个菜单功能
----------------------------------------
//course.html代码 <!--在线课堂-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>course</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/common.css"> 8 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 9 10 </head> 11 <body> 12 <!--top star--> 13 <div class="top"> 14 <div class="top-con"> 15 <div class="logo"></div> 16 <ul class="menu"> 17 <li><a href="index.html">首页</a></li> 18 <li class="show"><a href="javascript:void(0);" >在线课堂</a></li> 19 <li><a href="javascript:void(0);">付费咨询</a></li> 20 <li><a href="search.html">搜索</a></li> 21 </ul> 22 <div class="reg-log"> 23 <i class="iconfont icon-user"></i> 24 <a href="regist.html">注册</a>/ 25 <a href="login.html">登录</a> 26 </div> 27 </div> 28 </div> 29 <!--top end--> 30 <!--middle star--> 31 <div class="middle"> 32 <div class="mid-con"></div> 33 </div> 34 <!--middle end--> 35 <!--bottom star--> 36 <div class="bottom"> 37 <div class="bot1"> 38 <div class="bot1-con"> 39 <div class="logo"></div> 40 <p class="link-con"> 41 <span class="link"> 42 <a href="javascript:void(0);">潭州官网</a> | 43 <a href="javascript:void(0);">SEO研究中心</a> | 44 <a href="javascript:void(0);">潭州商城</a> | 45 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 46 <a href="javascript:void(0);">安全中心</a> 47 </span> 48 <span class="about-me"> 49 关于我： 50 <i class="iconfont icon-weixin"> </i> 51 feifei 52 </span> 53 </p> 54 <p class="addr-con"> 55 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 56 <span class="tel"> 57 客服热线：4001-567-315 58 </span> 59 </p> 60 </div> 61 </div> 62 <div class="bot2"> 63 <div class="bot2-con"> 64 <p>Copyright © 2017 All Rights Reserved </p> 65 </div> 66 </div> 67 </div> 68 <!--bottom end--> 69 </body> 70 </html>
--------------------------------------------------------------
//login.html <!--登陆-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>login</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/common.css"> 8 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 9 10 </head> 11 <body> 12 <!--top star--> 13 <div class="top"> 14 <div class="top-con"> 15 <div class="logo"></div> 16 <ul class="menu"> 17 <li><a href="index.html">首页</a></li> 18 <li><a href="course.html">在线课堂</a></li> 19 <li><a href="javascript:void(0);">付费咨询</a></li> 20 <li><a href="search.html">搜索</a></li> 21 </ul> 22 <div class="reg-log"> 23 <i class="iconfont icon-user"></i> 24 <a href="regist.html">注册</a>/ 25 <a href="javascript:void(0);">登录</a> 26 </div> 27 </div> 28 </div> 29 <!--top end--> 30 <!--middle star--> 31 <div class="middle"> 32 <div class="mid-con"></div> 33 </div> 34 <!--middle end--> 35 <!--bottom star--> 36 <div class="bottom"> 37 <div class="bot1"> 38 <div class="bot1-con"> 39 <div class="logo"></div> 40 <p class="link-con"> 41 <span class="link"> 42 <a href="javascript:void(0);">潭州官网</a> | 43 <a href="javascript:void(0);">SEO研究中心</a> | 44 <a href="javascript:void(0);">潭州商城</a> | 45 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 46 <a href="javascript:void(0);">安全中心</a> 47 </span> 48 <span class="about-me"> 49 关于我： 50 <i class="iconfont icon-weixin"> </i> 51 feifei 52 </span> 53 </p> 54 <p class="addr-con"> 55 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 56 <span class="tel"> 57 客服热线：4001-567-315 58 </span> 59 </p> 60 </div> 61 </div> 62 <div class="bot2"> 63 <div class="bot2-con"> 64 <p>Copyright © 2017 All Rights Reserved </p> 65 </div> 66 </div> 67 </div> 68 <!--bottom end--> 69 </body> 70 </html>
--------------------------------------------------------------
//regist.html <!--注册-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>regist</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/common.css"> 8 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 9 10 </head> 11 <body> 12 <!--top star--> 13 <div class="top"> 14 <div class="top-con"> 15 <div class="logo"></div> 16 <ul class="menu"> 17 <li><a href="index.html" target="_blank">首页</a></li> 18 <li><a href="course.html" target="_blank">在线课堂</a></li> 19 <li><a href="javascript:void(0);">付费咨询</a></li> 20 <li><a href="search.html" target="_blank">搜索</a></li> 21 </ul> 22 <div class="reg-log"> 23 <i class="iconfont icon-user"></i> 24 <a href="JavaScript:void(0);">注册</a>/ 25 <a href="login.html" target="_blank">登录</a> 26 </div> 27 </div> 28 </div> 29 <!--top end--> 30 <!--middle star--> 31 <div class="middle"> 32 <div class="mid-con"></div> 33 </div> 34 <!--middle end--> 35 <!--bottom star--> 36 <div class="bottom"> 37 <div class="bot1"> 38 <div class="bot1-con"> 39 <div class="logo"></div> 40 <p class="link-con"> 41 <span class="link"> 42 <a href="javascript:void(0);">潭州官网</a> | 43 <a href="javascript:void(0);">SEO研究中心</a> | 44 <a href="javascript:void(0);">潭州商城</a> | 45 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 46 <a href="javascript:void(0);">安全中心</a> 47 </span> 48 <span class="about-me"> 49 关于我： 50 <i class="iconfont icon-weixin"> </i> 51 feifei 52 </span> 53 </p> 54 <p class="addr-con"> 55 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 56 <span class="tel"> 57 客服热线：4001-567-315 58 </span> 59 </p> 60 </div> 61 </div> 62 <div class="bot2"> 63 <div class="bot2-con"> 64 <p>Copyright © 2017 All Rights Reserved </p> 65 </div> 66 </div> 67 </div> 68 <!--bottom end--> 69 </body> 70 </html>
--------------------------------------------------------------
//search.html <!--搜索-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>search</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/common.css"> 8 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 9 10 </head> 11 <body> 12 <!--top star--> 13 <div class="top"> 14 <div class="top-con"> 15 <div class="logo"></div> 16 <ul class="menu"> 17 <li><a href="index.html">首页</a></li> 18 <li><a href="course.html">在线课堂</a></li> 19 <li><a href="javascript:void(0);">付费咨询</a></li> 20 <li class="show"><a href="javascript:void(0);" >搜索</a></li> 21 </ul> 22 <div class="reg-log"> 23 <i class="iconfont icon-user"></i> 24 <a href="regist.html">注册</a>/ 25 <a href="login.html">登录</a> 26 </div> 27 </div> 28 </div> 29 <!--top end--> 30 <!--middle star--> 31 <div class="middle"> 32 <div class="mid-con"></div> 33 </div> 34 <!--middle end--> 35 <!--bottom star--> 36 <div class="bottom"> 37 <div class="bot1"> 38 <div class="bot1-con"> 39 <div class="logo"></div> 40 <p class="link-con"> 41 <span class="link"> 42 <a href="javascript:void(0);">潭州官网</a> | 43 <a href="javascript:void(0);">SEO研究中心</a> | 44 <a href="javascript:void(0);">潭州商城</a> | 45 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 46 <a href="javascript:void(0);">安全中心</a> 47 </span> 48 <span class="about-me"> 49 关于我： 50 <i class="iconfont icon-weixin"> </i> 51 feifei 52 </span> 53 </p> 54 <p class="addr-con"> 55 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 56 <span class="tel"> 57 客服热线：4001-567-315 58 </span> 59 </p> 60 </div> 61 </div> 62 <div class="bot2"> 63 <div class="bot2-con"> 64 <p>Copyright © 2017 All Rights Reserved </p> 65 </div> 66 </div> 67 </div> 68 <!--bottom end--> 69 </body> 70 </html>
效果：
点击菜单跳转页面
首页--在线课堂-付费咨询--搜索 登录/注册
