前端时间做的CSS作业：基于CSS的个人网页

效果图：

代码：

吴广林的个人博客Blog of WuguanglinDo more of what makes you happy !首页随笔测试联系订阅管理 随笔-2  文章-0  评论-0我的博客我的照片我的视频我的音乐我的课表用户注册问卷调查代码规范正在开发我的测试 QQ:769835910 WeChat:glwu769835910 FaceBook:13411989126 Copyright ©2017 汕大-吴广林

@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; }