css(2)

转载 2015年11月17日 15:59:51

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>

div+CSS实现段落首行缩进两个字符(text-indent标签)

段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字...
  • qq_26599807
  • qq_26599807
  • 2015年11月13日 09:45
  • 6933

纯css控制文字2行显示多余部分隐藏

在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; te...
  • this_ITBoy
  • this_ITBoy
  • 2016年07月01日 10:24
  • 10074

CSS Grid布局(2)

Grid
  • tian361zyc
  • tian361zyc
  • 2017年06月16日 16:41
  • 260

css控制行间距

字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所以,了解一点字体的基本知识对于设计来说还是非常重要的。 中文和英文的最大区别就是中文是方块...
  • rickyll
  • rickyll
  • 2009年03月26日 13:49
  • 10732

CSS文字控制在二行 超出部分不显示

文字控制在三行 超出部分不显示
  • Yiright
  • Yiright
  • 2016年11月19日 15:26
  • 1275

《web前端开发技术——html、css、javascript》笔记之二

CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,是用于控制网页样式并允许样式信息与网页内容分离的一种技术。 基本选择器包括:html标记选择器、类选择器、...
  • linbu
  • linbu
  • 2014年03月31日 18:58
  • 888

用CSS解决左右两块布局时,分界线跟随二者中高度大的变化

html中左右两块,用css解决如何显示二者中高度最大的border
  • qq348633040
  • qq348633040
  • 2017年03月03日 10:40
  • 362

css 文本超出2行就隐藏并且显示省略号

今天做东西,遇到了这个问题,百度后总结得到了这个结果。 首先,要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis...
  • bing0728004
  • bing0728004
  • 2016年05月26日 18:12
  • 38294

css设置段落文字首行缩进2字符,文字靠左侧显示,文字间距0.5像素

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...
  • ld513508088
  • ld513508088
  • 2014年07月10日 16:27
  • 7368

CSS文本超出2行就隐藏并且显示省略号

今天做东西,遇到了这个问题,百度后总结得到了这个结果。   首先,要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢...
  • u013063153
  • u013063153
  • 2016年09月03日 17:11
  • 1125
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css(2)
举报原因:
原因补充:

(最多只允许输入30个字)