精华内容
下载资源
问答
  • 简洁 DIV+CSS布局入门之三 作者:佚名 文章来源:蓝色理想简洁 DIV+CSS布局入门之三 ( DIV+CSS常用 常用CSS 

                                                简洁 DIV+CSS布局入门之三


                                                                                    作者:佚名    文章来源:蓝色理想

    简洁 DIV+CSS布局入门之三 ( DIV+CSS常用  常用CSS   DIV+CSS实例  简单DIV+CSS  DIV+CSS布局分析  DIV+CSS流程)

     

     

    到这里,有的朋友就说了,* 为什么要使用GIF格式?使用JPEG不是更好吗?
    因为GIF格式的图片文件更小,这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色,当我们使用了GIF格式时,从肉眼上并不能看出图片有什么太大的变化,因此这是可行的。

    * 接下来的Banner部分还能使用GIF格式吗?
    答案是不能,因为Banner部分是一个细致的图片,如果使用GIF格式颜色会有太大的损失,所以必须使用JPEG格式,将文件导出为banner.jpg。

    切好片后,我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下:

      <div id="menu">
       <ul>
        <li><a href="#">首页</a></li>
        <li class="menuDiv"></li>
        <li><a href="#">博客</a></li>
        <li class="menuDiv"></li>
        <li><a href="#">设计</a></li>
        <li class="menuDiv"></li>
        <li><a href="#">相册</a></li>
        <li class="menuDiv"></li>
        <li><a href="#">论坛</a></li>
        <li class="menuDiv"></li>
        <li><a href="#">关于</a></li>
       </ul>
      </div>
      <div id="banner">
      </div>

    为什么要这么写呢,因为对菜单使用列表<li>形式,可以在以后方便对菜单定制样式。

    而为什么要添加以下代码呢?
    <li class="menuDiv"></li>
    插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式,例如预览图中的竖线分隔。

    然后我们在css.css中再写入以下样式:

    /*页面头部*/
    #header {background:url(logo.gif) no-repeat}

    样式说明:
    #header {background:url(logo.gif) no-repeat}
    给页面头部分加入一个背景图片LOGO,并且不作填充。

    这里,我们没有指定header层的高度,为什么不指定呢?

    因为header层中还有菜单和banner项,所以层的高度暂时是未知的,而层的属性又可以让层根据内容自动设定调整,因此我们并不需要指定高度。

    使用列表<li>制作菜单

    开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。

    这一节我将告诉大家如何用列表<li>来制作菜单。

      <div id="menu">
        <ul>
          <li><a href="#">首页</a></li>
       <li class="menuDiv"></li>
       <li><a href="#">博客</a></li>
       <li class="menuDiv"></li>
       <li><a href="#">设计</a></li>
       <li class="menuDiv"></li>
       <li><a href="#">相册</a></li>
       <li class="menuDiv"></li>
       <li><a href="#">论坛</a></li>
       <li class="menuDiv"></li>
       <li><a href="#">关于</a></li>
        </ul>
      </div>

    以上是这部分的结构,有关于<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关的内容吧,它们最主要的作用就是在HTML中以列表的形式来显示一些信息。

    还有一点需要大家一定要分清楚的,当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{} ,如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID。

    如果id="divID"这个层中包括了一个<img></img>,则这个img在CSS中对应的设置语法应该是#divID img {},同样,如果是包含在class="divID"这个层中时,则设置语法应该是.divID img {},这一点希望大家要分清楚了。

    另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。

    按照上面的介绍,我们先在css.css中写入以下代码:

    #menu ul {list-style:none;margin:0px;}
    #menu ul li {float:left;}

    解释一下:

    #menu ul {list-style:none;margin:0px;}
    list-style:none,这一句是取消列表前点,因为我们不需要这些点。
    margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。

    #menu ul li {float:left;}
    这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。

    到这一步,建议大家先保存预览一下效果,我们再添加下面的内容,效果如下:

    这时,列表内容是排列在一行,我们在#menu ul li {}再加入代码margin:0 10px

    #menu ul {list-style:none;margin:0px;}
    #menu ul li {float:left;margin:0 10px}

    margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px),预览的效果如下:

    现在,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下:

    #menu {padding:20px 20px 0 0}
    /*利用padding:20px 20px 0 0来固定菜单位置*/
    #menu ul {float:right;list-style:none;margin:0px;}
    /*添加了float:right使得菜单位于页面右侧*/
    #menu ul li {float:left;margin:0 10px}

    这时,位置已经确定了,可是构思图中,菜单选项之间还有一条竖线,怎么办呢?
    别忘了,我们早就已经留好了一个空的<li class="menuDiv"></li>,要想加入竖线就使用它了。
    按照上面说的方法,我们再添加以下代码:

    .menuDiv {width:1px;height:28px;background:#999}

    保存预览一下,竖线是否已经出来了?关于这段代码就不多讲了,应该是很容易理解的。

    不过,菜单选项的文字却在顶部,我们再修改成以下代码:

    #menu ul li {float:left;margin:0 10px;display:block;line-height:28px}

    关于display:block;line-height:28px大家可以去参阅一下手册,我就不多讲了。

    效果基本上已经实现了,剩下的就是修改菜单的超链接样式,在css.css中添加以下代码:

    #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
    #menu ul li a:hover{}

    这个也不多说了,没什么好说的了,最后的效果如下:

    这一节到这里就完毕了,顺便把素材提供给大家:
    构思图:点击下载
    HTML和CSS源文件:点击下载

    这一节里面,主要就是想告诉大家如何使用好borderclear这两个属性。

    首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试:
    <div style="border-bottom:1px dashed #ccc"></div>

    大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。

    <div id="banner"></div>

    以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:

    #banner {
     background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
     width:730px; /*设定层的宽度*/
     margin:auto; /*层居中*/
     height:240px; /*设定高度*/
     border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
     clear:both /*清除浮动*/
    }

    通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。

    另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。

    <div id="pagebody"><!--页面主体-->
     <div id="sidebar"><!--侧边栏-->
     </div>
     <div id="mainbody"><!--主体内容-->
     </div>
    </div>

     

    未完待续......

     

    展开全文
  • css div定位详解

    千次阅读 2012-01-31 23:08:54
    网上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却带来了“divdiv”的缺点,过量使用div...
    网上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却带来了“div 套 div”的缺点,过量使用div标签;三是class
    网上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却带来了“div 套 div”的缺点,过量使用div标签;三是class过多,造成class灾难。

    要正确使用css,对css的基本只是就不能够不了解。既然是漫谈,我这里就只讲四个方面,最后给出xkland项目作为实例。

    一、CSS中的块模型

    在CSS的定义中,有的html标签被浏览器当成一个块来显示,比如div、table、p、ul等等,我们称之为块元素;有的html标签被浏览器显示在文本行之类,如a、span、font等等,我们称之为行内元素。行内元素我这里就不讲了,只讲讲块元素的模型。

    每一个块元素都可以分为context、padding、boder和margin几个部分,我们常说的宽和高,通常指的是context的宽和高(也有可能是context+padding,具体跟浏览器有关),padding代表内容和边框之间的填充,margin代表边框之外的空白,如下图:
    /

    这几个部分都是可以通过CSS进行指定的,当然,CSS还可以控制背景,因此,我们可以通过CSS来灵活控制我们页面的外观。

    二、CSS中的文档流模型

    所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的(当然,嵌套不在此列),每一个块都会另起一行。如下图:
    /

    他们对应的html如下:
    / < div id ="div1" > div1 </ div >
    / < div id ="div2" > div2 </ div >
    / < div id ="div3" > div3 </ div >

    为了定义他们的宽度、高度还有边框,我们定义如下的CSS:
    / #div1 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    /#div2 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    /#div3 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    三、CSS中的相对定位和绝对定位模型

    在文档流中,每个块元素都会被安排到流中的一个位置,我们可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位,相对定位是相对于该块元素在文档流中的位置的,比如,我们可以使用相对定位把div2放到div1的右侧,CSS代码如下:
    / #div1 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    /#div2 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    position: relative;
    /    top: -64px;
    /    left: 204px;
    /}

    /#div3 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    下面是效果:
    /

    可以看到一个有趣的现象,那就是虽然我们把div2移走了,但是div1和div3中间还是有一个空间,说明相对定位的元素是会占据文档流空间的,这里的div2就是典型的“站着茅坑不拉屎”。

    使用绝对定位也是可以把div2摆到div1的右边的,而且绝对定位是不会占据文档流空间的,如下图,div1和div3之间没有空白:
    /

    div2的CSS代码:
    / #div2 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    position: absolute;
    /    top: 15px;
    /    left: 214px;
    /}


    绝对定位是个好东西,可以把内容显示到页面上的任何位置,但是对于我们程序员来说,却不能使用太多的绝对定位,因为使用程序动态向div中添加内容,div的大小是不可知的,无法将每一个div的位置都定死。

    四、CSS中的浮动和清除模型

    在CSS中,最让人不好理解的应该算是float和clear意义了。float可以达到这样一个效果,就是本来应该一行一个的块元素,如果定义了float属性,则只要行的空间足够,它会跑别的float元素的屁股后面,而不再会单独占用一行,如下图:
    /

    这里把div2和div3都定义了为浮动,代码如下:

    / #div2 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    float:left;
    /}

    /#div3 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    float:left;
    /}

    那什么情况下需要clear呢?这是因为float的元素和绝对定位的元素一样,也是不占用文档空间的,因此,如果我们把div2和div3都嵌套在div1中, 并且把div2和div3都定义为浮动,那么由于它们不占用文档空间,设置为浮动后div2和div3都不属于div1的内容了,所以作为父元素的div1没有内容填充,不知道自动扩展大小,以至于显示出来div2和div3会跑到div1的外面,如下图:
    /

    下面是它们的html代码:
    / < div id ="div1" > div1
    / < div id ="div2" > div2 </ div >
    / < div id ="div3" > div3 </ div >
    / </ div >

    下面是它们的css代码:
    / #div1 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 450px;
    /    margin:2px;
    /}

    /#div2 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    float:left;
    /}

    /#div3 {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    float:left;
    /}

    因为float的元素不占用文档流空间,有时候被的元素还会重叠到float元素上,这里我就不举例了。

    为了解决上面的问题,就需要在float之后的元素上面使用clear,在此例中,我们在div3后面加入一个空段落,并设置其为clear,如下:
    / < div id ="div1" > div1
    / < div id ="div2" > div2 </ div >
    / < div id ="div3" > div3 </ div >
    / < p class ="clear" ></ p >
    / </ div >

    clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下

    下面是新增加的空段落的CSS代码:

    / .clear {
    /    clear:left;
    /}

    这时div1有了p这块内容(尽管p里面是空的),并且clear:为left, 使得p的上外边框边界刚好在其上浮动元素的下外边距边界之下。
    效果图:
    /

    还是以我的xkland项目为例,来设计一个完整的页面吧。下面是我的welcome.jsp页面的布局图:
    /

    在这个页面中,我完全摆脱了“表格套表格”的模式,而且除了最上面一行在一个div里面显示logo、advertisment和appendix的div外,其它的地方没有div嵌套。尽量减少div嵌套的有力武器是理解div的意义,div代表division,是部分的意思,也就是说只有在确实没有标签能够作为一个部分的根元素的时候才需要div。在上面的例子中,菜单条就没有使用div。菜单条是使用列表实现的,因为列表的都包含在ul标签中,因此没有必要使用div。下面是上图的html代码:

    / < body >
    / < div id ="header" >
    /  < div id ="logo" > 此处显示 id "logo" 的内容 </ div >
    /  < div id ="appendix" > 此处显示 id "appendix" 的内容 </ div >
    /  < div id ="advertisment" > 此处显示 id "advertisment" 的内容 </ div >
    / </ div >
    / < ul id ="menu" >
    /  < li > 菜单项一 </ li >
    /  < li > 菜单项二 </ li >
    /  < li > 菜单项三 </ li >
    /  < li class ="lastMenuItem" > 最后一个菜单项 </ li >
    / </ ul >
    / < div id ="loginView" > 此处显示 id "loginView" 的内容 </ div >
    / < div id ="catalog" > 此处显示 id "catalog" 的内容 </ div >
    / < div id ="search" > 此处显示 id "search" 的内容 </ div >
    / < div id ="newTopics" > 此处显示 id "newTopics" 的内容 </ div >
    / < div id ="newReply" > 此处显示 id "newReply" 的内容 </ div >
    / < div id ="hotTopics" > 此处显示 id "hotTopics" 的内容 </ div >
    / < div id ="statistics" > 此处显示 id "statistics" 的内容 </ div >
    / < div id ="hotGroups" > 此处显示 id "hotGroups" 的内容 </ div >
    / < div id ="hotUsers" > 此处显示 id "hotUsers" 的内容 </ div >
    / < div id ="footer" > 此处显示 id "footer" 的内容 </ div >
    / </ body >

    是不是很简洁?

    而关于页面美化和布局的内容,全部转移到了CSS中。先来说说菜单项,菜单项是使用列表实现的,而列表常规的显示样式是下面这样的:
    /

    怎么样才能让它们显示到一行呢?那就是我前面讲到的float属性。我们给id为menu的ul定义如下样式,来显示边框:
    / #menu {
    /    border: 1px solid #0F54C3;
    /    padding:5px;
    /    margin:0px;
    /    width:804px;
    /    margin:1px 0px;
    /    height: 12px;
    /}

    为了避免前面讲到的float元素跑到边框之外,我这里没有使用clear,而是将menu的height属性定义为12px,和页面上的字体等高,而菜单只有一行,因此不会跑到边框之外。menu中的每一个菜单项都是一个li,我们可以通过#menu li { }来定义它的样式,这种方式叫做后代选择器,充分使用这种选择器,是避免使用过多的类的有力武器,从前面的html代码中可以看出,我只对最后一个菜单项定义了类,因为我不想最后一个菜单后面还跟一个小竖线,菜单项之间的小竖线是通过定义li的右边框样式做到的,其css代码如下:
    / #menu li {
    /    float:left;
    /    padding-left:10px;
    /    padding-right:10px;
    /    border-right-width: 1px;
    /    border-right-style: solid;
    /    border-right-color: #0F54C3;
    /}

    /#menu .lastMenuItem {
    /    border-right-style:none;
    /}


    对于下面那么多的框框,除了#netTopics我使用绝对定位把它摆到了右边作为主要内容区之外,其它的都是顺着文档流摆下来的,只定义了宽度,而不需要定义位置。

    如果我们要美化页面,比如添加网站特有的图片,我们可以修改#logo、#advertisment、#appendix的css代码,甚至当以后别人美化我的网站时,可以把这三个div的visible设置为false,而直接定义#header的样式。在这里,我们只简单的把#logo的背景设置为logo图片,并去掉边框。下面是css代码:

    / #logo {
    /    float:left;
    /    height: 60px;
    /    width: 200px;
    /    background:url(../images/xkland_logo.gif) no-repeat left top;
    /}


    对于其他的div,我们还需要为它们添加内容,#loginView这个稍微特殊一点,需要添加标题和表单,而其他的div就简单得多,只需要标题和列表就够了。这里我们以#loginView为例,下面是添加内容之后的效果:
    /

    别看这里面布局也挺复杂的,我也完全没有使用表格。下面是html代码:

    / < div id ="loginView" >
    /  < h3 > 用户登录 </ h3 >
    / < form name ="form1" id ="form1" method ="post" action ="" >
    /  < p > 用户名:
    /      < input class ="textInput" name ="userName" type ="text" id ="userName" />
    /  </ p >
    /  < p > 密 码:
    /    < input class ="textInput" name ="password" type ="password" id ="password" />
    /  </ p >
    /  < ul >
    /      < li > 忘记密码? </ li >
    /      < li > 新用户注册 </ li >
    /      < li >< input type ="checkbox" name ="checkbox" value ="checkbox" /> 记住我 </ li >
    /  </ ul >
    /  < p class ="clear" >
    /  < input type ="submit" name ="Submit" value ="登 录" />
    /  </ p >
    / </ form >
    / </ div >

    可以看到,我使用的h3标签来作为标题,这样避免了为标题另外嵌套一个div,对输入文本框定义了类textInput来定义它们的样式,而其他的文本内容,我都是使用了p标签和ul、li标签,从上面的效果图就可以看出CSS的强大。下面是它们的css代码:
    / #loginView {
    /    border: 1px solid #0F54C3;
    /    width: 280px;
    /    margin:1px 0px;
    /}

    /h3 {
    /    border-bottom-width: 2px;
    /    border-bottom-style: solid;
    /    border-bottom-color: #0F54C3;
    /    padding-top: 5px;
    /    padding-right: 5px;
    /    padding-bottom: 5px;
    /    padding-left: 15px;
    /    margin: 0px;
    /    font-size: 10.5pt;
    /}

    /#loginView p {
    /    margin:3px;
    /    text-align:center;
    /}

    /#loginView form {
    /    margin:0px;
    /}

    /.textInput {
    /    border: 1px solid #CCCCCC;
    /    width: 15em;
    /    height:12px;
    /}

    /#loginView ul {
    /    margin:8px 10px 3px 10px;
    /}

    /#loginView ul li {
    /    float: left;
    /    width: 130px;
    /    height:18px;
    /}

    /.clear {
    /    clear: left;
    /}

    总之,使用CSS将程序和美工分离是绝对的真理,我们程序员只要能够在框框内输出正确的数据就够了,这样能够尽量减少程序的bug,美化页面的事就让界面设计师去做吧。当然,我们程序员还是要能够在html中设计正确的division划分和嵌套,让界面设计师在设计界面的时候能够找到定义CSS的锚点

    展开全文
  • css div边框倾斜I found a recent discussion on Reddit’s r/webdev interesting: how might one make a container appear to have a slanted bottom border, as shown above? The top-voted answer, while clever,...

    css div边框倾斜

    I found a recent discussion on Reddit’s r/webdev interesting: how might one make a container appear to have a slanted bottom border, as shown above? The top-voted answer, while clever, only worked on fixed-width containers, and used a lot of CSS to achieve the effect; by sacrificing a small amount of backwards compatibility, I think there’s a better option.

    我发现有关Reddit的r / webdev最近讨论很有趣:如上所示,如何使容器看起来有倾斜的底部边框? 投票最多的答案虽然很聪明,但仅适用于固定宽度的容器,并且使用了大量CSS来达到效果。 通过牺牲少量的向后兼容性,我认为有更好的选择。

    This mini-lesson might be considered part of a push to re-imagine website layout: for the longest time we’ve been reliant on three-column grids and 90° angles. But with a little imagination, we can do so much more:

    这个迷你课程可能被认为是重新构想网站布局的一部分:在最长的时间里,我们一直依赖于三列网格和90°角。 但是只要稍加想象,我们就可以做更多的事情:

    My solution doesn’t even require an extra element. Instead, it uses multiple backgrounds with a linear gradient. The full HTML is as follows:

    我的解决方案甚至不需要额外的元素。 相反,它使用具有线性渐变的 多个背景 。 完整的HTML如下:

    <div id="login">
    	<h1>Sign Up</h1>
    	<img src="adriana.jpg" alt>
     	<label for="name">Name</label>
     	<input id="name" type="text" name="name">
    	<label for="email">Email</label>
    	<input id="email" type="email" name="email">
    	<label for="password">Password</label>
    	<input id="password" type="password" name="password">
    	<input type="submit" value="Done">
    </div>

    The key CSS:

    关键CSS:

    #login {
    	font-family: Avenir, Calibri, sans-serif;
    	width: 33%;
    	margin: 0 auto;
    	background-image: 
    		linear-gradient(175deg, transparent 36%, white 36.05%), 
                url(nahatlatch.jpg);
    	text-align: center;
    	background-size: 100%, cover;
    	background-repeat: no-repeat;
    }

    By overlaying the bitmap background image with a linear gradient (remember, in CSS the last background image in a declaration is laid down first), we get the sweep of the gradient over the image; by starting the gradient transparent, we get to see the image underneath, and by placing the transition of the transparent part of the gradient very close to the white stop, the effect is a sharp, angled cutoff.

    通过用线性渐变覆盖位图背景图像(请记住,在CSS中首先放置了声明中的最后一个背景图像),我们获得了图像上的渐变范围; 通过开始transparent的渐变,我们可以看到下面的图像,并将渐变的transparent部分的过渡放置在非常接近white光圈的位置,效果是清晰的,有角度的截止。

    The rest of the CSS simply styles the div (which could be almost any container element) and its content; I’ve left it here for anyone who may be interested.

    CSS的其余部分div (几乎可以是任何容器元素)及其内容设置样式。 我把它留给了任何有兴趣的人。

    #login h1 { font-weight: 100; padding-top: 6rem; }
    #login img { 
    	width: 33%; 
     	height: auto; 
     	border-radius: 50%; 
     	border: 5px solid white;
    }
    #login label { color: #666; margin-top: 1rem; }
    #login input, #login label { 
    	display: block;
     	width: 90%;
    	margin: 0 auto;
    	padding: .5rem;
    }
    #login input { 
    	text-align: center;
    	border: none;
    	border-bottom: 1px solid #aaa;
    	font-size: 1rem;
    }
    #login input[type="submit"] { 
    	width: 100%; 
    	margin-top: 1rem;
    	background: hsl(0, 90%, 60%);
    	color: #fff; padding: 1rem;
    	text-transform: uppercase;
    }

    There’s also the Codepen repo, which contains code for some responsive breakpoints. The single downside to this version of the effect is a bit of browser compatibility: Internet Explorer didn’t support gradients until version 10. You could, however, provide another version of the background-image declaration earlier for just that browser.

    还有Codepen repo ,其中包含一些响应性断点的代码。 此版本的效果的唯一缺点是与浏览器的兼容性:Internet Explorer直到版本10才支持渐变。但是,您可以为该浏览器更早地提供background-image声明的另一个版本。

    翻译自: https://thenewcode.com/236/Creating-a-div-with-a-Slanted-Bottom-Border

    css div边框倾斜

    展开全文
  • 着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,掌握CSS+DIV的精髓;还详细讲解了其他书中较少涉及的技术细节,最后给出了5个常见类型的完整网页的 综合实例,让读者进一步巩固...
  • 着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,掌握CSS+DIV的精髓;还详细讲解了其他书中较少涉及的技术细节,最后给出了5个常见类型的完整网页的 综合实例,让读者进一步巩固...
  • 着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,掌握CSS+DIV的精髓;还详细讲解了其他书中较少涉及的技术细节,最后给出了5个常见类型的完整网页的 综合实例,让读者进一步巩固...
  • css div 宽高比例

    千次阅读 2008-11-18 14:09:00
    在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#menubg {…}。还有一些其他的比如搜索框之类的应该...
    在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#menubg {…}。
    
    还有一些其他的比如搜索框之类的应该怎么命名呢?下面有一些可以算得上是标准的命名吧。如果有错误或者遗漏请朋友们帮忙补上,谢谢!

    页头:header
    登录条:loginbar
    标志:logo
    侧栏:sidebar
    广告:banner
    导航:nav
    子导航:subnav
    菜单:menu
    子菜单:submenu
    搜索:search
    滚动:scroll
    页面主体:main
    内容:content
    标签页:tab
    文章列表:list
    提示信息:msg
    小技巧:tips
    栏目标题:title
    加入:joinus
    指南:guild
    服务:service
    热点:hot
    新闻:news
    下载:download
    注册:regsiter
    状态:status
    按钮:btn
    投票:vote
    合作伙伴:partner
    友情链接:friendlink
    页脚:footer
    版权:copyright
    提交:submit
    文本框:textbox
    统计:count

    以上结构可以组合使用,例如:左列标题lefttitle;底部导航footernav 书写原则是: 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写,除非一看就明白的单词。


    11.17 网易的CSS写法

    /* 全局CSS定义 */
    body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
    div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
    h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
    table,td,tr,th{font-size:12px;}

    /* 链接颜色 */
    a:link {color: #1f3a87; text-decoration:none;}
    a:visited {color: #83006f;text-decoration:none;}
    a:hover {color: #bc2931; text-decoration:underline;}
    a:active {color: #bc2931;}
    /* 颜色属性 [定义规则,小写c加颜色名称] */
    .cRed,a.cRed:link,a.cRed:visited{ color:Red; }
    .cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
    .cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}
    .cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
    .cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
    .cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
    .cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
    a.cBlack:hover{color:#bc2931;}
    .cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}
    .cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}
    /* 字体属性 [定义规则,小写f加属性名称] */
    .fB {font-weight: bold;}
    .fI {font-style: italic;}

    /* 字体大小*/
    .f12px{ font-size:12px;}
    .f14px{ font-size:14px;}

    /* 其他属性 */
    .left{ float: left;}
    .right{ float: right;}
    .clear{ clear: both; font-size:1px; width:1px; visibility: hidden; }
    .hidden {display: none;}
    .unLine ,.unLine a{text-decoration: none;}
    .noBorder{border:none;        }

    页面上所有图片自动缩放的代码

    <script language="JavaScript">
    var imgObj;
    for(i = 0; i < document.all.length; i++)
    {
    if(document.all(i).tagName.toLowerCase()=="img")
    {
      imgObj = document.all(i)  //建议只判断高度或者宽度其中一个,那样可以自动按比例缩放
      if (imgObj.height>500)  //判断图片的高度,如果大于500,则设置为500,值可以自己修改
      {
       imgObj.height=500
      }
      if (imgObj.width>700)  //判断图片的宽度,如果大于700,则设置为700,值可以自己修改
      {
       imgObj.width=700
      }
    }
    }

    </script>

    滚动条的颜色定义

    scrollbar-face-color: #E0D5BE;<!--//滚动条页面颜色设定-->
    scrollbar-track-color: #EBE4D3;<!--//滚动条底版颜色设定-->
    scrollbar-highlight-color: #ffffff;<!--//滚动条斜面和左面颜色设定-->
    scrollbar-shadow-color: #ffffff;<!--//滚动条下斜面和右面颜色设定-->
    scrollbar-3dlight-color: #ffffff;<!--//滚动条上边和左边的边沿颜色设定-->
    scrollbar-dark-shadow-color: #ffffff;<!--//滚动条下边和右边的边沿颜色设定-->
    scrollbar-arrow-color: #978C71;<!--//滚动条两端箭头颜色设定-->        

    给图片加边框
    在CSS文件中对img定义边界(border),例如我在CSS中定义了:

    img.framed {
    padding: 6px;
    border: 1px solid #CCC;
    background-color: #FFF; }

    那么在HTML文件中,针对嵌入的图片定义class="framed"就会有相应的边框效果。

    <img src="......" class="framed" >

    在FF下一个自适应高度的简单做法

    加上
    height: 100%;
    overflow: auto;

    自动换行的简单做法

            table-layout: fixed;
            WORD-BREAK: break-all;
            WORD-WRAP: break-word;

    怎样用CSS把层做成半透明?

    用下面的样式表定义你的层
    .alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100}

    解释:
    Opacity=开始的不透明度(100的话就不透明了)
    FinishOpacity=结束的不透明度(100的话就不透明了)
    Style=样式,从0开始,1.2.3....有均匀透明啊,放射形状透明啊...
    StartX=开始透明的X坐标,基本上为图片、层的左上角(0)
    StartY= 开始透明的Y坐标,基本上也为图片、层的左上角(0)
    FinishX=结束透明的X坐标,基本上也图片、层的右下(图片、层的宽度)
    FinishY=结束透明的Y坐标,基本上也为图片、层的右下角(图片、层的高度)

    再谈一下关于清除浮动(闭合浮动元素)最简单的方法
    最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的DIV标签,来清除浮动(clear),浏览器兼容性好,没有HACKS,缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的DIV,具有语义化.
    先看代码

    <div class="wrap">
        <div id="sideright">
          <p>......</p>
        </div>
        <div id="sideleft">
        <p>......</p>
        </div>
        <div id="foot">
          <address>
          http://www.forest53.com
          </address>
        </div>
      </div>

    其中WRAP是父级容器,sideright和sideleft是左、右部分的内容,foot里放了内容,在左、右内容的下面,并在父级容器里面,起到了清除浮动DIV的作用。



    有什么能控制滚动条大小的吗?

    <div style="overflow:auto;width:200px; height:150px; zoom:0.5;">
    <div style="width:2000px; height:1500px; zoom:2;">
    有什么能控制滚动条大小的吗
    </div>
    </div>

    同时调用几个地方的外部CSS

    main.css

    @import url(font.css);
    @import url(nav.css);
    @import url(form.css);
    @import url(footer.css);
    @import url(ad.css);

    各浏览器padding、margin的差异
    margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:
    IE 6.0 Firefox Opera等是
    真实宽度=width+padding+border+margin
    IE5.X
    真实宽度=width-padding-border-margin

    解决的方法是:

    div.content {
    width:400px; //这个是错误的width,所有浏览器都读到了
    voice-family: "/"}/""; //IE5.X/win忽略了"/"}/""后的内容
    voice-family:inherit;
    width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
    }
    html>body .content { //html>body是CSS2的写法
    width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
    }

    div.content {
    width:300px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
    width(空格)/**/:400px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
    }
    html>body .content { //html>body是CSS2的写法
    width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
    }

    附上: HACK总表





    关于W3C检验时候的DIV元素封闭
    所有的标记都必须要有一个相应的结束标记
    以 前在HTML中,你可以打开许多标签,例如<p>和<li>而不一定写对应的</p>和</li>来关 闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例 如:

    <br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />

    成对的标签应有打开标签和关闭标签,例如:

    <table><tr><td> </td></tr></table>

    没有成对关闭标签的元素 都要加 /

    如:
    <base>
    <br>
    <hr>
    <img>
    <input>
    <link>
    <meta>
    <nobr>

    请问如何设置img标签图片自动适应高度?
    想请教一下,倘若我设定了img的宽度一定值,我想保持纵横比不变,高度自动适应,该如何设置CSS,能否实现?

    <style type="text/css">
    img {
    max-width: 200px;
    width:expression(this.width > 200 ? "200px" : (this.width+"px"));
    }
    </style>
    <img src="http://gg.blueidea.com/2006/gongyi/banner.jpg"/>

    10个你未必知道的CSS技巧

    本文作者是:Trenton Moss。
    发表网站是:http://www.webcredible.co.uk/。

    本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
    如果你得到原作者或原发表网站的授权,可以自由使用本翻译。

    1.CSS字体属性简写规则

    一般用CSS设定字体属性是这样做的:

    font-weight:bold;
    font-style:italic;
    font-varient:small-caps;
    font-size:1em;
    line-height:1.5em;
    font-family:verdana,sans-serif;

    但也可以把它们全部写到一行上去:

    font: bold italic small-caps 1em/1.5em verdana,sans-serif;

    真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。

    2. 同时使用两个类

    一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:

    <p class="text side">...</p>

    同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。

    补充:对于一个ID,不能这样写<p id="text side">...</p>也不能这样写

    3. CSS border的缺省值

    通常可以设定边界的颜色,宽度和风格,如:

    border: 3px solid #000

    这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。

    如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。

    4. CSS用于文档打印

    许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。

    也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:

    <link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

    第1行就是显示,第2行是打印,注意其中的media属性。

    但 应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。

    5. 图片替换技巧

    一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。

    比如你想整个卖东西的图标,你就用了这个图片:

    <h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

    这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
    <h1>Buy widgets</h1>
    但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:

    h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

    注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。

    6. CSS box模型的另一种调整技巧

    这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:

    #box { width: 100px; border: 5px; padding: 20px }

    这样调用它:

    <div id="box">...</div>

    这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

    但用CSS也可以达到同样的目的,让它们显示效果一致。

    #box { width: 150px } #box div { border: 5px; padding: 20px }

    这样调用:

    <div id="box"><div>...</div></div>

    这样,不管什么浏览器,宽度都是150点了。

    7. 块元素居中对齐

    如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:

    #content { width: 700px; margin: 0 auto }

    你会使用 <div id="content"> 来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:

    body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

    这会把网页内容都居中,所以在Content中又加入了

    text-align: left 。

    8. 用CSS来处理垂直对齐

    垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。

    CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。

    9. CSS在容器内定位

    CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:

    #container { position: relative }

    这样容器内所有的元素都会相对定位,可以这样用:
    <div id="container"><div id="navigation">...</div></div>
    如果想定位到距左30点,距上5点,可以这样:

    #navigation { position: absolute; left: 30px; top: 5px }

    当然,你还可以这样:

    margin: 5px 0 0 30px

    注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。

    10. 直通到屏幕底部的背景色

    在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:

    #navigation { background: blue; width: 150px }

    较短的导航条是不会直通到底部的,半路内容结束时它就结束了。该怎么办呢?

    不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。

    body { background: url(blue-image.gif) 0 0 repeat-y }

    此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。

    本文作者是:Trenton Moss。
    发表网站是:http://www.webcredible.co.uk/。

    本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
    如果你得到原作者或原发表网站的授权,可以自由使用本翻译。





    常用CSS缩写语法总结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:

    颜色
    16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:

    #000000可以缩写为#000;#336699可以缩写为#369;

    盒尺寸
    通常有下面四种书写方法:

    property:value1; 表示所有边都是一个值value1;
    property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
    property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
    property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
    方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
    margin:1em 0 2em 0.5em;

    边框(border)
    边框的属性如下:

    border-width:1px;
    border-style:solid;
    border-color:#000;
    可以缩写为一句:border:1px solid #000;

    语法是border:width style color;

    背景(Backgrounds)
    背景的属性如下:

    background-color:#f00;
    background-image:url(/oblog/background.gif);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:0 0;
    可以缩写为一句:background:#f00 url(/oblog/background.gif) no-repeat fixed 0 0;
    语法是background:color image repeat attachment position;
    你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
    color: transparent
    image: none
    repeat: repeat
    attachment: scroll
    position: 0% 0%

    字体(fonts)

    字体的属性如下:

    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:1em;
    line-height:140%;
    font-family:"Lucida Grande",sans-serif;
    可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

    注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

    列表(lists)

    取消默认的圆点和序号可以这样写list-style:none;,

    list的属性如下:

    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(/oblog/image.gif);
    可以缩写为一句:list-style:square inside url(/oblog/image.gif);
    展开全文
  • CSS+DIV

    千次阅读 2013-09-23 20:23:04
    一、DIV+CSS基本介绍: DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,可实现网页页面内容与...
  • CSS实现div放英文字母或数字自动换行 CSS一行排不下自动打断换行在div css布局中,遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。这里DIVCSS5为大家介绍使用...
  • CSSDIV定位

    千次阅读 2012-08-11 17:51:03
    网上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却带来了“div 套 div”的缺点,过量使用...
  • CSS设置div高度自适应

    万次阅读 2018-12-18 09:55:41
    通过CSS实现Div高度自适应: 问: 在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高 或 怎样实现同行div按照内容最多的那个设置高度。 如图:     实现1:添加表格特性 方式: 父级...
  • CSS+div页面排版

    千次阅读 热门讨论 2016-01-08 17:13:42
    CSS排版过程:首先在整体上进行<div>标记分块,然后进行CSS定位,最后添加相应的内容,如果网页是拓扑结构,则可以修改CSS属性进行重新定位即可。
  • div + css 详解

    千次阅读 2011-11-28 13:55:47
    Div+CSS 布局大全》 整理者:Jesse Zhao 网站:http://JesseZhao.cnblogs.com 送给我最爱的女朋友蜜蜜,希望她可以永远快乐幸福!!! 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 ...
  • CSS div float IE和FireFox的兼容性问题

    千次阅读 2008-05-22 13:45:00
    在IE中,只有指定该DIV的CLASS为FLOAT:left 才会有FLOAT属性而在FF中,第一个指定后 其后的div也随着平移,所以可以在同级的float加上.clear{ clear:both;} , CSS中 height: 19px !important; height: 21px; 在IE...
  • CSS+DIV页面布局

    千次阅读 2011-08-24 19:17:38
    CSS+DIV页面布局   利用HTML表格和无数字体标签来组织和修饰基于Web的内容的时代正在走向没落。近一段时期来,层叠样式表(CSS)和层(div)结合使用,进行网页布局正在填补布局这一功能。 一、页面布局与...
  • 着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,掌握CSS+DIV的精髓;还详细讲解了其他书中较少涉及的技术细节,最后给出了5个常见类型的完整网页的 综合实例,让读者进一步巩固...
  • 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 1.2实例 .div1 { background-color: green; } .div2 { b
  • 标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 第十天 div+css网页标准布局实例教程一 今天学习 十天学会web标准(div+css)的最后一个章节本章节把前面学习的零碎内容串联...
  • CSS+DIV网页样式与布局从入门到精通》全面系统地讲解了CSS基础理论和实际运用技术,通过大量实例对CSS应用进行深入浅出的分析。全书主要内容包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等...
  • CSSDiv文字居中

    千次阅读 2011-09-30 15:37:36
    设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后div一个 over-flow: hidden ,让超出的部分隐藏. 这种方法支持块级和内联极元素以及所有的浏览器,
  • 随着Web 2.0的大潮席卷而来,网页标准化CSS+DIV的设计方式正逐渐取代传统的表格布局模式,对CSS的学习也成为设计人员的必修课。  本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行...
  • CSS+DIV之强化border属性

    千次阅读 2009-07-02 09:54:00
    今天在百度搜索引擎发现了“CSS+DIV”关键词排名从第一页跌到第四页,感觉到蛮可惜的。究其原因应该是好久没有更新依葫芦画瓢学CSS+DIV系列文章造成的,原来计划教程可以与我修改网易版首页共同更新,但首页提前完成...
  • 上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮,里头关键的技术就在于活用边框宽度和div本体宽高,因此这篇再加码一个效果,就是纯粹利用CSS,让“单一个”div,从正三角形变换为正...
  • css控制div自动换行

    千次阅读 2009-05-20 17:15:00
    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-...
  • 前端基础——CSS+DIV布局

    千次阅读 热门讨论 2014-10-30 00:52:08
    CSS+DIV布局,就是在整体上用<div>标记把页面分为若干个块,然后对各个<div>块进行CSS定位,最后再在各个块中添加相应内容。 就如建造一座钢结构的建筑物似的,先把整个网页的框架搭建起来,再分别对局部进行细化...
  • 着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,掌握CSS+DIV的精髓;还详细讲解了其他书中较少涉及的技术细节,最后给出了5个常见类型的完整网页的 综合实例,让读者进一步巩固...
  • 着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,掌握CSS+DIV的精髓;还详细讲解了其他书中较少涉及的技术细节,最后给出了5个常见类型的完整网页的 综合实例,让读者进一步巩固...
  • 着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,掌握CSS+DIV的精髓;还详细讲解了其他书中较少涉及的技术细节,最后给出了5个常见类型的完整网页的 综合实例,让读者进一步巩固...
  • 着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,掌握CSS+DIV的精髓;还详细讲解了其他书中较少涉及的技术细节,最后给出了5个常见类型的完整网页的 综合实例,让读者进一步巩固...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 174,192
精华内容 69,676
关键字:

cssdiv最后