基于CSS的个人网页

前端时间做的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;

}

基于CSS的个人网页的更多相关文章

基于CSS+dIV的网页层，点击后隐藏或显示
一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...
一款基于TweenMax&period;js的网页幻灯片
之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览源码下载实现的代码. ...
HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版&ZeroWidthSpace;
html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...
&num;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透明的同学也可以下载研 ...

随机推荐

&period;NET Core的文件系统[2]：FileProvider是个什么东西？
在<读取并监控文件的变化>中,我们通过三个简单的实例演示从编程的角度对文件系统做了初步的体验,接下来我们继续从设计的角度来继续认识它.这个抽象的文件系统以目录的形式来组织文件,我们可以利用 ...
基于TCP和多线程实现无线鼠标键盘-Robot
Windows端收到Android端传递来的键盘或鼠标操作信息以后,需要根据这些信息操作鼠标或键盘,这就需要用到java.awt.Robot类,该类用于控制鼠标或键盘. 在Java主窗体中定义: pu ...
基于TCP和多线程实现无线鼠标键盘-Socket(1)
把手机作为移动鼠标.键盘使用非常方便,本文将实现这一功能.该应用分为两部分:Windows服务端和Android客户端. 本文源代码的下载地址:http://download.csdn.net/det ...
lua中的协程
lua中的协程和线程类似: 1. 协程拥有自己的独立的栈,局部变量,和指令: 2. 所有协程都可以共享全局变量: 3. 协程不能像线程那样并行执行,协程之间需要相互协调执行,同一个时刻只能运行一个协程 ...
vim编程插入保存不退出保存退出退出不保存另存为其他文件名保存覆盖现有文件
---恢复内容开始--- 在xshell里写代码,如果需要编辑代码,可以输入 vim+ xxx.py ,进入vim编辑界面这里的xxx.py表示 python的存储文件,后缀名是.py. 1． ...
总结：ARM逻辑和高级C（朱老师物联网学习）
开始学习朱老师物联网的视频是国庆节的那几天开始的,刚刚开始的时候是想自己在网上找一些嵌入式方面的视频资料,也找了很多的资料臂如“国嵌视频”“达内的视频”,之后也化了十几块钱在淘宝上面买了几十个G的视频 ...
Flex里的特效
Flex中提供了丰富的效果组件.因为效果是一种依据时间渐变的过程,因此全部效果都具有duration属性,用来设置播放时间(以毫秒为单位).也能够通过设置repeatCount属性和repeatD ...
php---tp框架---表单验证
自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证.分为静态验证和动态验证. 关于基础知识,请查看手册"自动验证"一章 ...
关于VC++中virtual ~的含义
我知道virtual 的虚函数定义,~CMainFrame( )是析构函数,用来释放内存.C++的继承和派生内容.所有可以被用作基类的类一般都用虚析构函数当基类对象的指针或引用调用派生类对象时,如果基 ...
localStorage和sessionStorage区别(包括同源的定义)
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现) ...