前端时间做的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. UNIX 网络编程知识，函数积累

    1: fprintf()#include <stdio.h> int fprintf( FILE *stream, const char *format, ... );fprintf()函 ...

  2. Shell中的算术运算(译)

    算术运算 尽管Shell中的变量被缺省地看做是string类型,而非number,但是Shell本身仍然支持算术运算.主要有以下5种方式. 1. declare 2. expr $ z=5 $ z=` ...

  3. HTML5学习笔记<一>: 认识H5

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...

  4. python 附加作业01

    题目1: 画方块 输入样例: 10 a 输出样例: 代码: N=eval(input()) c=input() for i in range(N): for j in range(N): print( ...

  5. Excel图表-太极图

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  6. （转）POPTEST联合创始人李爱然的“IT培训创业的随想"

    IT教育行业最大的问题是缺少像互联网行业一样的产品经理. 大多数IT教育机构在早期依靠个人或者一套课程开创了一定的局面,随着机构的壮大,机构把市场营销提到至高点,销售至上,而把产品(培训产品)放在后面 ...

  7. 老李分享：jvm结构简介 1

    老李分享:jvm结构简介     poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...

  8. Mysql清理二进制日志的技巧

    1:二进制日志 二进制日志记录了所有的DDL(数据定义语言)语句和DML(数据操作语言)语句,但是不记录包括数据查询的语句.语句以"事件"的形式保存,它描述了数据的更改过程,此日志 ...

  9. Visual Studio中的TabControl控件的用法

    今天遇到了一个自己没遇到过的控件TabControl控件,所以找了点关于它的资料 TabControl属性 DisplayRect:只定该控件客户区的一个矩形  HotTrack:设置当鼠标经过页标签 ...

  10. TCP基础知识 复习

    前言 说来惭愧,大二时候学的计算机网络好多都不太记得了,不过还好有认真学过,捡起来也挺快的,就是对于现在业界中使用的网络算法的不是很懂: 1 TCP报文段结构 1.1 序号和确认号 序号,是报文段首字 ...