`
japankn
  • 浏览: 213270 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

div+css定位取图

 
阅读更多

<!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>无标题文档</title>
        <style type="text/css">
         .toolbar1{
    border:#CCCCCC solid;
    background-image: url(advtoolbarbg.png);
    width:888px;
    height:60px;
    background-repeat:repeat-x;
   }
   .toolbar1 .submit1{
    border:#CCCCCC solid;
    background-image:url(submit_blog_btn.gif);
    width:81px;
    height:49px;
    position:relative;
    background-repeat:no-repeat;
    background-position:-86px 0px;/*负值向右边移动*/
    margin-top:2px;
    margin-left:2px;
    cursor: pointer;
   }
   .toolbar2{
    border:#CCCCCC solid;
    background-image: url(advtoolbarbg.png);
    width:888px;
    height:37px;
    background-repeat:repeat-x;
    z-index:1;
   }
   .toolbar2 .submit2{
    border:#CCCCCC solid;
    background-image:url(submit_blog_btn.gif);
    width:81px;
    height:22px;
    background-repeat:no-repeat;
    background-position:0px 0px;
    margin-top:2px;
    margin-left:2px;
    cursor: pointer;
   }
        </style>
    </head>
   
    <body>
        <div class="toolbar1">
         <div class="submit1"></div>
        </div>
        <br/>
        <div class="toolbar2">
         <div class="submit2"></div>
        </div>
    </body>
</html>

 

  • 大小: 4 KB
分享到:
评论

相关推荐

    DIV+CSS基础教程

    - 在XHTML网站设计标准中,表格定位技术被逐步淘汰,取而代之的是使用DIV+CSS进行布局。这种方式遵循W3C组织制定的标准,确保网站的长期可持续性和兼容性。 - **HTML与XHTML的发展:** - HTML自HTML 4.01之后,...

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`&lt;div&gt;`元素是一...

    DIV+CSS DIV居中布局

    总的来说,`DIV+CSS`的居中布局有多种实现方式,选择哪种方法取决于具体的需求和浏览器兼容性考虑。随着现代浏览器对Flexbox和Grid的支持日益增强,它们已经成为实现居中布局的首选方法。然而,对于老版本浏览器,`...

    div+css切图实例3

    总的来说,“div+css切图实例3”旨在通过实际操作教授如何将设计图转换为网页元素,运用`div`和CSS的组合,创建出符合设计要求且具有良好用户体验的网页。在这个过程中,理解`div`的使用、熟练掌握CSS的布局和样式...

    2天驾驭DIV+CSS(全新发布2.0.3版本)

    这导致很多网页开发者误以为仅使用DIV进行布局就能够符合W3C的标准,但实际上,是否符合W3C标准取决于网页代码是否遵循了相应规范,而不仅仅是布局方法。 ### W3C标准简介 在纠正了概念误区之后,文档引导读者了解...

    div+css制作的弹出菜单

    在网页设计领域,`div` 和 `css` 是构建页面布局和样式的重要工具。`div`(division)是HTML中的一个块级元素,用于组织页面结构,而`CSS`(Cascading Style Sheets)则是样式表语言,用来描述HTML或XML(包括如SVG...

    Div+CSS布局页面

    Div+CSS布局页面是现代网页设计的主流技术,它的核心在于使用HTML的Div标签结合CSS样式来实现页面的布局和定位。Div是一个HTML容器对象,主要用于划分页面的各个区域,而CSS则是用来定义这些区域的样式和位置。这种...

    Div+CSS布局居中.pdf

    总的来说,Div+CSS布局居中涉及多种CSS技巧和策略,选择哪种方法取决于具体需求、浏览器兼容性和项目的复杂性。随着CSS规范的发展,现代布局方法如Flexbox和Grid提供了更强大、更简洁的居中解决方案。

    用div+css模拟表格对角线

    在网页设计中,使用`div`和`CSS`来模拟表格对角线是一种常见的技术,尤其是在需要自定义样式或者在不支持`&lt;table&gt;`元素的环境中。本篇将详细讲解如何利用`div`和`CSS`实现这一效果,并通过提供的`demo.html`文件中的...

    HTML+CSS总结.doc

    CSS 的 div 元素默认情况下,一行只能容纳一个 div 标签。无论宽度多小,一行始终只有一个 div 标签。 margin-left 属性和 margin-right 属性分别设置 div 的左右边距,当设置 div 左外边距和右外边距的值为 auto ...

    Div+CSS 规则整理 提高效率

    【Div+CSS 规则整理】提高前端开发效率的关键在于合理地组织和使用CSS规则。以下是一些关于CSS高效编码的要点: 1. **边距缩写规则**:在设置元素的边距时,可以使用简写形式。例如,`margin: 1px 2px 3px 4px` ...

    网页设计中的常见问题及其解决方法(div+css)

    十五、margin 取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用 left:XXpx 这个属性。 知识点:margin 的使用、绝对定位和相对定位 十六、绝对定位时使用 ...

    使用DIV+CSS布局网站的优点和缺陷分析

    4. **并非SEO的万能解决方案** - 虽然CSS布局有助于优化,但网站是否对搜索引擎友好主要取决于内容质量、结构和链接策略,而非仅仅依赖于是否使用了DIV+CSS。实际上,很多表格布局的网站在搜索引擎排名中仍然表现...

    DIV+CSS中让布局、背景图片、文字内容居中的方法

    在使用DIV+CSS进行网页设计时,让页面布局、背景图片以及文字内容居中是十分重要的布局技巧,它直接影响到页面的美观程度和用户体验。通过CSS属性设置居中既可以简单又可以复杂,具体取决于页面的结构和内容。 首先...

    情人节程序员用HTML网页表白【全屏3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

    - **DIV+CSS布局**:利用`div`元素和CSS来实现网页布局,如使用`position`属性定位元素。 - **响应式设计**:通过媒体查询(Media Queries)实现不同屏幕尺寸下的适配,使网页在不同设备上都能获得良好的用户体验。 ...

    使用Div+CSS纯图片实现圆角矩形的方法小结

    在网页设计中,使用Div+CSS纯图片实现圆角矩形是一种常见的技术,尤其是在CSS3的圆角边框属性还未普及或需要兼容老版本浏览器时。这种方法通过巧妙地利用图片和CSS布局,能够创建出带有圆角的效果。下面将详细阐述几...

    div+css如何实现页脚的置底

    ### 如何使用div+css实现页脚的置底效果 在网页设计中,将页脚固定在页面底部是一项常见的需求。这种布局不仅美观,还能提供更好的用户体验,因为无论页面滚动到何处,用户都能轻松找到底部的导航或联系信息。本文...

    Div+CSS对HTML的table表格定位用法实例

    关于css定位有很多文章讲述: 如果有一个元素div ,他的position属性设置为absolute,那么这个div 的位置取决于其父元素中position值设置为relative的元素。如果在其父元素中没有一个元素的position值是relative、...

    DIV+CSS 清除浮动常用方法总结

    在网页设计中,`DIV+CSS` 是一种常见的布局方式,它通过定义`div`元素的样式来构建页面结构。浮动(`float`)是 CSS 中一个关键的概念,用于实现元素的定位,常用于创建多列布局。然而,浮动元素会脱离正常的文本流...

Global site tag (gtag.js) - Google Analytics