基于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
文章-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;
}
基于CSS的个人网页的更多相关文章
- 基于CSS+dIV的网页层，点击后隐藏或显示
一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...
- 一款基于TweenMax.js的网页幻灯片
之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版
html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
- Atitit事件代理机制原理 基于css class的事件代理
Atitit事件代理机制原理 基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...
- 基于Css反射形自触发事件，优化你的延时事件
昨天听w3ctech分享时候,说道orientationchange在不同OS和版本中,存在兼容问题,很多时候触发时候都没有渲染结束,开发同学一般都是基于setTimeout一段时间之后,在去执行具体 ...
- 第四十二课：基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- 通过CSS让html网页中的内容不可选
*{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; ...
- 基于jquery打造的网页右侧自动收缩浮动在线客服代码
基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...
随机推荐
- IE浏览器下使用AJAX登陆接口请求缓存与登陆不了的问题解决
问题: 在IE浏览器下面,登陆的时候老是登陆不上,但是打开控制台的时候再登陆却能登陆上. 分析: 通过抓包,发现,在不打开控制台的时候,少了一个接口的请求,却返回了改接口的返回信息,但是返回信息并不是 ...
- 队列工厂之RedisMQ
本次和大家分享的是RedisMQ队列的用法,前两篇文章队列工厂之(MSMQ)和队列工厂之RabbitMQ分别简单介绍对应队列环境的搭建和常用方法的使用,加上本篇分享的RedisMQ那么就完成了咋们队列 ...
- 移植python笔记
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 编译环境:ubuntu-14.04.1 编译器:gcc.arm-hisiv200-linux-gnueabi P ...
- tesseract ocr文字识别
一.环境搭建 (基于VS2010) 1.下载安装 tesseract-ocr-setup-3.02.02.exe 安装包 ,安装时候最好是在FQ的情况下安装.(安装一点要勾选 Tesseract de ...
- 设置int、float型数据的输出格式
设置整型输出的有效位数,比如在输出时间时时.分.秒都是两位有效数字,如果是5分钟应该输出00:05:00.需要加上头文件<iomanip> cout<<setw(2)<& ...
- Spring-java代理技术总结
Spring 中采用JDk的动态代理和CGLib代理技术在运行期间织入增强,所以用户不需要装备特殊的编译器或者类装载器就可以使用AOP功能. 要使用jdk的动态代理,目标类必须实现接口,而CGLib代 ...
- Hadoop2.7.3+Spark2.1.0完全分布式集群搭建过程
1.选取三台服务器(CentOS系统64位) 114.55.246.88 主节点 114.55.246.77 从节点 114.55.246.93 从节点 之后的操作如果是用普通用户操作的话也必须知道r ...
- LSTM基础
DNN,CNN,RNN:1.DNN:深度神经网络,或称多层感知机.解决早期单层感知机对于复杂函数不能模拟的情况.其形式为层之间全连接.实用sig等连续性函数模拟神经对机理的响应,训练算法使用 B ...
- 生成 HTMLTestRunner 测试报告学习总结
HTMLTestRunner 的安装与使用 HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展. 在使用之前,我们需要先安装他.下载地址:https://pyp ...
- trigger和triggerhandler的区别
1. trigger会触发默认行为2. trigger会触发所有元素的模拟事件,而triggerHandler只触发一次3. trigger可以链式操作,triggerHandler不能4. trig ...