css系列（5）css的运用（一）

时间 2019-11-12

标签 css 系列运用栏目 CSS 繁體版

原文原文链接

从本节开始介绍css配合html能够达到的一些效果。css

(1)导航栏:html

<html>
<head>
<title>示例5.1</title>
</head>
<style>
  #nav_div{
    height:60px;
    background-color:black;    
  }
  a{
    display:inline-block;      /*设为inline-block是为了让同类标签在同一行显示*/
    color:white;
    line-height:60px;          /*设置行高*/
    width:100px;
    text-align:center;         /*让文本居中显示*/
    float:left;                /*设置为左浮动，仅对内联元素有效*/
  }
  #nav_div  a:hover{           /*当鼠标滑动到a标签上时*/
    cusor:pointer;
    font-size:20px;
    background-color:#625D5D;  /*背景颜色*/
    color:#FFF30E;             /*字体颜色*/ 
  }
</style>
<body style="margin:0px;">
  <div id="nav_div">            
    <a href="#">首页</href>
    <a href="#">公司简介</href>
    <!--为何界面中这个只能连接不靠右显示-->
    <a style="float:right;margin-right:0px;" href="#">智能连接</a>
 </div>
<body>
</html>

(2)行级元素div的块级用法:浏览器

<!DOCTYPE html>
<html>
<head>
  <title>示例5.2</title>
  <style>
    #padding_div{
      dispaly:inline-block;
      width:200px;
      height:150px;
      background:black;
      padding-top:50px;
      float:left;
    }
    #padding_div div{
      width:100px;
      height:100px; 
      background:green;
    }
    #border_div{
      dispaly:inline-block;
      width:  195px;
      height: 195px;
      background: red;
      margin-left:30px;
      border-style:solid;                 
      border-left-width:20px;
      float:left;
    }
  </style>
</head>
<body>
<div>
  <!--仅仅当两个div都设为内联时，他们的排列才遵照同一规则-->
  <div id="padding_div">
    <div></div>
  </div>
  <div id="border_div">
  </div>
</div>
</body>
</html>

(3)div的overflow属性:post

<!DOCTYPE html>
<html>
<head>
  <title>示例5.3</title>
  <style>
    .over_div{
      display:inline-block;
      width:150px; 
      height:200px;
      background-color:grey;
      color:yellow;
    }
    #over01{
      overflow:visible;
    }
    #over02{
      overflow:hidden;
    }
    #over03{
      overflow:scroll;
    }
    #over04{
      overflow:auto;
    }
  </style>
</head>
<body>
<div>
    <div class="over_div" id="over01">
    默认值。内容不会被修剪，会呈如今元素框以外。
    overflow属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。若是值为 scroll，不管是否须要，用户代理都会提供一种滚动机制。所以，有可能即便
元素框中能够放下全部内容也会出现滚动条。
    </div>
    <div class="over_div" id="over02">
    内容会被修剪，而且其他内容是不可见的。
    overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。若是值为 scroll，不管是否须要，用户代理都会提供一种滚动机制。所以，有可能即便
元素框中能够放下全部内容也会出现滚动条。
    </div>
    <div class="over_div" id="over03">
    内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。
    overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。若是值为 scroll，不管是否须要，用户代理都会提供一种滚动机制。所以，有可能即便
元素框中能够放下全部内容也会出现滚动条。
    </div>
    <div class="over_div" id="over04">
    若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。
    overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。若是值为 scroll，不管是否须要，用户代理都会提供一种滚动机制。所以，有可能即便
元素框中能够放下全部内容也会出现滚动条。
    </div>
</body>
</html>

(4)表单和div的混合使用:(仿照腾讯微博注册登陆页面)字体

<!DOCTYPE html>
<html>
<head>
  <title>示例5.4</title>
  <style>
    body{
      background-color:#73CFF1;/*蓝色色调*/
      margin-top:0px;
    }
    #main_div {
      width: 800px;
      height: 600px;
      background-color: #ffffff;/*白色*/
      margin: auto;/*默认居中*/
    }
    div.block_div{
      width:798px;
      background-color: #ffffff;
      border:1px solid;
      border-color: #ffffff;
    }
    #div_block_01{
      height:60px;
      margin-left:20px;
      border:1px solid;
      border-color:#ffffff;
      margin-top: 20px;
    }
    #img_div{
      float:left;
      margin-left:20px;
      margin-top:10px;
      width:50px;
      border:1px solid;
      border-color:#ffffff;
      margin-left:50px;
    }
    #text_div{
      border: 1px solid;
      border-color:#ffffff;
      float:left;
      border:1px solid;
      border-color:#ffffff;
      margin-left:20px;
    }
    #div_block_02{
      margin-top:5px;
      width:798px;
      height:225px;
      border:1px solid;
      border-color:#ffffff;"
    }
    #form_div{
      width:510px;
      height:200px;
      background-color:#FFFDDF;
      border:1px solid; 
      border-color:#ffffff;
      margin:0px auto;
    }
   span{
      font-size:15px;
      margin-left:10px;
   }
  </style>
</head>
<body>
<div id="main_div">
  <div class="block_div">
    <div id="div_block_01">
      <div id="img_div">
        <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_tencent_QQ01.png"></img>
      </div>
      <div id="text_div">
        <pre style="font-size:13px;color:black;"><b>用QQ号码注册</b></pre>
        <pre style="font-size: 11px;color:black;margin-top:-10px;">用QQ号码开通能够方便你在微博上找到QQ好友，腾讯微博承诺，毫不会泄漏您的QQ号码。</pre>
      </div>
    </div>
    <div id="div_block_02">
      <div id="form_div">
        <form action="" method="post">
          <br/>
          <span>QQ账号：&nbsp;&nbsp;<input style="margin-bottom: 10px;" type="text" size="25";name="用户名" value=""/></span><br/>
          <span>QQ密码：&nbsp;&nbsp;<input type="text" size="25"/><span style="color:blue;font-size:10px">忘记密码?</span></span>
            <div style="border:1px solid;border-color:#ffffff;height:100px;margin-top: -15px;"><br/>
              <p><b style="margin-left:80px;"><input type="checkbox"/>下次自动登陆</b></p>
              <p><b style="color:blue;margin-left:80px;" ><input type="button" value="开通微博"/></b></p>
            </div>
        </form>
      </div>
    </div>
  </div>
<div>
</body>
<html>

(5)设置文本属性:spa

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    .p1 {
      word-spacing: 15px;  /*单词间距*/ 
      Letter-spacing:5px;  /*字母间距*/
      text-indent:10px;    /*首行的文本缩进*/
      line-height:30px;    /*行高*/
    }
    .p2 {
      Text-align:center;   /*设置文本居中*/
    }
  </style>
</head>
<body>
  <p class="p1">CSS是Csssascading Style Sheet 这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思。CSS能让网页制做者有效的定制、改善网页的效果。CSS是对HTML的补充，网页设计师曾经为没法很好的控制网页的显示效果而倍感苦恼，CSS的出现解决了这个问题。</p>
  <p class="p2">帝子降兮北渚，目眇眇兮愁予。洞庭波兮木叶下...</p>
</body>
</html>

1. [CSS] CSS布局系列一
2. CSS系列
3. CSS系列：CSS的引入方式
4. CSS系列(5)-如何使用Firebug查看网页的html和css
5. 5 CSS
6. 深刻理解CSS系列（一）：理解CSS的盒子模型
7. html/css系列 BFC
8. css揭秘系列
9. css基础系列
10. CSS-进阶系列
更多相关文章...
• 使用 CSS 显示 XML - XML 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• Docker容器实战(七) - 容器眼光下的文件系统
• JDK13 GA发布：5大特性解读