基于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.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透明的同学也可以下载研 ...

随机推荐

USB PE
To put WinPE on a USB Stick, you must first make it bootable. Warning: This will destroy all the dat ...
webpack 打包js和css
首先进行全局安装webpack npm install -g webpackcmd跳转到项目的文件夹,安装webpack npm install --save-dev webpack接着需要packj ...
ZJOI2017 Day2
私のZJOI Day2 2017-3-22 08:00:07 AtCoder试题选讲 SYC(Sun Yican) from Shaoxing No.1 High School 2017-3-22 0 ...
Tcl与Design Compiler （三）——DC综合的流程
本文属于原创手打(有参考文献),如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/ ,作者:IC_learner 1.基本流程概述首先 ...
安装prometheus+grafana监控mysql redis kubernetes等
1.prometheus安装 wget https://github.com/prometheus/prometheus/releases/download/v1.5.2/prometheus-1.5 ...
java实现微信红包分配算法
红包算法分析有人认为,抢红包的额度是从0.01到剩余平均值*N(N是一个系数,决定最大的红包值)之间,比如一共发了10块钱,发了10个红包:第一个人可以拿到(0.01~1*N)之间的一个红包值,当然 ...
Intellij IDEA中文乱码解决
界面乱码原因:IDEA默认设置界面的字体不支持中文解决:修改为支持中文的字体,建议字体Microsoft Yahei UI.大小11,具体操作File -> Setting -> Ap ...
iPhone与iWatch连接、控制、数据传递（Swift）
最近在做一个项目,涉及到iPhone设备和手表传输数据.控制彼此界面跳转,在网上找了很多资料,发现国内的网站这方面介绍的不多,而国外的网站写的也不是很全,所以在这写这篇博客,给大家参考一下,望大神指点 ...
java iframe 嵌套，session失效重新登录页面嵌套问题
将后台跳转改写成 PrintWriter out = response.getWriter(); out.println("<html>"); out.print ...
深入探究stm32GPIO口模式（类比51）
关于STM32GPIO口的8种工作模式,我们先引出一些问题? STM32GPIO口如果既要输入又要输出怎么办? 1.浮空输入模式上图红色的表示便是浮空输入的过程,外部输入时0读出的就是0,外部输入时 ...

基于CSS的个人网页

基于CSS的个人网页

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

随机推荐

热门专题