css(2)

最新推荐文章于 2024-09-21 23:59:03 发布

wahxsm

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量549

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Float网页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Float网页</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <style type="text/css">
     /*step:
     1、调整宽度
     2、为products指定float：left属性
     3、为test指定float：left属性
     4、为copyright定义clear：left属性
     5、设置products和test的margin-left为20px
     6、将步骤5中的两个margin改为12px，最后去掉copyright
     */
     /*products向左 tests向右*/
     div{
        text-align:center;
        border:1px solid blue;
     }
     #products{
        width:528px;
        float:left;
        margin-left:17px;
        }
      /*products总宽度：
        528+325+20+20=893+16*4 =957+4*2=965 */
     #test{
        width:465px;
        float:right;
        margin-right:18px}}
     /*float不能超过容器的边框，不能超越前一个元素的边界
      去除前后float元素的影响：clear:both/left/right
     */
     #copy{clear:left}

     </style>

   </head>

   <body>
        <div id="intro">Logo&Title</div>
        <div id="nav">body width:960px,默认字体大小
        </div>

        <div id="content">
           <div id="products">产品
           （padding：1em；border：4px）
           </div>
           <div id="test">客户评价（padding：1em；）
           </div>
           <div id="copy">
             All content copyright&copy;某公司
           </div>
        </div>



   </body>
</html>

盒子模型（BoxModel）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>盒子模型（BoxModel）</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <style type="text/css">
     /*读取网页顺序：html-->css-->图片-->JS*/
     h1,h2,h3,h4,h5,h6,p,ul,ol,li{padding:0;margin:0}
     /*CSS的继承性，网页默认字体为12px*/
     body{font-size:12px;
          background-color:#0063A0;
          background-image:url(images/body_bg2.jpg)}
          /*背景图默认双方向平铺*/
     div{border:1px solid red; margin:0 auto}
     #header{height:90px;text-align:right;
     background-image:url(images/header_bg.png)

     }
     /*链接常用属性：去下划线，保持颜色不变*/
       #header a{
        line-height:61px;
        text-decoration:none;
        color:#fff; 
        margin-right:40px
       }
       /*hover鼠标划过,字体放大1.2倍，鼠标划过加下划线

       */
       #header a:hover{
        font-weight:bold;
        font-size:14px;
        text-decoration:underline;
       }
       /*鼠标按下未抬起active{字体变红}*/
       #header a:active{color:red;}
       #navi{height:90px;background-image:url(images/navigation.png)}
       #main{width:950px;height:410px;
          background-color:#e8f3f8;
          border:5px solid #8acedb;
        }
       #footer{height:50px;text-align:center}
       #footer p{line-height:50px;color:blue;text-align:center}
       #header,#footer{width:960px;}
       .subdiv{width:910px;}
       #operate{height:30px;text-align:right}
       /*去掉边框，修改鼠标样式为手指*/
       #operate input{border:0px;cursor:pointer;
        width:73px;height:26px;
        /*默认位置，top left左上*/
        background-image:url(images/button_bg.PNG);
       }
       /*鼠标划过，将背景移动至中间*/
       #operate input:hover{background-position:center;
       }
       /*按下去未放，将背景地底部与按钮对其*/
       #operate input:active{background-position:bottom}
       #data{height:340px}

       #pages{
          height:28px;text-align:center;
       }
       /*行内元素不支持宽高属性*/
       /*解决：框模型-BoxModel*/
       #pages a{line-height:28px;text-decoration:none;
          border:1px solid #97b9c9; color:blue;
          /*字跟框之间的距离*/
          padding:5px 10px;

       }

      /*鼠标划过超链接背景变色*/
      #pages a:hover{background-color:#cddde4}
      /*高亮显示当前页--由程序控制的--类选择器*/
      /*背景变白,边框去掉*/
      #pages .curr_page{background-color:#fff;border:0px;}
      /***选择器优先级： id最高 类 伪类 元素选择器最低***/

      input.btn_add{
         height:26px;
         width:73px;
         background-image:url("images/btn_bg.png");
         color:#fff;
         border:0;
         cursor:pointer;
         /*background-position:bottom;*/         
      }
      /*鼠标划过,显示图片中部区域:*/
      input.btn_add:hover{
        background-position:center;
      }
      /*鼠标按下去未起来,显示图片底部区域:*/
      input.btn_add:active{background-position:bottom;}


      #datalist{
         width:900px;
         margin:0 auto;
         /*合并单元格间的缝隙*/
         border-collapse:collapse;
         /*单元格之间的距离：
         border-spacing:20px 10px;
         border-spacing:0px;
         */
         border:1px solid #ccc;
         background-color:#fff;
      }
      /*表中每个单元格+边框*/
      #datalist td,#datalist th{border:1px solid #ccc;}
      #datalist th{
         background-color:#fbedce;
         height:35px}
      #datalist td{
         height:32px;
         text-align:center;
         }
         /*td\th的样式优先于tr*/
      #datalist tr:hover{background-color:lightblue;}

      /*带图标按钮*/
      /*先分类：修改；删除*/
       /*去边框，背景白色*/
       /*公共样式部分：去边框;去背景;变手指;去平铺;背景垂直居中*/
      .modify,.delete{
            border:0px;
            background:none;
            cursor:pointer;
            background-repeat:no-repeat;
            background-position:left;
            /*移动内容（字），让出左侧宽度的位置*/
            padding-left:18px;}


      .modify{background-image:url(images/modify.png)}
      .delete{background-image:url(images/delete.png)}
      /*Logo往左飘*/
      #header img{float:left}
      /*菜单 三步：去圆点；改横排；变成块*/
      #navi ul{
         list-style-type:none;
      }
      #navi li{float:left;}
      /*dispaly:改变一个元素的显示类别，block（变成块元素）*/
      /*padding:1em  一倍字体大小--16px*/
      #navi a{
         display:block;
         width:85px;
         height:85px;
         border:0;
         color:#fff;
         /*无下划线*/
         text-decoration:none;
         /*文字在中间位置*/
         text-align:center;
         line-height:91px;}
      #navi a:hover{background-color:navy}
      /*对话框样式*/
        #result_info{
           width:400px;
           height:70px;
           border:1px solid green;
           background-color:#fdecec;
           padding-left:40px;
        }
      #result_info img{
         float:right;
         margin-right:10px;
         margin:10px;
         cursor:pointer;
      }
      #result_info span{
         font-size:1.5em;
         line-height:70px;
      }
      /*自由定位position:relative|absolute*/
      /*相对定位:相对于原始位置位移，原始位置不释放。*/
      /*#result_info{
         position:relative;top:50px;left:50px;
      }*/

      /*绝对定位:父级相对，自己绝对,位移相对于父元素边框,释放原始位置*/
      #main{position:relative;}
      #result_info{
         position:absolute;top:90px;left:250px;
      }
      #adv{
         background-image:url("images/guanggao.png");
         width:232px;
         height:109px;
          /*浏览器窗口定位。fixed:相对于浏览器定位*/
         position:fixed;
         right:10px;
         bottom:100px;
      }
      #ao{
         background-image:url(images/ao.jpg);
         width:100px;
         height:200px;
         padding:20px 10px 20px 20px;
         background-repeat:no-repeat;
         /*上下相同，左右相同*/
         margin-left:200px;
      }

     </style>

   </head>

   <body>
        <div id="header">
          <img src="images/logo.png">
          <a href="#">退出</a>
       </div>


       <div id="navi">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">角色管理</a></li>
            <li><a href="#">管理员</a></li>
          </ul>
       </div>
       <!--
       <div id="ao"></div>
       -->
       <div id="main">
          <!--操作成功提示-->
          <div id="result_info">
             <img src="images/close.png"/>
             <span class="success">修改成功！</span>
          </div>
          <div id="operate" class="subdiv">
            <input type="button" value="增加" class="btn_add"/>
          </div>
          <div id="data" class="subdiv">
            <table id="datalist">
               <tr>
                 <th>
                    <input id="chbAll" type="checkbox"/>
                    <label for="chbAll">全选</label>
                 </th>
                <th>管理员ID</th>
                <th>姓名</th>
                <th>拥有角色</th>
                <th></th>
               </tr>
               <tr>
                 <td><input type="checkbox"/></td>
                 <td>1</td>
                 <td>张三</td>
                 <td>超级管理员</td>
                 <td>
                    <input type="button" value="修改" class="modify"/>
                    <input type="button" value="删除" class="delete"/>
                 </td>
               </tr>
               <tr>
                 <td><input type="checkbox"/></td>
                 <td>2</td>
                 <td>李四</td>
                 <td>角色管理员</td>
                 <td>
                    <input type="button" value="修改" class="modify"/>
                    <input type="button" value="删除" class="delete"/>
                 </td>
               </tr>
            </table>

          </div>
          <div id="pages" class="subdiv">
            <a href="#">上一页</a>
            <a href="#">1</a>
            <a href="#" class="curr_page">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">下一页</a>
          </div>
       </div>
       <div id="footer">
          <p>版权所有&copy;某公司</p>
       </div>
       <!--广告-->
       <div id="adv">

       </div>
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>XHTML</title> 

      <style type="text/css">
         p,h1,h2,h3,h4,h5,h6,ul,ol,li{
            margin:0;
            padding:0;
         }
         ul,ol{
            list-style:none;
         }

         body{
           margin:0px auto;
           padding:0px;
           border:0;

           font-size:16px;
           font-family:Tahoma,Geneva,sans-serif;

           background-repeat:repeat;
           background-image:url(images/body_bg2.jpg);
         }
         div{
           margin:0px auto;
           padding:0px;
         }
         /*整体布局样式*/
         #header,#footer{
           width:960px;
         }
         #header{
           height:61px;

           text-align:right;
           background:url(images/header_bg.png) no-repeat;
         }
         #header a{
           margin-right:20px;
           line-height:61px;
           color:#fff;
           text-decoration:none;
         }
         #header a:hover{
           font-weight:bold;
           text-decoration:underline;
         }
         #header img{
           float:left;
         }
         #navi{
           width:100%;
           height:91px;

           /*background:gray;*/
           background:url(images/navigation.png) repeat;
         }

         #menu{
           margin:3px auto;
           width:960px;
           padding:5px;
           list-style-type:none;
         }
         #menu li{
           float:left;
           margin:0 14px;
         }
         #menu a{
           display:block;
           width:68px;
           height:77px;
         }
         .index_off{
           background:url(images/index_out.png) no-repeat;
         }
         .role_off{
           background:url(images/role_out.png) no-repeat;
         }
         .admin_off{
           background:url(images/admin_out.png) no-repeat;
         }
         .fee_off{
           background:url(images/fee_out.png) no-repeat;
         }
         #main{
           border:5px solid #bac1db;
           min-height:410px;
           width:950px;
           max-height:450px;
           background-color:#e8f3f8;
           position:relative;
         }
         #footer{
           height:50px;
         }
         #footer p{
           margin:0px auto;
           color:blue;
           line-height:25px;
           text-align:center;
         }
         /*正文部分*/
         #operate,#data,#pages{
           width:910px;
         }
         #operate{
           height:30px;
         }
         #operate_result_info{
           width: 400px;
           height: 70px;
           line-height: 70px;
           padding-left: 40px;
           font-size: 16px;
           position: absolute;
           z-index: 100;
           top: 260px;
           left: 30%;
           background-color: #fdecec;
           border: 1px solid #f57676;  
           background-repeat: no-repeat;
           background-position:10px center;
         }

         #operate_result_info img{
           float:right;
           margin-right:10px;
           margin-top:10px;
           cursor:pointer;
         }
         div.operate_success{
           color:#af6606;
           background-image:url(images/ok.bmp)
         }
         #data{
           height:340px;
         }
         #datalist{
           width:910px;
           margin:5px auto;
           text-align:center;
           background-color:#fff;
           border:0;
           border-collapse:collapse;
         }
         #datalist td{
           height:32px;
           vertical-align:middle;
           border:1px solid #ccc;
         }
         #datalist tr:hover{
           background-color:#f7f9fd;
         }
         #datalist tr.header td{
            font-weight:bold;
            height:35px;
            background:#fbedce;
         }
         input.btn_modify, input.btn_delete{
           margin-left:3px;
           width:58px;
           cursor:pointer;
           color:#000;
           border:0;
           background-color:#fff;
           background-repeat:no-repeat;
           background-position:left center;/*水平居左，垂直居中*/

         }
         input.btn_modify{
           background-image:url(images/modify.PNG)
         }
         input.btn_delete{
           background-image:url(images/delete.PNG)
         }
         #pages{
           height:28px;
         }
      </style>

   </head>
   <body>
     <!--logo start-->
     <div id="header">
         <img src="images/logo.PNG" alt="logo" title="logo"/>
         <a id="quit" href="#">[退出]</a>
     </div>
     <!--logo end-->


     <!--navi start-->
     <div id="navi">
       <ul id="menu">
          <li><a href="#" class="index_off"></a></li>
          <li><a href="#" class="role_off"></a></li>
          <li><a href="#" class="admin_off"></a></li>
          <li><a href="#" class="fee_off"></a></li>
          <li><a href="#" class="account_off">5</a></li>
          <li><a href="#" class="service_off">6</a></li>
          <li><a href="#" class="bill_off">7</a></li>
          <li><a href="#" class="report_off">8</a></li>
          <li><a href="#" class="information_off">9</a></li>
          <li><a href="#" class="password_off">10</a></li>
       </ul>
     </div>
     <!--navi end-->


     <!--main start-->
     <div id="main">
          <!--操作区-->
          <div id="operate"></div>
          <!--信息提示框-->
          <div id="operate_result_info" class="operate_success">
             <img src="images/close.png" />
             <span>操作成功！</span>
          </div>
          <!--数据区-->
          <div id="data">
              <table id="datalist">
                 <tr class="header">
                    <td><input type="checkbox" /><span>全选</span><td>
                    <td>管理员ID<td>
                    <td>姓名<td>
                    <td>拥有角色<td>
                    <td><td>
                 </tr>
                 <tr>
                    <td><input type="checkbox" /><td>
                    <td>1<td>
                    <td>张三<td>
                    <td>超级管理员，角色管理员<td>
                    <td>
                       <input type="button" class="btn_modify" value="修改"/>
                       <input type="button" class="btn_delete" value="删除"/>
                    <td>
                 </tr>
                 <tr>
                    <td><input type="checkbox" /><td>
                    <td>2<td>
                    <td>张三<td>
                    <td>超级管理员<td>
                    <td>
                       <input type="button" class="btn_modify" value="修改"/>
                       <input type="button" class="btn_delete" value="删除"/>
                    <td>
                 </tr>
                 <tr>
                    <td><input type="checkbox" /><td>
                    <td>3<td>
                    <td>张三<td>
                    <td>超级管理员<td>
                    <td>
                       <input type="button" class="btn_modify" value="修改"/>
                       <input type="button" class="btn_delete" value="删除"/>
                    <td>
                 </tr>
                 <tr>
                    <td><input type="checkbox" /><td>
                    <td>4<td>
                    <td>张三<td>
                    <td>超级管理员<td>
                    <td>
                       <input type="button" class="btn_modify" value="修改"/>
                       <input type="button" class="btn_delete" value="删除"/>
                    <td>
                 </tr>
              </table>

          </div>

          <!--分页区-->
          <div id="pages"></div>

     </div>
     <!--main end-->


     <!--footer start-->
     <div id="footer">
        <p>版权所有&copy;。。。。。</p>
     </div>
     <!--footer end-->

   </body>
</html>