Home > Developer > Web Develop
The site was erected from scratch [2]
Wow, let's start with a template today. The last time the brain pumped a template, the template can probably be summed up into several parts:
(Template here: Need to learn can download Oh ~ 24 hours after the download of the delete Oh ~)
Https://github.com/RockDeria/300shop.git
CSS folder is a style file, fonts should be a font resource file, images is a picture resource file, JS is a script folder, Index.html is our main static interface. (Can be viewed as the portal of the Web page)
The external style.css defines most of the custom styles.
1. Introduction of CSS and other style resource files (including some libraries and their own) in HTML static pages
Like programming languages, you need to introduce some packages and libraries. These tasks need to be done in the HTML
<Head><MetaCharSet= "Utf-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><title>Autumn month Ally's pastry shop</title><!--Google Font -<Linkhref= ' http://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700,800 'rel= ' stylesheet 'type= ' Text/css '><Linkhref= ' http://fonts.googleapis.com/css?family=Montserrat:400,700 'rel= ' stylesheet 'type= ' Text/css '><!--Font Awesome -<Linkrel= "stylesheet"href= "Http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><!--Preloader -<Linkrel= "stylesheet"href= "Css/preloader.css"type= "Text/css"Media= "screen, print"/><!--Icon Font -<Linkrel= "stylesheet"href= "Style.css"><Linkrel= "stylesheet"href= "Css/owl.carousel.css"><Linkrel= "stylesheet"href= "Css/owl.theme.default.css"><!--Animate CSS -<Linkrel= "stylesheet"href= "Css/animate.css"><!--Bootstrap -<Linkhref= "Css/bootstrap.min.css"rel= "stylesheet"><!--Style -<Linkhref= "Css/style.css"rel= "stylesheet"><!--Responsive CSS -<Linkhref= "Css/responsive.css"rel= "stylesheet"><!--HTML5 Shim and respond.js IE8 support of HTML5 elements and media queries -<!--WARNING:Respond.js doesn ' t work if you view the page via file:// -<!--[If Lt IE 9]><script src= "js/lte-ie7.js" ></script><script src= "https://oss.maxcdn.com/libs/ Html5shiv/3.7.0/html5shiv.js "></script><script src=" https://oss.maxcdn.com/libs/respond.js/1.4.2/ Respond.min.js "></script><! [EndIf] -</Head>
The above code can be roughly observed from top to bottom:
[1] Some coding and some basic parameters are set up
[2] Set the title (<title> tag) to be displayed on the page label
[3] loaded a series of styles, mainly including fonts, animations, icons and other styles and so on.
[4] The portion of the end of the injection is suspected to accommodate the browser to make the pre-loaded JS script execution.
2. Building the page
These are simple first to understand the next good, do not consider too much. The next step is the theme of the page, which is basically in the <body> tab:
<id= "Preloader"><id= "status" > </ Div > </ Div >
This thing, suspect is loading the process of that loaded animation.
<id= "HOME" style= "background-position:50% -125px;" >
This is the upper part of the page, the ID is home. Empirically, if the path of a link (such as an href) is marked as #ID, you can click to jump to the corresponding location of the page.
For example the above home, if we write a link <a herf = "#HOME"/> Then click will jump to the corresponding HOME module location.
The top of the static page is the div, the main attribute of the div is class, and the first parameter of class looks like a style, for example, we want to modify a div in the
The color of the font for a paragraph.
For example:
<class= "Home_text wow fadeinleft animated">
Then search in style Home_text will find this style unexpectedly, and then modify the corresponding p or H color RGB can be.
.home_text {padding-top : 210px ; padding-bottom : 210px ;} .home_text H2 {color : #F19EC2 ; font-size : 40px ; text-transform : uppercase ; letter-spacing : 13px ;} .home_text p {color : #F19EC2 ; font-size : 14px ; text-transform : uppercase ;} Class In addition to the style attributes are sometimes added some other parameters, some are used to determine the position of the offset, there are some added a lot of stunts up duang.
The offset seems to be the library inside the library function, but the general custom stunts can be found, such as some animation and so on.
<class= "Single_service wow fadeinup" data-wow-delay= "1s" >
As shown above, single is the style ID wow is a stunt (this is a comparison of fire web effects, there is a corresponding website interested can go to see), Fadeinup is an animation.
{0% {opacity: 0; -webkit-transform: translate3d (0, 100%, 0); transform: translate3d (0, 100%, 0);}Temporarily do not understand, first through the word understanding is gradually emerging bar, the parameters behind is 1 seconds, that is, 1 seconds from invisibility to become visible. Looks like these are all wow stunts, too?
"Add a lot of stunts, the web will become very dark, very bright, very oily."
If you need a list to display a series of Div, etc., you need to use row to standardize the format:
<class= "Row">
Row represents a row, and all labels in the row are squeezed into one line.
<class= "col-md-12 text-center">
This seems to be a bootstrap library. Col represents a column-12 is full of the entire line. The bootstrap rule I remember is a row of 12 columns. That means you can fill a line with col-md-12.
You can also fill a line with three col-md-4.
The general layout is like the above, can ensure that the construction of the Web page is not so wonderful. It is highly recommended to use three col-md-4 to fill a line, because when the phone is opened,
The col-md-4 is just a full line, not folded. Cross-device effect is better.
At the end of the page there is a little bit of a sliding stunt.
<class= "Owl-carousel">
This should also be a particular library inside the stunt, directly to use just fine.
At the end of the body, it is customary to refer to all JS files, such as
<src= "Js/my.js"></script>
Just now also simply write how to set up JS script, for example, we create a file under the JS folder my.js
You can write a method in it:
function js_my () {alert ("11111");}and introduce this JS at the end of the body.
<src= "Js/my.js"></script>
Then provide a simple click to access this JS function method. For example, we click on an a tag:
< Li >< href= "javascript:void (0);" onclick = "js_my ()" > popup alert</a></li>
This way, you can adjust the JS method.
The next step is to dynamically add the corresponding table div number and control the content of P through the dynamic JS script. and access to PHP server-side scripts via Ajax
Get the data. Looking forward to the next issue of the content ~
Finally, I wish you: Good health ~ Goodbye
Start your life from a zero-based website [2]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
