HTML+ CSS+JavaScript实战

Web 项目 HTML+CSS + JavaScript+JQuery【JQuery很少，只有动画用到】

Web项目[仿慕课网项目]

这里为了熟悉前面的所学是指HTML和CSS加上JavaScript的部分内容。
需要源码请留言~~~~

界面展示

这里的界面效果如下

这里的界面是模仿的慕课网，中间的图片有滚动效果，可以自动切换图片；中间界面的目录中，鼠标放上去可以显示子目录。

界面布局

这里也没有引入Vue；也没有采用良好的布局；整个布局就4个盒子；最上方的div就是头部div；包括上方的衔接，logo，搜索框，还有登录和注册

最主要的是内容div，就是轮播图的整个部分，还包括旁边的目录

下方的是衔接图片div；包括web前端，PHP，java等几种语言的衔接

最下方的就是底部footer的div；包括微信公众号，微博等图标还有下方的衔接还有审核图样

<div id="header"><div id="content" class="main postion-re"><div id="pathBanner" class="path-banner"><div id="footer">

这就是页面的几个主要的部分；剩下的就是完善每个部分

HTML代码部分展示

<!--头部的内容 --><div id="header"><!-- 头部左侧的内容 导航栏--><div class="header-left fl"><ul><li><a href = ""><img width="126px" height="72px" src="img/Cfeng官网(已去底).png" /></a>  <!-- 左侧的logo--></li><li class="margin-160"><a href="">项目</a></li><li><a href="">路线</a></li><li><a href="">猿问</a></li><li><a href="">手记</a></li></ul></div><!--网页头部右侧的内容 --><div class="header-right fr"><!-- 输入框--><div class="search-bar margin-r60 fl postion-re"><div id="searchOption"><a class="serrch-prompt postion-ab" href="">前端小白</a><a class="serrch-prompt postion-ab left-70" href="">Java入门</a></div><input type="text" id="searchInput" /><a href=""><img width="18px" height="17.6px" class="serrch-prompt postion-ab top-30 right-0" src="img/SearchInput(已去底).jpg"/></a></div><ul class="login-register fl"><li><a href="">登录</a></li><li><a href="">注册</a></li></ul></div></div>

CSS代码部分展示

@charset "utf-8";
body,ul,li,img,div,a{margin: 0;padding: 0;font-family: "microsoft yahei","宋体",arial;
}a{text-decoration: none;
}ul{list-style: none;
}html,body{position: relative;height: 100%;min-height: 850px;
}img{vertical-align: middle;border: 0;
}input,button,a{border: 0;outline: 0;
}body{background-color: #fdfdfd;
}.fl{float: left;
}.fr{float: right;
}.postion-re{position: relative;
}.postion-ab{position: absolute;
}.text-c{text-align: center;
}.left-10{left: 10px;
}.left-50{left: 50px;
}.left-70{left: 70px;
}.right-0{right: 0;
}.top-30{top: 30px;
}.margin-160{margin-left: 60px;
}.margin-r60{margin-right: 60px;
}/* 页面第一张背景图片*/
#first-bk{z-index: -1;width: 100%;height: 100%;background-image: url(img/Rrirst.jpg);background-size: 100%;
}
/* 页面顶部内容*/
#header{height: 80px;line-height: 80px;
}#header a {color: #07111b;
}#header a:hover{color: #FF0000;
}/*页面导航部分*/
.header-left li{float: left;
}.header-left a{padding: 0 20px;font-size: 16px;
}/* 顶部输入框的样式*/
.search-bar{width: 240px;height: 60px;
}
/* 输入框*/
.search-bar input{width: 240px;height: 40px;border: 0px;border-bottom: 1px solid #ccc;line-height: 40px;font-size: 14px;padding-left: 10px;background: transparent;
}.serrch-prompt{font-size: 14px;z-index:3;
}/* 注册 登录样式*/
.login-register li{float: left;
}.login-register a{padding-left: 30px;
}

JS代码部分展示

/*** 输入框点击效果* 输入框得到焦点，输入框的上方文字消失* 输入框失去焦点，判断输入内容是否为空，为空时上方文字显示 */
function searchBar() {var searchInput = document.getElementById('searchInput'),searchOption = document.getElementById('searchOption');searchInput.onfocus = function() {searchOption.style.display = 'none';}searchInput.onblur = function() {if (searchInput.value == '') {searchOption.style.display = 'block';}} 
}/*** 轮播图实现方法* prev,next为左右切换按钮* list存放所有的图片*/
function carousel() {var prev = document.getElementById('prev'),next = document.getElementById('next'),list = document.getElementById('list'),content = document.getElementById('content'),animited = false,time = 300,interval = 50,newleft = 1,speed = 1,timers;/***执行动画的函数animite* offset为轮播图切换的距离* offset == 1200表示向左切换* offset == -1200表示向右切换*/function animite(offset) {/***newLeft为新的左边距,当前左边距+offset(要切换的距离)*speed为切换时的速度,是图片匀速切换,speed越大图片切换越快* animited表示一次只可以切换一张图片,如果当前图片没切换完,点击切换按钮无用* 防止用户一直点击左右切换按钮，图片一直切换*/newleft = parseInt(list.style.left) + offset;speed = offset / (time / interval);animited = true;function go() {var num = parseInt(list.style.left);/*** 条件意思为(speed < 0)表示向右切换,(speed > 0)向左* (num > newleft)/(num < newleft)判断是否到达目标位置* setTimeout只执行一次,没有到达目标位置时继续使用定时器setTimeout(go, interval)* * 图片到达位置之后，还会再执行一次else里面的内容* animited = false,点击按钮允许切换* 如果发现图片切换到(newleft > -1200) 等于newleft = 0存放的是最后一张图片,把它换到真正的位置上* 如果发现图片切换到(newleft < -3600 ) 等于newleft = -4800存放的是第一张图片,把它换到真正的位置上*/if ((speed < 0 && num > newleft) || (speed > 0 && num < newleft)) {list.style.left = num + speed + 'px';setTimeout(go, interval);} else {animited = false;list.style.left = newleft + 'px';if (newleft > -1200) {list.style.left = -3600 + 'px';}if (newleft < -3600) {list.style.left = -1200 + 'px';}}}go();}/**js定时器，每隔七秒切换图片，*自动切换按钮*/function play() {timers = setInterval(function() {prev.onclick();}, 7000);}/*** 鼠标移至清除定时器*/function stop() {clearInterval(timers);}/*** 左右切换按钮*/next.onclick = function() {if (!animited)animite(1200);}prev.onclick = function() {if (!animited)animite(-1200);}

整个项目看着代码挺多，但是构思特别简单，如果感兴趣可以写一写~🌳

接下来再分享一些书本上的遗漏的知识

虽然现在前端最火的还是react和Vue，Jquery有点淘汰了，但是存在即合理，可以看看其合理之处，毕竟曾经Jquery很流行

HTML补充

之前已经介绍了HTML中的很多常见的标签和重要的表单，接下来将补充一点HTML的遗漏之处

URL,HTTP,HTML介绍

这几个概念已经介绍过很多次，但是因为还是挺重要的，这里再解释一下

• URL uniform resource locator 统一资源定位符，是互联网标准资源（文件）的地址。URL包括此恶意、服务器地址（IP）、路径和文件名。比如JDBC中的连接对象中的URL

jdbc:mysql://localhost:3306/basename?serverTimezone =GMT%2B8

这里的?serverTimezone=2B8是时区

• HTTP hyperText transfer protocol 超文本传输协议 是互联网上应用最广泛的一种网络协议。可以使用HTTP在浏览器于服务器之间传输图像和其他类型的文件默认使用80端口。 当用户在地址栏输入网址后，浏览器于服务器建立TCP连接，发送HTTP请求，服务器解释后返回一个响应消息。 常见的状态代码由200 OK 404 NOT FOUND 403 Forbidden
• HTML hyperText markup language 超文本标记语言。浏览器依次显示识别出的标记内容，不能识别的标记不做处理，跳过继续解释执行

特殊的注释【条件注释】

因为IE浏览器的特殊性，除了可以使用普通的注释; 可以使用条件注释；条件注释中的代码只有IE浏览器会执行，其他的浏览器当作普通的注释忽略

<!-- 我是注释，所有浏览器通用--><!--[if IE]>
正常的html代码       --------只有IE浏览器会解释执行
<![end if]-->

HTML头部元素

之前的HTML设计中，并没有明确头部的元素。head元素是所有头部元素的容器，里面可包含脚本，指示样式表。提供元信息。head中常用的标签是title link meta script style

• title 可以设置网页浏览器工具栏中的标题，提供页面添加到收藏夹时的标题
• meta 提供关于HTML文档的元数据；元数据不会显示在页面上，meta可用于规定页面的描述、关键词和文档的作者，最后的修改事件和其他的元数据。

<head><meta 可选属性名="……" content="……"/>
</head>

content是meta标签的必选属性，作用是描述页面的内容，HTML5的设置编码的格式为

<meta charset="utf-8"/>

这里只是说明浏览器解释文档的编码方式，但是不可能改变本身的编码方式

可用http-equiv属性搭配content用来网页的自动刷新，在js也有自动执行的周期函数setInterval 和返回值给clearInterval

<meta http-equiv="Refresh" content="5"/>  <!--网页每隔5秒刷新-->

可用name属性和content组合来指定页面的作者、关键字和描述等信息

将那么设置为Keywords，就可以设置页面的关键字；name设置为Decription，就可以是网页的描述

<meta name="Keywords" content="教育，java学习"/>
<meta name="Description" content="Cfeng是以java学习为主，拥有完整的java学习路线，同时包含各种CS专业知识，为IT深入学习助力"/>

这里再看一下京东页面的制作

<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">

CSS和HTML属性的区别

HTML标签的属性和CSS的属性是完全不同的，不同HTML标签具有不同的属性，属性设置使用=；CSS用于设置独立样式，与HTML标签无关，CSS属性设置使用: CSS是专门用来修饰网页的。所以大部分时候修饰使用的是CSS，少部分直接使用属性

div嵌套展示

现在电商项目最主要的部分就是商品的展示框，这里就书写一个商品的展示框

一个商品应该放在一个大的div中，这个div包含4个div，最上面是图片div，下面是价格显示div，再下面是评价div；最下面是文字简介div

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商品展示</title></head><body><div style="border: 1px solid aliceblue;width: 232px;height: 300px;"> <!-- 最外层的div--><div style="text-align: center;"><a title="Cfeng,为你的IT学习助力" href="DOMstudy.html" target="_blank"> <!--title设置悬停的时候的显示内容--><img width="165" height="165" src="img/Cfeng%20logo.PNG" /></a></div><div style="font-size: 16px;color: red;text-align: center;"><span style="color: black;"><b>￥</b></span>12980.00    <!--span用于定义不同的颜色--></div><div style="font-size: 14px;text-align: center;line-height: 28px;color:dimgray">已有<a style="color: #FF0000;" href="JavaScriptstudy.html" target="_blank">50+</a>人评价</div><div style="font-size: 12px;color: dimgrey;">Cfeng,为你的IT学习助力,让你的学习不再困难</div></div></body>
</html>

就是最外层一个大的div，里面四个小的div

块语句不能嵌套再行内元素中

< ol>标签的type

之前的列表分享的时候，分享了无序列表ul的type；但是没有介绍ol的type，ol的type有4类

• 1 默认 数字1，2，3……
• A 大写英文字母 A,B,C,D,……
• a 小写英文字母 a，b………
• I 大写罗马字母 I II III ……
• i 小写罗马字母 i，ii，iii……

通过CSS设置列表符号制作导航栏

在实际操作中，不赞成使用标签的type属性，建议使用CSS的list-style-type属性

因为CSS是专门的样式表设计，所以样式设计主要依靠CSS

这里演示设置一个简单的垂直导航栏

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>垂直导航栏</title></head><body><div><ul style="width: 150px;height: 100px;background-color: lavender;list-style-type: none;"><li style="height: 30px;line-height: 30px;"><a href="DOMstudy.html" target="_blank" style="font-size: 14px;color: aqua;">家用电器</a></li><li style="height: 30px;line-height: 30px;"><a href="JSON.html" target="_blank" style="font-size: 14px;color: aqua;">手机</a><span style="font-size: 12px;">/</span><a href="JavaScriptstudy.html" target="_blank" style="font-size: 14px;color: aqua;">数码</a></li><li style="height: 30px;line-height: 30px;"><a href="study.html"target="_blank"style="font-size: 14px;color: aqua;">电脑办公</a></li></ul></div></body>
</html>

• 家用电器
• 手机 / 数码

这里的导航栏给整个列表设置了高度的样式，并且设置了背景色；每一个项设置了高度间距；这里对/设置了span行内标签来设置字体大小

使用div和span布局表单

之前的表单都是使用的table来进行的布局，但是使用table不是很灵活，有很大的局限性；所以还是使用div和span来进行美化.

可以简单规划一下，首先整个表单放置在div中，每一行设计两个span；前面的span为100px，右对齐；后面为一个span，宽度为200px，放置表单元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>div表单</title><meta name="keywords" content="账号注册" /><meta name="description" content="注册" /><style type="text/css">.main{width: 500px;}.tip{display: inline-block; //行内块元素  这样width属性才有效width: 100px;height: 30px;text-align:right;}.content{display: inline-block;width: 200px;height: 30px;line-height: 30px;text-align: left;}.subm{display: inline-block;text-align: center;width: 300px;}</style></head><body><div id="haomaTitle" class="haomaTitle"><form action="JSON.html" method="get"><div class="main"><span class="tip">用户名:</span><span class="content"><input type="text" name="uname"/></span><br><span class="tip">密码:</span><span class="content"><input type="password" name="pwd"/></span><br><span class="tip">确认密码:</span><span class="content"><input type="password"/></span><br><span class="tip">性别:</span><span class="content"><input name="sex" type="radio" value="man" />男<input name="sex" type="radio" value="woman"/>女</span><br><span class="tip">出生年月</span><span class="content"><select name="year"><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option></select><select name="month"><option value="12">12</option><option value="11">11</option><option value="10">10</option></select></span><br><span class="subm"><input type="submit" value="立即注册"/></span></div></form></div></body>
</html>

需要注意span不会自动换行，需要手动换行;这里整个表单放在最大的div中

HTML5

之前的分享中只有图片或者普通的文件的操作，HTML5是支持音频或者视频的。

audio音频

在audio标签中嵌入source标签，属性src放文件的地址，type为audio/ogg或者mpeg

video视频

也是在vedio标签中嵌入source标签，就可以放入网页了

新的按钮input

• date 日期选择器中选择一个日期
• datetime-local 选择一个日期UTC
• email 输入邮箱地址
• month 选择一个月份
• range 包含在一定范围的数值有max和min 显示为滑动条
• url 包含url地址的输入域，提交表单时，会进行自动验证

<audio controls><source src="" type="audio/mp3"/></audio><video width="320" height="240" controls><source src="img/shangchuanship.mp4" type="video/video/mp4"></source></video>

JQuery简单介绍

因为目前的框架Vue更加地使用，这里就简单提一下JQuery就行，轻量级

JQuery是javasc库，设计的目的就是write less ，Do more；里面封装了JavaScript常用的功能代码，优化了DON操作，事件处理和AJax交互

权衡一番之后，之后再使用框架开发，到时候Vue和JQuery对照看