三 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-list"
>
<
li>
li>
<
li class
="disc"
>
li>
<
li>
li>
<
li>
li>
ol>
div>

使用有序列表ul巢狀img標籤的方式來實現,後期可以新增多張實現輪播效果

然後選項我們使用無序列表實現,第二個選項是乙個實心圓點,單獨設定

2.css**

.banner.banimg.banner-list.banner-list li.disc

②為設定乙個100%的寬度,因為這裡左右是填滿瀏覽器的,不需要設定高度,防止拉伸變形

③列表設定絕對定位absolute,距離底邊20px,距離左邊50%,因為這裡會將列表的左邊作為標準計算,會向右偏移,所以我們還需要設定transform,是選項向左偏移自身的50%,這樣就可以居中顯示了

④選項小圓點的實現

固定寬高後,設定圓角50%,這樣可以使正方形變成圓形

設定邊框為1px寬度,顏色為白色的實線

設定左浮動變為橫向列表

設定左外邊距為10px,使選項分開

最後將第二個實心圓點背景色設定為白色

二 header部分的製作

一.header部分製作分析 1.header部分可以簡單分為左右兩部分 2.左邊logo為一張 3.右邊是乙個水平列表 二.的實現 1.html div class header div class logo img src images logo.png alt logo class logoi...

banner輪播的簡單實現

首先banner輪播讓我們避免了自己手寫輪播圖的需求是繁瑣的 因為banner已經寫好了 我們只要將我們想要輪播的存到集合中,在將集合放入banner中就好了。1.使用前先新增依賴 compile com.youth.banner banner 1.1.5 compile com.github.bu...

Ajax方式的Banner總結

ajax方式的banner總結 首先ajax方式是基於jquery的ajax.在需要廣告的地方放上顯示廣告的容器，一般是乙個div，然後在div的下方加上js的ajax請求伺服器，在請求回來後，使用js在div展示輸出。首先我們定義乙個ajaxbanner.ascx控制項 control langu...