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三者功能案例代码
<!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>
/*表现标准*/
/*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{
/*邀请函内容区域内容居中*/
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;
}
//页面交互
//JavaScript技术
var enroll=document.getElementById("enroll");
enroll.onclick=function(e){
//阻止浏览器默认的url跳转
e.preventDefault();
enroll.innerHTML="报名成功";
enroll.style.background="#27cb8b";
enroll.style.borderColor="#27cb8b";
}
网页案例
<!-- 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>
* {
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;
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、传智博客设计学院网页设计
创建站点与布局分析
<!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>
/* 清除所有元素的内外边距，字号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;
}
头部
<!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>
/* top样式
头部宽度1000像素 高度80像素 居中显示
*/
.top {
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;
17px;
height: 14px;
/* 上面少了px不生效 */
background: url(../img/icon_bg.gif);
margin-right: 3px;
}
/* 收藏文字左边的背景图为星,坐标上移31px */
.home2 span {
background-position: 0px -31px;
}
导航栏
<!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>
/* nav 部分样式
高度 40px 行高 40px 背景颜色为黑色 */
.nav {
height: 40px;
line-height: 40px;
background-color: #222;
}
/* 列表宽1000px 居中显示 */
.nav_con {
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的左边
<!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>
/* bannerleft部分的样式
bannerleft是最外面的大盒子，宽755px，高285px，背景图片
content_left内盒子，广告词及1234切换图标，设置绝对定位*/
.bannerleft {
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;
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的右边
<!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>
/* bannerright 部分样式
标题 图标无序列表 段落 */
/* bannerright 宽245px 高285px 背景颜色#333 字体颜色白色#FFFFFF */
.bannerright {
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;
}
通知公告栏
<!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>
/* notice 部分样式
宽度1000px，居中显示，高度30px，行高30px */
.notice {
1000px;
margin: 0 auto;
height: 30px;
line-height: 30px;
border: 1px solid #c4c4c4;
}
/* 标题文字 */
.notice_title {
float: left;
96px;
text-align: center;
/* 右边框 */
border-right: 1px solid #c4c4c4;
}
/* 滚动列表 */
.notice_con {
/* 第一行列表项左浮动 */
float: left;
900px;
}
/* 列表项 */
.notice_con ul li {
/* 其余列表项左浮动 */
float: left;
margin-left: 40px;
/* 相对每一个列表项的背景图片*/
background: url(../img/icon6.gif) no-repeat left center;
/* 内左边距 链接文本与背景图片分隔距离 */
padding-left: 10px;
}
示范专业示范模块
<!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>
/* 示范专业建设模块 */
.module {
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;
11px;
height: 11px;
/* 行元素转换为块元素 */
float: left;
margin: 12px 7px 0px 13px;
}
.module_con {
padding: 24px 11px;
}
/* 每个列表，高26px，宽97px，背景色灰色，外边距4px，左浮动，文本居中 */
.module_con ul li {
97px;
height: 26px;
line-height: 26px;
margin: 4px;
background-color: #E4E4E4;
float: left;
text-align: center;
}
招聘信息模块
<!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>
/* 招聘信息模块 */
.job_title {
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;
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;
10px;
height: 13px;
/* 行元素转换为块元素 */
float: left;
margin-right: 13px;
}
专业动态栏模块
<!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>
/* 专业动态栏模块 */
.message_title {
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 {
80px;
height: 34px;
/* 背景图标 */
background: url(../img/right_message.png) no-repeat;
/* 左内边距 */
padding-left: 10px;
/* 文字颜色 */
color: #ffffff;
}
/* 标题右边图标链接 */
.more {
40px;
height: 15px;
float: right;
margin: 5px 10px 0px 0px;
}
/* 内容内边距 */
.message_con {
padding: 30px 0px 12px 17px;
}
/* 内容左-图片 */
.message_left {
115px;
height: 125px;
float: left;
background: url(../img/pic1_bg.gif) no-repeat;
text-align: center;
padding: 4px 0px;
}
/* 内容右-列表 */
.message_right {
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;
3px;
height: 3px;
margin: 10px 7px;
float: left;
}
/* 右列表，列表项链接文字颜色 */
.right_ul li a {
color: #aaaaaa;
}
师资力量模块
<!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>
/* 师资力量模块 */
/* 标题 */
.teacher_title {
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;
17px;
height: 15px;
float: left;
margin: 0px 10px 0px 9px;
}
/* 标题图片 */
.teacher_title img {
float: right;
margin-right: 10px;
}
/* 内容列表 */
.teacher_con {
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;
}
精品课程模块
<!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>
/* 精品课程模块 */
.course {
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 {
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;
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;
}
网页底部版权区域
<!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>
/* bottom */
.bottom {
100%;
background-color: #303030;
padding-bottom: 25px;
}
/* 图标，宽，外边距，内左边距 */
.bottom .btn {
906px;
margin: 0 auto;
padding-left: 94px;
}
/* 图标链接，文字颜色，字号 */
.bottom .btn a {
color: #FFFFFF;
font-size: 10px;
}
/* 内容(图片和文字段落2部分)，宽，内外边距，文字居中 */
.footer_con {
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: "微软雅黑";
}