<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<!--引入css文件用link標籤-->
<link href="新建文件夾/blog.css" type="text/css" rel="stylesheet" />
<!--<script type="text/javascript" src=""></script>-->
</head>
<body>
<div id="box">
<div id="banner">
<p><img src="新建文件夾/images/banner.gif" alt="個人圖片不見了" width="1400" height="228" />
</p>
<p> </p>
</div>
<div id="menu">
<!--ol是有序列表1,2,3 ul無續列表-->
<ul>
<li><a href="http://www.baidu.com" target="_blank">首頁</a></li>
<li><a href="#">日誌</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 id="main">
<!--左邊區域-->
<div id="left">
<!--劃分3個區域-->
<div id="zuozhe">
<p>關於我</p>
<p><img src="新建文件夾/images/109395CF4-7.jpg" alt="個人照片" width="148" height="254"/>
<!--文字,span方便對文字的樣式修改，一行，不換行--><span>張梅</span>重慶市 南岸區</p>
<p>天微明，冬天的光透過窗，印在左手的無名指上。回憶的顏色是透明的冷，因而，用窗口透過的報報的光暖一暖心。</p>
<p> </p>
<p> </p>
</div>
<div id="huoli">
<!--class通用在3個標題上的樣式--></div>
</div>
<div id="right">
<div id="list">
<h5 class="biaoti">>>日誌</h5>
<ul>
<li>簡報IMAX加長版《變形金剛》 </li>
<li>《變形金剛》發燒友說話</li>
<li>《反恐王國》：生猛的空心彈</li>
<li>《東方承若》：不動如山，暗流洶涌</li>
<li>《妖精的旋律》：日式YY的經典案例</li>
</ul>
</div>
<!--先分爲2個div-->
<h5 class="biaoti">>>相冊</h5>
<img src="新建文件夾/images/1.jpg" alt="個人圖片不見了" />
<img src="新建文件夾/images/2.jpg" alt="個人圖片不見了" />
<img src="新建文件夾/images/3.jpg" alt="個人圖片不見了" />
</div>
</div>
<div id="footer"><span>臨大18級02-03版權全部 @2019-04-01</span>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{/*通配符選擇器*/
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
#box{
/*background-color:#F00;*/
width:1400px;
height:1000px;
/*margin:0 auto;*/
margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放圖片，設置高度和圖片同樣高*/
#menu{
background-color:#FCEAA8;/*用顏色取色器取的*/
height:50px;
}
/*修改id爲menu的、html標籤下面的、ul標籤的樣式*/
#menu ul{
list-style:none;/*去掉點*/
float:left;/*靠右*/
height:50px;
width:450px;
}
#menu li{
line-height:50px;/*設置行居中*/
float:left;/*可使列表豎着變橫着*/
margin-left:20px;/*li距離左邊那個li的距離*/
}
/*#menu ul li a{}*/
#menu a{
color:#1E5E2A;/*字體顏色*/
text-decoration:none;/*去掉下劃線*/
font-size:16px;/*字體大小*/
font-family:"微軟雅黑";/*word中常見字體通常均可以寫*/
}
#menu a:hover{/*當鼠標滑過超連接標籤時的樣式*/
color:#F60;
}
#main{
/*background-color:#6F0;*/
height:1000px;
}
#left{
/*background-color:#33C;*/
height:1000px;
width:400px;
float:left;/*可使div橫向排排坐*/
}
#zuozhe{
padding-top:15px;
padding-left:15px;/*上邊和左邊留點空*/
text-align:center;/*整個內容水平居中*/
}
#zuozhe img{
border:1px solid #999;/*加邊solid實線*/
padding:80px;/*邊與圖片有個空白，相似相框*/
border-radius:100px;/*圓角，值越大，角越園*/
}
#zuozhe span{
margin:10px;/*一圈的距離*/
display:block;/*改爲盒子元素，能夠識別盒子元素的一些屬性：margin、border\padding*/
/*border-top:1px #999 dashed;上面的虛線邊 粗細是1，顏色是灰色 */
border-top-color:#999;
border-top-style:dashed;
border-top-width:1px;
border-bottom:1px #999 dashed;/*下邊的虛線*/
font-size:18px;/*字號*/
padding-top:5px;/*內容距離邊的距離-上面的*/
padding-bottom:5px;/*下面的*/
}
/*class選擇器的寫法 以點開頭 後面跟着html標籤上的class屬性裏面的那個名*/
.biaoti{
color:#FFF;
background-color:#CCCC9A;/*背景色綠色，取色器取到的*/
height:40px;
width:220px;
line-height:40px;/*設置垂直居中，值要和height的值同樣*/
font-size:20px;
font-weight:bolder;/*加粗，h5原本就是標題，已經加粗過了，不加也能夠*/
padding-left:100px;/*左邊撐出來一個空*/
border-radius:0 10px 10px 0;/*和margin、broder、padding，都是4個值*/
/*順序：左上角、右上角、右下角、左下角，0表明沒有圓角*/
}
#huoli ul{
list-style:none;/*去點*/
padding-left:20px;
padding-top:10px;
}
#huoli ul li{
margin:5px;/*每一個li之間的距離*/
width:90px;
float:left;/*由於外面的ul的寬度過小了，因此本來應該都放在一行的，會自動的掉下去，變成一行只能展現2個li*/
}
#huoli ul li a{
font-size:12px;
text-decoration:none;/*去下劃線*/
color:#333;/*網站字體通常都不是黑色，扎眼*/
}
#huoli ul li a:hover{/*鼠標滑過變色*/
color:#090;
}
#huoli ul li img{
margin-right:5px;/*讓圖標和文字之間的距離大點*/
}
#list{
clear:both;/*清空全部的自帶的float影響*/
}
#list ul{
list-style:none;
padding:15px;/*不靠左邊和上邊，留空*/
}
#list ul li{
padding-bottom:8px;
padding-left:15px;
border-bottom:1px #999 dotted;/*下面的虛線：dashed或者dotted*/
margin-bottom:8px;/*個人邊和其餘人的字的距離，padding個人字和個人邊的距離*/
background:url(images/icon1.gif) no-repeat;/*不重複的話，變成背景*/
/*background-image:url(images/icon1.gif) ;
background-repeat:repeat-x;*/
background-position:5px center;/*背景點的位置*/
}
#list ul li a{
text-decoration:none;/*去掉下劃線*/
color:#333;/*黑色太扎眼，用深灰*/
font-size:12px;
}
#list ul li a:hover{
color:#F60;
text-decoration:underline;/*鼠標滑過，顯示下劃線*/
}
#right{
/*background-color:#F3F;*/
height:500px;
width:1000px;
float:right;/*可使div橫向排排坐*/
}
#footer{
background-color:#328048;
height:80px;
clear:both;/*清空其餘的div的float的影響*/
}
#footer span{
text-align:center;/*水平居中*/
display:block;/*盒子模型，否則居中屬性也無論用*/
color:#FFF;
line-height:80px;/*垂直居中*/
}