Vue/React/angular
Free Download Manager,免费下载软件;前端开发工具,Vs Code ,已经安装的7个插件Chinese (Simplified) Language Pack for Visual Studio Code,CSS Formatter,Debugger for Chrome,ESLint,HTML Snippets,Mithril Emmet,open in browser,10个插件。
什么是Web
Web是World Wide Web的简称,互联网上的应用程序被称为Web应用程序,Web应用程序使用的Web文档,网页,来表现用户界面。
Web是基于浏览器/服务器(B/S)的一种体系结构,客户在计算机上使用浏览器向Web服务器发出请求,服务器响应客户请求,向客户回送所请求的网页,客户在浏览器窗口上显示网页内容,包括CSS、JS、视频、音频等。
IP,域名,DNS,URL
每个连接到Internet上的主机都会分配一个IP地址,IP地址是用来唯一标识互联网上计算机的逻辑地址,机器之间的访问就是通过IP地址来进行的;IP地址经常被写成十进制的形式,用“.”分开,叫做“点分十进制表示法”,如:127.0.0.1;
IP地址毕竟是数字标识,使用时不好记忆和书写,因此在IP地址的基础上又发展出一种符号化的地址方案,来代替数字型的IP地址;每一个符号化的地址都与特定的IP地址对应;这个与网络上的数字型IP地址相对应的字符型地址,就被称为域名;
在Internet上域名与IP地址之间是一对一(或者多对一)的,域名虽然便于人们记忆,但机器之间只能互相认识IP地址,它们之间的转换工作称为域名解析,域名解析需要由专门的域名解析服务器来完成,DNS就是进行域名解析的服务器,域名的最终指向是IP;
URL(英语Uniform Resource Locator的缩写,统一资源定位符)俗称为网址,网址格式为:<协议>://<域名或IP>:<端口>/<路径>;<协议>://<域名或IP>是必需的,<端口>/<路径>有时可省略。
Web开发
Web开发主要分为前端和后端,前端:指直接与用户接触的网页,网页上通常有HTML、CSS、JavaScript等内容;后端:指程序、数据库和服务器层面的开发;Web开发框架,可以提高开发工作的质量和效率,Bootstrap是一款响应式、直观并且强大的前端框架
网站
网站对应磁盘上的一个文件夹,文件夹里包含若干网页,网页通过链接组织在一起,即网站由网页构成;按照Web服务器响应方式的不同,网页分为静态网页和动态网页。
Web标准也称网页标准,狭义的Web标准是指网页设计的DIV+CSS化,广义的Web标准是指网页设计符合W3C和ECMA规范;网页主要由三部分组成:结构、表现和行为;对应的Web标准也分三方面:即结构标准、表现标准和行为标准。
1、结构标准用于对网页元素进行整理和分类,定义网页的结构,主要包括HTML XML XHTML;
2、表现标准用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS;
3、行为是指网页模型的定义及交互,主要包括DOM和ECMAScript两个部分,常用来给HTML网页添加动态功能、为页面增加交互性、实现网页的特效效果。
Web标准,体现HTML CSS JavaScript三者功能案例代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>HTML5学习邀请函</title> <!--连接外部CSS样式表文件--> <link href="cssDemo.css" rel="stylesheet"> </head> <body> <!--结构标准--> <!--HTML结构定义--> <div id="container"> <h1>Let's Learn HTML5</h1> <p>发挥您的美感与想象力,探索Web开发的无限可能性,现诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php" id="enroll">邀您参加</a> </div> <!--链接JavaScript外部文件--> <script src="enrollDemo.js"></script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*表现标准*/
/*CSS样式定义*/
html,body{
height:100%;
color: #ffffff;
font-family: sans-serif;
}
body{
/*图像显示为整个页面的背景*/
background: url(amazing-sky.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
/*邀请函内容区域内容居中*/
width:100%;
text-align: center;
position: absolute;
top:50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
}
h1{
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}
p{
font-size: 21px;
margin-bottom: 40px;
/*给段落样式增加一些左右边距*/
margin-left: 25px;
margin-right:25px;
}
a{
font-size: 18px;
color:#fff;
border:1px solid #fff;
border-radius: 3px;
padding: 10px 100px;
text-decoration: none;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//页面交互
//JavaScript技术
var enroll=document.getElementById("enroll");
enroll.onclick=function(e){
//阻止浏览器默认的url跳转
e.preventDefault();
enroll.innerHTML="报名成功";
enroll.style.background="#27cb8b";
enroll.style.borderColor="#27cb8b";
}
网页案例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- vs code 代码整理快捷键 shift+alt+f --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>侧边导航栏</title> <link rel="stylesheet" href="css/1.css"> </head> <body> <!-- div标签容器 --> <div id="left"> <!-- 列表 --> <ul> <li><a href="#">小说作品</a></li> <li><a href="#">经济管理</a></li> <li><a href="#">成功励志</a></li> <li><a href="#">历史传记</a></li> <li><a href="#">两性情感</a></li> <li><a href="#">生活时尚</a></li> <li><a href="#">文学艺术</a></li> <li><a href="#">社会科学</a></li> <li><a href="#">亲子少儿</a></li> <li><a href="#">计算机/网络</a></li> <li><a href="#">科学技术</a></li> </ul> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
font-size: 16px;
color: #62abaa;
font-weight: bold;
/*图片背景 CSS导入路径必须写成./或../格式*/
background: url(../images/bk.png) no-repeat left center;
padding-left: 25px;
}
#left {
margin-left: 20px;
margin-top: 20px;
width: 240px;
background: #f9f9f9;
border-top: solid 2px #62abaa;
}
ul li {
list-style: none;
border: 1px solid #ccc;
border-top: 0px;
line-height: 40px;
padding-left: 50px;
}
2、传智博客设计学院网页设计
创建站点与布局分析
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- 创建站点与布局分析 六个板块 六个div布局 头部、导航、banner广告图、通知公告、主题内容、版权信息 --> <body> <div class="top"></div> <div class="nav"></div> <div class="banner"></div> <div class="notice"></div> <div class="main"></div> <div class="bottom"></div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 清除所有元素的内外边距,字号12像素,字体微软雅黑 */
* {
margin: 0;
padding: 0;
font-size: 12px;
font-family: "微软雅黑";
}
/* 去掉列表项目符号 */
ul {
list-style: none;
}
/* 图片去掉边框 */
img {
border: none;
}
/* 链接颜色黑色,没有下划线 */
a:link, a:visited {
color: #222;
text-decoration: none;
}
头部
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>top</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- 头部两部分,左边是图片,右边是操作菜单 --> <body> <div class="top"> <!-- 左边图片 --> <div class="pic"> <img src="img/logo.gif" alt="logo"> <img src="img/pic01.gif" alt="pic01"> </div> <!-- 右边文字 --> <div class="home"> <div class="home1"><span></span>设为首页</div> <div class="home2"><span></span>加入收藏</div> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* top样式
头部宽度1000像素 高度80像素 居中显示
*/
.top {
width: 1000px;
height: 80px;
margin: 0 auto;
}
/* 左边图片向左浮动,上外边距10像素;右边文字向右浮动,上外边距60像素 */
.pic {
float: left;
margin-top: 10px;
}
.home {
float: right;
margin-top: 60px;
}
/* 右边文字向左浮动,文字之间距离,右边距20像素 */
.home1 {
float: left;
margin-right: 20px;
}
.home2 {
float: left;
}
/* 背景图span是行元素设为行内块元素,宽度17px 高度14px 背景图url 外右边距 3px*/
.home span {
display: inline-block;
width: 17px;
height: 14px;
/* 上面少了px不生效 */
background: url(../img/icon_bg.gif);
margin-right: 3px;
}
/* 收藏文字左边的背景图为星,坐标上移31px */
.home2 span {
background-position: 0px -31px;
}
导航栏
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="nav"> <div class="nav_con"> <ul> <li><a href="#">首页</a></li> <li><a href="#">教材下载</a></li> <li><a href="#">师资力量</a></li> <li><a href="#">就业信息</a></li> <li><a href="#">学员作品</a></li> <li><a href="#">校园生活</a></li> <li><a href="#">报名流程</a></li> <li><a href="#">常见问题</a></li> <li><a href="#">来校路线</a></li> </ul> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* nav 部分样式
高度 40px 行高 40px 背景颜色为黑色 */
.nav {
height: 40px;
line-height: 40px;
background-color: #222;
}
/* 列表宽1000px 居中显示 */
.nav_con {
width: 1000px;
margin: 0 auto;
}
/* 列表项向左浮动 左边距20px*/
.nav_con li {
float: left;
margin-left: 20px;
}
/* 列表项的超链接文字白色 字号14px 宋体 加粗显示
超链接行元素转为块元素 左右内边距10px*/
.nav_con li a {
color: #FFF;
font-size: 14px;
font-family: "宋体";
font-weight: bold;
/* 行元素转为块元素 */
display: block;
/* 左右内边距10px */
padding: 0 10px;
}
/* 鼠标指向链接背景为红色 */
.nav_con li a:hover {
background-color: #F00;
}
banner的左边
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- bannerleft 由背景图、 广告词、 切换图标构成 content_left 2段广告词放到2个段落标记中,切换图标放到一个无序列表中 --> <body> <div class="bannerleft"> <div class="content_left"> <!-- 2段广告词 --> <p>CHUANZHIBOKECHUAN<br /> ZHIBOKE<br /> <span>传智播客</span></p> <p>以就业为导向<br /> 打造理论实践相结合的实战性人才 </p> <!-- 切换图标,无序列表 --> <ul> <li class="current"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* bannerleft部分的样式
bannerleft是最外面的大盒子,宽755px,高285px,背景图片
content_left内盒子,广告词及1234切换图标,设置绝对定位*/
.bannerleft {
width: 755px;
height: 285px;
background: url(../img/pic.gif);
/* 相对定位 */
position: relative;
}
/* 盒子,广告词及1234图标切换,设为绝对定位,父盒子设为相对定位
相对于bannerleft的盒子 top 90px right 45px
*/
.content_left {
position: absolute;
top: 90px;
right: 45px;
}
/* 广告文字颜色为白色 字号14px 字体英文Arial 中文黑体
加粗显示 右对齐*/
.content_left p {
color: #FFFFFF;
font-size: 14px;
font-family: Arial, "黑体";
font-weight: bold;
text-align: right;
margin-bottom: 20px;
}
/* span 文字 "传智播客" 的背景图标不重复 向右 居中
文字字号24px 内边距20px */
.content_left p span {
font-size: 24px;
background: url(../img/icon5.gif) no-repeat right center;
padding-right: 20px;
}
/* 切换图标,无序列表,左外边距120px,即整体靠右 */
.content_left ul {
margin-left: 120px;
}
/* 列表项左浮动,左外边距10px */
.content_left li {
float: left;
margin-left: 10px;
}
/* 列表项,链接元素a转换为block,宽30px,高26px,行高26px,
背景色白色字,边框红色实线1px,链接无下划线,
体颜色红色,字号16px,文字居中 */
.content_left li a {
float: left;
width: 30px;
height: 26px;
line-height: 26px;
background-color: #FFFFFF;
border: #F30 solid 1px;
text-decoration: none;
color: #F30;
font-size: 16px;
text-align: center;
}
/* 注意 li.current中间不能有空格
第一个列表项默认背景色红色,字体白色
*/
.content_left li.current a {
background-color: #FF3300;
color: #FFFFFF;
}
banner的右边
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- 标题 软件图标 课件概述三部分构成 标题 h2,软件图标使用无序列表ul列表项li引入图像img空链接a,课件介绍使用段落p --> <body> <div class="bannerright"> <div class="content_right"> <h2>课程介绍<br /> INTRODUCTION</h2> <ul> <li><a href="#"><img src="./img/icon1.gif" /></a></li> <li><a href="#"><img src="./img/icon2.gif" /></a></li> <li><a href="#"><img src="./img/icon3.gif" /></a></li> <li><a href="#"><img src="./img/icon4.gif" /></a></li> </ul> <!-- 空元素清除列表浮动对下面的影响 --> <div style="clear: both;"></div> <p> 在传智播客设计学院,您只需要花一份学费,就可以同时学习平面设计,网页设计,FLASH设计,UI设计四门主流技术</p> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* bannerright 部分样式
标题 图标无序列表 段落 */
/* bannerright 宽245px 高285px 背景颜色#333 字体颜色白色#FFFFFF */
.bannerright {
width: 245px;
height: 285px;
background-color: #333;
color: #FFFFFF;
/* 相对定位 */
position: relative;
}
/* content_right绝对定位 上部50px 左30px */
.content_right {
position: absolute;
top: 50px;
left: 30px;
}
/* 标题 字号18px 外下边距10px */
.content_right h2 {
font-size: 18px;
margin-bottom: 10px;
}
/* 列表项li 图标 左浮动 左外边距15px */
.content_right li {
float: left;
margin-left: 15px;
}
/* 段落首行缩进2em 行高24px 右外边距30px 上外边距15px*/
.content_right p {
text-indent: 2em;
line-height: 24px;
margin-right: 30px;
/* 不生效,需要清除列表浮动造成的影响,html空元素清除办法 */
margin-top: 15px;
}
通知公告栏
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- 通知公告栏分2部分,左侧是公告栏标题,右侧滚动显示的内容 标题盒子,内容盒子,内容,滚动marquee标签内无序列表,列表项a链接 --> <body> <div class="notice"> <div class="notice_title">通知公告</div> <div class="notice_con"> <marquee> <ul> <li><a href="#">【广州喜讯】报名网页平面UI就业班送基础班</a></li> <li><a href="#">史上最难就业年,怎么办?到传智免费学PS吧!</a></li> </ul> </marquee> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* notice 部分样式
宽度1000px,居中显示,高度30px,行高30px */
.notice {
width: 1000px;
margin: 0 auto;
height: 30px;
line-height: 30px;
border: 1px solid #c4c4c4;
}
/* 标题文字 */
.notice_title {
float: left;
width: 96px;
text-align: center;
/* 右边框 */
border-right: 1px solid #c4c4c4;
}
/* 滚动列表 */
.notice_con {
/* 第一行列表项左浮动 */
float: left;
width: 900px;
}
/* 列表项 */
.notice_con ul li {
/* 其余列表项左浮动 */
float: left;
margin-left: 40px;
/* 相对每一个列表项的背景图片*/
background: url(../img/icon6.gif) no-repeat left center;
/* 内左边距 链接文本与背景图片分隔距离 */
padding-left: 10px;
}
示范专业示范模块
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- module,示范专业建设模块 有标题(前面有个小图标span)、内容(无序列表实现空链接)两个部分 --> <body> <div class="module"> <div class="module_title"> <span></span>示范专业建设模块 </div> <div class="module_con"> <ul> <li><a href="#">人才培养</a></li> <li><a href="#">课程体系</a></li> <li><a href="#">教学改革</a></li> <li><a href="#">实习实训</a></li> <li><a href="#">师资队伍</a></li> <li><a href="#">校企互联</a></li> <li><a href="#">示范效应</a></li> <li><a href="#">more</a></li> </ul> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 示范专业建设模块 */
.module {
width: 233px;
height: 210px;
background: url(../img/bg_tw.png);
}
.module_title {
height: 35px;
line-height: 35px;
border-left: 10px solid #FD4A13;
font-family: "黑体";
font-weight: bold;
color: #FFFFFF;
background-color: black;
}
.module_title span {
background: url(../img/icon_bg.gif) no-repeat 0 -60px;
width: 11px;
height: 11px;
/* 行元素转换为块元素 */
float: left;
margin: 12px 7px 0px 13px;
}
.module_con {
padding: 24px 11px;
}
/* 每个列表,高26px,宽97px,背景色灰色,外边距4px,左浮动,文本居中 */
.module_con ul li {
width: 97px;
height: 26px;
line-height: 26px;
margin: 4px;
background-color: #E4E4E4;
float: left;
text-align: center;
}
招聘信息模块
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- 招聘信息,有标题栏和信息列表2部分构成 --> <body> <div class="job"> <div class="job_title"> <span></span>招聘信息 </div> <div class="job_con"> <ul> <li><span></span><a href="#">斯特孚教育招聘信息UI平面设计</a></li> <li><span></span><a href="#">北京普天合力招聘视觉设计师</a></li> <li><span></span><a href="#">久久康体网招聘UI设计师</a></li> <li><span></span><a href="#">神州飞思公司招聘UI设计</a></li> <li><span></span><a href="#">虞臣网络科技招聘IT人才</a></li> </ul> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 招聘信息模块 */
.job_title {
width: 231px;
height: 30px;
line-height: 30px;
background: url(../img/title_bg.gif) repeat-x;
border: 1px solid #d6d6d6;
/* solid不可以省略 */
border-bottom: 1px solid #808080;
font-family: "宋体";
font-weight: bold;
}
.job_title span {
background: url(../img/icon_bg.gif) no-repeat 0 -150px;
width: 16px;
height: 14px;
/* 行元素转换为块元素 */
float: left;
margin: 8px 7px 0px 11px;
}
.job_con {
padding: 16px 0px 16px 15px;
}
.job_con ul li {
margin: 10px 0px;
}
.job_con ul li span {
background: url(../img/icon_bg.gif) no-repeat -60px -30px;
width: 10px;
height: 13px;
/* 行元素转换为块元素 */
float: left;
margin-right: 13px;
}
专业动态栏模块
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- message标题,message内容2部分 --> <body> <div class="message"> <!-- 标题栏2部分,左边是超链接,右边是小图标 --> <div class="message_title"> <div class="m_title_left"> <a class="current" href="#">专业动态</a><a href="#">行业动态</a> </div> <div class="more"><a href="#"><img src="./img/more.gif" /></a></div> </div> <!-- 内容分左右2部分 左边是图片 右边是2个列表:一个内容列表一个日期列表 --> <div class="message_con"> <!-- 图片 --> <div class="message_left"> <img src="./img/pic1.gif" /> </div> <!-- 列表 --> <div class="message_right"> <!-- 内容列表 --> <ul class="left_ul"> <li><span></span><a href="#">网页平面设计学院七期班香山游</a></li> <li><span></span><a href="#">传智播客网页平面六期久违的体育课</a></li> <li><span></span><a href="#">网页平面设计学院四期班奥利匹克公园一日游</a></li> <li><span></span><a href="#">网页平面设计学院三期班798艺术区一日游</a></li> <li><span></span><a href="#">网页平面设计学院二期班自助烧烤</a></li> </ul> <!-- 日期列表 --> <ul class="right_ul"> <li><a href="#">2013/06</a></li> <li><a href="#">2013/06</a></li> <li><a href="#">2013/06</a></li> <li><a href="#">2013/06</a></li> <li><a href="#">2013/06</a></li> </ul> </div> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 专业动态栏模块 */
.message_title {
width: 498px;
height: 33px;
line-height: 33px;
border: 1px solid #d6d6d6;
border-bottom: 1px solid #fd4a13;
padding-left: 10px;
}
.m_title_left {
float: left;
}
/* 标题链接 */
.message_title a {
color: #393939;
font-weight: bold;
height: 34px;
line-height: 34px;
/* 超链接行内元素转行内块元素 */
display: inline-block;
}
/* 标题左边第一个链接 */
.message_title a.current {
width: 80px;
height: 34px;
/* 背景图标 */
background: url(../img/right_message.png) no-repeat;
/* 左内边距 */
padding-left: 10px;
/* 文字颜色 */
color: #ffffff;
}
/* 标题右边图标链接 */
.more {
width: 40px;
height: 15px;
float: right;
margin: 5px 10px 0px 0px;
}
/* 内容内边距 */
.message_con {
padding: 30px 0px 12px 17px;
}
/* 内容左-图片 */
.message_left {
width: 115px;
height: 125px;
float: left;
background: url(../img/pic1_bg.gif) no-repeat;
text-align: center;
padding: 4px 0px;
}
/* 内容右-列表 */
.message_right {
width: 350px;
float: left;
margin-left: 14px;
margin-right: 13px;
}
/* 左列表 */
.left_ul {
float: left;
}
/* 右列表 */
.right_ul {
float: right;
}
/* 左右列表列表项行高 */
.left_ul li, .right_ul li {
line-height: 26px;
}
/* 左列表,列表项图标 */
.left_ul li span {
background: url(../img/icon_bg.gif) no-repeat 0 -120px;
width: 3px;
height: 3px;
margin: 10px 7px;
float: left;
}
/* 右列表,列表项链接文字颜色 */
.right_ul li a {
color: #aaaaaa;
}
师资力量模块
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> <!-- 师资力量模块, 分为标题栏 图片列表2部分 --> </head> <body> <div class="teacher"> <!-- 标题栏: 图标 文字 图片链接--> <div class="teacher_title"> <span></span>师资力量<a href="#"><img src="./img/more.gif" /></a> </div> <!-- 图片列表 --> <div class="teacher_con"> <ul> <li> <a href="#"><img src="./img/teacher01.gif" /></a> <p><a href="#">网页主讲张老师</a></p> </li> <li> <a href="#"><img src="./img/teacher02.gif" /></a> <p><a href="#">网页主讲刘老师</a></p> </li> <li> <a href="#"><img src="./img/teacher03.gif"></a> <p><a href="#">网页主讲韩老师</a></p> </li> <li> <a href="#"><img src="./img/teacher04.gif"></a> <p><a href="#">网页主讲邵老师</a></p> </li> </ul> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 师资力量模块 */
/* 标题 */
.teacher_title {
width: 508px;
height: 24px;
background: url() repeat-x;
border: 1px solid #d6d6d6;
border-bottom: 1px solid #808080;
font-family: "宋体";
font-weight: bold;
padding-top: 6px;
}
/* 标题图标 */
.teacher_title span {
background: url(../img/icon_bg.gif) no-repeat 0 -180px;
width: 17px;
height: 15px;
float: left;
margin: 0px 10px 0px 9px;
}
/* 标题图片 */
.teacher_title img {
float: right;
margin-right: 10px;
}
/* 内容列表 */
.teacher_con {
width: 510px;
padding: 18px 0px 15px 17px;
}
/* 内容列表,列表项 */
.teacher_con ul li {
float: left;
margin: 3px 13px 0px 13px;
}
/* 内容列表,列表项,段落 */
.teacher_con ul li p {
margin-top: 10px;
text-align: center;
}
/* 内容列表,列表项 段落 链接 */
.teacher_con ul li p a {
color: #535353;
}
精品课程模块
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- 精品课程模块 分为上下两块,上面为课程板块,下面是数字化学习图片 --> <body> <div class="right"> <!-- 标题课程 --> <div class="course"> <!-- 标题 --> <h3>精品课程<span>Course</span></h3> <!-- 课程,每个列表项包含链接和图标2部分 --> <ul> <li><a href="#">网页平面UI基础班</a><span></span></li> <li class="course_2"><a href="#">网页平面UI就业班</a><span></span></li> <li class="course_3"><a href="#">Html+CSS基础班</a><span></span></li> <li class="course_4"><a href="#">Html+CSS就业班</a><span></span></li> <li class="course_5"><a href="#">Dreamweaver基础班</a><span></span></li> </ul> </div> <!-- 图片 --> <div class="study"><a href="#"><img src="./img/study.gif" alt="数字化学习"></a></div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 精品课程模块 */
.course {
width: 220px;
height: 303px;
background: url(../img/course_bg.png);
padding: 27px 0 0 13px;
}
.course h3 {
height: 40px;
font-size: 12px;
color: #393939;
}
.course h3 span {
font-weight: normal;
padding-left: 6px;
font-family: arial;
font-size: 11px;
}
.course ul li {
width: 203px;
height: 40px;
border: 1px solid #e8e8e8;
margin-bottom: 10px;
background-color: #ffffff;
}
/* 每个列表项右边的图标 */
.course ul li span {
background: url(../img/icon_bg.gif) no-repeat 0 -210px;
width: 30px;
height: 30px;
float: right;
margin: 7px 8px 0 0;
}
/* 图标2位置 */
.course .course_2 span {
background-position: 0 -240px;
}
/* 图标3位置 */
.course .course_3 span {
background-position: 0 -270px;
}
/* 图标4位置 */
.course .course_4 span {
background-position: -30px 0;
}
/* 图标5位置 */
.course .course_5 span {
background-position: -30px -30px;
}
/* 每个列表项链接及第1个列表项左边框的颜色 */
.course ul li a {
/* a链接行元素转换为块元素 */
float: left;
height: 19px;
line-height: 19px;
border-left: 4px solid #0080db;
margin-top: 10px;
padding-left: 15px;
}
/* 第2个列表项左边框颜色 */
.course .course_2 a {
border-color: #61a301;
}
/* 第3个列表项左边框颜色 */
.course .course_3 a {
border-color: #f50149;
}
/* 第4个列表项左边框颜色 */
.course .course_4 a {
border-color: #995f91;
}
/* 第5个列表项左边框颜色 */
.course .course_5 a {
border-color: #ffb409;
}
/* 下栏图片上外边距 */
.study {
margin-top: 15px;
}
网页底部版权区域
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <!-- 网页底部模块 分为top图标和内容2个部分 内容分为图片链接及文字段落2个部分 --> <body> <div class="bottom"> <!-- top图标 --> <div class="btn"> <a href="#"><img src="./img/top_btn.gif" /><br />Top</a> </div> <!-- 内容,图片链接及文字段落2部分 --> <div class="footer_con"> <!-- 图片链接 --> <ul> <li class="pic_con">友情链接</li> <li><a href="#"><img src="./img/mhzxxls.jpg"></a></li> <li><a href="#"><img src="./img/link2.jpg"></a></li> <li><a href="#"><img src="./img/link3.jpg"></a></li> <li><a href="#"><img src="./img/link4.jpg"></a></li> </ul> <!-- 文字段落 --> <p>传智播客-专业java培训、net培训、php培训、ios培训、c++培训、网页设计、平面设计培训结构</p> <p>版权所有 2006 - 2014 北京传智播客教育科技有限公司</p> <p>地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096</p> <p>电话:010-82935150/60/70 传真:010-82935100 邮箱:zhanghj+itcast.cn</p> <p>京ICP备08001421号 京公网安备110108007702</p> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* bottom */
.bottom {
width: 100%;
background-color: #303030;
padding-bottom: 25px;
}
/* 图标,宽,外边距,内左边距 */
.bottom .btn {
width: 906px;
margin: 0 auto;
padding-left: 94px;
}
/* 图标链接,文字颜色,字号 */
.bottom .btn a {
color: #FFFFFF;
font-size: 10px;
}
/* 内容(图片和文字段落2部分),宽,内外边距,文字居中 */
.footer_con {
width: 1000px;
margin: 0 auto;
padding-bottom: 20px;
text-align: center;
}
/* 图片列表 */
.footer_con ul {
height: 60px;
padding-left: 130px;
}
/* 列表项 ,图片*/
.footer_con ul li {
float: left;
margin-left: 20px;
}
/* 列表项,文字 */
.footer_con .pic_con {
color: #FFFFFF;
font-size: 14px;
padding-top: 20px;
}
/* 段落 */
.footer_con p {
line-height: 22px;
color: #909090;
font-family: "微软雅黑";
}