怎么制造属于自己的网页
本文摘要:相信我们在阅读网页时,每每看到一个不错的网页,都会眼前一亮。有的乃至想自己着手试着做一个自己的页面,但往往又发现自己没有触摸,无从下手。这里就叫你怎么快速制造属于自己的网页。【一些根本的东西我就不详细解释了】需要说明的是下面所有的代码选用到
搭建网站需要多少钱

相信我们在阅读网页时,每每看到一个不错的网页,都会眼前一亮。有的乃至想自己着手试着做一个自己的页面,但往往又发现自己没有触摸,无从下手。这里就叫你怎么快速制造属于自己的网页。【一些根本的东西我就不详细解释了】需要说明的是下面所有的代码选用到的样式(即class=""引号中的内容都是样式名,这些样式名有着不同的样式,此外的取名是随意的,只是我是这么取名的,详细的可以百度css样式)

搭建网站需要多少钱

第一,打开DW,点击--新建html,弹出提示框,默许选项值,点击确定。即可进入下图所显示的界面。此时修改器现已为你提供好了一个页面的框架:头部-躯体。第一行是文档类型的声明,这里暂不说明,可参看第二张图。<head></head>之间的内容也不做说明,因为这块信息不直接显示在阅读器窗口中,暂且与我们无关。

搭建网站需要多少钱

第二,布局。所有的网页内容都是用一块块内容组合起来的,这就意味着需要考虑哪一块放什么内容。用来布局的代码有div,用来展示内容的则有p(段落)、a(链接)、img(图片)等,这也是用的最多。http://www.5haoxue.net/zhuanti/2014qxhd/以这个网页为例,主体布局都是用div完成的。页面用到的代码标签有div/a/p/dl/dt/dd/ul/li。首要你需要理解,根本上所有网页标签代码都是成对呈现一个开始一个结束:就如这样:<div></div>;<a></a>......下面就是网页的主体结构。

搭建网站需要多少钱

现在看图片,在body区域中有这样一个标签<header></header>在它里边包括着<div></div>共5个,第一个是顶部的LOGO一级德律风号码。可以看到div里边top banner1/2/2 tc h230等字样,这些都是样式名.div适当于一个盒子或者是箱子,在里边你可以放置任何东西,以<div class="banner1 tc h230"></div>为例,在样式banner1中我设置本div的布景样式:backgroun:url(../images/banner1.jpg) no-repeat center;这表是我给div设置了名为banner1的图片布景,这张图片位于images文件夹内,同时no-repeat意味布景的不重复(),center意味着图片在div中是居中的(包括水平和垂直),h230它的样式是.h230{ height:230px;}既高度230px(像素)。tc才用到了text-align:center;既文本(内容)的对齐方式:居中【和Word里边的居中居左居右一样】。div没有设定宽度,他会默许的显示为100%,既阅读器的窗口巨细,假如里边包括内容的话,则他会有一个最小宽度。终究整个 header的显示效果如下图:

搭建网站需要多少钱

接下来,我们再看躯干部分。躯干部分代码(截取部分)如下:<div class="container">这个为最外层的盒子,通俗地讲就是快递最外层的包装袋。<!--MEDICAL ENDS--><article>这一块是导航,引导用户<!--nav--><nav><div class="nav h70 oh"><div class="w1000 m0"><a class="fl blue" href="#" target="_blank"><img src="images/arc.jpg" /></a><a class="fl blue f24" href="#" target="_blank">建筑丨</a><a class="fl f16" href="http://www.5haoxue.net/course/list_24/" target="_blank">一级缔造师</a><a class="fl f16" href="http://www.5haoxue.net/course/list_35/" target="_blank">物业管理师</a><a class="fl f16" href="http://www.5haoxue.net/course/list_100/" target="_blank">造价工程师</a><a class="fl f16" href="http://www.5haoxue.net/course/list_101/" target="_blank">安全工程师</a><a class="fl f16" href="http://www.5haoxue.net/course/list_55/" target="_blank">投标师考试</a><a class="fl f16" href="http://www.5haoxue.net/course/list_99/" target="_blank">房地产评价师</a><a class="fr center f16" href="http://www.5haoxue.net/course/" target="_blank">>>进入课程中心</a>                    </div></div></nav>底下就是正文区域了,这里我又用了盒子来包装:<div class="content1">第一层盒子来设置布景,布景是一张图片在content1中设置了,设置方法同上一个过程傍边提到的,效果会在下面图显示出来,<div class="w990 m0 ksxm">第二层盒子用来包括正文的内容,设置了宽度w990(width:990px)以及用m0{margin:0 auto}来是内容处于网页中心以下的三个dl则用来布局内容,fl 、fr两个样式分别为float:left和float:rght,表明向左或向右起浮,你过你不睬解起浮,你可以想象树叶漂浮在水面上左右起浮,起浮鸿沟就是盒子的边。mt=margin-top;即外边距,比如现已有一个盒子,现在我在间隔盒子右边20cm的当地再放一个盒子,此时我们可以看做相对新放下的盒子第一个的有外边距为20cm。mt20意味着顶部边距为20像素。<dl class="mt20 fl">dt的里边刺进了<img />(为数不多的不成对标签之一)一张图片,外面的<a></a>则界说了超链接,就像在Word里边添加超链接,实践上出来的是就是这样一个标签。href后边则是添加超链接地点。<dt> <a href=""> <img src="images/yj.jpg" /> </a></dt>对图片的说明解释<dd class="name mt3 f12">[七夕特价] 好学教育2014年物业管理师60分VIP保过方案全科联报,名师、高清,随时学习。</dd>底下将dd当成了盒子,在里边又套了一个盒子,oh{overflow:hidden}表明对已超出规模部分内容的处理为隐藏。比如如说本来我盒子只有1米高,现在放了1.2米的小孩,必然小孩子要站直就会有一部分显示在盒子外面了。<dd class="oh"><div class="intro"><span class="price f28 fl">¥</span><span class="price f40 fl">2056</span><a class="buy fr mt7" href=""></a><p class="discount tr f12"><span class="lth price">原价:¥2670</span><br />7.7折</p></div></dd></dl>下面的dl结构同第一个 不同的是边距的巨细和起浮的方向的差异。不在赘述。<dl class="mt20 fl ml15"><dt> <a href=""> <img src="images/wy.jpg" /></a></dt><dd class="name mt3 f12"></dd><dd class="oh"></dd></dl><dl class="mt20 fr"><dt></dt><dd class="name mt3 f12"></dd><dd class="oh"></dd></dl><dl class="mt20 fl"><dt></dt><dd class="name mt3 f12"></dd><dd class="oh"></dd></dl><dl class="mt20 fl ml15"><dt></dt><dd class="name mt3 f12"></dd><dd class="oh"></dd></dl><dl class="mt20 fr"><dt></dt><dd class="name mt3 f12"></dd><dd class="oh"></dd></dl></div></div></article><!--MEDICAL ENDS--></div>来看看效果:提示关于相同部分的内容可直接粘贴代码即可。

搭建网站需要多少钱

终究就是底部信息。可以看到根本上所有的页面底部都会有一个版权信息、免责声明等等内容。这个比较简略。<div class="tc"></div>上面的一行代码即可搞定。毕竟是入门,杂乱的就不多讲。附上完好图片。