VisualStudio使命使用代碼實現(xiàn)網(wǎng)頁的整體布局?
我要評論Visual Studio中想要使用代買設計一個網(wǎng)頁的布局，該怎么設計呢？下面我們就來看看詳細的教程。
1、打開一個已有的Visual Studio作品，本例為TwoFish網(wǎng)站，網(wǎng)頁文件為Default.aspx。
2、在網(wǎng)頁中，找到body標簽，如下圖所示。
3、接著，在下方找到div標簽。
4、先輸入整體布局的代碼，其中id="maincontent"表示設置的是主區(qū)域。
5、width表示主區(qū)域的寬，height表示主區(qū)域的高，本人將兩個值都設置為100%。
6、接著，設置對象的位置，用width和height表示對象的寬高范圍。
7、margin-left表示對象離左端距離，margin-right為右端距離，margin-top為對象離頂部的距離，本人將它們都設置為auto。
8、最后，設置對象的浮動位置，其中的float表示位置類型為浮動，本人將其值設置為right，即對象以右邊為基準設置在窗口中的位置。
9、padding-top表示對象離頂部的浮動距離，padding-left表示對象離左邊的浮動距離，padding-right表示對象離右部的浮動距離。
10、一個網(wǎng)站的頁面布局已設置好了，接下來，就可以自由的在網(wǎng)頁中添加對象了。
編輯網(wǎng)頁時，一般要用代碼為網(wǎng)頁設置整體布局，使用布局可以讓網(wǎng)頁中的代碼更加規(guī)整，方便后期的網(wǎng)頁制作和維護
以上就是Visual Studio中設計一個網(wǎng)頁頁面布局的實例教程，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
visualstudio怎么刪除代碼段管理器? vs代碼段管理器的移除方法
相關文章
win10開發(fā)者套件Visual Studio 2016預覽版2發(fā)布下載
今天微軟發(fā)布了win10開發(fā)者套件Visual Studio “15”預覽版第二個版本并提供了下載，在這個版本中新增眾多小功能和Bug修復，詳細內(nèi)容請看下文圖文介紹，需要的朋友可以參考2016-05-11Visual Studio 2010怎么使用自帶的安裝項目打包程序?
Visual Studio 2010怎么使用自帶的安裝項目打包程序？程序很大，靠別起來很麻煩，但是如果打包起來以后就很方便打包，今天我們就來看看Visual Studio 2010自帶的安裝項目打2016-05-09- visual studio怎么手動添加工具箱控件？visual studio想添加控件很麻煩，今天我們就來看看visual studio中手動添加工具箱控件的教程，需要的朋友可以參考下2016-04-13
Visual Studio怎么重新配置開發(fā)環(huán)境?
Visual Studio怎么重新配置開發(fā)環(huán)境？想把C++的開發(fā)環(huán)境改為C#的開發(fā)環(huán)境，該怎么辦呢？這時候我們就需要重置我們的設置，下面我們來看看vs重新配置開發(fā)環(huán)境的詳細教程2016-04-10Visual Studio中無法查找或打開PDB文件怎么辦?
Visual Studio中無法查找或打開PDB文件怎么辦？在VS底部的“輸出”框中提示“無法查找或打開 PDB 文件”，出現(xiàn)這個問題該怎么解決呢？下面我們來看看詳細的解決辦法，需要2016-03-23- Visual Studio資源管理器怎么修改?？课恢?？資源管理器中可以?？侩[藏，但是選擇停靠默認是?？吭谟疫?，怎么修改停靠位置呢？下面我們來看看修改的方法，需要的朋友可以參2016-03-08
全新Visual Studio Code預覽版0.10.10發(fā)布下載
今天微軟發(fā)布了Visual Studio Code預覽版0.10.10，這個版本主要新增了大量功能改進和錯誤修復，其中，新的源代碼折疊功能是非常值得注意的，下面提供官方下載，需要的朋友2016-03-01- Android studio編輯器中的代碼怎么顯示縮進？使用Android studio軟件在編輯程序的時候，想顯示代碼的縮進功能，能通過線方式來代表是否縮進，顯示也較為明顯，效果也更佳，2016-02-26
Visual Studio中怎么創(chuàng)建自己的代碼段?
Visual Studio中怎么創(chuàng)建自己的代碼段？如果大家掌握了代碼段，輸入代碼就變得非常簡單了。只需要輸入cw按兩次Tab健就輸入成功了，今天我們來看看編輯自己常用的代碼段的方2016-02-26- visual studio 2015離線幫助文檔怎么安裝？遇到不會的問題經(jīng)常使用在瀏覽器中啟動幫助功能，但是這個功能有個弊端，就是在不聯(lián)網(wǎng)的時候不能使用，該怎么安裝離線的幫助文檔2016-02-18