CSS+DIV：实现炫酷网页样式与布局_html/css_WEB-ITnose-html教程-PHP中文网

CSS+DIV：实现炫酷网页样式与布局_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:39:44

原创

2253人浏览过

虽然之前也接触过html和css，也做过一段时间的项目，使用过css和div，但是终究没有体会到这两者融会贯通后，所能达到的效果，远远超乎我的想象。

其实很多写过前端页面的人都知道DIV和CSS其实特别简单，但是要想实现需求中的或者自己心中想象的效果，也决非易事。这里面有很多的技巧，如果你不熟悉和精通，那么你做出的页面将会达不到预期的效果，有时候会特别的难看。

首先我们来看一下DIV是啥玩意？

DIV是标记语言HTML中众多标签的一个，但是却是文档页面布局使用最频繁的一个标签。它可定义文档中的分区或者节，或者说可以将文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果使用id或者class来标记

，那么该标签的作用会变得更加有效。

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

固有的唯一格式表现。可以通过

的 class 或 id 应用你自定义的样式。当然你也不必为每一个

都加上类或 id，虽然这样做也有一定的好处。我们可以对同一个

元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。举个例子说，一个

可以使用多个class属性样式，但是只能使用一个id属性样式。

立即学习“前端免费学习笔记（深入）”；

其次我们来看CSS是什么鬼？

上面介绍DIV的时候已经提到了CSS的一些东西，我们在给HTML页面元素添加样式的时候，经常使用的无非就是标签选择器、id选择器和类选择器。这几种选择器各有自己的特点：如果是统一样式，则使用标签选择器最好，他可以将页面所有相同标签的样式进行统一；而id选择器则提供了更为方便的个性化样式定义，至于class选择器就是多样化的样式定义了，因为CSS允许使用多个类选择器的样式定义，当然class选择器也具有“继承性”，能够派生出不同风格的样式。

可能说的有些抽象，没动过手的也许体会不到，下面我们来看几个例子：

<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>

登录后复制

标题说的狂拽炫酷吊炸天的网页在哪里？下面给出几个例子，来展示一下CSS+DIV的威力：

模仿Google的logo

来看一下代码

沉浸式翻译

沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件

查看详情

<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>

登录后复制

模仿网站首页的设计

我们看看这个背后的页面代码，其实很简单，但是页面就是做的好看

<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" alt="CSS+DIV：实现炫酷网页样式与布局_html/css_WEB-ITnose" ></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>

登录后复制

小结一下：对于很多人来讲，CSS和DIV的概念早已烂熟于心，但是不是每个人都能做出狂拽炫酷的网页的，因为我们不够熟练，很多的东西还不太会用，对于页面布局和样式的把握还是不够准确，因此做出来的页面还是稍显稚嫩，但是请相信我们自己，只要多加运用和总结，假以时日，只要给我们CSS和HTML，炫酷网页，信手拈来