zoukankan      html  css  js  c++  java
  • CSS的Class以及ID选择器

    9、CSS的Class以及ID选择器

    id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用。
      同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素,比如p.jam{值}将作用到带有'jam'class属性的段落。
    10、这个都差点忘了。页面布局
    clear float disply等这几个,关于网站用div+css主要把这个用好。
    总结:基本上都差不多,css的概念都有了一个了解,必定我们是做web开发,但是css,html前端的我们不能不知道,要知道个大概,查资料也知道怎么查就行了。所以我接下来想做一个demo来演示一下。今晚发上,希望大家支持一下黑侠客,我也是一只很老的菜鸟,现在才踏进来这个web之间,希望大家多多帮助,谢~
    11、演练html+css


    由于我的目的是学习web开发,所以这个html+css不要求太精,了解一下大概,在以后我拿到一个实例可以改就行了,这就是我的目的。不知道大家是什么要求。
    接下来我就改一下百度的页面,因为本人比较懒,比较大的页面可能没有耐心做下去,就模仿一下百度吧,也不知道这两天学的行不行.

    首先看到这个布面,我先分析结构,用html把结构弄出来,接下来再看表现方式用css定义。

    代码如下 复制代码
    <html>
    <head>
    <title>html+css baidu.com demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <body>
    <div id="box">
    <div id="login"><a href="#">登录</a></div>
    <div id="log"></div>
    <div id="txt">
    <ul>
    <li><a href="#">新闻</a></li>
    <li><a href="#">网页</a></li>
    <li><a href="#">贴吧</a></li>
    <li><a href="#">知道</a></li>
    <li><a href="#">MP3</a></li>
    <li><a href="#">图片</a></li>
    <li><a href="#">视频</a></li>
    </ul>
    </div>
    <div id="ipt">(www.111cn.net)
    <input type="text" />
    <input type="button" value="百度一下" id="btn" />
    </div>
    <div id="help">
    <ul>
    <li><a href="#">帮助</a></li>
    <li><a href="#">搜索</a></li>
    </ul>
    </div>
    <div id="link">
    <ul>
    <li><a href="#">企业推广</a></li>
    <li><a href="#">搜索风云榜</a></li>
    <li><a href="#">关于百度</a></li>
    <li><a href="#">About Baidu</a></li>
    </ul>
    </div>
    <div id="copy">&#169;2008 Baidu <a href="#">使用百度前必读 京ICP证030173号</a></div>
    </div>
    </body>
    </html>

    body{
    98%;
    margin: 0px auto;
    }
    #login{
    float: right;
    font-size: 12px;
    padding-top: 7px;
    }
    #log{
    background-image:url(../images/log.gif);
    height:129px;
    padding:0;
    background-repeat: no-repeat;
    background-position: center;
    }
    #txt ul{
    float: left;
    }
    input #btn{
    color: Blue;
    }
    #nav{
    margin: 0px auto;
    height: 200px;
    }
    #link ul{
    margin: 0px auto;
    color: Black;
    float: left;
    }
    #copy{
    clear: both;
    text-align: center;
    color: #7777cc;
    font-size: 12px;
    }
    #copy a{
    color: #7777cc;
    }



    from:http://www.111cn.net/cssdiv/56/f4164fcc3cd74141c519e1e5313289c4.htm

  • 相关阅读:
    你可能不知道的 30 个 Python 语言的特点技巧
    正则替换sql为动态sql
    列表按指定个数分割后格式化输出
    多线程队列下载天涯帖子
    多线程下载图片
    sublime text3 运行python配置
    01_什么是接口测试
    02_Fiddler使用
    01_Fiddler安装
    05_功能测试
  • 原文地址:https://www.cnblogs.com/alibai/p/4038956.html
Copyright © 2011-2022 走看看