前端時間做的CSS作業：基於CSS的個人網頁
基於CSS的個人網頁
效果圖：
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>吳廣林的個人博客</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="home"> <div id="header"> <div id="blogTitle"> <div class="title">Blog of Wuguanglin</span> <div class="subtitle">Do more of what makes you happy !</span> </div> <div id="navigator"> <ul id="navList"> <li><a href="" target="_blank">首頁</a></li> <li><a href="" target="_blank">隨筆</a></li> <li><a href="" target="_blank">測試</a></li> <li><a href="" target="_blank">聯系</a></li> <li><a href="" target="_blank">訂閱</a></li> <li><a href="" target="_blank">管理</a></li> </ul> <div class="blogStats"> <div id="blog_stats"> 隨筆-2 文章-0 評論-0 </div> </div><!--end: blogStats --> </div><!-- end: navigator 導航欄 --> </div><!-- end: header 頭部 --> <div id="main"> <div id="sideBar"> <div id="sideNavBar"> <ul id="sideNavList"> <li><a href="blog.html">我的博客</a></li> <li><a href="photos.html" target="_blank">我的照片</a></li> <li><a href="video.html" target="_blank">我的視頻</a></li> <li><a href="music.html" target="_blank">我的音樂</a></li> <li><a href="schedule.html" target="_blank">我的課表</a></li> <li><a href="register.html" target="_blank">用戶注冊</a></li> <li><a href="questionnaire.html" target="_blank">問卷調查</a></li> <li><a href="http://tguide.qq.com/main/base.htm#html-title" target="_blank">代碼規范</a></li> <li><a href="moban-working/index.html" target="_blank">正在開發</a></li> <li><a href="test.html" target="_blank">我的測試</a></li> </ul> </div><!-- end: sideNavBar 側邊導航欄 --> <div id="contactBar"> QQ:<br> 769835910 <br><br> WeChat:<br> glwu769835910 <br><br> FaceBook:<br> 13411989126 <br><br> </div> </div><!-- end: sideBar 側邊欄 --> <div id="content"> <div id="imgShow" > <img src="blogImages/1.jpg"> <img src="blogImages/2.jpg"> <img src="blogImages/3.jpg"> <img src="blogImages/4.jpg"> </div> </div><!-- end: content 內容 --> </div><!-- end: main 主要部分 --> <div id="footer"> Copyright ©2017 汕大-吳廣林 </div><!-- end: footer底部--> </div><!-- end: home 自定義的最大容器 --> </body> </html>
@charset="utf-8";
/*頁面*/
body {
font-size:15px;
padding:0;
margin:0;
font-family:"微軟雅黑","宋體",Arial;
background:#ccc url('http://images.cnblogs.com/cnblogs_com/wuguanglin/969799/o_background.jpg') no-repeat top center fixed;
min-width:1200px;
}
/*自定義容器home*/
#home {
opacity: 0.95;
filter: alpha(opacity=95);
box-shadow:0 0 10px #000;
margin:40px auto;
width:1200px;
background:#fff;
overflow:auto;
border:solid 1px #fff;
}
/*修改默認樣式屬性*/
h1 {
margin:0;
}
h3 {
color: #fff;
background-color:#666;
border-radius: 5px;
padding:6px;
margin:10px 0px;
text-shadow:2px 2px 3px #404040;
}
ul {
list-style:none;
margin:0;
padding:0;
}
image {
border:none;
}
/*超鏈接*/
a {
color:#708090;
text-decoration:none;
}
/*頭部*/
#header {
padding:20px;
}
/*博客標題*/
#blogTitle{
color:#666;
}
/*主標題*/
.title {
margin-top:10px;
height:100px;
line-height:100px;
font-size:48px;
padding-left:5px;
font-family: Vladimir Script;
font-weight:bold;
background:#fff url('http://images.cnblogs.com/cnblogs_com/wuguanglin/969799/o_o_o_light2.png') no-repeat right
}
/*子標題*/
.subtitle {
padding-left:240px;
font-size:36px;
line-height:36px;
color:#999;
font-weight:normal;
margin:10px 0;
font-weight:bold;
font-family: Vladimir Script;
}
/*導航欄*/
#navigator {
font-family: "微軟雅黑","宋體",Arial;
font-size:16px;
height:48px;
background:#666;
text-align:center;
margin-top:20px;
margin-bottom:20px;
}
#navList li {
margin:0;
line-height:48px;
display:inline-block;
float:left;
}
#navList li:hover {
background:#ccc;
}
#navList li a {
padding:0 30px;
text-decoration:none;
line-height:48px;
border:0;
color:#fff;
display:inline-block;
}
.blogStats {
height:48px;
color:#fff;
line-height:48px;
}
#main{
padding:20px 6px;
clear: both;
}
/*側邊欄*/
#sideBar{
width:120px;
height:auto;
margin-top: 5px;
text-align: center;
display: inline-block;
}
/*側邊導航欄*/
#sideNavBar{
text-align: center;
width:90px;
padding: 20px;
background: #666;
border-radius: 5px;
}
#sideNavList li{
color:gold;
line-height:36px;
}
#sideNavList a{
color:#fff;
}
#sideNavList a:hover{
color:gold;
font-weight: bold;
font-size: 22px;
}
/*側邊聯系欄*/
#contactBar{
width:110px;
padding: 10px;
margin:20px auto;
text-align: left;
color: #fff;
font-size: 13px;
background: #666;
word-wrap: break-word;
border-radius: 5px;
}
/*圖片展示部分*/
#content{
width: 1000px;
height: auto;
float: right;
display: inline-block;
}
#imgShow{
}
#imgShow img{
width: 475px;
height: 270px;
margin: 7px;
border-radius: 10px;
float: right;
}
/*底部*/
#footer {
margin-bottom:10px;
padding:12px;
text-align:center;
background:#666;
color:#DDD;
font-size:14px;
}