使用CSS完成網站首頁的優化
需求分析
由于我們昨天使用表格布局存在缺陷,那么我們要來考慮使用DIV+CSS來對頁面進行優化
表格布局的缺陷
- 嵌套層級太多, 一旦出現嵌套順序錯亂, 整個頁面達不到預期效果
- 采用表格布局,頁面不夠靈活, 動其中某一塊,整個表格布局的結構全都要變
技術分析
HTML的塊標簽:
- div標簽: 默認占一行,自動換行
- span標簽: 內容顯示在同一行
步驟分析
- 創一個最外層div
- 第一部份: LOGO部分: 嵌套三個div
- 第二部分: 導航欄部分 : 放置5個超鏈接
- 第三部分: 輪播圖
- 第四部分:
- 第五部分: 直接放一張圖片
- 第六部分: 抄第四部分的
- 第七部分: 放置一張圖片
- 第八部分: 放一堆超鏈接
代碼實作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
</style>
</head>
<body>
<!--
1. 創一個最外層div
2. 第一部份: LOGO部分: 嵌套三個div
3. 第二部分: 導航欄部分 : 放置5個超鏈接
4. 第三部分: 輪播圖
5. 第四部分:
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超鏈接
-->
<div>
<!--2. 第一部份: LOGO部分: 嵌套三個div-->
<div>
<div class="logo">
<img src=https://www.cnblogs.com/zllk/p/"../img/logo2.png"/>
