Home > Developer > JavaScript
HTML + CSS Project Development Summary and css Project Development Summary
I haven't updated my blog for several days. I just finished a simple HTML + CSS project. After a few days of exploration, I found that the benefits were great. In the past, I just had to write a demo, read the knowledge points, and did not have a project. However, we will understand how to improve our technology after practice. For this project development, I summarized the following content:
I. Technical Summary
1. Set public styles
Before starting the project, let's take a general look at the content of each page in the project, such as the font style, paragraph structure, and text size. We can set a fixed style file for this content. You can directly introduce this file during development without repeating the CSS code.
/* Basic style */* {margin: 0; padding: 0;} body {font-family: "";}. clear {/* clear floating sides */clear: both ;}. fl {/* clear the left floating */float: left ;}. fr {/* clear the right floating */float: right;} a {/* remove the default underline Of the link */text-decoration: none ;} li {/* remove the default list style */list-style: none ;}
You can directly add the class name you want to use after the class name:
<div class="div01 lf"></div><div class="div02 clear"></div>
2. Overall Layout
During the project development process, if you set up the framework on each page beforehand, you only need to fill in the specific content in the later stage. I am used to using the following framework to achieve the overall page layout:
<Body> <div id = "header"> </div> <! -- Content on the top of the page --> <div id = "nav"> </div> <! -- Navigation --> <div id = "content"> </div> <! -- Content in the middle of the page --> <div id = "footer"> </div> <! -- At the bottom of the page --> </body>
In general, after setting the general page framework, it is easier to fill the rest in one piece directly, so that the development ideas are clearer. Of course, you need to set the corresponding CSS style, but this should be done according to the specific requirements of the project.
3. graph cutting elements
After the general layout is completed, the next step should be to start with the cut graph. Although there are not many technical operations, there are some points to note. For example, in the cut chart, pay special attention to the size. Although some are relatively subtle, You need to be patient. Because the problem of segmentation often leads to different results. In fact, don't think it's okay. Sometimes it's a little worse. When the effect is unsatisfactory, you still have to spend time modifying it. Besides, because an images file is automatically generated when saving the cut graph, we do not need to create a new directory or enter a directory, otherwise, the images folder will still appear in the corresponding location.
4. Naming and code writing specifications
Standardized naming helps improve code readability. There are many related specifications on the Internet. Here I will also list a few points:
(1) intuitive naming
When designing a Web page and identifying a div, the most natural idea is to use words that can describe the location of an element's page to name it.
Example: top-panel
Horizontal-nav
Left-side
(2) Structured naming
Example: main-nav
Subnav
(3) member-based naming rules
The member-based naming Rules refer to naming by file and folder subordination through classification, which can make the arrangement of files more logical.
For example, an image file is named "file_on" before the mouse is clicked. The image file after the mouse is named "file_off" is named more clearly according to this category.
5. Learn to make sprite Images"
Many small icons and images will be added to the project development. If a piece of data is cut down and saved, it will be troublesome to use, and the memory occupied will also be large. As a result, the page loading speed will be much slower. This is not a good thing, greatly reducing the user experience. Therefore, we can cut down the small image and place it on the same page in advance. At that time, we only need to introduce this image. Then follow up the situation and adjust the position of the background image. You can use the background-position attribute to set the position.
6. Clear knowledge points
When I was working on a project, my development speed was slow because I was not familiar with some knowledge points and could not use them skillfully. After mastering a knowledge point, we can quickly write code to achieve the desired effect. During the development of this project, I am not familiar with the following knowledge points:
(1) Use of link Selector
(2) Use of pseudo-class delimiters
In particular, E: first-of-type and E: first-child. In fact, the biggest difference between the two is that the former is the first structure tag under the parent element, while the latter does not need to be the first structure tag. Example:
<Div class = "test"> <! -- <A href = "#"> test </a> --> <p> p tag </p> <a href = "#"> a tag </a> <a href = "#"> a tag </a> </div>
A: first-child is the first structure label under. test, and it is a label. If it is not, it will not work.
A: first-of-type does not need to be the first child element, but only the first one of the tag under. test.
(3) opacity, z-index, and display of CSS attributes
A. opacity
In this project development, there is an effect that requires the effect of the masking layer. For example. At first, I wrote two divs and set the second divs to transparent. Then, use hover to change its transparency back to opacity. At the same time, the second div is located to coincide with the first div. But I found that writing the code in this way is too complicated and messy. Referring to the code of other partners, I found that the flexible use of z-index can also achieve this effect. The following are specific implementations:
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;/* overlap with the parent element */top: 0; left: 0; background: rgba (144, 0.2); opacity: 0;/* First set to transparent */transition: all 0.3 s;/* transition effect */cursor: pointer ;}. div2: hover {opacity: 1 ;}
HTML code: <div class = "div1"> place the cursor here <div class = "div2"> </div>
B. z-index
Retrieves or sets the cascade order of objects.
A Parallel Object. A larger value of this attribute parameter will be stacked at the top.
If the attributes of two objects have the same value, they will be stacked Based on the sequence of their flow in the HTML document, and the subsequent content will overwrite the previous one.
The value of position must be set to absolute, relative, or fixed.
C. display
None: hides an object. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for hidden objects.
Inline: Specifies the object as an inline element. Block: Specifies the object as a block element.
List-item: Specifies the object as a list item.
Inline-block: Specifies the object as an inline block element. (CSS2)
Ii. mentality Summary
After this project exercise, I found that in many cases, it is not a direct capability problem, but an attitude problem. At the beginning, a dozen pages were to be completed within a few days, and I was skeptical about my final results. However, I also thought that if I work in the future, I would not be able to avoid "High Pressure" work. That is, the task may be completed in a short time. The process is always tough, but often others only value results. The result is that the job is not in place. Although it is cruel, it is true. The project was completed at about 90%, but the effect was still poor. But later I found that browser compatibility is required, which is indeed a headache. Although troublesome, this is also an essential part. For this project exercise, I have summarized the following points, which I think can be improved:
1. Familiar with and familiar with every HTML tab and CSS attribute. I think one of the reasons for slow development is that I have insufficient knowledge about the knowledge points. For example, if you want to achieve a certain effect, you have to spend time searching for materials because you cannot remember which attributes are used or forget the attribute names. Virtually no time is consumed.
2. reduce redundancy and optimize code. It is better to omit it because the code occupies more memory and the page loading speed slows down. In the process of writing code, you can also first think about some simple writing methods to improve the code writing speed. Of course, this is also accumulated a little bit. When you practice more, you will naturally learn how to improve the code writing speed and reduce redundancy.
3. Cut graph speed. Maybe there are few design tools and you are not familiar with the operations on the software interface. However, you don't need to be too high-tech to cut a graph, but you need to pay attention to accuracy. At the same time, it can also improve the degree of focus.
4. Think twice and practice repeatedly. When encountering a technical problem, I usually think about it myself first. I can't think of Baidu, refer to the Internet, and then implement my own. If the information on the Internet is not clear or understandable. In my opinion, when I ask my classmates or teachers to learn from each other, I can quickly understand the knowledge points and find my own shortcomings. At the same time, we will learn from other good aspects.
5. Develop a rigorous attitude
Many people are easy to ignore the issue of detail. In my opinion, I do not think I am a strict person. Sometimes the results may be poor due to carelessness. So after knowing this, I will always remind myself. You cannot ignore seemingly insignificant things for speed.
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
