一個簡單的網站主頁
主要由html+css+js制作
1.圖片展示
這是首頁的上半部分，主要內容有：頂部標頭、頂部導航欄、圖片輪播圖。
```css
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我們的戀愛小屋</title><embed src="images/1.mp3" hidden="true" autostart="true" loop="true"/><audio src="images/1.mp3" hidden="true" autostart="true" loop="true"></audio><link rel="stylesheet" href="css/style.css"><script type="text/javascript">window.οnlοad=function(){var wrap=document.
getElementById('wrap'),pic=document.
getElementById('pic').
getElementsByTagName("li"),list=document.
getElementById('list').
getElementsByTagName('li'),index=0,timer=null
;// 定義并調用自動播放函數timer =
setInterval(autoPlay, 2000
);// 鼠標劃過整個容器時停止自動播放wrap.onmouseover = function () {clearInterval(timer
);}// 鼠標離開整個容器時繼續播放至下一張wrap.onmouseout = function () {timer =
setInterval(autoPlay, 2000
);}// 遍歷所有數字導航實現劃過切換至對應的圖片for
(var i = 0
; i < list.length
; i++) {list[i].onmouseover = function () {clearInterval(timer
);index = this.innerText - 1
;changePic(index
);};};function autoPlay () {if
(++index >= pic.length
) index = 0
;changePic(index
);}// 定義圖片切換函數function changePic (curIndex) {for
(var i = 0
; i < pic.length
; ++i) {pic[i].style.display =
"none";list[i].className =
"";}pic[curIndex].style.display =
"block";list[curIndex].className =
"on";}};</script> </head>
<body><!-- 頂部 --><div class=
"top"><div class=
"context1"><h3 class=
"welcom">歡迎寶貝</h3><div class=
"mmd"><img src=
"images/mmd.gif"></div><h1 class=
"what">我們的戀愛小屋</h1><img src=
"images/zuo.jpg"></div></div><!-- 頂部導航欄 --><div class=
"header"><div class=
"context2"><ul class=
"mulu"><li><a href=
"#">我的首頁</a></li><li><a href=
"record.html">紀念日志</a></li><li><a href=
"#">愛的約定</a></li><li><a href=
"#">服務商城</a></li><li><a href=
"#">成長日志</a></li><li><a href=
"#">關于我們</a></li></ul></div></div><!-- 輪播圖 --><div class=
"wrap"><ul id=
"pic"><li><img src=
"images/1.jpg" alt=
""></li><li><img src=
"images/2.jpg" alt=
""></li><li><img src=
"images/3.jpg" alt=
""></li><li><img src=
"images/4.jpg" alt=
""></li><li><img src=
"images/5.jpg" alt=
""></li> </ul><ol id=
"list"><li class=
"on">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol></div><!-- 中間內容 --><div class=
"mid"><div class=
"left"><div class=
"left_top"><img src=
"images/dd.png">愛情寶典</div><div class=
"left-bottom"><div class=
"leftt"><div class=
"name1"><strong>平凡的世界</strong></div><div class=
"name11"><img src=
"images/world.jpg"></div><div class=
"words1">即使有一天我要遠走他鄉，但愿我還能在夢中再回到這里來…——路遙《平凡的世界》</div></div><div class=
"rightt"><div class=
"name1"><strong>簡愛</strong></div><div class=
"name11"><img src=
"images/love.jpg"></div><div class=
"words1">我無法控制自己的眼睛，忍不住要去看他，就像口干舌燥的人明知水里有毒卻還要喝一樣。我本來無意去愛他，我也曾努力的掐掉愛的萌芽，但當我又見到他時，心底的愛又復活了。——夏洛蒂 勃朗特 《簡愛》</div></div></div></div><div class=
"right"><div class=
"wenzhang"><div class=
"wz"><img src=
"images/word.png">好物文章</div><ul class=
"ul1"><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><li><a href=
"#">文章7</a></li><li><a href=
"#">文章8</a></li></ul></div><div class=
"ours"><div class=
"our"><img src=
"images/call.png">聯系我們</div></div></div></div><!-- 底部導航欄 --><div class=
"end"><div class=
"endd">@
right:白燕&歡迎您的投稿</div></div><script type=
"text/javascript" src=
"js/canvas-nest.js">//定義畫布寬高和生成點的個數var WIDTH = window.innerWidth,HEIGHT = window.innerHeight,POINT = 35
;var canvas = document.
getElementById('Mycanvas');canvas.width = WIDTH,canvas.height = HEIGHT
;var context = canvas.
getContext('2d');context.strokeStyle =
'rgba(255,255,255,255.255)',context.strokeWidth = 1,context.fillStyle =
'rgba(255,255,255,255.255)';var circleArr = []
;//線條：開始xy坐標，結束xy坐標，線條透明度function Line(x, y, _x, _y, o) {this.beginX = x,this.beginY = y,this.closeX = _x,this.closeY = _y,this.o = o
;}//點：圓心xy坐標，半徑，每幀移動xy的距離function Circle(x, y, r, moveX, moveY) {this.x = x,this.y = y,this.r = r,this.moveX = moveX,this.moveY = moveY
;}//生成max和min之間的隨機數function num(max, _min) {var min = arguments[1] || 0
;return Math.
floor(Math.
random() *
(max - min + 1
) + min
);}// 繪制原點function drawCricle(cxt, x, y, r, moveX, moveY) {var circle = new
Circle(x, y, r, moveX, moveY
)cxt.
beginPath()cxt.
arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI
)cxt.
closePath()cxt.
fill();return circle
;}//繪制線條function drawLine(cxt, x, y, _x, _y, o) {var line = new
Line(x, y, _x, _y, o
)cxt.
beginPath()cxt.strokeStyle =
'rgba(255,255,255,' + o +
')'cxt.
moveTo(line.beginX, line.beginY
)cxt.
lineTo(line.closeX, line.closeY
)cxt.
closePath()cxt.
stroke();}//每幀繪制function draw() {context.
clearRect(0, 0, canvas.width, canvas.height
);for(var i = 0
; i < POINT
; i++) {drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r
);}for(var i = 0
; i < POINT
; i++) {for(var j = 0
; j < POINT
; j++) {if(i + j < POINT) {var A = Math.
abs(circleArr[i + j].x - circleArr[i].x
),B = Math.
abs(circleArr[i + j].y - circleArr[i].y
);var lineLength = Math.
sqrt(A * A + B * B
);var C = 1 / lineLength * 7 - 0.009
;var lineOpacity = C > 0.03 ? 0.03
: C
;if(lineOpacity > 0) {drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i + j].x, circleArr[i + j].y, lineOpacity
);}}}}}//初始化生成原點function init() {circleArr = []
;for(var i = 0
; i < POINT
; i++) {circleArr.
push(drawCricle(context,
num(WIDTH
),
num(HEIGHT
),
num(15, 2
),
num(10, -10
) / 40,
num(10, -10
) / 40
));}draw();}//調用執行window.onload = function() {init();setInterval(function() {for(var i = 0
; i < POINT
; i++) {var cir = circleArr[i]
;cir.x += cir.moveX
;cir.y += cir.moveY
;if(cir.x > WIDTH
) cir.x = 0
;else
if(cir.x < 0
) cir.x = WIDTH
;if(cir.y > HEIGHT
) cir.y = 0
;else
if(cir.y < 0
) cir.y = HEIGHT
;}draw();}, 10
);}</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的html+css+js制作简单网站首页的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
