個人網站頁面總結+原始碼
阿新 • • 發佈：2018-11-20
網站總體佈局及實現內容
頭部，內容區，底部
頭部：圖片 導航欄
內容區：四個內容
1：單一個輪播圖
2：滑鼠移入圖片變色
3：上中下，圖片，文字，圖片(移入變色)
4：外部引入圖片，自己填文字
5：圖片文字在一行顯示
底部
部分文字居中，部分文字在圖片下方，剛剛適應圖片大小
頭部的製作：
總體設定寬，高自動撐開(這裡設定高比較好，應為自動撐開加浮動還要清除浮動)，然後設定位置，
頭的左側左浮，並設定高，
右側右浮，並設定高，將右邊的div全部絕對定位到頂部，這是需要在他的父級設定相對定位
關於導航欄+| 部分，採用ui li a
ul先確定位置，距離上部多少，然後li 因為是快元素，所以要平鋪也就是一行，轉換為行元素，這時用浮動就可以，
a是|設定 ，border -right,再設定一個邊距就可以，這樣就把導航和標籤分割開了
內容製作：
1：輪播圖
1最小寬度：讓圖片可以放下
2整體框架寬100%，高500，超出部分隱藏，不進行換行，white-space: nowrap;居中顯示 相對定位(為箭頭做準備)
3：ul 四張圖片所以寬200%，高100% ，
4li 寬50%，左浮，居中，高100%
5箭頭，長寬，位置，顏色左邊左浮，右邊右浮（絕對定位）
6下面的圖片100%；
滑鼠移入圖片變色：
所謂的變色就是兩張圖片跌在一起
大的包裹器給出最大寬度，高度，位置，即可，剩下的就是十張圖片
十張圖片，設定同樣大小的長和寬，間距，
地下五張，利用相對定位，和上面的圖片重合，新增識別符號，當滑鼠移入，改變透明度
上中下，圖片文字，移入變色：，
這一部分內容比較豐富，總體來說分為兩部分header 和mid
header是一個大得div，下面是兩個span標籤，在span標籤上面是一張圖片
地下是移入變色
在包裹器中，設定背景顏色，寬100%，高，居中，這樣三個div下的span標籤就居中了，然後調節大小和間距就可以了
值得注意的是在選擇這，container_header div:nth cihild(3)選擇
變色和上面的一樣
外部引入圖片，自己填文字
這個環節，在包裹器設定寬，高，然後文字分為兩部分，分別用兩哥不同的div，在div裡面用不同的span標籤，想改動某個，用nth-child();
圖片文字在一行顯示:
這個相對簡單，先是圖片，再是div下的一個文字一張圖片的搭配形式
在包裹器中設定上下的間距，然後居中，=顯示
下面是文字圖片在一行顯示，因為圖片會把文字擠到下面，所以給圖片設定一個margin-bottom=-5，使其對齊即可
底部
部分文字居中，部分文字在圖片下方，剛剛適應圖片大小
大的設定顏色字型，下一級設定位置
js部分就是一個輪播圖：
用到了淡入淡出
自動：淡入淡出
手動：點選事件
$(document).ready(function (){})
當DOM文件物件模型，已經載入並且包括頁面已經完全載入，會執行ready事件
自動的淡入淡出，首先讓當前的出現，剩下的兄弟消失，$('.ig').eq(0).show().siblings().hide();
timer();
然後寫show函式
function show(){
$('.ig').eq(i).fadeIn(300).siblings().fadeOut(300);
}
然後再加一個定時器
function timer (){
time = setInterval(function(){
if(i==4){
i=0;
}.1000)
}
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大家好</title>
<link rel="stylesheet" href="./css/desi.css">
<!--<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>-->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="header_left">
<!--<img src="./img/logo.png" alt="">-->
</div>
<div class="header_right">
<div class="number">
<img src="./img/number.jpg" alt="">
</div>
<ul>
<li><a href="#">首頁</a></li>
<li class="show_list"><a href="#">
<span>成功案例</span>
<ul class="move_list">
<li>品牌設計</li>
<li>網頁設計</li>
<li>平面設計</li>
<li>電子商城</li>
<li>空間/建築</li>
</ul>
</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="banner">
<div class="banner_wrap">
<ul class="banner_img clear-fix">
<li class="ig"><img src="./img/banner_one.jpg" alt=""></li>
<li class="ig"><img src="./img/banner_4.png" alt=""></li>
<li class="ig"><img src="./img/banner_four.png" alt=""></li>
<li class="ig"><img src="./img/banner_6.png" alt=""></li>
</ul>
<div class="left_btn">
<img src="./img/向左.png" alt="">
</div>
<div class="right_btn">
<img src="./img/向右.png" alt="">
</div>
</div>
</div>
<div class="container">
<div class="content_one">
<img src="./img/design2.png" alt="">
<img src="./img/design3.png" alt="">
<img src="./img/design5.png" alt="">
<img src="./img/design7.png" alt="">
<img src="./img/design9.png" alt="">
<img src="./img/design.png" alt="" class="white_img">
<img src="./img/design4.png" alt="" class="white_img">
<img src="./img/design6.png" alt="" class="white_img">
<img src="./img/design8.png" alt="" class="white_img">
<img src="./img/design10.png" alt="" class="white_img">
</div>
<div class="content_two">
<div class="content_header">
<img src="./img/exhib.png" alt="">
<div>
<span style="font-weight: bold">服務專案:</span>
<span>標誌設計；LOGO設計；商標設計；VI設計；畫冊設計；海報設計；地產宣傳；戶外廣告；包裝設計；ICON設計；</span>
</div>
<div>
<span>網頁設計；模板建站；定製網站；介面設計；H5頁面設計；網店裝修；CAD效果圖……</span>
</div>
</div>
<div class="mid">
<img src="./img/mid1.png" alt="">
<img src="./img/mid2.png" alt="">
<img src="./img/mid3.png" alt="">
<img src="./img/mid4.png" alt="">
<img src="./img/mid5.png" alt="">
<img src="./img/mid6.png" alt="" class="bottom_img">
<img src="./img/mid7.png" alt="" class="bottom_img">
<img src="./img/mid8.png" alt="" class="bottom_img">
<img src="./img/mid9.png" alt="" class="bottom_img">
<img src="./img/mid10.png" alt="" class="bottom_img">
</div>
</div>
<div class="content_three">
<div class="three_wrap">
<div class="top_text">
<span>我們秉承“工匠精神”，做最精緻的設計</span>
<span>
我們是完美主義者，要求自己的每一次設計都是最完美。我們堅持專業高水準的服務標準，致力成為您的事業夥伴，我們珍重並以真誠回報您給予的信任和期待，
</span>
<span>
因為我們的價值來自於我們協助您創造價值。
</span>
</div>
<div class="bottom_text">
<span>我們敢比服務</span>
<span>所有的服務專案一律滿意為止</span>
<span>我們敢比價格</span>
<span>我們是以工作室的方式運作，我們的設計作品不包含公司運作成本，</span>
<span>我們只會索要單純的設計價值</span>
</div>
</div>
</div>
<div class="content_four">
<div class="four_wrap">
<img src="./img/service.png" alt="">
<div>
<img src="./img/tele.png" alt="">
<span> 專案洽談</span>
<img src="./img/qq.gif" alt="">
<span> ,根據需求報價 </span>
<img src="./img/price.png" alt="">
<span>預付定金，開始設計</span>
<img src="./img/four.png" alt="">
<span>修改定稿，完成設計</span>
<img src="./img/receive.png" alt="">
<span>改定稿，完成設計</span>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_wrap">
<img src="./img/二維碼.jpg" alt="">
<div class="footer_text">
<span>xx省XX市XX區xx路xx街道xx號 </span>
<span>©</span>
<span>2017.11-2018.10</span>
<span>掃一掃，直接溝通設計師</span>
</div>
</div>
</div>
</div>
</body>
</html>css部分：
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.header {
/*height: 120px;*/
width: 1048px;
margin: 0 auto;
position: relative;
}
.header_left {
line-height: 120px;
float: left;
}
.header_right {
height: 120px;
float: right;
}
.header_right > div {
position: absolute;
top: 0;
right: 0;
}
.header_right ul {
margin-top: 82px;
}
.header_right ul li {
float: left;
line-height: 13px;
}
.header_right ul li a {
border-right: 2px solid black;
padding: 0 25px;
/*height: 13px;*/
font-weight: bold;
color: #666;
}
.header_right ul li a:hover {
color: #909090;
}
.header_right ul li:last-child a {
border: none;
}
.banner {
min-width: 1048px;
}
.banner_wrap {
overflow: hidden;
white-space: nowrap;
width: 100%;
height: 500px;
position: relative;
}
.banner_img {
height: 100%;
width: 200%;
margin: 0 auto;
/*position: relative;*/
}
.banner_img li {
float: left;
width: 50%;
height: 100%;
margin: 0 auto;
/*position: absolute;*/
}
.banner_img li img {
width: 100%;
height: 100%;
}
.clear-fix {
content: '';
clear: both;
display: block;
overflow: hidden;
}
.left_btn {
background: #999;
width: 71px;
height: 71px;
top: 50%;
left: 65px;
position: absolute;
cursor: pointer;
}
.left_btn img {
width: 100%;
height: 100%;
}
.right_btn {
background: #999;
width: 71px;
height: 71px;
top: 50%;
right: 65px;
cursor: pointer;
position: absolute;
}
.right_btn img {
width: 100%;
height: 100%;
}
.content_one {
max-width: 1048px;
margin: 0 auto;
height: 260px;
}
.content_one img {
width: 180px;
height: 130px;
padding: 60px 10px;
}
.white_img {
position: relative;
bottom: 255px;
opacity: 0;
}
.white_img:hover {
opacity: 1;
/*transform: rotate(45deg) scale(1.5);*/
}
.content_two {
width: 100%;
text-align: center;
background: gainsboro;
height: 609px;
}
.content_header {
margin: 0 auto;
}
.content_header div:nth-child(1) {
margin-top: 20px;
/*margin-bottom: px;*/
}
.content_header div:nth-child(3) {
padding-top: 10px;
padding-bottom: 40px;
}
/*一個span標籤是一個孩子？*/
.content_header div span {
color: #666;
font-size: 13px;
}
.mid {
max-width: 1060px;
margin: 0 auto;
}
.mid img {
padding: 5px 5px 40px 5px;
}
.mid .bottom_img {
position: relative;
bottom: 375px;
}
.mid .bottom_img:hover {
opacity: 0;
}
.content_three {
width: 100%;
height: 500px;
background: url("../img/content_three.png") no-repeat;
background-position: center center;
}
.three_wrap {
padding-top: 138px;
text-align: center;
}
.top_text span:nth-child(1) {
font-size: 16px;
}
.top_text span, .bottom_text span {
color: #666;
font-family: 微軟雅黑;
display: block;
font-size: 13px;
/*letter-spacing: 1px;*/
font-size: 2px 0;
}
.three_wrap div:nth-child(2) {
margin-top: 50px;
}
.bottom_text span:first-child {
color: #000;
font-size: 18px;
font-family: SimSun;
font-weight: bold;
padding: 5px 0;
}
.bottom_text span:nth-child(3) {
color: #000;
font-size: 20px;
font-family: SimSun;
font-weight: bold;
padding: 5px 0;
}
.four_wrap {
padding-top: 20px;
text-align: center;
margin-bottom: 80px;
}
.four_wrap img {
margin-bottom: 40px;
}
.four_wrap > div img {
margin-bottom: -5px;
}
.footer {
background: #333;
color: #fff;
}
.footer_wrap img {
width: 150px;
height: 150px;
margin-right: 250px;
}
.footer_wrap {
padding: 65px 0 40px;
text-align: right;
margin: 0 auto;
}
.footer_wrap span {
color: #999;
font-family: SimSun;
font-size: 13px;
}
.footer_wrap span:last-child {
font-size: 14px;
color: #fff;
margin: 0 250px;
}
.footer_wrap span:nth-child(2) {
margin: 0 5px;
}
.footer_wrap span:nth-child(4) {
margin: 0 5px;
}
.show_list {
position: relative;
}
.show_list .move_list {
z-index: 100;
position: absolute;
top: -56px;
left: 0;
width: 100%;
background: #333;
text-align: center;
display: none;
}
.show_list .move_list li {
padding: 10px 0;
width: 114px;
color: #fff;
}
.header_right ul a .show_list {
padding-bottom: 20px;
border-right: none;
}
.show_list:hover .move_list {
display: block;
}
/*.show_list .move_list ul li:nth-child(3) {*/
/*border-left: 1px solid #000;*/
/*}*/
.show_list .move_list li:hover {
background: orange;
color: #fff;
}
js部分：var i = 0;
var time;
$(document).ready(function () {
$('.ig').eq(0).show().siblings().hide();
timer();
$('.left_btn').click(function () {
clearInterval(time);
if (i == 0) {
i = 4;
}
i--;
show();
timer();
})
$('.right_btn').click(function () {
clearInterval(time);
if (i == 3) {
i = -1;
}
i++;
show();
timer();
})
})
function timer() {
time = setInterval(function () {
show();
i++;
if (i == 4) {
i = 0
}
}, 1000)
}
function show() {
$('.ig').eq(i).fadeIn(300).siblings().fadeOut(300);
}