在桌面建立一个index.htm的文件和main.css的文件,当然你也可以不用main.css的文件,但是为了方便操作,还是建一个吧。只要把记事本另存为就可以了。
2
做好这两个文件后我们把网页的基础代码写上去,并使index文件受到main.css的控制,我们右键选择用记事本打开index文件输入代码,并在head里写上<link href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的,看上去温馨,我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的,表示已经受到css样式表的控制了。
4
下面我们进行布局一般网页都是3层一级,所以我们需要div布局了在body里面写一般我会先分为3层
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1"></div>
<div id="top2"></div>
<div id="top3"></div>
</div>
</body>
</html>
5
布局好后我们需要去定义属性了,这里我只是简单的定义了一下
*{background:#FF33FF}
#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}
#top1{background:#66FFFFheight:50pxwidth:800px}
#top2{background:#FF00CCheight:400pxwidth:800px}
#top3{background:#FF9933height:550pxwidth:800px}
定义好了我们打开预览一下看看,图片是不是居中和分成3块了。当然,颜色只是为了方便看清楚,可以不写。
6
其实做网页就是不断的画框,只要知道布局和定义属性就可以了,下面我们就整个做一下,因为我的有一些是一样的,可以用class调用,class=baidu这个只是随便写的,你爱等于什么就等于什么
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">这里都是我截图的照片</div>
<div id="top2">
<div class="baidu"></div>
<div class="baidu"></div>
</div>
<div id="top3">
<div class="baidujingyan"></div>
<div class="baidujingyan"></div>
</div>
</div>
</body>
</html>
7
下面我们再去定义他的属性,当然我只是简单的定义一下
*{background:#FF33FF}
#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}
#top1{background:#66FFFFheight:50pxwidth:800pxtext-align:centerline-height:50pxfont-size:30px}
#top2{background:#FF00CCheight:400pxwidth:800px}
#top3{background:#FF9933height:550pxwidth:800px}
.baidu{background:#FF6666height:380pxwidth:380pxfloat:leftmargin:10px}
.baidujingyan{background:#FFCC00height:530pxwidth:380pxfloat:leftmargin:10px}
8
因为我这个是我截图相册的网页,下面我们就放照片吧,这里我偷个懒,把照片都放在桌面了,所以不用连接照片地址了。
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">这里都是我老婆的照片</div>
<div id="top2">
<div class="baidu"><img src="QQ图片20141212090452.jpg"></div>
<div class="baidu"><img src="QQ图片20141212090346.jpg"></div>
</div>
<div id="top3">
<div class="baidujingyan"><img src="QQ图片20141212090224.jpg"></div>
<div class="baidujingyan"><img src="QQ图片20141212090255.jpg"></div>
</div>
</div>
</body>
</html>
如果图片不在同一层目录,就需要连接到图片地址
9
这样一个网页就做好了,如果需要制作精美的网页,就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义,网页的制作只要会使用div不停的布局,不停的定义他的属性,基本静态的网页就是这样做出来的
网页设计中采用div+css布局,这里的DIV是什么意思?DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。
DIV在程式设计中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文件内大块(block-level)的内容提供结构和背景的元素。
div+css-div+css是什么-div+css布局-请问div+css是什么意思Div标签+CSS(层叠样式表)是网站标准中的常用术语之一,通常为了说明与Html网页设计语言中的表格(Table)定位方式的区别,因为XHTML网站设计标准中,不在使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。
使用DIV+CSS设计网站的时候,不得不强调一个利用SEO思想来建设网站的问题。搜寻引擎对网站的排名顺序不是固定的。SEO的思想就是用搜索引擎的理念搭建网站,而不是单一的再网站建设好后,通过技巧和手段来使得网站搜寻引擎所喜欢进而达到好的排名效果。不管是思想指导实践,还是实践填充了思想,都是一个好的开始,我们自己在研究、总结和提升。
搜寻引擎是从上到下搜寻引擎是从上到下,从左到右访问网站资讯的,我们在研究那些大的网站的时候发现,整个网页程式码被很多注释所包围,这些注释有两个好处:一是便于技术员对整个程式码的调节;二是便于SEO人了解关键内容的位置,便于调整。
网页设计里的,、css、div是什么意思?就是做网页页面的标签语言
css是控制显示样式的
div是层
psd格式的模板需要用Photoshop开启
====================================
PSD模板就整个页面布局和样式的设计原稿,需要切片才能应用到网页上去
怎么用div+CSS布局网页就是制作网页,分块制作把没部分用div装着,然后用css才设定样式和位置。这个你最好买本书好好的学习下真的自己学下,自己去写写很好的。我给你推荐一本书吧 《div css 网页样式与布局》 有什么问题就找我把 加我 百度hi
怎么使用DIV+CSS布局网页CSS基本布局16例
:w3./article/layout/2004/55.
自己找一下教程吧。
介绍几个网站你
:w3.
:68design.
:blueidea./
DIV+CSS网页设计布局我不懂,求请教
总结个人的经验,有以下几点,希望对你有帮助:
1、个人认为新手看书是比较好的,书中的知识比较系统,推荐你看《+css网页设计与布局从入门到精通》,lz或许有更好的书那是更好的;(边看边练--书中例子)
2、在基础的元素和样式掌握好了,自己就可以尝试着去设计编写简单的网页;(多练)
3、从简单--复杂页面设计过渡,后不断加强自己的编写设计技巧,多阅览这方面的资料;
总之这入门比较简单,关键是要多实践,要掌握的精通也就一个时间的问题(肯学)。在掌握这门语言时,希望lz能够多加注意增加和减少一个画素的区别,尽量做到细节处;
网页设计中DIV是什么意思?DIV在程式设计中又叫做整除,即只得商的整数。 DIV元素是用来为HTML文件内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制
网页设计采用div+css有什么好处采用Div+CSS设计布局网站具有以下的优点:
第一、大大缩减页面程式码。
因为采用CSS布局,不象表格布局充满各种各样的属性和数字,而且很多css档案通常是共用的,从而提高页面浏览速度。而Table表格布局中,垃圾程式码会很多,一些修饰的样式及布局的程式码混合一起,很不利于直观。而Div 更能体现样式和结构相分离,结构的重构性强。
第二、对搜寻引擎更加友好同时获得更好的网站排名
DIV+CSS布局简洁清晰,具备搜寻引擎SEO的先天条件。对搜寻引擎更加友好,更容易被搜寻引擎收录,配合优秀的内容和一些SEO处理,可以获得更好的网站排名。
DIV+CSS布局不公方便搜寻引擎收录,而且还可以并获得搜寻引擎更高的评价。用只包含结构化内容的HTML代替巢状的标签,主次分明,搜寻引擎将更有效地搜寻到你的内容,并可能给你一个较高的评价(ranking)。
第三、相容性卓越
DIV+CSS布局符合web标准规范,几乎所有的浏览器上都可以使用,不会因为在不同的浏览器中显示效果差距很大。
第四、缩短网站改版时间
因为网站的布局都是通过外部的css档案来控制,只要简单的修改几个CSS档案就可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS档案进行控制,只要修改这个CSS档案中相应的行,那么整个站点的所有页面都会随之发生变动。
第五、强大的控制和排版布局能力
CSS在控制字型的能力比糟糕的FONT标签好太多了,CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字型颜色、字型样式等等。
第六、提高易用性
使用CSS可以结构化HTML,例如:p标签只用来控制段落,h1-h6标签只用来控制标题,table标签只用来表现格式化的资料等等。你可以增加更多的使用者而不需要建立独立的版本。
第七、扩充套件效能优越
你的设计不仅仅用于web浏览器,也可以释出在其他装置上,比如PowerPoint,手机浏览器等。
第八、灵活的页面布局
通常页面的下载是按照程式码的排列顺序,而表格布局程式码的排列代表从上向下,从左到右,无法改变。而通过CSS控制,您可以任意改变程式码的排列顺序,比如将重要的右边内容先加载出来。
Table表格布局灵活性不大,你只能遵循 table tr td 的格式。而div你可以 div ul li 也可以 ol li 还可以 ul li......
第九、表现和内容相分离
干净利落,将设计部分剥离出来放在一个独立样式档案中,而网页主要来放置您的内容,你可以减少未来网页无效的可能。
1、程式码简洁、清楚些,便于检视、修改
2、网页载入时区域性性展现内容更快,不像table那样要么没出来,要么突然内容全出来了
3、符合WEB标签的结构分离,便于以后维护、换肤等