基于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;
}

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362866.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不重复int数组里找不存在的值

有这么一道题&#xff0c;一个int数组叫A&#xff0c;里面的数是不重复的&#xff0c;从中拿出一个值&#xff0c;剩下的数组就B&#xff0c;问拿出的是哪个数。 一般人都能想到把A数组值相加&#xff0c;假设和为sum1&#xff0c;再把B数组值相加&#xff0c;设其和为sum2&…

Java验证(javafx)

验证是核心javafx框架所缺少的一件事。 为了填补这一空白&#xff0c; controlsfx中已经存在一个第三方验证库 。 但是&#xff0c;我有一个问题&#xff1a;它不是在考虑FXML的情况下创建的。 这并不是说它不是一个很好的库&#xff0c;只是错过了这个细节&#xff0c;对我来说…

WAP自助建站 我编程之路的启蒙

如题所示的这篇文章是我心血来潮在网上搜索到的&#xff0c;写的挺让我感同身受的&#xff0c;不妨先看一下原文吧。 原文 不知是偶然还是“冥冥定数”&#xff0c;最后一次访问娃派建站&#xff08;wap.ai&#xff09;已有数十月之久了&#xff0c;突然心血来潮想看看曾经的建…

React事件绑定几种方法测试

前提 es6写法的类方法默认没有绑定this&#xff0c;不手动绑定this值为undefined。 因此讨论以下几种绑定方式。 一、构造函数constructor中用bind绑定 class App extends Component {constructor (props) {super(props)this.state {t: t}// this.bind1 this.bind1.bind(…

初始socket模块和巧解粘包问题

1.什么是socket&#xff1f; 两个进程如果需要进行通讯最基本的一个前提能够唯一的标示一个进程&#xff0c;在本地进程通讯中我们可以使用PID来唯一标示一个进程&#xff0c;但PID只在本地唯一&#xff0c;网络中的两个进程PID冲突几率很大&#xff0c;这时候我们需要另辟它径…

100325 雨

回家以后怎么样&#xff1f; 感冒没有严重吧&#xff1f; 你也多喝水 我好些了 鼻涕不像昨天那么多了 就是嗓子疼 药吃了 喝了不少水了转载于:https://www.cnblogs.com/loverain/archive/2010/03/25/1694567.html

Java的挥发性修饰符

不久前&#xff0c;我编写了一个Java servlet过滤器&#xff0c;该过滤器在其init函数中加载配置&#xff08;基于web.xml的参数&#xff09;。 筛选器的配置缓存在私有字段中。 我在字段上设置了volatile修饰符。 后来&#xff0c;当我检查Sonar公司以查看是否在代码中发现任…

webpack常用loader和plugin及打包速度优化

优化 或 也可以用&#xff1a; 备用&#xff1a; 慎用的配置&#xff0c;用的不好会增加打包时间&#xff1a; 代码丑化插件&#xff1a; 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

nvl 函数

nvl(oie.is_eval,N) <> Y 理解成 oie.is_eval <> Y 转载于:https://www.cnblogs.com/wangchuanfu/p/10818274.html

在自定义HttpHandler中如何使用Session

今天我写了一段程序在HttpHandler中使用Session。结果Session对象报错&#xff0c;“未将对象引用设置到对象的实例”&#xff0c;我郁闷半天&#xff0c;不知道怎么回事。结果我google了一下&#xff0c;原来也有人碰到过这种情况哦。呵呵。网上也有很多人说出了这些问题。解决…

SSH登录太慢(等很久才提示输入密码)的问题

SSH登录太慢(等很久才提示输入密码)的问题 SSH 登录太慢可能是 DNS 解析的问题&#xff0c;默认配置下 sshd 初次接受 ssh 客户端连接的时候会自动反向解析客户端 IP 以得到 ssh 客户端的域名或主机名。 如果这个时候 DNS 的反向解析不正确&#xff0c;sshd 就会等到 DNS 解析超…

开发Eclipse插件

最近&#xff0c;我开始与团队合作开发Eclipse插件。 团队开发了一个很棒的插件&#xff0c;可以实现预期的目的。 因此&#xff0c;我签出了源并尝试构建它。 项目源包含所有必需的库&#xff0c;并且只能在Eclipse中构建。 在当今不断交付的世界中&#xff0c;这是一个主要障…

react-native 热更新react-native-pushy集成遇到的问题

主要步骤按官方文档实现&#xff0c;这里只记录遇到的一些小坑 官方文档 run-android时NDK报错 前提是NDK已安装并且环境变量已设置 根据报错提示在 android/local.properties文件里加入ndk.dir~/Library/Android/android-ndk-r10e //这里改成你自己的ndk路径 cxxbridge找…

[转]在资源管理器中使鼠标右键增加一个命令,运行cmd,同时使得当前路径为资源管理器当前的目录...

[转]在资源管理器中使鼠标右键增加一个命令&#xff0c;运行cmd&#xff0c;同时使得当前路径为资源管理器当前的目录 http://www.cnblogs.com/skywind/archive/2009/05/22/1487138.html 1,找开注册表编辑器&#xff1b; 2,找到HKEY_CLASSES_ROOT\Folder\shell&#xff1b; 3,在…

Keil5 仿真测试出现Cannot Load Flash Device Description 解决方法

1.用ST的烧录软件检测&#xff0c;可以烧录对应的Hex文件。 2.点击魔术棒&#xff0c;Debug选项卡检测芯片型号是否和当前芯片对应 3.在Flash Download选项卡中检查发现没有对应的芯片型号 4.点击Add 选项&#xff0c;选择对应的Flash类型如图&#xff1a; 添加Flash类型后&…

Spring,REST,Ajax和CORS

假设您正在为客户端开发基于JavaScript的项目&#xff0c;并且他通过其余的Web服务向服务器发出Ajax请求&#xff0c;那么您可能会遇到一些麻烦&#xff0c;尤其是如果双方都在单独的域中。 实际上&#xff0c;出于安全原因&#xff0c;未授权从一个域A到另一域B的Ajax请求。 …

位运算实现加减乘除四则运算(Java)

本文是继《一文了解有趣的位运算》的第二篇文章. 我们知道&#xff0c;计算机最基本的操作单元是字节(byte)&#xff0c;一个字节由8个位(bit)组成&#xff0c;一个位只能存储一个0或1&#xff0c;其实也就是高低电平。无论多么复杂的逻辑、庞大的数据、酷炫的界面&#xff0c;…

消息(6)——WCF,构建简单的WCF服务,MTOM编码

构建一个简单的WCF服务。以Web服务类似的步骤由IIS进行宿主服务。建立的步骤&#xff1a;1 新建3.5网站2 添加WCF服务&#xff0c;自动生成契约接口与实现&#xff0c;这里改动一下&#xff0c;添加个字串参数&#xff1a;[ServiceContract]public interface IFirstService{[Op…

Hadoop—MapReducer统计文件的单词出现的个数

1. MapReduce 统计文件的单词出现的个数 Mapper: 处理具体文本&#xff0c;发送结果 Reducer: 合并各个Mapper发送过来的结果 Job: 制定相关配置&#xff0c;框架 Mapper package cn.itcast.hadoop.mr.wordcount;import java.io.IOException;import org.apache.hadoop.io.LongW…

从框架到平台

当我将近十年前作为Java开发人员开始我的职业生涯时&#xff0c;该行业正在经历革命性的变化。 Spring框架&#xff08;于2003年发布&#xff09;Swift发展起来&#xff0c;并成为庞大的J2EE平台的严重挑战者。 经过过渡时间后&#xff0c;我很快发现自己赞成使用Spring框架而不…