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

原创 2015年08月01日 07:45:40

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

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

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

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

        <div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用你自定义的样式。当然你也不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。我们可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。举个例子说,一个<div>可以使用多个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"></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,炫酷网页,信手拈来生气

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010929604/article/details/47176241

制作好看又非常简单CSS样式的颜色块

在这里我将我最近学到的CSS样式的渐变颜色块记录下来
  • qq_28499043
  • qq_28499043
  • 2015-08-25 18:49:40
  • 2956

一些漂亮的CSS样式

郑重声明:以下内容摘抄自CSDN的BLOG,目的只为了以后使用方面,所以存放此处,并无其它意思。.btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGH...
  • jxyuhua
  • jxyuhua
  • 2004-10-28 19:00:00
  • 2125

几款好看的HTML按钮样式

给大家介绍几款好看的HTML按钮样式 按钮样式一: #login_click{ margin-top:32px; height:40px;} #login_...
  • u010037928
  • u010037928
  • 2015-11-05 12:00:33
  • 38869

各种美观DIV样式

”。" class="error">html> head> title>Ư���DIV��ʽtitle> style type="text/css"> body{ margin:20px; font-...
  • juenice
  • juenice
  • 2012-07-20 17:56:21
  • 402

css样式大全(整理版)

字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-styl...
  • u010983763
  • u010983763
  • 2017-03-29 15:48:00
  • 4669

DIV+CSS漂亮的样式

  • 2010年08月12日 08:07
  • 16KB
  • 下载

好看的table css样式

漂亮的table表格样式css源码漂亮的table表格样式css源码&amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp...
  • hello_mr_anan
  • hello_mr_anan
  • 2017-04-20 13:53:28
  • 3778

好看的DIV格式

http://blog.csdn.net/cxfcxj/article/details/5096662  code {  font-family: Monaco, Verdana, Sans-...
  • lehear
  • lehear
  • 2012-02-29 17:13:16
  • 641

四个好看的CSS样式表格

1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码: table.gridtable { font-family: verdana,arial,sans-serif; f...
  • nightelve
  • nightelve
  • 2012-09-08 12:51:46
  • 418836

网页样式——各种炫酷效果持续更新ing...

1.evanyou效果-彩带的实现,效果如下   注:这个主要用的是Canvas画布实现的,点击背景绘制新的图形,代码如下:  /*Html代码:*/ "evanyou" wid...
  • shuai7boy
  • shuai7boy
  • 2016-11-17 17:23:14
  • 1723
收藏助手
不良信息举报
您举报文章:CSS+DIV:实现炫酷网页样式与布局
举报原因:
原因补充:

(最多只允许输入30个字)