效果图：

 html代码：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>湖南城市学院</title>

        <link rel="stylesheet" type="text/css" href="css/hncu.css" />

    </head>

    <body>

        <div id="hncu_header">

        </div>

        <ul id="hncu_nav">

            <li>

                <a href="#">首页</a>

            </li>

            <li>

                <a href="#">新闻</a>

            </li>

            <li>

                <a href="#">联系</a>

            </li>

            <li>

                <a href="#">关于</a>

            </li>

        </ul>

        <div id="hncu_content">

            <div id="hncu_left"></div>

            <div id="hncu_center"></div>

            <div id="hncu_right"></div>

        </div>

        <div id="hncu_footer">

        </div>

    </body>

</html>

 css代码：

@charset "utf-8";

*{

    margin: 0px;

    padding: 0px;

}

body{

    background-color: #bfc;

}

#hncu_header{

    width: 1000px;

    height: 200px;

    background-color: skyblue;

    margin:10px auto 10px;

}

#hncu_nav{

    width: 1000px;

    height: 70px;

    background-color: blue;

    list-style:none;

    margin:0px auto 10px;

    overflow:hidden;

    zoom:;

}

#hncu_nav li{

    width: 25%;

    height: 70px;

    float: left;

}

#hncu_nav a{

    width: 100%;

    height: 70px;

    color: white;

    line-height: 70px;

    text-align: center;

    text-decoration: none;

    float: left;

}

#hncu_nav a:link{

    background-color: blue;

}

#hncu_nav a:visited{

    background-color: blue;

}

#hncu_nav a:hover{

    background-color: red;

}

#hncu_nav a:active{

    color: blue;

}

#hncu_content{

    width: 1000px;

    height: 600px;

    background-color: yellow;

    margin:0px auto 10px;

}

#hncu_left{

    width: 200px;

    height: 500px;

    background-color: green;

    margin-top:50px;

    float:left;

}

#hncu_center{

    width: 580px;

    height: 500px;

    background-color: #bfc;

    margin-top:50px;

    margin-right: 10px;

    margin-left: 10px;

    float:left;

}

#hncu_right{

    width: 200px;

    height: 500px;

    background-color: pink;

    margin-top:50px;

    float:left;

}

#hncu_footer{

    width:1000px;

    height:200px;

    background-color:skyblue;

    margin:0px auto 10px;

}

__x__(31)0908第五天__导航条的练习 <ul> 版本的更多相关文章

  1. __x__(30)0908第五天__导航条的练习 <div>版本

    效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...

  2. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  3. __x__(34)0908第五天__ 定位 position

    position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 ...

  4. __x__(35)0908第五天__ 层级 z-index

    如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index,  则从代码结构上    下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...

  5. __x__(36)0908第五天__背景 background

    1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 backgr ...

  6. 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

  7. __x__(32)0908第五天__Photoshop的基本操作

    1. 设置 Photoshop 的单位为 像素px 2. 标尺   显示与隐藏 Ctrl + r 3. 放大与缩小 Ctrl + 1    放大到100% Ctrl + 0    适应屏幕 Alt + ...

  8. __x__(35)0908第五天__opacity 透明度

    opacity 透明度 设置一个  0 - 1 之间的值. opacity: 0;    完全透明 opacity: 0.5    半透明 opacity: 1;    完全不透明 缺点: IE8及以 ...

  9. __x__(37)0909第五天__背景图按钮

    link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...

随机推荐

  1. 第十节：基于MVC5+Unity+EF+Log4Net的基础结构搭建

    一. 前言 本节继续探讨一种新的框架搭建模式,框架的结构划分和上一节是相同的,本节IOC框架换成了Unity,并且采用构造函数注入的方式,另外服务层的封装模式也发生了变化,下面将详细的进行探讨. (一 ...

  2. SpringBoot系列: Maven多项目管理

    这篇是 maven 项目管理的第二篇, 讲解使用 maven 进行多个项目管理, 之前有一篇是 maven 的基础知识. SpringBoot系列: Eclipse+Maven环境准备 一个完整的解决 ...

  3. A fine property of the convective terms of axisymmetric MHD system, and a regularity criterion in terms of $\om^\tt$

    In [Zhang, Zujin; Yao, Zheng-an. 3D axisymmetric MHD system with regularity in the swirl component o ...

  4. John von Neumann和Ulam

    John von Neumann和Ulam是好朋友,两人经常在一起喝酒.旅行.谈女人.有一次诺伊曼认出身边的一位女士,他们交谈了几句.随后他给Ulam介绍那是他的一位老朋友,刚刚离婚.Ulam就问:那 ...

  5. 【*和&】复习-杂七杂八代码收集

      int main() { ;//整数k,地址为x00CFFCA4 int &c = k;//引用参数c,c及&c的值与k及&k相同 int *w = &k;//指针 ...

  6. luogu P5288 [HNOI2019]多边形

    传送门 这是什么神仙操作... 首先要注意一些性质.首先每一个\((x,n)\)的边可以把当前多边形分成两半,这两半的操作是独立的.然后对于某一个没有\((x,n)\)的边的多边形,最优操作是唯一的. ...

  7. （三）微信小程序首页的分类功能和搜索功能的实现笔记

    就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...

  8. unity发布的WebGL部署到IIS

    一.创建WebGL代码 在win7下,Unity3D中发布WebGL,然后部署到IIS,只要代码是对,关键是添加mime类型 二.为网站添加mime类型 .json text/json .unity3 ...

  9. 008_tcp探测

    一. 线上出现了监控指标抖动,netscaler心跳监测的问题,如下图: 二.工具如下: 原理参考:https://www.dearcodes.com/index.php/archives/17/ N ...

  10. LNMP环境搭建：Nginx安装、测试与域名配置

    Nginx作为一款优秀的Web Server软件同时也是一款优秀的负载均衡或前端反向代理.缓存服务软件 2.编译安装Nginx (1)安装Nginx依赖函数库pcre pcre为“perl兼容正则表达 ...