写于第一次写网页后

      最近接到写主页的任务，主页也较为简单，只需简单的展示功能，而不需要数据的交互，属于纯前端设计。此次写网页也为第一次写前端，从0开始，虽然一个周跌跌撞撞把网页写完，但是还是有很多云里雾里的东西。此篇文章只作为工作完成后的个人总结，如果侥幸为入门新手提供了一些无足轻重的帮助，那也是值得庆幸的。文章可能存在不正确的地方，那也请大家指正。

     Recently, i get a task of creating website for a compony. I'd like to share my experience about my work. Maybe there will be some errors in my essay, i hope it will not mislead you.

     First, this website i designed only show some pictures and words to others. So i just need to design static pages but not pages which can exchange datas with database. So, i use label "div" , "css" and javascript to dediagn it.

     When wo design a web front-end, we usually use the html label "div" and style "css" to design it, if you need to create some animations, javascript or other script language is needed. In a web page, the whole section you can edit is called body. You can create some labels "div" to divide body into some sub-region you want. And in a "div", you can put just a button or any other stuff you want to show, and the quantity is not defined.

      The pictures above are some examples of the label "div". Using these labels "div" you can show different contents in different region. Except for the label "div" other html labels such as "a", "ul", "li","table".... will be used if you need. You can learn usage of these labels in "http://www.w3school.com.cn/index.html".

      Then i will introduce usage of "css". As we can see in many websites, they are really different form each other. They have different pictures, color, font-size, background..... Some websites would be really beautiful with wonderful styles. Ok, we can use "css"  to design any styles you want. Then i will introduce some usages and properties of  "css".

       You can design "css" style for all html labels. For example,

body {    background-color: red;    width: 100%;}

      The code above will change the label "body" to a style with red background and  the body's width will be width of your browser's width. There are other "css" properties, you can learn them in "http://www.w3school.com.cn/index.html". What's more you can set style of specific html label according to the labels' id or class. 

<table class="logoStyle"></table>.logoStyle {color: Navy;font-family: 微软雅黑;font-weight: bold;}

     As you can see above, we set the label table's class "logoStyle", then we can use ".logoStyle" to set it's style: font's color is Navy, font's style is "微软雅黑", font's been bold. And any other labels whose property of class is "logoStyle" will be set as these style above. It's means all html labels' property of class can be the same.

<table id="logoStyle"></table>#logoStyle {color: Navy;font-family: 微软雅黑;font-weight: bold;}

     However, if the table's property of id is named "logoStyle", we will use "#logoStyle" to set its style,and the name of id is unique, it means these will be just one label in the page whose name of id is "logoStyle".

     You can just use the label "<style></style>" in a page to create the css style you want. Or you can write the css style in a outside css file, and then use the label

"<link></link>" to call it.  such as "<link rel="stylesheet" type="text/css" href="StyleSheet/menu.css"></link>".

     You can see many  wonderful animation in mang websites, you can also use css to achieve, but script language is more easer to achieve it. it is similar to css, You can just use the label "<script></script>" in a page to create the javascript you want. Or you can write the javascript in a outside js file, and then use the label

"<script></script>" to call it.  such as "<script src="../jQuerys/jQuery.js"></script>". For example, i use javascript to create a gorup of picture which can beautomatic switching.

     What i write above is just fundation about web front-end, i hope it will help you even a little bit.