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) 阅读这 ...
随机推荐
- tomcat安全加固
-R 640 conf/*3. 首次安装完成后立即删除webapps下面的所有代码rm -rf /srv/apache-tomcat/webapps/*4. 注释或删除 tomcat-users.xm ...
- 用php获取本周,上周,本月,上月,本季度日期的代码
echo date("Ymd",strtotime("now")), "\n"; echo date("Ymd",str ...
- Whole life
Whole life the wonder such you bring the beautyI can see but i keep deep inside on itOh life i feel ...
- 不安装HALCON下安装运行版U盘加密狗驱动
参考halcon安装指导书 Installation Guide Depending on your operating system, you can install, configure, and ...
- oracle 解决backspace和上下键使用出现乱码
在bash提示符下,使用Del键或者Backspace键都能删除光标左右的字符,但是一旦进入sqlplus之后,只能使用Del键来删除光标左侧的字符,使用Backspace键则显示^H,使用ctrl+ ...
- ctags and vim
1,源码目录下第归检索. ctags -R * 2,搜索tag并用vim打开: vim -t <tag> 3,在vim 下的一些操作: Keyboard command Action Ct ...
- 编译内核实现iptables防火墙layer7应用层过滤 (三)
在前面的两篇文章中我们主要讲解了Linux防火墙iptables的原理及配置规则,想博友们也都知道iptables防火墙是工作在网络层,针对TCP/IP数据包实施过滤和限制,属于典型的包过滤防火墙.以 ...
- eap-ttls/mschapv2
eap-ttls/mschapv2 文件路径 用途 示例 备注 #gedit /usr/local/etc/raddb/sites-available/default #gedit /us ...
- undefined reference to `Spreadsheet::staticMetaObject'
<C++ GUI Qt 4 编程>学习 一.遇到的问题 在学完第4章后,Spreasheet程序也已经写好了.在用 FindDialog 搜索时发现没有效果. 二.解决过程 调试跟踪代码, ...
- css3 文字轮番滚动效果2——改进版
1.优化了之前的代码: 2.修正了先前按照文字的条目的数量计算速度的问题,现在改为按照字符的个数计算动画执行一次需要的时间,更为精确: 3.增添了每一行JS代码的注释. 4.这个案例的用途一般为告警信 ...