文档章节

css笔记05

zhchl2010
 zhchl2010
发布于 2014/11/26 21:02
字数 1519
阅读 7
收藏 0
9 layout
<html>
    <head>
        <title>CSS定位演示</title>
        <style type="text/css">
            *{
                padding:0px;
                margin:0px;
                font-size:12px;
            }
            body{
                /* text-align:center; */
                /*text-align:center仅仅IE子元素居中 */
            }
            #container{
                width:1100px;
                height:500px;
                /* margin:auto; */
                /* 仅仅非IE需要设置这个才能居中 */
                /* border:1px solid red; */
                /*通用居中方式 */
                position:absolute;
                left:50%;/*绝对居左,右移动一半 */
                margin-left:-550px;/*外边距左回一半width*/
            }
            
            #header{
                height:50px;
                background:#33f; 
            }
            #nav{
                 height:30px; 
                 border-bottom:1px solid #88a; 
                 border-left:1px solid #88a;
                 border-right:1px solid #88a;
            }
            #nav ul{
                /* height:30px; */
                list-style:none;
                /* border-bottom:1px solid red; */
                 
            }
            /* #nav ul li{
                width:100px;
                float:left;
                font-size:12px;
                text-align:center;
                /* border:1px solid red;  */
                /*border-right:1px solid #339;
                height:30px;
            } */
            li.nav_li{
                width:100px;
                float:left;
                font-size:12px;
                text-align:center;
                /* border:1px solid red;  */
                border-right:1px solid #339;
                height:30px;
            }
            
            li.nav_last{
                font-size:14px;
                border:none;
            }
            
            #content{
                /* height:60px; */
                /* border:1px solid red; */
                clear:both;
                float:left;
                /*把两端float的元素去掉,否则对于非IE,设置float的元素不占用空间
                下面的元素会飘上去  */
                margin-top:4px; 
            }
            /* 当使用了包含操作符之后,他的加载时间比class的加载时间要短 
            所以如果再来定义一个class的样式,不会把包含的样式覆盖掉 */
            #nav ul li a{
                position:relative;
                top:8px;
            }
            a.nav_href:link,a.nav_href:visited{
                text-decoration:none;
                color:#125;
            }
            a.nav_href:hover{
                text-decoration:none;
                color:#a43;
            }
    /*****主页内容中的文章列表样式************************************/
        dl.article_list{
            /* width:240px; */
            border:1px solid #999;
            margin-top:4px;
            /* float:left; */
         }
         dl.article_list dt{
             height:30px;
             background:#228;
             color:#ff0;
         }
          dl.article_list dt span{
              position:relative;
              top:5px;
              left:5px;
              font-size:14px;
             font-weight:bold;
          }
          dl.article_list dd{
              height:30px;
              border-bottom:1px dotted #eee;
              background:url("../img/xiao.png") no-repeat;
              background-position:12px 12px;
          }
          dl.article_list dd a{
              position:relative;
              left:25px;
              top:10px;
          }
          a.article_href:link,a.article_href:visited{
              text-decoration:none;
              color:#555;
          }
          a.article_href:hover{
              text-decoration:underline;
              color:#a33;
          }
          #con_left{
              /* border:1px solid red; */
              float:left;
              width:250px;
          }
          #con_right{
              /* border:1px solid red; */
              float:left;
              width:840px;
          }
          dl.index_l_article{
              width:240px;
          }
          dl.index_r_article{
              float:left;
              width:390px;
              margin-left:20px;
          }
          #bottom{
              height:20px;
              width:1100px;
              border-top:1px solid #999;
              clear:both;
              float:left;
              margin-top:20px;
              text-align:center;
              
          }
          
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">导航图片</div>
            <div id="nav">
                <ul>
                    <li class="nav_li"><a href="" class="nav_href" 
                    style="color:#0f0;">返回首页</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">摇滚音乐</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">另类电影</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">联系我们</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站导航</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站帮助</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站帮助</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站帮助</a></li>
                    <li class="nav_li"><a href="#" class="nav_href">网站帮助</a></li>
                    <!-- 一个css中可以加载多个类,用空格隔开 -->
                    <li class="nav_li nav_last"><a href="#" class="nav_href">网站帮助</a></li>
                </ul>
            </div>
            <div id="content">
                <div id="con_left">
                    <dl class="article_list index_l_article">
                        <dt><span>通知信息</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>
                    <dl class="article_list index_l_article">
                        <dt><span>意见建议</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>
                    <dl class="article_list index_l_article">
                        <dt><span>交流互动</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>
                </div>
                <div id="con_right">
                    <dl class="article_list index_r_article">
                        <dt><span>通知信息</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>
                    <dl class="article_list index_r_article">
                        <dt><span>意见建议</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>
                    <dl class="article_list index_r_article">
                        <dt><span>交流互动</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>
                    <dl class="article_list index_r_article">
                        <dt><span>交流互动</span></dt>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                        <dd><a href="#" class="article_href">关于西游记的通知信息</a></dd>
                    </dl>
                </div>
            </div>
            <div id="bottom">
                &copy;CopyRight 2012-2013
            </div>
        </div>
    </body>
</html>

10 超链接样式
<html>
    <head>
        <title>超链接样式</title>
        <style type="text/css">
        /* 默认情况下的超链接样式 */
            a.xyj:link,a.xyj:visited{
                text-decoration:none;
                font-size:12px;
                color:#226;
            }
        /* 当链接点击之后的效果,IE不会自动继承a:link的设置,所有为了满足
        IE的效果,最好a:link,a:visited一起设置  */
            a.xyj:visited{
                color:#a21;
            }
        /* 当鼠标移动到超链接上面的效果*/
            a.xyj:hover{
                color:#191;
                text-decoration:underline;
            }
            a.rock:link,a.rock:visited{
                background:#f00;
                color:#fff;
                padding:4px;
                text-decoration:none;
            }
            a.rock:hover{
                background:#549;
                color:#ff0;
            }
        </style>
    </head>
    <body>
        <a href="#" class="xyj">孙悟空</a>
        <a href="#" class="xyj">猪八戒</a>
        <a href="#" class="xyj">唐僧</a>
        <a href="#" class="xyj">沙僧</a>
        
        <a href="#" class="rock">刘东明</a>
        <a href="#" class="rock">周云蓬</a>
        <a href="#" class="rock">张炜炜</a>
        <a href="#" class="rock">郭龙</a>
    </body>
</html>


© 著作权归作者所有

上一篇: css笔记06
下一篇: css笔记04
zhchl2010
粉丝 3
博文 80
码字总数 77710
作品 0
成都
程序员
私信 提问
Webpack 笔记

Webpack的使用场景是单页应用,如果是多网页使用webpack会很痛苦,对于文件的切换等,你需要写多个html输出配置。违背了Webpack的初衷。all is component. webpack is a module bundler. 目录...

廖君
2016/08/03
188
0
Sass 入门篇 —— 学习笔记(二)

一、Sass 的基本特性 - 基础 变量 声明变量 Sass 的变量包括三个部分: 如: 普通变量与默认变量 body { font-weight: $fontWeight; } body { font-weight: $fontWeight; } 覆盖默认变量只需...

JikungJam
2018/10/26
0
0
Golang学习笔记目录

Golang 介绍 Go语言是谷歌2009发布的第二款开源编程语言。 Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全、支持并行进程。...

ChainZhang
2017/12/26
0
0
CSS样式的权重问题

便于记忆的顺序:“important > 内联 > ID > 类 > 标签 伪类 属性选择 > 伪对象 > 通配符 > 继承”。 参考博文 深入解析CSS样式层叠权重值 深入解析CSS样式层叠权重值 重新认识CSS的权重...

Mobile-DEV彬
2016/04/25
55
0
前端的学习

html笔记; 技术点关键词: DOM 标签元素 标签类型 节点 样式 属性 不同浏览器支持的差异性(很小一部分) 框架布局 弹窗 浮动 js笔记; 技术点关键词: 变量 方法 参数 对象 触发和调用 异步数据交...

noteman
2015/12/14
98
0

没有更多内容

加载失败,请刷新页面

加载更多

CQRS与AXON

CQRS 看了蛮多文章,只会CRUD,却不懂CQRS,CQRS是遵循DDD思想而产生的一种模式,Command and Query Responsibility Segregation 命令与查询隔离。查询就直接通过正常的模式service调dao层。...

无极之岚
32分钟前
4
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
47分钟前
90
5
500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部