二 header部分的製作

一.header部分製作分析

1.header部分可以簡單分為左右兩部分

2.左邊logo為一張

3.右邊是乙個水平列表

二.**的實現

1.html**

<

div 
class
="header"
>
<
div 
class
="logo"
>
<
img 
src="./images/logo.png"
alt="logo"
class
="logoimg"
>
div>
<
ul class
="n**"
>
<
li><
a href
="">home
a>
li>
<
li><
a href
="">about
a>
li>
<
li><
a href
="">protfolio
a>
li>
<
li><
a href
="">service
a>
li>
<
li><
a href
="">news
a>
li>
<
li><
a href
="">contact
a>
li>
ul>
div>

在這個div中在加入乙個存放logo的div 和 乙個製作導航的ul列表

②內容新增

在存放logo的div中新增img標籤插入

在ul列表中新增li標籤,並在li標籤中嵌入a標籤實現導航欄的點選,然後分別在a標籤中寫入導航欄選項名稱

2.css**

.header.logo.logoimg.n**.header .n** li

②logo樣式

設定logo的寬高,並設定為左浮動,使logo始終保持在左邊

③導航欄樣式

設定n**高度,文字的大小,並且向右浮動,使導航欄始終保持在右邊

設定li標籤為左浮動,製作橫向列表

設定li外邊距,使導航選項之間有一定的間隔

設定行高,這裡用行高撐開而不用高度直接設定

三 banner部分的製作

一.banner部分製作分析 1.banner部分主要存放的是一張 2.的中下部位有乙個選項列表 二.的實現 1.html div class banner ul li img src images banner.png alt class banimg li ul ol class banner ...

WPF製作只有部分圓角的矩形

wpf中原生的矩形可以通過設定radiusx和radiusy來實現圓角矩形的效果，但這樣的矩形四個角都是圓角。但有時候我們需要乙個矩形只有上面的有圓角，下面是直角。解決辦法就是自定義乙個類繼承圖形類 shape 定義相應的依賴屬性，然後重寫繪製方法即可。具體 如下 public class part...

六 最新資訊部分的製作

然後內容又可以分為左右兩部分,左邊是一張,右邊是文字div 文字div又可以分為左右兩部分,分別使日期和內容 內容又可以分為上下兩部分 二.的實現 1.html div class briefed div class section header div class section header b...