Home Web Front-end CSS Tutorial Five tips for div css page layout

Five tips for div css page layout

May 16, 2016 pm 12:06 PM
Page Layout

this chapter will introduce you to five tips on div css page layout. it has certain reference value. friends in need can refer to it. i hope it will be helpful to you.

1. mobile selection for form text input:

in the text input field, if a prompt is added, visitors often have to use the mouse to select and then delete it. , and then enter useful information. in fact, as long as you add onmouseover="this.focus()" onfocus="this.select()" code to

1

2

<textarea name=textarea wrap=virtual rows=2 cols=22 onmouseover="this.focus()" onfocus="this.select()">

input english..</textarea>

Copy after login

similarly, you can add code to .

2. click to delete the form input unit:

this column has the same function as the above, but there are slight changes when using the mouse. you need to click instead of the previous one. otherwise, it only needs to be covered by the mouse. for example:

1

<input type=text name="address" size=19 value="enter,e-mail..."onfocus="this.value=''">

Copy after login

after clicking the input unit, the prompt information will be deleted, isn't it very convenient?

3. border settings of form input units:
changing the traditional form unit borders will make your homepage more colorful. for example:

1

2

<input type=radio name=action value=subscribe checked style="border-bottom: dashed 1px; 

border-left: dashed 1px; border-right: dashed 1px; border-top: dashed 1px;background-color: #fef5c8">

Copy after login

among them, "style=***" is the left, right, top, bottom and background color settings. it is applicable to other units. readers are asked to try it themselves.

4. text setting of form input unit:
the font of the unit in the form can be modified, such as:

1

2

<input type=text name="address" size=19 value="enter,e-mail..." 

style=font-family:"verdana";font-size:10px >

Copy after login

5. modify the form properties to a pop-up window:

after most forms are activated, they will be opened in the current page, affecting normal browsing. it is better to modify it, such as:

1

<form method=POST action=url target=_blank>

Copy after login

where "target=_blank" controls opening in the pop-up window.

the above is the content of five tips for div css page layout. for more related content, please pay attention to the php chinese website (www.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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use third-party UI libraries for page layout in Vue projects How to use third-party UI libraries for page layout in Vue projects Oct 08, 2023 am 08:38 AM

How to use third-party UI libraries for page layout in Vue projects Vue is a popular JavaScript framework that is widely used to build user interfaces. In Vue projects, we often need to use third-party UI libraries to help us quickly layout and beautify pages. This article will introduce in detail how to use a third-party UI library for page layout in a Vue project, and provide specific code examples. Step 1: Install third-party UI libraries First, we need to install the required third-party UI libraries from npm. In this paper, we use E

Vue development experience summary: practice in solving page layout and typesetting problems Vue development experience summary: practice in solving page layout and typesetting problems Nov 22, 2023 am 10:25 AM

Vue is a popular JavaScript framework that is widely used in front-end development. In the process of developing with Vue, we often encounter some page layout and typesetting problems. This article will summarize some of the problems we encountered in Vue development and share some practical experience in solving these problems. 1. Responsive layout When developing web applications, we often need to implement a responsive layout so that the page can be displayed well on different devices. Vue provides many solutions, such as Vue's response

Vue development experience summary: tips for solving page layout and responsive design Vue development experience summary: tips for solving page layout and responsive design Nov 23, 2023 am 09:53 AM

Vue is a popular JavaScript framework that provides developers with many useful tools to create dynamic single-page applications (SPA). But when developing a Vue application, it is very important to design a suitable page layout and responsive design, as this has a great impact on the user experience and the overall performance of the application. In this article, we will introduce some tips for solving Vue page layout and responsive design issues. Using Flexbox and CSSGrid to design layout Flexbox

How to design a website with responsive page layout How to design a website with responsive page layout Jan 27, 2024 am 08:24 AM

How to design a website with responsive page layout With the popularity of mobile devices, more and more people are beginning to use mobile phones and tablets to browse the web. In order to provide a better user experience, it is particularly important to design a website with a responsive page layout. This article will explain how to design a website with a responsive page layout and provide some specific code examples. Using media queries Media queries are an important feature in CSS3 that can apply different styles based on different devices (such as screen width or device type). by using

Discuz Editor: Diverse page layout design Discuz Editor: Diverse page layout design Mar 09, 2024 pm 01:03 PM

Discuz Editor: Diverse page layout design requires specific code examples. With the development of the Internet and the continuous progress of website construction, page layout design has become one of the important links in website development. In the Discuz forum system, the editor plays an extremely important role. It not only affects the user experience, but is also directly related to the diversification and personalized design of the page layout. This article will introduce how to use the Discuz editor, and combine it with specific code examples to explore how to achieve diversified page layout designs. In Dis

How does PHP handle HTML templates and page layout? How does PHP handle HTML templates and page layout? Jul 01, 2023 am 10:46 AM

PHP, as a popular server-side scripting language, is widely used to develop web pages and websites. In web development, HTML templates and page layouts are important components. This article will explore how PHP handles HTML templates and page layout. First of all, HTML template is the skeleton of a web page, including the structure, layout and static content of the web page. There are many ways to process HTML templates in PHP. Two commonly used methods are introduced below. The first method is to use the native syntax of PHP itself and embed the HTML code directly into

How to optimize layout and responsive design in PHP development How to optimize layout and responsive design in PHP development Jun 30, 2023 pm 03:00 PM

In today's era of rapid development of the Internet, web design optimization has become one of the essential skills for developers. With the popularity of mobile devices, responsive design has become more and more important. In PHP development, how to optimize page layout and responsive design has become the focus of developers. First of all, page layout optimization is an important means to improve user experience. A good page layout can make it easier for users to browse web content and improve user retention. In PHP development, page layout can be optimized through the following aspects. first of all

Analyze the impact and characteristics of absolute positioning technology on page layout Analyze the impact and characteristics of absolute positioning technology on page layout Jan 23, 2024 am 08:47 AM

Analysis of the impact and characteristics of absolute positioning technology on page layout Introduction: In web design, it is very important to accurately control the position and layout of elements. CSS provides a variety of positioning mechanisms, one of which is absolute positioning. Absolute positioning allows us to precisely specify the position of an element in a web page, and it also has some characteristics and effects. 1. Characteristics of absolute positioning. Absolute positioning breaks away from the normal document flow. Absolute positioning will not affect the layout of other elements. It will

See all articles