Understanding of web design layout
|
<br />A contradiction arises. In small workshops like ours, the design and layout are basically done by one person. There are even background programs added. Assuming the layout is considered during design, we all have the ability to make adjustments. But in large companies with strict division of labor, if the designer does not understand CSS, he will not be able to layout. Or if there is a misunderstanding, the design draft will cause the layout personnel to spend a lot of time and energy. Because there are too many browsers! I often see netizens complaining that the drafts given by designers cannot be restored. Because they understand browsers and screens differently. Some are because the effect is too gorgeous and there are too many colors. What's worse is that using flash is a waste, and html is useless... Well, let's put aside the last case and just talk about the understanding of the screen, effects and design layout. Let’s talk about the screen first : The screen resolution is still mainly 1024×768. There is no definition of full screen. Why? Please see why:
To make the web page full screen. Many people say the width is 1003, while others say it is 1004. But I don't think so. Suppose the customer requires the web page to fill the entire screen. Then, you need to know the screen resolution of the user's monitor size. If customers have low awareness of this thing. Don't change other people's resolution easily. I have a 1440×900 widescreen, and I use a 1024×768 resolution, and I'm happy with it! If the customer requires a full screen, then another problem arises: what if the customer changes to a monitor of a different size when the product is delivered? When the resolution is increased, your web page becomes narrower, and when the resolution is reduced, your web page becomes wider! What are you going to do? In fact, there are two types of full screen. I will name one as content full screen and the other as visual full screen! The so-called full-screen content refers to the content on the website. The left border is at the left border of the monitor, and the right border is at the right border of the monitor. The best solution is to use percentages. The negative effects of percentages:
The so-called visual full screen is actually a trick. And this method. In fact, it is very simple. The header of a website is nothing more than navigation and banner. If the navigation is at the top, then the background of the navigation will be 100% and the navigation will be centered. If the banner is at the top, then pay attention to processing both ends of the image, or 100% width background! OK, although the content width may still be 1000, 1003, or even 900 or lower, it is still 100% width visually. Just avoid the minimum width being larger than the browser width, or the customer's display resolution width being larger than your minimum width. Always OK. Previous Page 1 2 Next Page Read Full Article |
<<: Calculation of percentage value when the css position property is absolute
>>: wget downloads the entire website (whole subdirectory) or a specific directory
Recommend
How to split data in MySQL table and database
Table of contents 1. Vertical (longitudinal) slic...
Teach you step by step to develop a brick-breaking game with vue3
Preface I wrote a few examples using vue3, and I ...
MySQL decimal unsigned update negative numbers converted to 0
Today, when verifying the concurrency problem of ...
Detailed process of using nginx to build a webdav file server in Ubuntu
Install nginx Note that you must install nginx-fu...
Analysis of the underlying principle of MySQL multi-version concurrency control MVCC
Table of contents 1 Problems encountered in trans...
Example of utf8mb4 collation in MySQL
Common utf8mb4 sorting rules in MySQL are: utf8mb...
MySQL uses SQL statements to modify table names
In MySQL, you can use the SQL statement rename ta...
Example steps for implementing class selectors and name attribute selectors in js
The emergence of jQuery has greatly improved our ...
The difference and use of json.stringify() and json.parse()
1. Differences between JSON.stringify() and JSON....
Vue network request scheme native network request and js network request library
1. Native network request 1. XMLHttpRequest (w3c ...
Vue implements a simple calculator
This article example shares the specific code of ...
VMware Workstation installation and installation of WIN10 operating system to connect to the external network step by step guide (super detailed tutorial)
First download VMware Workstation 15.1 version. I...
Detailed examples of using JavaScript event delegation (proxy)
Table of contents Introduction Example: Event del...
Example of using @media responsive CSS to adapt to various screens
Definition and Use Using @media queries, you can ...
Linux dual network card binding script method example
In Linux operation and configuration work, dual n...