left網頁設計_網頁設計中top和left如何設計頁面指導

1、網頁製作時我寫的 <div >left</div> 時想要套用我在css規則中寫的left規則卻無法套用，為什麼，求解

<div>left</div>
首先，<div></div>是一對標簽，left是網頁中會顯示的內容，並不是命名，如果想給標簽包含內容加樣式
應該在css中
div{...}
但這樣會將你所有的div標簽應用同一個樣式
再有，你說在css中寫了left的樣式，可是你並沒有給div加上命名，所以在css中的left是不起作用的
應該這樣寫
<div id="left"></div>
在css中應該這樣
#left{..}
如果這樣寫
<div class="left"></div>
.left{..}
你說有時候樣式應用正常，有時不正常，可以在百度搜索W3C CSS 驗證服務
可以把css代碼復制檢測，如果沒有問題，就是html中的命名有問題

2、網頁製作時做了三個框架，mainframe,leftframe,topframe,點擊leftframe上的鏈接讓它在mainframe中顯示。

你每個框架有加上「name」嗎？例如：<frame src=1.htm name="mainFrame"> 這個name="xxx"的名稱要和target="xxx"的名稱一致。

3、網頁設計中top和left如何設計頁面指導

點擊「代碼」標簽後。出現的代碼窗口中可直接進行編輯HTML代碼

4、HTML、網頁設計，排版問題，2個框一上一下，想改為一左一右，怎麼改，如下：

你只給出了CSS，沒有給出你的頁面內容。這要看你是怎麼布局頁面的。這個其實還是很簡單的。

5、網頁設計中top和left如何設計頁面指導

給你想定位的元素的父級元素position：relative；然後給你想定位的元素position：absolute，top：XXpx；left：XXpx

6、網頁設計導航條

下面的代碼，你去看看，不好用再說。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">

</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">產品展示</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">聯系電話</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介紹</a></li>
</ul>
</div>

</body>
</html>

7、關於html頁面製作

製作的網頁：

整體思路：

先布局再CSS控制

骨架搭好了，初始化樣式，

後再弄CSS樣式。注意：將CSS的樣式導入到外部樣式表時，要注意圖片的位置，以及

對外部樣式表的引入

1、頭部的背景圖片的高度128px來自素材的圖片高，容器的寬度大小也來自圖片

的寬，那麼這里背景圖片設置的有意思嗎？不設置效果一樣呀！！

2、圖片的位置：當你在編寫index.html頁面代碼時，出現一些圖片路徑時，那麼

先分清楚哪些是同級目錄文件

我現在在操作首頁實戰.html，裡面有圖片1的路徑，從上面可以看出首頁實戰.html和img文件夾為同級的目錄，則路徑應該寫為:img/1.jpg

效果圖

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

#container{

width:1002px;

background-color:gray;

}

#header{

height:120px;

background-color: aquamarine;

}

#main{

height: 600px;

background: darkgoldenrod;

}

#footer{

height: 120px;

background: yellowgreen;

}

#main-left{

float: left;

background: yellow;

width: 700px;

height: 100%;

}

#main-right{

float: right;

background: pink;

width: 302px;

height:100% ;

}

</style>

</head>

<body>

<divid="container">

<divid="header"></div>

<divid="main">

<divid="main-left"></div>

<divid="main-right"></div>

</div>

<divid="footer"></div>

</div>

</body>

</html>

注意：這里對id為main的div裡面的子div
main-left和main-right設置浮動樣式時，要設置寬和高不然不起作用(起單獨一個寬或者高也不起作用，這里的背景顏色只是父div的背景顏色)。可能的原因是div裡面沒內容，沒長和寬，自然不會顯示背景顏色

3、當一個div包含兩個左右浮動的div並且後面接個普通的div時

</div>

</div>

</div>

因為兩個浮動的div浮在水面上，但是父div(即id為main的div)沒有高度所以沒把父div撐開。Footer的div會在水平面上，所以加背景顏色和height後可以看到此div在這兩個浮動div下面，要使footer的div呈現在下面並且不被覆蓋，

第一種方法：給main的div加height：800px；讓他撐開

第二種方法：在兩個浮動div後面加上一個class為cl的div，樣式為clear：both；

網頁製作的初步完成：

Html代碼：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<linkrel="stylesheet"type="text/css"href="css/reset.css"/>

<linkrel="stylesheet"href="css/首頁實戰-2.css"/>

</head>

<body>

<divid="container">

<divid="header">

<imgsrc="img/logo.jpg"alt=""id="logo"/>

<ulid="nav">

</ul>

</div>

<imgsrc="img/about_banner.jpg"alt=""id="banner"/>

<divid="main">

<divid="lside">

<divclass="subtitle">

<imgsrc="img/circle.gif"/>

<ahref="">MORE>></a>

</div>

<divclass="four">

<h2>電子商務類網站建設</h2>

<imgsrc="img/eshop_service.jpg"alt=""/>

<ul>

<li><ahref="#">方便的貨物管理</a></li>

<li><ahref="#">自定義會員類型</a></li>

<li><ahref="#">在線支付功能</a></li>

<li><ahref="#">豐富的訂單統計</a></li>

<li><ahref="#">財務報表生成</a></li>

</ul>

</div>

<divclass="four">

<h2>電子商務類網站建設</h2>

<imgsrc="img/eshop_service.jpg"alt=""/>

<ul>

<li><ahref="#">方便的貨物管理</a></li>

<li><ahref="#">自定義會員類型</a></li>

<li><ahref="#">在線支付功能</a></li>

<li><ahref="#">豐富的訂單統計</a></li>

<li><ahref="#">財務報表生成</a></li>

</ul>

</div>

<divclass="four">

<h2>電子商務類網站建設</h2>

<imgsrc="img/eshop_service.jpg"alt=""/>

<ul>

<li><ahref="#">方便的貨物管理</a></li>

<li><ahref="#">自定義會員類型</a></li>

<li><ahref="#">在線支付功能</a></li>

<li><ahref="#">豐富的訂單統計</a></li>

<li><ahref="#">財務報表生成</a></li>

</ul>

</div>

<divclass="four">

<h2>電子商務類網站建設</h2>

<imgsrc="img/eshop_service.jpg"alt=""/>

<ul>

<li><ahref="#">方便的貨物管理</a></li>

<li><ahref="#">自定義會員類型</a></li>

<li><ahref="#">在線支付功能</a></li>

<li><ahref="#">豐富的訂單統計</a></li>

<li><ahref="#">財務報表生成</a></li>

</ul>

</div>

<divid="rside">

<divclass="subtitle">

<imgsrc="img/circle.gif"/>

<ahref="">MORE>></a>

</div>

<ulid="art">

<li><ahref="#">這是一篇好文章1</a></li>

<li><ahref="#">這是一篇好文章2</a></li>

<li><ahref="#">這是一篇好文章3</a></li>

<li><ahref="#">這是一篇好文章4</a></li>

<li><ahref="#">這是一篇好文章5</a></li>

</ul>

<divclass="subtitle">

<imgsrc="img/circle.gif"/>

<ahref="">MORE>></a>

</div>

<divid="contact">

</div>

<divid="footer">

</ul>

<address>©2006-2009 北京市靈犀慧通科技有限公司版權所有
http://www.lionhit.com 京ICP備07020337號 W3C Valid CSS W3C Valid XHTML 1.0 Strict</address>

</div>

</body>

</html>

樣式代碼：

#container {

margin: 0 auto;

width: 1002px;

}

#header {

height: 128px;

background: gray url(../img/top_bg.jpg)no-repeat;

}

#nav li {

float: left;

/*1、讓導航橫向*/

/*background: purple; */

/*2、將導航撐開*/

width: 90px;

margin-right: 1px;

}

#nav a {

font-size: 16px;

font-family: "微軟雅黑";

color: #363636;

/*8、文字顏色*/

display: block;

/*5、滑鼠移動上去後背景顏色局限在a標簽內容中*/

height: 37px;

/*6、這些高度都有規定的*/

width: 90px;

text-align: center;

/*7 、讓文字居中*/

}

#nav a:hover {

/*3、滑鼠放上來後變的樣式*/

color: white;

background: url(../img/nav_on.gif);

/*4、滑鼠移動後的背景顏色*/

}

#banner{

margin: 10px 0;

}

#main{

/*height: 800px; */ /* 9、撐開*/

}

.subtitle{

height: 37px;

background: url(../img/index_main_top_bg.gif); /*14對原先設置的背景顏色進行更改*/

}

.subtitle img{

float: left;
/*10將初始化的圖片左浮動*/

margin: 5px 0 0 10px;
/*11對圖片進行微調*/

}

.subtitle h1{

float:left;

font-size: 16px;
/*12對標題中字體進行設置*/

font-family: "微軟雅黑",simhei,sans-serif;

margin-left:10px;

}

.subtitle a{

float: right;

font-size: 12px;
/*13對超鏈接進行微調*/

color: gray;

}

.four{

width: 326px;

height: 200px;

background: #EEE; /*這里將原先的背景改成其他的顏色(用QQ截圖下面有顯示RGB的顏色,這里只是轉換成16進制)*/

float: left;

margin: 10px;

}

.four h2{

font-size: 16px;

font-family: "微軟雅黑";

margin: 6px 0 6px 10px;
/*16將h2標題做做修改*/

}

.four img{

float: left; /*11、讓class為four標簽的img左浮動*/

margin-left: 10px;
/*15圖片背後有背景顏色為白色*/

padding: 6px;

background: white;

}

.four ul{

float: left;

margin-left: 10px;

}

.four li{

background: url(../img/service_intro_bg.gif)no-repeat; /*16標簽前面的小黑點*/

padding-left: 10px;
/*17小黑點在字的下面*/

height: 20px;

}

.four a{

color: gray; /*18a標簽的顏色*/

}

#lside{

height: 480px;

width: 694px;

border: 1px solid #EEE;

float: left; /*8、讓左右兩個div並列一起*/

/*background: cornflowerblue;*/ /*這里設置是來區分9*/ /*19刪除背景圖*/

border-top: none;

}

#rside{

/*height: 600px;*/

width: 294px;

/*border:1px solid gray;*/

float: right; /*讓左右兩個div並列一起*/

/*background: greenyellow; */ /*這是一整個大的div到後面設置的話這個要去掉了*/

}

#art{

background: #EEE;

margin-top: 1px;

padding-top:10px;

}

#art a{

display: block;

background: url(../img/article_head.gif)no-repeat;

height: 29px;

padding-left: 30px;

}

#art a:hover{

background: url(../img/article_on_bg.gif); /*滑鼠移動到文章標題後的背景*/

}

#contact{

margin-top: 1px;

height: 250px;

background: #EEE;

}

#footer{

height: 120px;

/*background: gray;*/

clear:both; /* 9、撐開*/

margin-top: 20px;

}

#footer ul{

height: 40px;

background: #EEE;

}

#footer li{

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer address{

font-family: "微軟雅黑",sans-serif;

font-size:10px;

margin-top: 15px;

}

8、網頁設計中CSS樣式里設定margin:0 20px 30% 0;其中30%是相對於什麼?是個什麼概念?

margin是用來設定該元素與相鄰元素直接的距離。
margin:0 20px 30% 0對應的是與上，右，下，左四邊相鄰元素的距離。

30%指下邊距為其父元素的寬度的30%

補充：
1.如果margin只有三個值，按照值的順序為margin：top right bottom; 缺少了left，根據原則，則left的值有right來代替。

margin:10px 20px 30px;就等於margin:10px 20px 30px 20px;

2.如果margin只有兩個值，按照值的順序為margin：top right; 缺少了bottom和left，根據原則left的值由right來代替，bottm的值由top來代替。

margin:10px 20px;就等於margin:10px 20px 10px 20px;

3.如果margin只有一個值，按照值的順序為margin:top; 缺少了bottom、left和right，根據原則left的值由right來代替，bottom的值由top來代替，right的值右top來代替，也就是說left的值也由top來代替。

margin:10px;就等於margin:10px 10px 10px 10px;

9、求一個網頁製作高手用div+css做一個網頁布局急謝謝！！！！！！！！！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
#containt{ height:530px; width:400px; margin:0 auto; border:1px solid #000000;}
#top{ height:100px; width:380px; margin-top:7px; margin-left:9px;}
#top_left{ height:100px; width:138px; float:left; border:1px solid #000000; border-right:none;}
#top_right{ height:100px; width:238px; float:left; border:1px solid #000000;}
#content{ height:50px; width:380px; margin-top:5px; margin-left:9px; border:1px solid #000000;}
#bottom{ height:350px; width:380px; margin-top:5px; margin-left:9px;}
#bom_left{ height:350px; width:138px; float:left; border:1px solid #000000;}
#bom_right{ height:350px; width:235px; float:left; border:1px solid #000000; margin-left:3px;}
.b_r_div{ height:100px; width:68px; margin-left:6px; float:left; margin-top:5px; border:1px solid #000000;}
#b_r_bottom{ height:120px; width:225px; margin-left:5px; float:left; margin-top:5px; border:1px solid #000000;}
</style>
</head>
<body>
<div id="containt">
<div id="top">
<div id="top_left"></div>
<div id="top_right"></div>
</div>
<div id="content"></div>
<div id="bottom">
<div id="bom_left"></div>
<div id="bom_right">
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div id="b_r_bottom"></div>
</div>
</div>
</div>
</body>
</html>

10、網頁設計師的頁面位置怎麼定

定義和用法
position 屬性規定元素的定位類型。

說明
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。

默認值： static
繼承性： no
版本： CSS2
JavaScript 語法： object.style.position="absolute"

實例
定位 h2 元素：

h2
{
position:absolute;
left:100px;
top:150px;
}

瀏覽器支持
所有主流瀏覽器都支持 position 屬性。

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
可能的值
值描述
absolute 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed 生成絕對定位的元素，相對於瀏覽器窗口進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative 生成相對定位的元素，相對於其正常位置進行定位。

因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。

static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit 規定應該從父元素繼承 position 屬性的值。

導航:首頁 > 萬維百科 > left網頁設計

left網頁設計

與left網頁設計相關的知識