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) 阅读这 ...
随机推荐
- JavaEE Spring
1. Spring以一己之力撼动了Sun公司的JavaEE传统重量级框架(EJB),逐渐成为使用最多的JavaEE企业应用开发框架. 2. Spring是分层的JavaEE应用一站式的轻量级开源框 ...
- UIScrollView内容缩放
•有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对其内容进行缩放处理 也就是说,要完成缩放功能的话,只需要将需要缩放的内容添加到UIScr ...
- XlFileFormat Enumeration
https://msdn.microsoft.com/zh-cn/library/office/ff198017.aspx
- VBA嘘嘘嘘(1)——将Excel数据填入到已存在的Word模板表格(实例应用)
傻瓜可以写出机器读懂得代码,但写出让人能读懂的代码的是优秀程序员 Sub 填充() Application.ScreenUpdating = False 'ScreenUpdating 是控制你的ex ...
- HttpServletResponse常用的方法
所有Servlet响应都实现ServletResponse接口.ServletResponse接口主要有以下方法: (1)从Servlet中可以通过getWriter方法取得PrintWriter对象 ...
- uboot环境变量实现分析
u-boot的环境变量用来存储一些经常使用的参数变量,uboot希望将环境变量存储在静态存储器中(如nand nor eeprom mmc). 其中有一些也是大家经常使用,有一些是使用人员自己定义的, ...
- hdu 1232, disjoint set, linked list vs. rooted tree, a minor but substantial optimization for path c 分类： hdoj 2015-07-16 17:13 116人阅读 评论(0) 收藏
three version are provided. disjoint set, linked list version with weighted-union heuristic, rooted ...
- 为什么eclipse中代码提示错误，但是项目目录却不提示错误
public class Aasf { public static void main(String[] args) { System.out.println("");aihfsa ...
- oracle 用户创建这个挺靠谱
CREATE TEMPORARY TABLESPACE test_tempTEMPFILE 'C:\oracle\product\10.1.0\oradata\orcl\test_temp01.dbf ...
- Action的搜索顺序（Struts2搜索Action的机制）
当访问如下链接时, http://localhost:8080/struts2Demo/path1/path2/path3/LoginAction.action 第一步:判断当前路径下action是否 ...