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) 阅读这 ...
随机推荐
- Check if a configuration profile is installed on iOS
Configuration profiles can be downloaded to an iOS device through Safari to configure the device in ...
- Xcode7免证书真机调试
最近一直忙于项目,对于Xcode7的一些新功能还没去尝试,今天尝试了下挺好用的!避免了以前真机调试繁琐的配置,很是爽啊.又可以节约很多小伙伴的时间了.废话不多说咱们一起来配置一下. 第一步 打开需要真 ...
- POJ 3415 Common Substrings 后缀数组+并查集
后缀数组,看到网上很多题解都是单调栈,这里提供一个不是单调栈的做法, 首先将两个串 连接起来求height 求完之后按height值从大往小合并. height值代表的是 sa[i]和sa[i ...
- leetcode6
好吧,今天晚上赶项目确实是做不了三道题目了,最近项目在网络编程方面有些进步,学到了东西,有时间再积累下来,很深的体会就是,和别人一起写代码,虽然蛋疼但是比自己一个人写要好点,不过发现自己对链表和排序什 ...
- 使用VMware Workstation 12.5.2新建虚拟机
关于VMware版本:VMware10可以支持32位和64位操作系统,VMware11及以上版本只能支持64位Win7及以上版本的操作系统!同时,VMware Workstation 10.0正式版发 ...
- Copy page via powershell and not save as template 分类： Sharepoint 2015-07-16 16:39 4人阅读 评论(0) 收藏
By save as template informaton of the page get lost, e.g. permissions. To avoid this, use powershell ...
- 将halcon导出的c++程序打包成dll库
1.从“文件”菜单中,选择“新建”,然后选择“项目…”. 2.从“项目类型”窗格中选择“Visual C++”下的“Win32”. 3.从“模板”窗格中,选择“Win32 控制台应用程序”. 4.为 ...
- VisualSVN-5.1.4补丁原创发布
VisualSVN-5.1.4补丁原创发布 VisualSVN-5.1.4Patch.rar VisualSVN-5.1.4官方安装包.rar
- cocoapods无法使用(mac os 10.11升级导致pod: command not found)
之前安装了cocoapods, 那么输入 : sudo gem install -n /usr/local/bin cocoapods 如果还不行的话 首先在终端输入 gem sources -l 查 ...
- STL 内存释放
C++ STL 中的map,vector等内存释放问题是一个很令开发者头痛的问题,关于 stl内部的内存是自己内部实现的allocator,关于其内部的内存管理本文不做介绍,只是 介绍一下STL内存释 ...