`

css 背景与 页面元素相结合

    博客分类:
  • css
阅读更多
代码

<div class="bgwrap">
  <div class="login_wrap">
    <div class="login_table">
     
    </div>
    <div class="login_list">
      <p align="right"><a href=" ">更多&gt;&gt;</a></p>
      <ul>
      
      </ul>
    </div>
    <div class="clear"></div>
    <div class="login_text_tip">
        <p><big>注册和登录提示:</big></p>
        <p>
        <big>1、</big><br>
        <big>2、</big> <br>
        <big>3、</big></p>
    </div>
  </div>
   
  <div class="clear_10"></div>
  <div class="copyright_mhy">版权所有</div>
</div>






注释:

最外层div css :   div class="bgwrap"
.bgwrap {
            background: url(../img/bg_02.png) center top no-repeat;
            height: 595px;
} 

center : 表示背景图片随浏览器宽度改变时,保持图片中心显示在浏览器的中心

内容div css : div class="login_wrap"
.login_wrap {
    width: 700px;
    margin: 0 auto;
    margin-top: 100px;
    height: 310px;
} 

margin : auto 使页面宽度随浏览器改变时,整个div仍能居中

这2个属性的设置,确保了 内容div 中的元素 与 最外层div 的背景,随浏览器的宽度改变时,相一致。



效果图:

结合前:




结合后:




当然,输入框 input 的 css 要设置:
.login_wrap table td input.long_mhy {
    width: 140px;
    height: 30px;
    line-height: 30px;
    margin-left: 8px;
    background: none;
    border: none;
} 

    border: none :  不显示边框(边框使用背景)
   







参考更多:

http://nodebook.info/book/view?bid=53523a3c19980e913e9be3ee





--

  • 大小: 3.6 KB
  • 大小: 7.6 KB
分享到:
评论

相关推荐

    css3背景图片页面滚动视差效果

    总的来说,CSS3背景图片页面滚动视差效果是通过结合`background-attachment`、`background-position`、`transform`等属性,以及JavaScript的滚动事件处理,创造出一种动态的视觉体验。通过合理的布局和性能优化,...

    css背景属性案例

    ### CSS背景属性详解与实践案例 #### 一、引言 在网页设计中,CSS (Cascading Style Sheets) 背景属性是用于控制页面背景的重要工具之一。通过合理运用这些属性,可以极大地增强页面的视觉效果和用户体验。本文将...

    div+css有实例,易学易懂

    - **相邻的浮动元素和固定元素**:浮动元素与非浮动元素之间的交互。 - **相邻的两个浮动元素**:它们之间的关系以及可能出现的间距问题。 - **相邻的多个浮动元素**:如何处理多个浮动元素间的布局。 #### 关于ul...

    蓝色波浪线背景CSS模板

    模板内的其他元素,如字体、颜色搭配、按钮样式等,都应该是与波浪线条背景相协调的设计,以维持整体视觉的统一性。 总的来说,"蓝色波浪线背景CSS模板"不仅展示了CSS的强大功能,也体现了设计师对用户体验和视觉...

    21.3 CSS 背景属性

    下面将详细介绍CSS背景属性的相关知识点。 1. **背景颜色 (background-color)** - `background-color`属性用于设置元素的背景颜色。可以使用颜色名称、RGB、RGBA、HSL、HSLA或者透明度(transparent)来定义。例如...

    div css background背景

    同时,`div`的背景设置也可以与其他CSS选择器结合,如类选择器 `.myDiv` 或 ID 选择器 `#myDiv`,以精确地应用样式到特定的`div`元素。 在提供的文档“div css background背景.doc”中,可能包含了更详细的代码示例...

    CSS3仿QQ浏览器官网彗星动画背景特效

    此外,可能还会用到定位(position)属性,使彗星相对于页面的其他元素进行定位,以便在背景上自由移动。 在压缩包中,`index.html`文件是整个网页的结构,它包含了HTML元素,以及引用CSS和JavaScript文件的链接。`...

    CSS-JS横向滚动倒影相册源码

    3. **样式美化**:CSS还用于设置相册的整体样式,包括边框、背景、间距、字体等,以确保与网站的其他元素保持一致的视觉风格。 接下来,我们看看JavaScript是如何配合CSS工作的。JavaScript是一种客户端脚本语言,...

    jQuery+CSS3蓝色夜空星星背景动画特效

    通过结合使用jQuery和CSS3,我们可以创建出一个富有沉浸感的蓝色夜空星星背景动画特效。这种技术不仅适用于网页背景,还可以应用于各种其他场景,如游戏界面、登陆页面等,为用户带来独特的视觉体验。

    css+div创建页面实例

    在网页设计领域,CSS(Cascading Style Sheets)与HTML的结合使用是构建现代网页布局的基础。本实例将深入探讨如何利用CSS+div技术来创建一个功能完备、响应式的页面。CSS通过定义样式规则,控制HTML元素的外观、...

    CSS3波浪形菜单 结合背景超级绚丽应用模板.zip

    总的来说,这个"CSS3波浪形菜单 结合背景超级绚丽应用模板"是HTML5和CSS3技术的精彩展示,它将前沿的网页设计趋势与实用的交互元素相结合,为开发者提供了一个构建引人入胜的网站或应用的起点。无论是初学者还是经验...

    CSS交替固定网页背景视觉差特效

    1. **定位与固定定位**:CSS中的`position`属性用于设置元素的定位方式,其中`fixed`值可以使元素相对于浏览器窗口进行定位,即使在页面滚动时,该元素也会保持在屏幕的某个位置,这是创建固定背景的基础。...

    CSS霓虹风格页面加载动画

    在霓虹加载动画中,新拟态设计可能被用来增强图形的真实感,与霓虹风格相结合,创造出独特的视觉效果。 综上所述,这个资源通过CSS的关键帧动画、伪元素以及新拟态设计的元素,成功地构建了一个具有互动性和视觉...

    纯CSS3相册效果网页特效

    CSS3,全称为层叠样式表第三版,是CSS技术的最新发展,它带来了许多增强功能,如选择器、过渡、动画、多列布局、边框与背景等,使得网页设计更为丰富和动态。 首先,我们要理解CSS3选择器的运用。在纯CSS3相册中,...

    CSS电子书 CSS电子书 三合一

    《CSS电子书 CSS电子书 三合一》是一份集大成的CSS学习资源,适合初学者和有一定基础的开发者深入理解和提升CSS技能。...记得结合实际练习和项目应用,理论与实践相结合,才能更好地掌握CSS这门强大的技术。

    jQuery和CSS3全屏3D背景图片视觉差特效

    1. **index.html**: 这是项目的主HTML文件,包含了所有页面元素和结构,包括引入jQuery库、CSS和JavaScript文件的链接。 2. **readme.html**: 提供项目说明和使用指南。 3. **jQuery之家.url**: 可能是收藏的jQuery...

    CSS 2.0 中文手册.zip

    - **定位**: `position` 属性(static、relative、absolute、fixed)控制元素相对于其正常流、父元素或其他参照点的定位方式。 - **布局模式**: CSS 2.0 包含流式布局(normal flow)、定位布局(positioning)和...

    带淡入淡出效果的纯CSS3滚动视觉差特效

    当页面滚动时,调整元素的`translateZ()`值,就可以让背景图像相对于前景元素有不同的移动速度,从而产生深度感。 ```css .parallax { perspective: 1px; } .parallax .layer { transform: translateZ(-1px) ...

    css+js打造的相册查看器

    2. **DOM操作**:JavaScript可以操作DOM(Document Object Model),动态地添加、删除或修改页面元素。在相册查看器中,这用于控制图片的显示和隐藏,以及创建弹出的预览窗口。 3. **图片加载管理**:当用户点击...

    css+js背景自适应文本长度的精美导航条

    例如,设置为`cover`可以确保背景图片始终填充整个元素,同时保持其宽高比,使得背景与导航条文本长度相匹配。 其次,JavaScript是一种客户端脚本语言,常用于增加网页的交互性。在这个项目中,JavaScript可能被...

Global site tag (gtag.js) - Google Analytics