• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!

叶景网络之DIV+CSS学习笔记

2015-06-13 17:28:11   来源:叶景网络
    <p style=" text-align:inherit; text-align:justify; text-justify:distribute-all-lines;">
    /*******************常用的基本样式及属性****************************** */
    text-align:inherit;/*继承父标记的属性*/
    text-align:justify;/*对于英文文本左右两边都对齐 */
    text-justify:distribute-all-lines;/*对于中文文本左右两边都对齐得加这个属性 */
    border-style:dashed";/*边框样式 */
    border:1px solid #FF0000;/*可以用一个来定义完几个属性*/
    /**********************定位属性************************************** */
    position:relative;/* 相对定位*/
    left:150px;
    top:200px;
    position:absolute;/* 绝对定位*/
    top:100px;
    left:500px;
    /* ******让它可以以父元素为参照********** */
    1.它的父元素参照要有定位属性,如:position:relative;
    z-index:3;/* 改变显示顺序的属性*/
    /**********************CSS样式实现方法************************************** */
    1.内联式样式表(行样式)优先级最高
    如:<p style=" text-align:inherit; text-align:justify; text-justify:distribute-all-lines;">
    2.嵌入式样式表(一个样式可以操作多个标签)
    如:
    .mycss1{
    background:#CCCCCC;
    position:relative;
    left:150px;
    top:200px;
    }
    <div class="mycss1">zhoushiyong</div>
    3.外联式样式表(引用式样式表)
    如:mycss.css文件
    定义css文件的编码:@charset "utf-8";
    引入:<link href="./css/mycss.css" rel="stylesheet" type="text/css" />
    /**********************CSS样式的选择器************************************** */
    选择器有六种:
    1.html  selector  如:p{color:red;}
    2.class   selector  如:.zhou{color:red;}
    3.id    selector  如:#zhou{color:red;}
    4.关联选择器  如:.div p span{color:red;}
    5.组合选择器  如:div,p,span{font-size:14px;}/*多种形式并用,很灵活(空格表示下一级,逗号表示同级)*/
    6.伪元素选择器  如:a:hover{color:red;}
    /*---------------------------------------------*/
    常用 :
    img{border:none;}/*图片超连接时去掉蓝色边框 */
    div{margin:0 auto; width:960px;}/*让div居中,但必须有html页面的头部信息*/
    div{ border:1px solid #999999;margin-bottom:10px;height:auto;overflow:hidden;}/*常用*/
    .box{
    margin:0  auto 10px auto;
    padding-top:0px;
    width:958px !important;
    width:960px;
    }
    body{
    margin-top: 0px;
    padding-top:0px;
    }
    .nav{
    float:left;
    width:100%;
    height:10px;
    clear:both;
    overflow:hidden;
    }
    a:link {/*超连接的样式设置 */
    color:#2f3030;
    cursor:hand;
    text-decoration: none;
    }
    a:visited {
    padding:0px;
    color:#2f3030;
    text-decoration: none;
    }
    a:hover {
    padding:0px;
    text-decoration: none;
    /*text-decoration: underline;*/
    color:#3083FB;
    }
    a:active {
    color:#4F4F4F;
    text-decoration: none;
    }
    .list_ul li{
    float:left;
    height:30px; 
    padding-left:5px;
    display:inline;
    vertical-align:bottom;
    list-style-type: none;
    }
    .cut{
    float:left;
    overflow: hidden;
    display:inline;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 380px;
    line-height:30px;
    }
    /*分页设置*/
    a{ display:block; padding:2px 6px; border:1px solid #CCCCCC; margin-right:10px; text-decoration:none; float:left; width:20px; text-align:center}
    a:hover{ background-color:#CCCCFF; color:#FFFFFF;}
    <a href="#" style="width:60px;">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#" style="width:60px;">下一页</a>
    /**********************CSS样式的优先级************************************** */
    内联式样式表(优先级最高)》嵌入式样式表》外联式样式表
    总结:后出现先运用,书写时注意顺序
    网页中如下顺序:
    <link href="./css/mycss.css" rel="stylesheet" type="text/css" />
    <style type="text/css"></style>
    <p style=" text-align:inherit; text-align:justify; text-justify:distribute-all-lines;">
    /**********************CSS样式的属性************************************* */
    字体  文本 边框 背景 列表 位置 布局 其它
    -----------
    字体:
    -----------
    <span  style="font-family:'黑体'; font-size:12px;">碧波君子Blog</span><br/>
    解释:font-size:12px;(12px,1cm,10mm,20,3pt是绝对单位,40%是相对字体--系统默认字体大小的百分比)
    font-style:italic;/*斜体、正常*/
    text-transform:capitalize;/*首字母大写,全部大写,全部小写*/
    -----------
    文本:
    -----------
    1.段落
    解释:text-align:center;/*常用可靠属性--center left right justify */
    vertical-align:middle;/*常用可靠属性--sub super middle top */
    letter-spacing:10px;/*字间距 */
    word-spacing:20px;/*单词的间距--通过空格来识别 */
    line-height:30px;/*行高*/
    text-indent:20px;/*文本的缩进*/
    white-space:pre;/*排版方式 pre保留原来的属性,nowrap不换行 */
    -----------
    边框:
    -----------
    解释:  border-color:#FF0000;/* 边框颜色*/
    border-style:dashed;/* 边框样式,实线、虚线*/
    border-width:10px;/*边框线宽 */
    border-left:1px solid #FF0000;/*一般用综合的边框属性*/
    -----------
    背景:
    -----------
    解释:  background:#99CCFF;/*背景色 */
    background-color:#0066FF;/*背景色 */
    background-image:url(images/mm.jpg)/*背景图片 */
    background-repeat:repeat-x;/*背景图片重复方式 */
    background-position:center;/*背景图片位置 */
    background-attachment:scroll;/*图片的滚动方式 锁住:fixed  跟随滚动:scroll*/
    background-position:center  bottom;/*背景居中并在底部位置 */
    background-position:200px 100px;/*背景绝对定义位置 */
    -----------
    列表:
    -----------
    解释:margin /*内边距 */       padding/*外边距 */
    div{ border:1px solid #999999; margin:10px; padding:10px;}
    ul{ list-style-position:inside;/*内部的元素符号-随着文本流*/ list-style-type:disc;/*实心圆 */
    list-style-image:url(images/point.jpg);}/*自定义列表图片 */
    li{ padding-left:10px;}
    -----------常用的列表方法-----------
    div{ border:1px solid #999999; margin:10px; padding:10px;}
    ul{ list-style-type:none;}/*取消列表风格*/
    li{  background-image:url(images/point.jpg); 
    background-position:2px 2px;
    background-repeat:no-repeat;
    padding-left:20px;
    }
    /**********************表格的样式属性************************************* */
    表格常用:  table{table-layout:fixed;}/*锁住表格宽度,不会因表格内容多少面改变 */
    table{caption-side:bottom;}/*控制表格标题的位置 在不同浏览器中有差异 */
    border-collapse:collapse;/*忽略表格边框 */
    border-spacing:10px 60px;/*表格的填充距离--与外边框的距离 */
    empty-cells:show;/*表格的空单元格是否显示<td></td>*/
    tr:hover{background:#99CCFF;}/*单元格的鼠标经过行为,对IE5\6兼容不好(不起作用),尽量不使用*/
    /**********************表单元素的样式属性************************************* */
    解释:  /*给input 添加背景色,背景图 */
    .inputcss{background:#CCCCFF;color:#0000FF;}
    <input type="text" class="inputcss"/>
    /*一条线的文本框 */
    .inputcss{color:#00CC66;border:none;border-bottom:1px dashed #666666;}
    /*按扭样式控制*/
    <input type="submit_css"  class="submit" value="提交"     onmousemove="this.className='submit_over'" onmouseout="submit_css"/>
    .submit_css{height:20px; width:50px; background-color:#9999FF; border:none; color:#CCCCCC}
    .submit_over{height:20px; width:50px; background-color:#009933; border:none; color:#CCCCCC;  cursor:pointer}
    /*彩色下拉列表框*/
    <select name="">
    <option value="zhou" class="s1">碧波君子Blog11111</option>
    <option value="shi" class="s2">碧波君子Blog22222</option>
    <option value="yong"class="s3">碧波君子Blog3333</option>
    <option value="ting" class="s4">碧波君子Blog444</option>
    </select>
    select{ border:none; background-color:#99FFCC;}
    .s1{ background-color:#999966;}
    .s2{ background-color:#9999FF;}
    .s3{ background-color:#CC99FF;}
    .s4{ background-color:#6666CC;}
    /**********************伪元素选择器************************************* */
    如: a:hover {padding:0px;text-decoration: none;}
    h1:first-child{color:red;font-size:100px;}/*第一个子元素 */
    div.myh1>h1:first-child{color:red;font-size:100px;}/*第一个子元素,只要属于它里面的都执行 */
    div.myh1>h1:first-child span{color:red;font-size:100px;}/*第一个子元素,指定里面的谁-span*/
    <div class="myh1"><h1>22222222222222222</h1><h1>22222222222222222</h1></div>
    div.myp>p:first-letter{ color:#0000FF; font-size:30px;}/*首字母大写*/
    div.myp>p:first-line{ font-size:16px; color:#FF0000; background-color:#CCC;}/*P的首行设置*/
    <div class="myp"><p>碧波君子Blog22222222222222222</p></div>
    /**********************鼠标样式************************************* */
    如:
    p{ cursor:("m.ani")}/* 系统图片*/
    span{ cursor:move;}/*移动样式*/
    b{ cursor:text;}/* 文本样式*/
    a{ cursor:pointer}/* 手型样式*/
    <p>111111111</p>/* 块标签*/
    <span>1111111</span>/* 行标签*/
    <b>111111111111</b>/* 行标签*/
    <a>111111111111</a>/* 行标签*/
    /**********************滚动条样式************************************* */
    注:不建议使用,只对IE浏览器起作用,其它的不起作用。而且用的时间,不能用W3C标准的html头部引入
    如: body{overflow:hidden;}/*隐藏浏览器滚动条 自动用auto */
    overflow-x:scroll;/*显示浏览器水平滚动条  隐藏用hidden */
    overflow-y:scroll;/*显示浏览器水平滚动条 隐藏用hidden */
    不能用W3C标准的html头部:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    /**********************标记属性************************************* */
    span a b strong u i 为行标记
    <div> <h1> p margin     为块标记
    行标记与块标记可以相互转换,如:
    a{ display:block; display:inline-block}
    div{ display:inline}
    /**********************盒子概念属性--间距--边距************************************* */
    body h1 ul 默认有间距属性 margin: 8px;在不用的浏览器不同
    去除默认间距属性 margin: 8px;*{margin:0px;}
    div 实际宽度 :margin padding border(三个宽度加起来)
    padding:0px 10px 20px 10px;/*外边距设置:4个时为:上右下左 */
    padding:10px 20px 10px;/*外边距设置:3个时为:上左右下 */
    margin:0px 10px 20px 10px;/*内边距设置:4个时为:上右下左 */
    margin:10px 20px 10px;/*内边距设置:3个时为:上左右下 */
    margin  padding 使用原则:能在父元素指定就不要在子元素中指定
    /**********************display元素的属性************************************ */
    display 常用设置值:block inline inline-block list-item none
    block (块属性,相当于一个块,有一个换行)
    inline (行属性,相当于一行)
    inline-block(行级的块属性)
    ist-item (列表属性)
    none(没有属性)
    /*---------------------*/
    float设置值:left right none
    /**********************clear元素的属性************************************ */
    clear设置值:left right none both
    解释:
    .d1{ float:left;clear:both;}
    .d2{ float:right; clear:left;}/* 清除上一个标签(dl)的左漂移属性*/
    .d3{ float:left; clear:left;}/* 清除上一个标签(d2)的右漂移属性*/
    clear:both;/* 这个常用于底部的,如dede下的友情链接*/
    /**********************visibility元素的属性************************************ */
    visibility:hidden;  /*隐藏,但还占位*/
    display:none;/*隐藏,同时空间位也隐藏*/
    visibility:visible;/*显示*/
    /**********************clip元素的属性************************************ */
    /* 裁切*/
    clip设置值:rect( top right bottom left) auro;
    .images{ position:absolute; clip:rect(10px 500px 600px 100px);}/* 裁切 按上右下左的顺序*/
    /**********************overflow元素的属性************************************ */
    /* 元素溢出之后的处理*/
    overflow:hidden;;/* 溢出隐藏*/
    overflow:scroll;/* 不管是否溢出产生滚动条*/
    overflow:auto;/* 溢出自动产生滚动条*/
    /**********************over************************************ */
叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
没有加www域名打不开的解决方案 没有加www域名打不
叶景网络之CodeIgniter框架的学习 叶景网络之CodeIgni
叶景网络之Ajax学习笔记 叶景网络之Ajax学习
叶景网络之DIV+CSS学习笔记 叶景网络之DIV+CSS
关注排行RANKING
1

没有加www域名打不开的解决方案

没有加www域名打不开的解决方案 网站上线了,在做SEO时发现没带www的时候访问不了,是以前的域名绑定时没做好,这对se...

2

叶景网络之CodeIgniter框架的学习

叶景网络之CodeIgniter框架的学习 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

3

叶景网络之Ajax学习笔记

叶景网络之Ajax学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

4

叶景网络之DIV+CSS学习笔记

叶景网络之DIV+CSS学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建设...

5

叶景网络之SQL注入与安全学习笔记

叶景网络之SQL注入与安全学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

6

叶景网络之Mysql常用命令学习笔记

叶景网络之Mysql常用命令学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建...

7

叶景网络之Mysql优化的学习笔记

叶景网络之Mysql优化的学习笔记 通俗地理解三个范式,对于数据库设计大有好处。 第一范式:1NF是对属性的原子性...

8

叶景网络之Gvim编辑器的学习笔记

叶景网络之Gvim编辑器的学习笔记 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

9

叶景网络之memcached 学习笔记

叶景网络之memcached 学习笔记 memcached 是一个高效的分布式的内存对象系统,他可以支持把各种php的数据放入...