CSS+DIV 设计一个简单的个人网页界面
*{
margin:0px;
padding:0px;
}
body{
background:#e5e6d0;
}
#header,#menu,#banner,#main,#footer{
margin:0px auto;
width:1200px;
}
#header{
height:100px;
background:#F0FFFF;
}
#header h1{
float:left;
margin-top:20px;
}
#header h1 a{
/*margin:0px auto;可以使元素居中显示*/
width:600px;
height:100px;
display:block;
color:#996600;
text-align:center;
text-decoration:none;
}
#header ul{
float:left;
padding:50px 0px 0px 300px;
list-style:none;
}
#header ul li{
float:left;
padding:0px 20px;
}
#header ul li a{
color:#ff6600;
text-decoration:none;
font-size:20px;
}
#header ul li a:hover{
color:#000;
text-decoration:underline;
}
/* 万能的清除*/
.clear{
clear:both;
}
#menu{
padding-top:3px;
}
#menu ul{
list-style:none;
}
#menu ul li{
float:left;
}
#menu ul li a{
color:#660066;
text-decoration:none;
text-align:center;
display:block;/*这句使center起作用*/
width:135px;
height:56px;
line-height:56px;
font-size:25px;
}
#menu ul li a:hover{
background:#177cb7;
}
#menu ul li ul{
display:none;
width:135px;
position:absolute;
background:#C0c0c0;
}
#menu ul li:hover ul{
display:block;
}
#menu ul li ul li{
width:135px;
}
#menu ul li ul li a{
width:135px;
}
#menu ul li ul li a:hover{
background:#BBFFFF;
}
#main{
padding:10px 10px;
}
#main .container{
width:900px;
float:left;
}
#main .container dl{
width:430px;
float:left;
}
#main .container dl h5,#main .product h5{
border-bottom:1px solid #000;
margin-bottom:15px;
font-size:25px;
}
#main .container dl h5 a{
margin:0 auto;
text-decoration:none;
}
#main .container dl dt{
float:left;
width:150px;
}
#main .container dl dt img{
border:1px solid #ccc;
width:150px;
height:250px;
}
#main .container dl.xuexiao{
margin-right:40px;
}
#main .container dl.xuexiao dd{
font-size:16px;
margin-left:25px;
float:left;
width:240px;
text-indent:2em;/*首行缩进*/
}
#main .container dl.xinwen dd{
height:22px;
line-height:22px;
background:none;
}
#main .container dl.xinwen dd a{
color:#000000;
text-decoration:none;
padding-left:10px;
}
#main .container dl.xinwen dd span{
padding-left:10px;
}
#main .product{
padding-top:20px;
}
#main .product h5 a{
margin:0px auto;
text-decoration:none;
}
#main .product ul li{
float:left;
padding-left:10px;
list-style:none;
}
#main .product ul li a{
text-decoration:none;
}
#main .subMenu{
width:300px;
float:left;
margin:10px 0px;
}
#main .subMenu h5{
background:#19577c;
height:39px;
text-align:center;
color:#fff;
line-height:39px;
}
#main .subMenu ul li{
border-bottom:1px solid #d4d4d4;
background:#f1f1f1;
list-style:none;
}
#main .subMenu ul li a{
display:block;
text-align:center;
color:#000;
text-decoration:none;
background:none;
height:50px;
line-height:50px;
font-size:28px;
}
#main .subMenu ul li a:hover{
color:#177cb7;
background:none;
}
#footer{
background:#d1dce3;
height:50px;
line-height:50px;
font-size:25px;
text-align:center;
}
以上是CSS文件，主要分为header+menu+main+footer，其中main部分，分为container部分和右侧的一个SubMenu。Container部分包含两列一行，使用的是DLDD。
以下是HTML文件。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>博客首页</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div id="header">
<h1><a href="#">Xingzhui-###的博客</a></h1>
<ul>
<li><a href="#">设为首页</a></li>
<li><a href="#">加入收藏</a></li>
</ul>
</div>
<div id="menu" class="clear">
<ul>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
</ul>
</div>
<div id="main" class="clear">
<div class="container">
<div class="news">
<dl class="xuexiao">
<h5><a href="#">个人简介</a></h5>
<dt><img src="mypic.jpg" alt="图片"></dt>
<dd>各位领导同事好，我是来自###的###，
十分荣幸来参加这次见面会。我毕业于###，
获得硕士学位。我的家乡在###，一个具有悠久历史的城市
我平时喜欢看看小说，浏览新闻，也喜欢四处去旅游，
开阔自己的视野。运动方面，我喜欢打篮球，以前也擅长乒乓球，
但是有段时间没有练习了。非常高兴能够和各位同事一起工作，
请大家多多指教，更好的完成工作。</dd>
</dl>
<dl class="xinwen">
<h5><a href="#">最新动态</a></h5>
<dd>
<a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span>
</dd>
<dd>
<a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span>
</dd>
<dd>
<a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span>
</dd>
<dd>
<a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span>
</dd>
</dl>
</div>
<div class="product clear">
<h5><a href="#">精彩教程</a></h5>
<ul>
<li><a href="#">这里要设置连接！</a></li>
<li><a href="#">这里要设置连接！</a></li>
<li><a href="#">这里要设置连接！</a></li>
<li><a href="#">这里要设置连接！</a></li>
</ul>
</div>
</div>
<div class="subMenu">
<h5>友情链接</h5>
<ul>
<li><a href="http://www.baidu.com" target="_blank">百度首页</a></li>
<li><a href="http://www.jd.com">京东首页</a></li>
<li><a href="http://www.runoob.com/">菜鸟教程</a></li>
<li><a href="http://mail.163.com">163邮箱</a></li>
<li><a href="http://www.cnblogs.com/xingzhui/">我的cnblog</a></li>
<li><a href="#">子菜单子菜单</a></li>
<li><a href="#">子菜单子菜单</a></li>
<li><a href="#">子菜单子菜单</a></li>
</ul>
</div>
</div>
<div id="footer" class="clear">
<p>联系我：<a href="#">mhzhang1989@163.com</a></p>
</div>
</body>
</html>
以下是效果图：
CSS+DIV 设计一个简单的个人网页界面的更多相关文章
- 设计一个简单的，低耗的能够区分红酒和白酒的感知器（sensor）
学习using weka in your javacode 主要学习两个部分的代码:1.过滤数据集 2 使用J48决策树进行分类.下面的例子没有对数据集进行分割,完全使用训练集作为测试集,所以不符合数 ...
- 180626-Spring之借助Redis设计一个简单访问计数器
文章链接:https://liuyueyi.github.io/hexblog/2018/06/26/180626-Spring之借助Redis设计一个简单访问计数器/ Spring之借助Redis设 ...
- Tomcat详解系列(1) - 如何设计一个简单的web容器
Tomcat - 如何设计一个简单的web容器 在学习Tomcat前,很多人先入为主的对它的认知是巨复杂的:所以第一步,在学习它之前,要打破这种观念,我们通过学习如何设计一个最基本的web容器来看它需 ...
- 【python免费代码】设计一个简单的学生信息管理系统
文章目录 前言 一.理解 二.部分截图展示 三.代码 四.总结 前言 设计一个简单的学生信息管理系统,实现以下功能(bug) : 录入学生信息,信息以文件方式存储 以学生学号或者学生姓名为条件查询该学 ...
- CSS布局中一个简单的应用BFC的例子
什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子 ...
- 设计一个简单的devops系统
前言 公司设计的RDMS挺好用的,我也照猫画虎简单的设计一个DevOps系统,与大家分享,不足之处欢迎拍砖,以免误人子弟 前置条件 gitlab gitlab-runner k8s 1. gitlab ...
- 5、使用Libgdx设计一个简单的游戏------雨滴
(原文:http://www.libgdx.cn/topic/49/5-%E4%BD%BF%E7%94%A8libgdx%E8%AE%BE%E8%AE%A1%E4%B8%80%E4%B8%AA%E7% ...
- JAVA课程设计——一个简单的教务人事管理系统
大三上学期期末总结,没错,上学期,写在下学期新学期开始,哈哈哈. 上学期学习了面向对象程序设计,课程设计的题目使用JAVA语言完成一个简单的教务人事管理系统,能够实现访问数据库的登录验证,分别按部门和 ...
- 如何设计一个简单的C++ ORM
2016/11/15 "没有好的接口,用C++读写数据库和写图形界面一样痛苦" 阅读这篇文章前,你最好知道什么是 Object Relation Mapping (ORM) 阅读这 ...
随机推荐
- Yii2.0 rules验证规则大全
required : 必须值验证属性 [['字段名'],required,'requiredValue'=>'必填值','message'=>'提示信息']; #说明:CRequiredV ...
- IE9以下 placeholder兼容
//input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...
- bzoj 3172: [Tjoi2013]单词
#include<cstdio> #include<cstring> #include<iostream> #define M 1000008 using name ...
- Redux教程3：添加倒计时
前面的教程里面,我们搭建了一个简单红绿灯示例,通过在console输出当面的倒计时时间:由于界面上不能显示倒计时,用户体验并不良好,本节我们就添加一个简单的倒计时改善一下. 作为本系列的最后一篇文章, ...
- html 学习（一）
一.用CSS实现如下布局,使用三个div 代码实现如下: 说明: 1.margin-left:110px; _margin-left:107px; margin-left:110px; 所有浏览器都要 ...
- Common.Logging log4net Common.Logging.Log4Net 配置
1.log4net 单独配置 log4net支持多种格式的日志输出,我这里只配置输出到本地的txt文件这种格式. <log4net> <root> <appender-r ...
- JS详解
事件源对象:event.srcElement.tagName event.srcElement.type 捕获/释放:event.srcElement.setCapture(); event.sr ...
- myeclipse激活法，可以试一试
我的myeclipse2014也是这样激活: 第一步:输入任意用户名 第二步:点击Systemid... 按钮,自动生成本机器的systemid. 第三步: 点菜单Tools->RebuildK ...
- 如何判断js中的数据类型？
js六大数据类型:number.string.object.Boolean.null.undefined string: 由单引号或双引号来说明,如"string" number: ...
- Android性能优化之使用线程池处理异步任务
转:http://blog.csdn.net/u010687392/article/details/49850803