CSS+DIV:实现炫酷网页样式与布局_html/css_WEB-ITnose
其实很多写过前端页面的人都知道DIV和CSS其实特别简单,但是要想实现需求中的或者自己心中想象的效果,也决非易事。这里面有很多的技巧,如果你不熟悉和精通,那么你做出的页面将会达不到预期的效果,有时候会特别的难看。
首先我们来看一下DIV是啥玩意?
DIV是标记语言HTML中众多标签的一个,但是却是文档页面布局使用最频繁的一个标签。它可定义文档中的分区或者节,或者说可以将文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果使用id或者class来标记
其次我们来看CSS是什么鬼?
上面介绍DIV的时候已经提到了CSS的一些东西,我们在给HTML页面元素添加样式的时候,经常使用的无非就是标签选择器、id选择器和类选择器。这几种选择器各有自己的特点:如果是统一样式,则使用标签选择器最好,他可以将页面所有相同标签的样式进行统一;而id选择器则提供了更为方便的个性化样式定义,至于class选择器就是多样化的样式定义了,因为CSS允许使用多个类选择器的样式定义,当然class选择器也具有“继承性”,能够派生出不同风格的样式。
可能说的有些抽象,没动过手的也许体会不到,下面我们来看几个例子:
/*标签选择器*/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}
标题说的狂拽炫酷吊炸天的网页在哪里?下面给出几个例子,来展示一下CSS+DIV的威力:
模仿Google的logo
来看一下代码
Google
Google
模仿网站首页的设计
我们看看这个背后的页面代码,其实很简单,但是页面就是做的好看
World Word
为您提供精准的翻译服务
您是否要将某些文档翻译成标准的英语版本?您是否担心译文会不符合西方语系的语言习惯?您是否遇到语言障碍而放缓向*拓展业务的步伐?您是否受到时而需要处理外文资料的困扰?
让我们来帮您解决这些问题。我们这里提供的服务快捷 、高效、准确,而且付费方便。您无需走出家门,就可同我们一起走完服务的全过程,甚至包括付费。
我们有来自中国和新加坡的翻译专家,他们具有得天独厚的语言基础和深厚的文化背景。他们合作的结晶一定是非常贴切而精美的译文作品。我们会分配以您的目标语种为 母语 的翻译员为你翻译,同时他们也 精通 您的源语语种。
您若有此需求或任何疑问,请浏览我们的网站,也可随时同我们联系,您会得到耐心的解答。我们的联系方式是: demo@demo.com。
小结一下:对于很多人来讲,CSS和DIV的概念早已烂熟于心,但是不是每个人都能做出狂拽炫酷的网页的,因为我们不够熟练,很多的东西还不太会用,对于页面布局和样式的把握还是不够准确,因此做出来的页面还是稍显稚嫩,但是请相信我们自己,只要多加运用和总结,假以时日,只要给我们CSS和HTML,炫酷网页,信手拈来
版权声明:本文为博主原创文章,未经博主允许不得转载。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
推荐阅读
-
精通CSS+DIV网页样式与布局CSS文字效果_html/css_WEB-ITnose
-
CSS+DIV:实现炫酷网页样式与布局_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局设置表单和表格_html/css_WEB-ITnose
-
css+div网页设计(二)布局与定位_html/css_WEB-ITnose
-
HTML>精通CSS DIV网页样式与布局>理解CSS定位和DIV布局>float属性的自我理解_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局滤镜的使用_html/css_WEB-ITnose
-
CSS+DIV:实现炫酷网页样式与布局_html/css_WEB-ITnose
-
精通CSS.DIV网页样式与布局_html/css_WEB-ITnose
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论