VisualStudio使命使用代码实现网页的整体布局?

Visual Studio中想要使用代买设计一个网页的布局，该怎么设计呢？下面我们就来看看详细的教程。

1、打开一个已有的Visual Studio作品，本例为TwoFish网站，网页文件为Default.aspx。

2、在网页中，找到body标签，如下图所示。

3、接着，在下方找到div标签。

4、先输入整体布局的代码，其中id="maincontent"表示设置的是主区域。

5、width表示主区域的宽，height表示主区域的高，本人将两个值都设置为100%。

6、接着，设置对象的位置，用width和height表示对象的宽高范围。

7、margin-left表示对象离左端距离，margin-right为右端距离，margin-top为对象离顶部的距离，本人将它们都设置为auto。

8、最后，设置对象的浮动位置，其中的float表示位置类型为浮动，本人将其值设置为right，即对象以右边为基准设置在窗口中的位置。

9、padding-top表示对象离顶部的浮动距离，padding-left表示对象离左边的浮动距离，padding-right表示对象离右部的浮动距离。

10、一个网站的页面布局已设置好了，接下来，就可以自由的在网页中添加对象了。

编辑网页时，一般要用代码为网页设置整体布局，使用布局可以让网页中的代码更加规整，方便后期的网页制作和维护

以上就是Visual Studio中设计一个网页页面布局的实例教程，希望大家喜欢，请继续关注我们。

赞 (0)

相关推荐

  • VisualStudio怎么插入按钮? vs网页添加按钮的教程

    Visual Studio网页想要添加按钮,该怎么制作按钮呢?下面我们就来看看vs给网页插入按钮的教程. 1.打开Visual Studio,创建一个网站,并打开它的首页Default.aspx. 2 ...

  • 谷歌浏览器打印网页怎么设置布局方向

    谷歌浏览器打印网页怎么设置布局方向

    现在有很多人喜欢在电脑上使用谷歌浏览器上网,有些用户想知道打印网页怎么设置布局方向,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,找到并双击[Google Ch ...

  • 网页设计的布局有哪几种

    网页可以说是网站构成的基本元素.当我们轻点鼠标,在网海中遨游,一副副精彩的网页会呈现在我们面前,那么,网页的精彩与否的因素是什么呢?色彩的搭配.文字的变化.图片的处理等,这些当然是不可忽略的因素,除了 ...

  • DW CS3网页制作之布局实例

    DW CS3网页制作之布局实例 步骤/方法 01 一.CSS规则定义之"类型" 类型主要针对文本属性进行定义.理解"编辑字体列表"和"行高" ...

  • 如何用JS代码在网页中输出杨辉三角

    在网页中,除了上传图片,文字,声息等信息,更多的时候是上我们自己去编写一个算法,来实现某项特定的功能和输出.下面我们就以杨辉三角为例:要在网页中输出一个杨辉三角,首先要知道杨辉三角的定义:它是一种二项 ...

  • vs怎么使用代码修改网页文本字体和粗细?

    Visual Studio网页中可以自定义设置字体的样式和大小,该怎么设置呢?下面我们就来看看详细的教程. 1.在网页中找到body标签,在其内部插入一个div标签. 2.用style属性设置文字的样 ...

  • visualstudio怎么删除代码段管理器? vs代码段管理器的移除方法

    visual studio中添加的代码段管理器想要删除,该怎么删除呢?下面我们就来看看详细的教程. 1.首先,要进行visual studio的相关的设置的,进行双击visual studio点击进入 ...

  • VisualStudio怎么实现点击网页中的按钮动态显示文本?

    Visual Studio 2015中想在网页中制作一个按钮,单击后就会在网页中显示文本,该怎么制作这个效果呢?下面我们就来看看详细的教程. 1.首先,设置在网页中显示文本的格式,文本的高度为100像 ...

  • 网页设计灵动布局之相对自由式

    小编:这是一篇关于网页设计布局的文章,感谢作者@飞屋睿的分享与讲解,让我们又开拓了很大的思维空间.很喜欢看作者的文章,每一篇都感觉明白了许多设计方法或者思考方向,但作者从不把"固有的&quo ...