A brief summary of my experience in writing HTML pages
|
It has been three or four months since I joined Word of Mouth. I feel that the biggest gain in the work process is in writing HTML pages, from visual drafts to web page DEMOs. I have no choice but to do this kind of work basically. From the initial wap entire site, Hangzhou homepage, bug requirements to the Guangzhou homepage, Shanghai homepage, store directory and other page redesigns, to the writing of the current DEMO for the redesign of the word-of-mouth card channel homepage. My mood has changed from the initial irritability and boring debugging to ease and ease, and now I can do it with ease. I have broken free from the constraints of IE6 and 7 Fuck bugs. I still remember vividly the feeling of trying to complete the entire page layout without writing a hack. I learned a lot from my colleagues in the company and summarized my own set of development steps: Overall analysis of page layout, unification, classification, and cutting (CSS Sprites) Split modules, plan HTML structure, plan and write CSS Combined into pages (thanks to YUI's page layout builder component) Step 1: Analyze the page layout as a whole. When you get the visual draft, don't start thinking about how to write HTML and CSS code, but first analyze the layout of the page as a whole, observe the spacing differences between the various modules of the page, the division of header, body, footer, CSS Sprites, image cutting matters, page color, how to set the background, etc., and then refine the layout of each module, from the outside to the inside, step by step. It can be said that this step is very critical, as it provides an overall framework layout for the code to be written below. Step 2: Summarize, unify, classify, and cut images (CSS Sprites) After the overall analysis, it is time to classify and combine modules. This step still requires looking at the whole page and analyzing which modules have similar styles (the most common ones are ul lists and some graphic layouts), including color, style, modification, background, width, padding, margin, border, etc. Categorizing the styles of similar modules will be of great benefit to the subsequent CSS code writing, which can maximize the simplification of CSS code. Step 3: Split modules, plan HTML structure, plan and write CSS After all the preliminary work is done, it’s time to write the code. I like to write each module or column separately. The advantage of this is that I can ignore the overall layout and build the HTML structure from the perspective of HTML semantics. At this time, there is less HTML code, and I don’t need to spend too much time writing CSS and viewing HTML code (I hate too much HTML code and pulling up and down the scroll bar, which is tiring!) Step 4: Combine into pages. After each module is written, use the page layout generator (thank you for it, efficiency is the first priority! The disadvantage is that the HTML structure is complicated, -_-) to integrate each split module, and also clean up the code of the CSS file. There are some tips for integrating CSS code: when setting the background of HTML elements in CSS Sprites, write all the elements in one place: /* background url */ .rhs-bd,.business-join h1,.yk-mod-content .business-join pa,.business-open-flow ul,.business-case-list ul li, .kb-bank-toolbar ul,.kba-consumer h1,.kba-consumer h1,.kba-consumer ul li,.kba-new-join ul li, .recommend-shop-list,.hot-sign,.search-merchant-bd{background:url(ka_bg.png) no-repeat;} In this way, the corresponding elements only need to set the background-position, the code is neat, the structure is clear, and the reconstruction and maintenance costs are low. Another point is to use margin with caution. Margin will cause many problems in IE6 and 7, so when writing CSS and planning HTML layout, you need to consider whether to use margin or padding. Each has its own advantages. Margin can keep the HTML structure relatively concise, and the principle of padding is to set padding in the child elements of the current HTML element to achieve layout (of course, it can also be under the current element, but it will change the width and height, and the width and height need to be readjusted). So my experience is: when writing HTML and CSS for modules, try to use padding as much as possible, especially when it comes to float, using padding will avoid many problems. There is a saying: If you know that doing this will cause bugs, try not to do it. The above development steps vary from person to person. I like and am used to this kind of thinking and development process, and I am experiencing the fun of it. |
<<: Implementation of HTML command line interface
>>: MySQL series 9 MySQL query cache and index
Recommend
CSS animation property usage and example code (transition/transform/animation)
During development, a good user interface will al...
Centos7 Zabbix3.4 email alarm configuration (solving the problem that the email content is xx.bin attachment)
Table of contents 1. Add monitoring Linux host 2....
MySQL fuzzy query statement collection
SQL fuzzy query statement The general fuzzy state...
Vue+elementUI component recursively implements foldable dynamic rendering multi-level sidebar navigation
The function has been implemented a long time ago...
MySQL 5.0.96 for Windows x86 32-bit green simplified version installation tutorial
MySQL 5.0 has become a classic because of its few...
Some thoughts and experience sharing on web page (website) design and production
First, before posting! Thanks again to I Want to S...
How to quickly build ELK based on Docker
[Abstract] This article quickly builds a complete...
JavaScript in-depth analysis of the direction of this and how to modify the direction
Table of contents this Method In the object Hidde...
User experience analysis of facebook dating website design
<br />Related article: Analysis of Facebook&...
MySQL 5.7.17 installation and configuration method graphic tutorial (windows)
1. Download the software 1. Go to the MySQL offic...
WeChat applet to achieve automatic video playback imitating GIF animation effect example
Demand background: Insert GIF dynamic images into...
25 Vue Tips You Must Know
Table of contents 1. Limit props to type lists 2....
25 advanced uses of JS array reduce that you must know
Preface Reduce is one of the new conventional arr...
Docker exposes port 2375, causing server attacks and solutions
I believe that students who have learned about th...
Windows 10 + mysql 8.0.11 zip installation tutorial detailed
Prepare: MySQL 8.0 Windows zip package download a...