網頁思路:
在正式編寫前，給網頁結構大致劃分出導航欄（nav）、內容（content）、底部（footer）等div布局
布局好之后，再在CSS文件中，完整詳細的補充div盒子的寬、高、背景顏色等樣式。由于網頁的元素分為內聯(lián)元素和塊狀元素，有時候適當的使用display屬性轉換。
其實不管是框架還是內容每一個都可以看成盒子布局
網頁大致布局好之后，再填充詳細完成里面的元素樣式。
里面內容也是建議分塊布局寫內容，再在CSS文件中編輯樣式，
再分塊布局再編輯樣式
整體效果圖：
如上所說我們可把一個網頁分為三步驟?導航欄（nav）、內容（content）、底部（footer）接下來展示我們網頁效果以及代碼分享
導航欄效果圖展示：
?HTML:
?文章來源地址http://www.zghlxwxcb.cn/news/detail-752773.html
CSS:
?
導航欄注意地方：
這里我們只需要前往阿里巴巴圖標庫選擇自己需要的圖片代入就好了
如上CSS代碼：
?文章來源：http://www.zghlxwxcb.cn/news/detail-752773.html
?中間內容效果圖展示：
?
?HTML：
?CSS：
?這一步我們使用大盒子里面套小盒子思路進行排版布局
?大盒子里面裝三個小盒子進行劃分，其中圖片中的五個圖片實現鼠標移動上去顯示放大效果
?如上代碼所訴，進行添加css屬性給紅色盒子與黑色盒子里的圖片進行放大效果
內容2展示效果：
?HTML:
?CSS:
?內容2的效果：
可實現鼠標移動圖片上顯示隱藏的圖片與內容，代碼實現如下：
?overflow：
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，并且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規(guī)定應該從父元素繼承 overflow 屬性的值。 |
?opacity：設置一個div元素的透明度級別
底部代碼效果圖：
?HTML：
?CSS:
?
注:使用id選擇器進行編輯內容 用p標簽進行段落劃分，設置內容寬與高，和文字大小，與字體顏色和背景顏色
text-align 屬性規(guī)定元素中的文本的水平對齊方式。
padding-top 屬性設置元素的上內邊距
margin-top 屬性設置元素的上外邊距
line-height 屬性設置行間的距離（行高）
?
?
到了這里，關于電影網頁制作HTML+CSS的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
