__x__(30)0908第五天__导航条的练习

效果图:



 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>

        <div id="hncu_nav">
            <div>
                <a href="#">首页</a>
            </div>

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

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

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

        <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;

    margin:0px auto 10px;

    overflow:hidden;
    zoom: 1;
}

#hncu_nav a{
    width: 25%;
    color:white;

    float:left;
    line-height:70px;
    text-align:center;
    text-decoration: none;
}

#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;
}

原文地址:https://www.cnblogs.com/tianxiaxuange/p/9608263.html

时间: 2024-10-10 17:39:59

__x__(30)0908第五天__导航条的练习的相关文章

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

1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 background-image: url(img/cat.gif); 如果图片大于元素,则会显示图片左上角部分. 如果图片和元素一样大,则会全部显示. 如果图片小于元素,则图片会 x 横向, y 纵向 平铺 铺满元素. 可以同时设置background-color,作为图片的底色. 4. 背景图片重复方式 

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

高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式化环境 根据W3C标准,元素都有一个隐含的属性“Block Formatting Context” 该属性可以 打开/关闭,默认是“关闭”. 当开启BFC后,元素将具有如下特性: 1. 父元素的垂直外边距不会和子元素重叠. 2. 不会被浮动元素所覆盖,会在浮动元素的旁边显示. 3. 可以包含浮动的子

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

position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 relative :    开启元素的相对定位 absolute :    开启元素的绝对定位 fixed :    开启元素的固定定位,固定定位也是绝对定位的一种. 当开启 position 定位后,可以使用 left,top,right,bottom 进行偏移设置.   1. position

__x__(41)0909第五天__长表格

长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没写 tbody ,浏览器会自添加 tbody,并将所有的 tr 移入 tbody 好处: 可以分别设置样式. 打印时,利用分类处理多页表头,表尾的效果. 无顺序要求,已维护. 效果图: css代码: @charset "utf-8"; *{ margin: 0px; padding: 0p

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

1. 设置 Photoshop 的单位为 像素px 2. 标尺   显示与隐藏 Ctrl + r 3. 放大与缩小 Ctrl + 1    放大到100% Ctrl + 0    适应屏幕 Alt + 鼠标滑轮 4. 查看矩形框选中目标的width和height        F8 5. 辅助线 Ctrl + H    隐藏 / 显示 6. 前景色 取色器 取色 __x__(32)0908第五天__Photoshop的基本操作 原文地址:https://www.cnblogs.com/tianx

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

opacity 透明度 设置一个  0 - 1 之间的值. opacity: 0;    完全透明 opacity: 0.5    半透明 opacity: 1;    完全不透明 缺点: IE8及以下都不支持 opacity . IE8及以下 透明度 : filter: alpha(opacity=50); 此时,透明度 opacity 取 0-100 为了兼容所有浏览器,设置 div 为半透明 div{ opacity: 0.5; filter: alpha(opacity=50); } _

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

link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Sprite 雪碧图: 将三张图片整合为一张图片,在不同的伪类中通过设置 background-position 来切换图片. 一次请求一次加载,一次加载一张图片,相当于多张图片. 优势: 减小资源的大小,省了颜色表 提高了访问效率 实例效果: html代码: <!doctype html> <ht

__x__(39)0909第五天__ 表格 table

表格 表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. <!doctype html> <html> <head> <meta charset="utf-8" /> <title>表格</title> <link rel="stylelsheet" type="text/css" href="css/tabl

CSS3+Js制作的一款响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 1 2 3 4 5 6 7 8 9