Java learning punch in: day 89
javaWeb
Java cultivation program (punch in day 85)
Web project HTML+CSS + JavaScript+JQuery [JQuery is rarely used, only for animation]
Web project [imitation Muke network project]
Here, in order to get familiar with what I learned earlier, it refers to HTML and CSS plus JavaScript.
If you need the source code, please leave a message~~~~
Interface display
The interface effect here is as follows
The interface here is an imitation Muke network. The pictures in the middle have a scrolling effect and can automatically switch pictures; in the directory of the middle interface, the mouse can display subdirectories.
Interface layout
Vue is not introduced here; nor is a good layout adopted; the whole layout consists of four boxes; the top div is the head div; including the connection, logo, search box, login and registration at the top
The most important thing is the content div, which is the whole part of the rotation chart, including the adjacent directory
Below is the connection picture div; including the connection of web front end, PHP, java and other languages
The bottom is the div at the bottom of footer; including the official account of WeChat, micro-blog and other icons, as well as the link below and the audit plan.
<div id="header">
<div id="content" class="main postion-re">
<div id="pathBanner" class="path-banner">
<div id="footer">
These are the main parts of the page; the rest is to improve each part
HTML code part display
<!--Content of header --> <div id="header"> <!-- Content navigation bar on the left side of the head--> <div class="header-left fl"> <ul> <li> <a href = ""><img width="126px" height="72px" src="img/Cfeng Official website(Bottomed).png" /></a> <!-- Left logo--> </li> <li class="margin-160"><a href="">project</a></li> <li><a href="">Route</a></li> <li><a href="">Asked the ape</a></li> <li><a href="">Notes</a></li> </ul> </div> <!--Content on the right side of the page header --> <div class="header-right fr"> <!-- Input box--> <div class="search-bar margin-r60 fl postion-re"> <div id="searchOption"> <a class="serrch-prompt postion-ab" href="">Front end Xiaobai</a> <a class="serrch-prompt postion-ab left-70" href="">Java introduction</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(Bottomed).jpg"/></a> </div> <ul class="login-register fl"> <li><a href="">Sign in</a></li> <li><a href="">register</a></li> </ul> </div> </div>
CSS code part display
@charset "utf-8";
body,ul,li,img,div,a{
margin: 0;
padding: 0;
font-family: "microsoft yahei","Song typeface",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;
}
/* The first background picture of the page*/
#first-bk{
z-index: -1;
width: 100%;
height: 100%;
background-image: url(img/Rrirst.jpg);
background-size: 100%;
}
/* Content at the top of the page*/
#header{
height: 80px;
line-height: 80px;
}
#header a {
color: #07111b;
}
#header a:hover{
color: #FF0000;
}
/*Page navigation section*/
.header-left li{
float: left;
}
.header-left a{
padding: 0 20px;
font-size: 16px;
}
/* The style of the top input box*/
.search-bar{
width: 240px;
height: 60px;
}
/* Input box*/
.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;
}
/* Register login style*/
.login-register li{
float: left;
}
.login-register a{
padding-left: 30px;
}
JS code part display
/**
* Input box click effect
* The input box gets the focus and the text above the input box disappears
* When the input box loses focus, judge whether the input content is empty. When it is empty, the text above will be displayed
*/
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';
}
}
}
/**
* Implementation method of rotation chart
* prev,next Left and right switch button
* list Store all pictures
*/
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 function that performs animation
* offset The distance to switch for the carousel map
* offset == 1200 Indicates switching to the left
* offset == -1200 Indicates switching to the right
*/
function animite(offset) {
/**
*newLeft For the new left margin, the current left margin + offset (the distance to switch)
*speed Is the speed at which the picture is switched at a constant speed. The larger the speed, the faster the picture is switched
* animited It means that only one picture can be switched at a time. If the current picture is not switched, clicking the switch button is useless
* Prevent the user from clicking the left-right switch button all the time, and the picture will be switched all the time
*/
newleft = parseInt(list.style.left) + offset;
speed = offset / (time / interval);
animited = true;
function go() {
var num = parseInt(list.style.left);
/**
* The condition means that (speed < 0) means switching to the right and (speed > 0) to the left
* (num > newleft)/(num < newleft)Determine whether the target position is reached
* setTimeout Only execute once, and continue to use the timer setTimeout(go, interval) when the target position is not reached
*
* After the image reaches the location, the content in else will be executed again
* animited = false,Click the button to allow switching
* If it is found that the picture is switched to (Newleft > - 1200) equal to newleft = 0, and the last picture is stored, change it to the real position
* If the picture is found to be switched to (Newleft < - 3600) equal to newleft = -4800, the first picture is stored, change it to the real position
*/
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 Timer, switch pictures every seven seconds,
*Auto switch button
*/
function play() {
timers = setInterval(function() {
prev.onclick();
}, 7000);
}
/**
* Mouse over clear timer
*/
function stop() {
clearInterval(timers);
}
/**
* Left and right switch button
*/
next.onclick = function() {
if (!animited)
animite(1200);
}
prev.onclick = function() {
if (!animited)
animite(-1200);
}
The whole project looks at a lot of code, but the idea is very simple. If you are interested, you can write it~ 🌳
Next, share some missing knowledge from books
Although react and Vue are the most popular front-end, Jquery has been eliminated a little, but its existence is reasonable. You can see its rationality. After all, Jquery was once very popular
HTML supplement
We have introduced many common tags and important forms in HTML before. Next, we will add some omissions in HTML
URL,HTTP,HTML introduction
These concepts have been introduced many times, but because they are still very important, let's explain them again
- URL uniform resource locator is the address of Internet standard resources (files). The URL includes the malicious, server address (IP), path and file name. For example, the URL in the connection object in JDBC
jdbc:mysql://localhost:3306/basename?serverTimezone =GMT%2B8
Here? serverTimezone=2B8 is the time zone
- HTTP hyperText transfer protocol is the most widely used network protocol on the Internet. You can use HTTP to transfer images and other types of files between browsers and servers. By default, port 80 is used. When the user enters the web address in the address bar, the browser establishes a TCP connection with the server, sends an HTTP request, and the server returns a response after explanation Message. Common status codes are 200 OK 404 NOT FOUND 403 Forbidden
- HTML hyperText markup language. The browser displays the recognized markup content in turn. Unrecognized markup will not be processed. Skip and continue interpretation and execution
Special notes [condition notes]
Because of the particularity of IE browser, in addition to ordinary comments, conditional comments can be used; only IE browser will execute the code in conditional comments, and other browsers will ignore it as ordinary comments
<!-- I am a comment, common to all browsers--> <!--[if IE]> natural html code --------only IE The browser interprets the execution <![end if]-->
HTML header element
In previous HTML designs, there was no explicit header element. The head element is a container for all header elements, which can contain scripts, indicate style sheets, and provide meta information. The commonly used tag in the head is title link meta script style
- Title can set the title in the toolbar of the web browser and provide the title when the page is added to the favorites
- meta provides metadata about HTML documents; metadata will not be displayed on the page. meta can be used to specify the description of the page, keywords, the author of the document, the last modification event and other metadata.
<head>
<meta Optional attribute name="......" content="......"/>
</head>
Content is a required attribute of meta tag, which is used to describe the content of the page. The format of HTML5 setting code is
<meta charset="utf-8"/>
This only explains the encoding method of the document interpreted by the browser, but it is impossible to change its own encoding method
The HTTP equiv attribute can be used with content to automatically refresh the web page. In js, there are also automatically executed periodic functions setInterval and return values to clearInterval
<meta http-equiv="Refresh" content="5"/> <!--The page is refreshed every 5 seconds-->
The name attribute and content can be combined to specify the author, keyword, description and other information of the page
Set it to Keywords to set the keyword of the page; set name to description to set the description of the page
<meta name="Keywords" content="education java study"/> <meta name="Description" content="Cfeng.com So java Learning oriented and complete java Learning route, including various CS Expertise for IT In depth learning assistance"/>
Here's another look at the production of Jingdong page
<meta name="Keywords" content="Online shopping,E-Shop,household electrical appliances,mobile phone,computer,clothing,Home,Mother and baby,Beauty makeup,Gehu,food,fresh ,JD.COM"> <meta name="description" content="JD.COM JD.COM-The professional comprehensive online shopping mall provides you with authentic and low-cost shopping choices, high-quality and convenient service experience. The products come from hundreds of thousands of brand businesses around the world, including home appliances, mobile phones, computers, clothing, home, mother and baby, beauty, personal care, food, fresh and other rich categories to meet various shopping needs.">
Differences between CSS and HTML attributes
The attributes of HTML tags are completely different from those of CSS. Different HTML tags have different attributes, and the attribute setting uses =; CSS is used to set independent styles, independent of HTML tags. CSS attribute settings are used: CSS is specially used to decorate web pages. Therefore, most of the time, CSS is used for decoration, and a few directly use attributes
div nested display
Now the most important part of the e-commerce project is the commodity display box. Here is a commodity display box
A commodity should be placed in a large div, which contains four div, the top is the picture div, the bottom is the price display div, and the bottom is the evaluation div; At the bottom is the text introduction Div
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Commodity display</title> </head> <body> <div style="border: 1px solid aliceblue;width: 232px;height: 300px;"> <!-- Outermost div--> <div style="text-align: center;"> <a title="Cfeng.com,For your IT Learning assistance" href="DOMstudy.html" target="_blank"> <!--title Set the display content when hovering--> <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 Used to define different colors--> </div> <div style="font-size: 14px;text-align: center;line-height: 28px;color:dimgray"> already existing<a style="color: #FF0000; " href="JavaScriptstudy.html" target="_ Blank "> 50 + < / a > People's comments </div> <div style="font-size: 12px;color: dimgrey;"> Cfeng.com,For your IT Learning assistance,Make your study no longer difficult </div> </div> </body> </html>
It's a big div in the outermost layer and four small div in it
Commodity display
Block statements cannot be nested in inline elements
type of < ol > tag
In the previous list sharing, the type of the unordered list ul was shared; however, the type of ol was not introduced. ol has four types
- 1 default number 1, 2, 3
- A capital letters A,B,C,D
- A lowercase English letters a, b
- I capital Roman letter I II III
- i small Roman letters i, ii, iii
Make navigation bar by setting list symbols through CSS
In practice, it is not recommended to use the type attribute of the tag. It is recommended to use the list style type attribute of CSS
Because CSS is a special style sheet design, style design mainly depends on CSS
Here is a demonstration of setting up a simple vertical navigation bar
Vertical navigation bar<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vertical navigation bar</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;">Household Electric Appliances</a> </li> <li style="height: 30px;line-height: 30px;"> <a href="JSON.html" target="_blank" style="font-size: 14px;color: aqua;">mobile phone</a> <span style="font-size: 12px;">/</span> <a href="JavaScriptstudy.html" target="_blank" style="font-size: 14px;color: aqua;">Digital</a> </li> <li style="height: 30px;line-height: 30px;"> <a href="study.html"target="_blank"style="font-size: 14px;color: aqua;">Computer office</a> </li> </ul> </div> </body> </html>
The navigation bar here sets the height style for the whole list and sets the background color; the height spacing is set for each item; the span in line label is set for / to set the font size
Layout forms using div and span
Previous forms were laid out using table, but using table is not very flexible and has great limitations. Therefore, div and span are still used for beautification
You can make a simple plan. First, the whole form is placed in the div, and two spans are designed for each line; the front span is 100px, right aligned; the back span is 200px wide, and the form elements are placed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div form </title>
<meta name="keywords" content="Account registration" />
<meta name="description" content="register" />
<style type="text/css">
.main{
width: 500px;
}
.tip{
display: inline-block; //The width attribute is only valid for inline block elements
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">user name:</span><span class="content"><input type="text" name="uname"/></span><br>
<span class="tip">password:</span><span class="content"><input type="password" name="pwd"/></span><br>
<span class="tip">Confirm password:</span><span class="content"><input type="password"/></span><br>
<span class="tip">Gender:</span>
<span class="content">
<input name="sex" type="radio" value="man" />male
<input name="sex" type="radio" value="woman"/>female
</span><br>
<span class="tip">date of birth</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="Register now"/></span>
</div>
</form>
</div>
</body>
</html>
It should be noted that span does not wrap lines automatically, but needs to wrap lines manually; here, the whole form is placed in the largest div
HTML5
In the previous sharing, there were only pictures or ordinary files. HTML5 supports audio or video.
Audio audio
Embed the source tag in the audio tag. The attribute src is the address of the file. The type is audio/ogg or mpeg
Video video
Also embed the source tag in the vedio tag, and you can put it into the web page
New button input
- Select a date from the date selector
- Datetime local select a date UTC
- Email enter email address
- Month select a month
- Range contains values in a certain range. max and min are displayed as sliding bars
- The url contains the input field of the url address, which will be automatically verified when the form is submitted
<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 brief introduction
Because the current framework Vue is more used, just mention JQuery, which is lightweight
JQuery is a javasc library designed to write less, Do more; it encapsulates the common function code of JavaScript and optimizes DON operation, event processing and AJax interaction
After weighing, we can use the framework for development. At that time, Vue and JQuery will compare