Problems encountered with layout Very good insights_CSS/HTML

WBOY
Release: 2016-05-16 12:12:01
Original
1322 people have browsed it

Foreword
Before the next generation of WEB development technology RIA technology matures, of course we still have to fight against HTML. Some time ago, "Website Refactoring" was very popular.
These are all progress and indeed give us new ideas. Here is a summary of some experiences in development.

Layout
1. Top, bottom, left and right layout
I just started learning to make pages. I used MM’s DW software, which is visual, so that more people can learn to make web pages.
I still remember that I used DW when I was making pages. A friend once asked me the same sentence: "What is the difference between making web pages with more forms or using more layers?".
I told him that we actually use Layout-Layout Table in DW to quickly draw the frame of the entire page, and then refine it step by step. Creating a page is very fast. It is recommended to use tables. It is difficult to control the position using layers.
Now that I think about it, it’s really a bit misleading. Ha, but maybe, progress requires a process.

"Website Reconstruction" The spring breeze is blowing, and using layers for page layout has indeed brought new ideas to our development.
Advantages:
The page is clearer and the amount of code is reduced;
CSS is more widely used.

Top and bottom rows, clear layering, code demo:











You can use absolute positioning
#head{
position:absolute
top;10px;
left:200px;
}



Use padding to control the separation between layers




5. You can use less images using CSS
Page layout demo (the source code can be viewed, it is much clearer than the previous TABLE layout) :
http://davidblog.blogdriver.com/davidblog/inc/demo_div.jpg

form
1. The margin and padding of form
In the past, when inserting a form into the page, I always feel that margin and padding are not 0 by default, which sometimes affects the layout of the page.
You can use CSS to set it to 0
form{
margin:0 0 0 0px;
padding:0 0 0 0px;
}
You can also define p tags or other tags.

2. Select
optgroup application

3. Add checkbox or radio Label


Today


4. Button
The previous project used a picture button. Gradually discover flaws in the application.
It is recommended to use CSS to beautify.
In fact, CSS can achieve more beautiful buttons


table
You still have to use table. table always has his winning side.
For example, some data display GRID or the structure is relatively uniform, and the layout is divided into rows and columns.
table related skills

Application of CSS Expressions
CSS applications can reduce code writing
1. table mouse events


2.
width:expression{document.body.clientWidth

Marks worth noting


Menu 1

Menu 2







    • Health information:
      Height

      Weight

      superscript

    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!