前端时间做的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. java aes encrypt

    本次使用aes 对称加密算法. 选用aes的原因是,可以还原加密串. 程序如下: public static String encode(String content){ KeyGenerator k ...

  2. ubuntu桌面不显示菜单

    为什么?我也不知道,只记得之前在搜狐看了行尸走肉,然后第二次开机就看不到菜单了. 参照百度结果然后去尝试了一下,记过ok了,我的ubuntu是13.10. 图说: 看到这里就应该大概怎么做了. 1   ...

  3. Spring Data操作Redis详解

    Spring Data操作Redis详解 Redis是一种NOSQL数据库,Key-Value形式对数据进行存储,其中数据可以以内存形式存在,也可以持久化到文件系统.Spring data对Redis ...

  4. 在线音乐播放器-----酷狗音乐api接口抓取

    首先身为一个在线音乐播放器,需要前端和数据库的搭配使用. 在数据库方面,我们没有办法制作,首先是版权问题,再加上数据量.所以我们需要借用其他网络播放器的数据库. 但是这些在线播放器,如百度,酷狗,酷我 ...

  5. HTML5周记（二）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  6. Static语句块和初始语句块的使用---2015年10月恒生电子笔试试卷

    package lhm.test; /** * @author lenovo * */public class Person { private int id; private static int ...

  7. cuda编程学习1——hello world！

    将c程序最简单的hello world用cuda编写在GPU上执行,以下为代码: #include<iostream>using namespace std;__global__ void ...

  8. JSP配置了虚拟目录使用JavaBean报错

    今天遇到一个很棘手的问题,在jsp文件中使用useBean,网页返回码出现了500服务器内部错误,报错信息如下: The value for the useBean class attribute w ...

  9. JVM中堆内存和栈内存的区别

    Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间 ...

  10. flask-mail发送QQ邮件代码示例（亲测可行）

    from flask import Flask from flask_mail import Mail, Message app = Flask(__name__) app.config.update ...