基于CSS的个人网页

前端时间做的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&nbsp;文章-0&nbsp;评论-0&nbsp;</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 &copy;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;
}

转载于:https://www.cnblogs.com/wuguanglin/p/csstest.html

基于CSS的个人网页相关推荐

基于CSS+dIV的网页层，点击后隐藏或显示
一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...
网页设计css分析,基于CSS技术的网页制作实例分析
21世纪我国科学技术水平大幅提高,计算机网络技术成为了推动各行各业事业发展的助推器,可以利用计算机网络快速发布和获取信息,同样在人们的政治生活.经济生活等多个方面发挥着无可比拟的作用.网页设计与计算机 ...
DIV布局京东商城购物网站(4页) 基于Html+Css+javascript的网页制作（购物主题）
HTML5期末大作业:京东商城网站设计--京东商城购物网站(4页) 基于Html+Css+javascript的网页制作(购物主题) 文章目录 HTML5期末大作业:京东商城网站设计--京东商城购物网 ...
css 查看更多_在Scrapy中如何利用CSS选择器从网页中采集目标数据——详细教程（上篇）...
/前言/ 今天小编给大家介绍Scrapy中另外一种选择器,即大家经常听说的CSS选择器. /CSS基础/ CSS选择器和Xpath选择器的功能是一致的,都是帮助我们去定位网页结构中的某一个具体的元素, ...
基于css和js的轮播效果图实现
基于css和js的轮播效果图实现第一篇:效果图 1.先啥也不说直接上效果图第二篇:详细讲解 1. 建立容器 #box 给其设置相关属性(注意:overflow:hidden;) 2. Box ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
2小时学会CSS，完成网页制作！
第一步:规划网站,本教程将以图示为例构建网站 1.规划网站,本教程将以下图为例构建网站. 其基本布局见下图: 主要由五个部分构成: 1.Main Navigation 导航条,具有按钮特效. Widt ...
基于HTML5+CSS3的网页设计与实现
摘要:随着互联网技术的不断发展,电子设备的广泛应用和高普及度,网页作为互联网信息的重要载体,其网页设计技术将面临新的挑战.HTML和CSS作为网页前端开发所运用的主要核心技术,如何灵活运用,使得web ...
html页中加入数学公式,Html+Css+JavaScript实现网页公式编辑器(一)
最近一直在做网页版的公式编辑器,现在进度过半,我来总结一下这段时间开发网页公式编辑器的经验. 开始开发之前,我在网上搜集了大量网页公式方面的资料,现在比较流行的网页公式都是用MathML:数学置标语言 ...
HTML网页设计期末课程大作业：汽车网页——宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...

基于CSS的个人网页

基于CSS的个人网页

基于CSS的个人网页相关推荐

最新文章

热门文章