前端时间做的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的个人网页的更多相关文章

  1. 基于CSS+dIV的网页层，点击后隐藏或显示

    一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...

  2. 一款基于TweenMax.js的网页幻灯片

    之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. ...

  3. HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版​

    html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...

  4. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  5. Atitit事件代理机制原理 基于css class的事件代理

    Atitit事件代理机制原理 基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...

  6. 基于Css反射形自触发事件，优化你的延时事件

    昨天听w3ctech分享时候,说道orientationchange在不同OS和版本中,存在兼容问题,很多时候触发时候都没有渲染结束,开发同学一般都是基于setTimeout一段时间之后,在去执行具体 ...

  7. 第四十二课：基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  8. 通过CSS让html网页中的内容不可选

    *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; ...

  9. 基于jquery打造的网页右侧自动收缩浮动在线客服代码

    基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...

随机推荐

  1. pageRank算法 python实现

    一.什么是pagerank PageRank的Page可是认为是网页,表示网页排名,也可以认为是Larry Page(google 产品经理),因为他是这个算法的发明者之一,还是google CEO( ...

  2. Linux(CentOS6.7) 安装MySql5.7数据库

    linux(CentOS6.7) 环境Mysql 5.7.17安装教程分享给大家,供大家参考,具体内容如下: 1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/ ...

  3. Vue学习之路---No.7（分享心得，欢迎批评指正）

    老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换valu ...

  4. 去除IOS浏览器下面的工具栏

    在head标签里添加下面的元素 即可 <meta id="viewport" name="viewport" content="width=de ...

  5. SQL SERVER 报：由于数据移动,未能继续以 NOLOCK 方式扫描错误的解决办法。

    比如在某个表中使用 select xxx from xxx with(nolock) where xxxx 查询. 提示出错:由于数据移动,未能继续以 NOLOCK 方式扫描. 它有可能某些条件出错, ...

  6. Excel制作多选下拉框代码以及图示

    1.首先  点击Sheet1(需要显示多选框的页) ,然后右键查看代码,进入编辑界面 2.写入如下代码 Private Sub Worksheet_SelectionChange(ByVal Targ ...

  7. MySQL自动化审核平台部署说明

    背景: 关于MySQL的审核的重要性就不说明了,本文的自动化审核是通过Inception和SQLAdvisor实现的,具体的使用可以看它们各自的说明文档.这里大致介绍下如何部署和使用它们,其实该文章也 ...

  8. java做帐户登录失败锁定

    对于连续失败登录应用系统5次的帐号,需锁定该帐号至少30分钟不允许登录. 这里也用简单的map集合进行判定,功能能实现,但并不是很完美,不用更改数据库的表字段 1.首先建立一个用户登陆失败的实体类 p ...

  9. JavaEE开发之Spring中的事件发送与监听以及使用@Profile进行环境切换

    本篇博客我们就来聊一下Spring框架中的观察者模式的应用,即事件的发送与监听机制.之前我们已经剖析过观察者模式的具体实现,以及使用Swift3.0自定义过通知机制.所以本篇博客对于事件发送与监听的底 ...

  10. [SinGuLaRiTy] 平衡树

    [SinGuLaRiTy-1009] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 二叉查找树 二叉查找树是指具有下列性质的非空二叉树: ⑴ ...