css学习小结

最新推荐文章于 2024-03-12 20:41:07 发布

Foodiegirl_Hui

最新推荐文章于 2024-03-12 20:41:07 发布

阅读量607

点赞数

分类专栏： HTML/CSS 文章标签：边距 div 基础样式 table

本文链接：https://blog.csdn.net/eatgirlhui_unique/article/details/46711173

版权

HTML/CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、基础

边距间距

设置样式，在样式文件中添加如下会很方便使用：

*{margin:0 auto;padding:0;}

同时body中设置overflow: visable内容全部显示出来也很管用

常见使用

vertical-align:middle; —文本垂直居中
text-align:center; —文本水平居中
line-height:30px; —行高
以上三者一般结合使用
text-indent:30px; —本行首字母缩进数
display:inline; —h1等标签文字显示在一行；因为内敛元素元素前后没有换行符。而block块级元素，此元素前后会带有换行符。
overflow:scroll；—当内容溢出元素框时发生的事情（如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条），具体用法：
overflow: visable内容全部显示出来，不会被隐藏；但是overflow: hidden超出部分不会被显示；

repeat:重复元素用法

float:定义元素在哪个方向浮动;可以应用在如下方向
将带有边框和边界的图像浮动于段落的右侧
带标题的图像浮动于右侧
使段落的首字母浮动于左侧
创建水平菜单
创建无表格的首页

二、应用

一个div层浮在另一个div层上面

DIV .div1{position:absolute; width:100%;height:80px;vertical-align:middle;font-weight:bold;
font-size:30px;color:white;overflow:hidden;}

DIV .div2{width:100%;height:80px;}

div在div页面内居中

首先，HTML页面必须添加一句话，为避免浏览器不兼容问题，将页面翻译成html而非XHtml：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

其次，div的样式需要添加样式如下：

margin: 0px auto;

页面顶部添加图片背景

前台页面：

    <table width="100%" id="userTable" cellpadding="0" cellspacing="0"  class="TopdIV">
     <tr>
        <td width="200px" class="Leftlogo"></td>
        <td class="centerlogo"></td>
        <td align="right" id="help" class="rightLogo">
            <a   href="javascript:login(\'\')">登录</a>
        </td>
      </tr>
    </table>

css样式：

.TopdIV{background:url(../images/bg.png) repeat-x;}
.Leftlogo{background:url(../images/OGCLeftLogo.png) no-repeat;}
.centerlogo{background:url(../images/OGCCenterLogo.png) no-repeat;}
.rightLogo{background:url(../images/OGCRightLogo.png) no-repeat right;}

说明：如果右侧图片不出现状况，则需要同时为其设置宽高；

style="height:80px;width:600px"

渐变色

◆table中的渐变色

table整体设置：

TABLE{border: 1px solid #dde4eb;collapse:collapse;/*折叠边框*/}

th设置：

TABLE th{
         border: 1px solid #dde4eb;
         FILTER: progid:DXImageTransform.Microsoft.Gradient               (gradientType=0,startColorStr=#ffffff,endColorStr=#f2f2f2);/*ie*/
                background:-moz-linear-gradient(top,#ffffff,#f2f2f2);/*谷歌*/
                background:-webkit-gradient(linear, 0% 0%, 0%     100%,from(#ffffff), to(#f2f2f2));/*火狐*/
                background: -ms-linear-gradient(#ffffff 0%,#f2f2f2                              100%);/*ie10*/

td设置：

td{ 
       border: 1px solid #dde4eb;padding: 6px 6px 6px 12px;
       FILTER: progid:DXImageTransform.Microsoft.Gradient                 (gradientType=0,startColorStr=#ffffff,endColorStr=#fcfcfc); /*ie*/
               background:-moz-linear-gradient(top,#ffffff,#fcfcfc);/*谷歌*/
               background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ffffff), to(#fdfdfd));/*火狐*/
                background: -ms-linear-gradient(#ffffff 0%,#fdfdfd 100%);/*ie10*/

                 }

效果图：
渐变色效果，支持多浏览器，解决多浏览器兼容问题

Foodiegirl_Hui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习小结

目录目录一基础边距间距常见使用二应用一个div层浮在另一个div层上面div在div页面内居中页面顶部添加图片背景渐变色table中的渐变色一、基础边距间距设置样式，在样式文件中添加如下会很方便使用：*{margin:0 auto;padding:0;}常见使用 vertical-align:middle; —文本垂直居中 text-align:center; —文
复制链接

扫一扫