HTML+ CSS+JavaScript实战 ----仿慕课网【简单易上手】

Java学习打卡：第89天

javaWeb

Java养成计划（打卡第85天)

---

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>  
					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浏览器会执行，其他的浏览器当作普通的注释忽略

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"/>  

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

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

<meta name="Keywords" content="教育，java学习"/>
<meta name="Description" content="Cfeng.com是以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 style="text-align: center;">
				<a title="Cfeng.com,为你的IT学习助力" href="DOMstudy.html" target="_blank"> 
					<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    
			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.com,为你的IT学习助力,让你的学习不再困难
			div>
		div>
	body>
html>

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

商品展示

￥12980.00

已有 50+人评价

Cfeng.com,为你的IT学习助力,让你的学习不再困难

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

< 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">2017option>
							<option value="2018">2018option>
							<option value="2019">2019option>
							<option value="2020">2020option>
						select>
						<select name="month">
							<option value="12">12option>
							<option value="11">11option>
							<option value="10">10option>
						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对照看