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应用一站式的轻量级开源框 ...
NSTimer “定时器”
•NSTimer叫做“定时器”,它的作用如下 Ø在指定的时间执行指定的任务 Ø每隔一段时间执行指定的任务 Ø •调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTime ...
基于SQL Server 2008 Service Broker构建企业级消息系统
注:这篇文章是为InfoQ 中文站而写,文章的地址是:http://www.infoq.com/cn/articles/enterprisemessage-sqlserver-servicebroke ...
【软件工具】Driver Booster3永久激活法
原作者網址:erik2041999 (YouTube) 1.安装Driver Booster3 (档案已附) 2.使用此启动码0187E-B9764-4D9FA-211B3断网启动 3.保持断网状态并 ...
【MCU】【STM32】1.cube MX库使用笔记
STM32Cube 是一个全面的软件平台,包括了ST产品的每个系列.(如,STM32CubeF4 是针对STM32F4系列). 平台包括了STM32Cube 硬件抽象层和一套的中间件组件(RTOS, ...
Pyunit测试框架
一.概述本系列主要解决的问题是“接口自动化测试”,选择的测试语言是 python 脚本语言.截至目前为止,python是公认的最好的用于自动化应用的语言之一二.PyUnit测试框架使用 pyth ...
error MSB6006: “CL.exe”已退出，代码为X —— 的解决办法
错误 : error MSB6006: “CL.exe”已退出,代码为X . 解决方法: 1.有少可能是执行目录引起的. 参考 http://bbs.csdn.net/topics/370064083 ...
Bootstrap学习笔记（二）
这一节笔记主要记录排版内容笔记,其内容包括标题.文本(包括段落.粗斜体.对齐).列表.表格等. 一.标题在bootstrap中H1-H6与非框架版的区别不大,需要注意的是<small>标 ...
PDO创建mysql数据库并指定utf8编码
<?php //PDO创建mysql数据库并指定utf8编码 header('Content-type:text/html; charset=utf-8'); $servername = &qu ...
Basic linux command
1. useradd 解释:添加新用户,在/etc/password文件中添加一行记录. 参数: -g 用于添加账户时指定该账户的私有组,如果不指定-g参数,useradd命令会自动创建与该用 ...

CSS+DIV 设计一个简单的个人网页界面

CSS+DIV 设计一个简单的个人网页界面的更多相关文章

随机推荐

热门专题