Home > Developer > Web Develop
For several days did not update the blog, just finished a html+css simple project. After a few days of groping, found a lot of income. Before just have to write demo, see Knowledge point, no personally practical project. But after the actual combat will understand, how to better improve their technology. For this project development, I summed up the following content:
first, Technical Summary
1, the public style of setting
Before starting the project, we can get a general look at the contents of each page in the project, such as font style, paragraph structure, text size, etc. We can set a fixed style file for this Content. This file can be introduced directly in development without having to re-knock the CSS Code.
/*Basic Style*/* {margin:0;padding:0; }Body{font-family:"microsoft Jas black";}. Clear{/*clear both sides floating*/Clear:both;}. FL{/*Clear left float*/float: left;}. Fr{/*Clear Right float*/float: right;}a{/*Remove the default underline for links*/text-decoration:None;}Li{/*Remove list Default style*/List-style:None;}
You need to use the class name immediately after the class names to use It:
<class= "div01 lf"></div>< class= "div02 clear"></div>
2. Overall layout
When developing the project process, if the frame of each page is set up beforehand, it is only necessary to fill in the concrete content in the late Stage. And I used the following framework to achieve the overall layout of the Page:
<Body> <DivID= "header"></Div><!--content at the top of the page - <DivID= "nav"></Div><!--Navigation Section - <DivID= "content"></Div><!--Page Middle Content - <DivID= "footer"></Div><!--bottom of page -</Body>
Generally speaking, set up a good page after the general framework, the rest is directly a piece of the filling into the convenient, so that the development of ideas are relatively clear. of course, you have to set the corresponding CSS style, but this depends on the specific requirements of the project to do.
3. transduction elements
When the general layout is ready, the next step should be starting from transduction, although there is not much technical operation, but there are some places to pay attention to. For example, in the cut chart, pay special attention to the Size. Although some are relatively minor parts, they need to be handled with PATIENCE. Because the details of the problem will often lead to different results. In fact, do not think that almost can, sometimes nearly is almost, when the effect is not satisfactory, in the end still have to spend time to Modify. furthermore, when saving transduction, because a images file is automatically generated, we do not have to create a new directory ourselves, or go into a directory, or it will appear in the corresponding location images this folder.
4, naming, Code Writing specification
The naming of the specification helps to improve code Readability. There are quite a lot of relevant specifications on the internet, here I also briefly listed several points:
(1), Intuitive naming
When designing a Web page and the need to identify a div, the most natural idea is to name it using words that describe the location of the page where the element is Located.
Example: Top-panel
Horizontal-nav
Left-side
(2), structured naming
Example: Main-nav
Subnav
(3), member-based Naming conventions
Member-based naming conventions refer to the subordinate relationships of files and folders, which are named by the method of classification, which makes the arrangement of files more Logical.
For example: a picture file is "file_on" before the mouse click. and the picture file after the click is named "file_off" according to this category. more Clarity.
5, learn to make "sprite map"
In the development of the project will add a lot of small icons, small pictures. If a sheet is cut down and saved, it is also more troublesome to use, plus the amount of memory is also large, so that the page loading speed is much slower. This is not a good thing, greatly reducing the user experience. so, we can cut down the small picture in advance on the same page, when the development of the only need to put this picture into. Then follow the situation to adjust the position of the background image, using background-position This property can be set.
6, the clarity of knowledge points
In the project, I am not familiar with some knowledge points, not skilled use, so the development speed is SLOW. When we have mastered a knowledge point, we can quickly write code to achieve the corresponding Effect. In this project development process, I mainly is not familiar with the following knowledge points:
(1), the use of the relationship selector
(2), use of Pseudo-class selectors
Especially E:first-of-type and E:first-child. In fact, the two biggest difference is that the former is the parent element under the first structure tag, the latter does not need to be the first structure Tag. Here's an example:
<Divclass= "test"> <!--<a href= "#" > Test </a> - <P>P Label</P> <ahref="#">A label</a> <ahref="#">A label</a> </Div>
A:first-child is the first structure tag under. test, and it is a tag, not a result.
A:first-of-type does not need to be the first child element only needs to be the first of the A tag Under. test.
(3), CSS Properties of opacity, z-index, display
a, opacity
in this project development, one effect is to use the effect of masking layer. Such as. The first thing I did was write two div, then set the second Div transparent. Then use hover to turn it back to Opaque. The second Div is also positioned to coincide with the first Div. But I found that it was a lot of code and CONFUSING. and reference to other small partners of the code, found that in fact, flexible use of z-index can also do this effect. Here is a concrete implementation
CSS Code: . Div1 {width:200px; height:200px; Background-color: #ccc; position:relative; font-size:20px; text-align:center; line-height:200px; }. Div2 {width:200px; height:200px; position:absolute;/* to coincide with the parent element */top:0; left:0; Background:rgba (21,85,144,0.2); opacity:0;/* first set to transparent */transition:all 0.3s;/* transition effect */cursor:pointer; }. Div2:hover {opacity:1; } HTML code: < class= "div1"> please put your mouse here < class = "div2" ></ Div > </ Div >
b, Z-index
retrieves or sets the stacking order of Objects.
The object of the class, the larger the value of this property parameter, is stacked on top.
If this property of two objects has the same value, it will cascade in the order in which they are streamed in the HTML document, which will overwrite the previous One.
The value of the position property must be set to absolute, relative, or fixed, which can take effect.
c, Display
None: hides the Object. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden
Inline: Specifies that the object is an inline element. Block: Specifies that the object is a block Element.
List-item: Specifies that the object is a list Item.
Inline-block: Specifies that the object is an inline block Element. (CSS2)
second, the mentality summary
Through this project exercise, I found that in fact, many times is not a direct ability problem, but the attitude Problem. At first, more than 10 pages were to be completed in a few days, and I doubted my final result. But I also thought, if later work, also avoids inevitably will "the high pressure" the Work. That is, it is possible to complete the task in a short period of time. The process is always yanglijuan, but often others value only the Result. The results did not come out, that is, the work is not in place, although it is very cruel, but it is True. The completion of this project is about 90%, and some effects are not achieved. But later found to be browser-compatible, which is really a headache problem. It's a hassle, But it's also an essential part. For this project exercise, I summed up the following points, I think I can promote the place:
1, familiar with and proficient in using each HTML sticky note and CSS Properties. I think one of the reasons for the slow development is the lack of mastery of the knowledge points. For example, to achieve an effect, but because you can not remember what attributes to use, or forget the property name, but also take the time to find the Data. Virtually time is Wasted.
2, reduce redundancy, optimize the Code. It can be omitted or omitted as well, because the code takes up more memory and the page loads more slowly. In the process of writing code, You can also first think about what is relatively concise wording, improve the speed of code Writing. Of course, This is a little bit of accumulation, practice more naturally will also slowly understand how to improve the code writing speed and reduce redundancy.
3, transduction Speed. Perhaps less use of design tools, the software interface is not familiar with the Operation. But transduction does not really need to be too high-tech, but one thing to be aware of is Accuracy. It can also improve the level of Concentration.
4, more thinking and more practice, Fools. In the face of a technical problem, my usual practice is to think first, I can not think of baidu, refer to the internet, and then realize their own. If the information on the Internet is not very clear or not very understanding of the Situation. I think the students or teachers, through mutual exchange of learning, in fact, can be relatively quick to understand the knowledge points, and find their shortcomings. At the same time learn from other people do good things.
5, cultivate a rigorous attitude
A lot of people are more likely to overlook the problem of Detail. In my own opinion, I don't think I'm a serious person. Sometimes the results are poor because of their carelessness. so, after knowing this, I will always remind Myself. You can't ignore things that seem insignificant because of the speed of the Pursuit.
HTML+CSS Project Development Summary
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
