CSS DIV: Implementing cool web page styles and layout_html/css

Although I have been exposed to HTML and CSS before, and have worked on projects for a period of time, I have used CSS and DIV, but after all, I have not realized that the effects that can be achieved after integrating the two are far beyond My imagination.

In fact, many people who have written front-end pages know that DIV and CSS are actually very simple, but it is not easy to achieve the desired effect or the effect you imagine in your mind. There are a lot of techniques here. If you are not familiar with and proficient in them, then the page you create will not achieve the expected effect, and sometimes it will be particularly ugly.

First of all, let’s take a look at what DIV is?

DIV is one of the many tags in the markup language HTML, but it is the most frequently used tag for document page layout. It can define sections or sections in the document, or it can split the document into independent and different parts. It can be used as a strict organizational tool and does not use any formatting associated with it. If you use id or class to mark

, the tag will become more effective.

This means that its contents automatically start on a new line. In fact, line breaks are the only formatting behavior inherent to

. You can apply your custom styles through the class or id of

. Of course, you don't have to add a class or id to every

, although there are certain benefits to doing so. We can apply either class or id attributes to the same

element, but it's more common to apply only one or the other. The main difference between the two is that class is used for groups of elements (similar elements, or can be understood as a certain type of elements), while id is used to identify individual and unique elements. For example, a

can use multiple class attribute styles, but can only use one id attribute style.

Secondly, let’s look at what the hell is CSS?

We have already mentioned some things about CSS when introducing DIV above. When we add styles to HTML page elements, we often use tag selectors, id selectors and class selectors. Each of these selectors has its own characteristics: if the style is unified, it is best to use the tag selector, which can unify the styles of all the same tags on the page; and the id selector provides a more convenient personalized style. Definition, as for the class selector, it is a diverse style definition, because CSS allows the use of multiple class selector style definitions. Of course, the class selector also has "inheritance" and can derive different styles.

It may be a bit abstract, and those who have never done it may not understand it. Let’s look at a few examples:

<span style="font-size:18px;">/*标签选择器*/body{	background-color:#2a3a00;	/* 深绿色背景 */	margin:0px; padding:0px;	font-family:Arial, Helvetica, sans-serif;	font-size:12px;}img{	margin:0px; padding:0px;	border:none;}/*id选择器*/#pic{	position:absolute;	top:5%;	left:0%;	width:100%;	background:url(middle_bg.jpg) repeat-x;	/* x方向重复 */}/*class选择器*/.center {text-align: center}</span>

Copy after login

Where is the crazy cool page mentioned in the title? Here are a few examples to show the power of CSS DIV:

Imitate Google’s logo

Imitate the design of the website homepage

<span style="font-size:18px;"><html><head>	<title>Google</title><style>p{	font-size:80px;	letter-spacing:-2px;		/* 字母间距 */	font-family:Arial, Helvetica, sans-serif;}.g1, .g2{ color:#184dc6; }.o1, .e{ color:#c61800; }.o2{ color:#efba00; }.l{ color:#42c34a; }</style>   </head><body>		<p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p></body></html></span>

Copy after login

To summarize

: For many people, the concepts of CSS and DIV are already familiar, but not everyone can do crazy things. To create cool web pages, because we are not proficient enough, we are not good at using many things, and our grasp of page layout and style is not accurate enough, so the pages we create are still a little immature, but please believe in ourselves, as long as we add more Application and summary, given time, as long as you give us CSS and HTML, cool web pages will be at your fingertips

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>World Word</title><link href="17.css" rel="stylesheet" type="text/css">   </head><body><div id="container">	<div id="banner"><a href="17.html"><img src="banner.jpg" border="0"></a></div>    <div id="navigation">		<ul>			<li><a href="page1.html">翻译服务</a></li>			<li><a href="page2.html">网站建设</a></li>			<li><a href="page3.html">服务流程</a></li>			<li><a href="page4.html">付费</a></li>		</ul>	</div>	<div id="text">		<h3>为您提供精准的翻译服务</h3>		<p>您是否要将某些文档翻译成标准的英语版本？您是否担心译文会不符合西方语系的语言习惯？您是否遇到语言障碍而放缓向境外拓展业务的步伐？您是否受到时而需要处理外文资料的困扰？</p>		<p>让我们来帮您解决这些问题。我们这里提供的服务<a href="page3.html">快捷</a> 、高效、准确，而且<a href="page4.html">付费</a>方便。您无需走出家门，就可同我们一起走完服务的全过程，甚至包括付费。</p>		<p>我们有来自中国和新加坡的翻译专家，他们具有得天独厚的语言基础和深厚的文化背景。他们合作的结晶一定是非常贴切而精美的译文作品。我们会分配以您的目标语种为 母语 的翻译员为你翻译，同时他们也 精通 您的源语语种。</p>		<p>您若有此需求或任何疑问，请浏览我们的网站，也可随时同我们联系，您会得到耐心的解答。我们的联系方式是: <a href="mailto:demo@demo.com">demo@demo.com</a>。</p>	</div>	<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div></div></body></html></span>

Copy after login

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.

Related labels：

CSS+DIV：实现炫酷网页样式与布局

source：php.cn

Previous article：HTML code reuse practice_html/css_WEB-ITnose Next article：Bootstrap global css style picture_html/css_WEB-ITnose

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

CSS DIV: Implementing cool web page styles and layout_html/css_WEB-ITnose