用html和css來編輯一個簡單的html頁面

時間 2019-11-30

標籤 html css 編輯一個簡單頁面欄目 HTML 简体版

原文原文鏈接

傳智播客模板頁php

下面先來看一下效果圖css

首先分析一下，該頁面有3個部分頭部，主體部分，尾部html

下面咱們來看一下頭部，首先，頭部的背景是漸變效果，咱們光靠代碼沒法編輯出來，只能使用fireworks軟件切圖java

傳智播客的logo和banner廣告詞瀏覽器

也要切下來，這樣既提升了網頁在瀏覽器上的加載效率，也減小了開發難度。ui

切圖界面以下：url

如今能夠開始寫代碼了，首先創建一個html和css文件，分別命名爲index.html和style.css.net

首先設置頭部的背景色視頻

清除界面中所需標籤的默認樣式。xml

經過效果圖可知logo和廣告詞水平居中，咱們能夠把它們兩個的圖片放在<h1>標籤內，也能夠直接創建兩個div容器，而後把圖片設置爲背景，再在css中設置margin值使其水平居中，我每一個都使用了一個；

兩相鄰元素設置左浮動，兩元素不相鄰，一左浮動，一右浮動，本界面中logo和廣告詞圖片相鄰，因此都設置左浮動。

下面輸入導航條文字，

而後設置第一個文字（首頁）距界面邊緣的距離，由firework中的效果圖可知爲94px;而文字與文字之間相差20px; 可設置nav的padding-left值爲84px;li標籤的padding值爲padding:0 10正好知足需求。

設置行高和導航條高度一致，使文字居中。使用僞類選擇器去掉超連接的默認樣式，設置其顏色爲白色。

下面兩部分很簡單直接寫就好了。

下面是運行效果圖：

下面分別是index.html和style.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=utf-8" />

<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="header">
	<h1><a href="index.html"><img src="images/logo.jpg" width="228" height="116" /></a></h1>
        <div class="headerR"></div>
</div>
<ul id="nav">
<li><a href="index.html">首頁</a></li>   
<li><a href="java.html">Java培訓</a></li>
<li><a href="#">.net培訓</a></li>
<li><a href="#">php培訓</a></li>
<li><a href="pm.html">網頁平面</a></li>
<li><a href="#">人才服務</a></li>
<li><a href="#">視頻下載</a></li>
<li><a href="#">校園生活</a></li>
<li><a href="#">師資力量</a></li>
<li><a href="#">就業宣言</a></li>
<li><a href="#">報名流程</a></li>
</ul>
<div id="content">內容</div>
<!-- InstanceEndEditable -->
<div id="footerwrap">
    <div class="footer">
    <p>傳智播客，致力於專業IT培訓，傳智播客，學有所得</p>
    <p>0789-138463-5522</p>
    <p>itcast©copyright_Reserved</p>
  </div>
</div>

</body>

@charset "utf-8";
/* CSS Document */
body{margin:0; padding:0; font-size:14px; background:url(../images/body_bg.jpg) repeat-x;}
h1,ul,li,div{margin:0; padding:0; list-style:none; border:0;}
/*header*/
#header{width:980px; height:116px; margin:0 auto;}
h1{float:left;}
.headerR{width:752px; height:116px; background:url(../images/headerR.jpg) no-repeat; float:left;}
#nav{width:896px;height:47px; margin:0 auto;line-height:47px;padding-left:84px;}
#nav li{float:left; font-weight:bold;font-size:14px;padding:0 10px}
#nav li a:link,#nav li a:visited{color:white; text-decoration:none}
/*#content*/
#content{width:980px;height:460px; margin:0 auto;background:#ccc;}
/*footerwrap*/
#footerwrap{width:100%;height:79px;border-top:6px solid #666; background:#000;}
.footer{width:980px;height:80px;margin:0 auto;text-align:center}
.footer p{color:#fff; font-size:12px;margin-top:3px}