CSS 自动背景布局

最新推荐文章于 2022-05-14 14:25:31 发布
最新推荐文章于 2022-05-14 14:25:31 发布
阅读量315 收藏
点赞数
分类专栏： CSS 文章标签： css class div button border xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu_zhongjie/article/details/4502212
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片背景自适应</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}
html{background:#FFFFFF;}
body{text-align:left;font:normal 12px/1.6em simsun, Verdana, Lucida, Arial, Helvetica, sans-erif;color:#353535;padding:130px;}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;text-align:left;}
th,td{border-collapse:collapse;}
ol,ul{list-style:none;}
a {text-decoration:none;color:#353535;}
a:hover{color:#CD0102;}
input,select,form img,button{vertical-align:middle;}
button{border:0;cursor:pointer;}
img{border:0;display:block;}
em{font-style:normal;}
.cl{clear:both;}
 
.box{float:left;padding:11px 0 0 11px;background:url(/jscss/demoimg/200907/right.gif) no-repeat right top;overflow:hidden;position:relative;}
.bg_t{width:11px;height:100%;position:absolute;left:0;top:0;background:url(/jscss/demoimg/200907/left.gif) no-repeat left top;margin-bottom:-32767px;padding-bottom:32767px;/*高度自适应BUG*/}
.bg_b{height:11px;width:11px;background:url(/jscss/demoimg/200907/left.gif) no-repeat left bottom;position:absolute;left:0;bottom:0;}
.box img, .box p{padding:0 11px 11px 0;background:url(/jscss/demoimg/200907/right.gif) no-repeat right bottom;}
-->
</style>
</head>
 
<body>
<div class="box">
 <div class="bg_t"></div>
 <img src="http://www.baidu.com/img/baidu_logo.gif">
 <div class="bg_b"></div>
</div>
<div class="box">
 <div class="bg_t"></div>
 <img src="http://www.codefans.net/images/logo.gif" />
 <div class="bg_b"></div>
</div>
<div class="cl"></div>
<div class="box">
 <div class="bg_t"></div>
 <p>源码爱好者（CodeFans.net）提供各类编程源码、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</p>
 <div class="bg_b"></div>
</div>
</body>
</html>

liu_zhongjie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简易轮播图
Akui1997的博客
04-24 775
简单的轮播图写法，下面是html+css部分 <style> *{ margin: 0; padding: 0; list-style: none; font-family: "微软雅黑"; } .banner{ width: 730px; height: 457px; margin: 0 auto; position: re...
CSS 背景
小赛赛爱吃肉
04-02 3170
文章目录background-colorbackground-imgbackground-repeatbackground-positionbackground-attachment以下属性是 CSS3 新增的内容background-sizebackground-originbackground-clipbackground 简写属性[点我查看CSS背景相关的所有API](https://dev...
在只修改CSS代码的前提下，完成图中的要求。
King的博客
07-03 160
观察下面的代码 把上面的图案通过修改CSS代码，转变成下面的图案： 方法一 给 .one 设置 flex 布局 *{ margin: 0; padding: 0; } .one{ background-color: grey; display: flex; } .one .inner1,.one .inner2{ width: 100px; height: 100px; bac...
原生JS实现轮播图效果
M_linear的博客
05-14 172
原生js实现轮播效果演示style部分html部分js部分 演示 style部分 *{ margin: 0; padding: 0; } html,body{ height: 100%; } ul,ol,li{ list-style: none; } ul>li:nth-child(1){
CSS背景
MOOG007的博客
08-17 725
通过CSS背景属性，可以给页面元素添加背景样式 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等 背景颜色 background-color属性定义了元素的背景颜色 一般情况下 background-color的默认值是transparent（透明），我们可以手动指定背景颜色为透明 CSS背景 超大背景图片将图片中核心内容显示在盒子中间，两侧看不见了，但是屏幕变大后会看见两侧的部分 背景图片的应用：小的装饰图片、超大背景图片 视差滚动 .
CSS新特性:圆角边框多栏Gird布局背景设置
09-27
本文将深入探讨三个重要的CSS3特性：圆角边框、多栏布局以及背景设置，它们极大地提升了网页的视觉效果和用户体验。 首先，圆角边框是CSS3引入的一项革命性变化。在Web2.0时代，为了实现圆角效果，开发者需要使用...
使用CSS Grid布局实现网格的流动
09-25
在CSS Grid布局中，当一个容器元素声明为grid时，容器内的所有子元素会自动成为网格项（grid items）。如果没有为这些网格项指定确切的位置，浏览器会自动进行布局排列，这个过程被称作网格的流动（flow）。网格的...
CSS网页布局实例 常见的12种网页布局
12-08
4. **响应式布局**：随着设备尺寸变化而自动调整布局，确保在不同设备上都能提供良好的用户体验。 5. **动态菜单布局**：菜单随滚动条移动而固定在屏幕顶部，使用户在浏览页面时始终保持可见，提高导航便捷性。 6....
自适应屏幕的CSS响应式布局设计技巧总结
12-13
响应式设计（Responsive Design）则更为动态，它利用流式布局（Fluid Grids）、灵活的图片和媒体查询（Media Queries）等技术，使网页内容可以根据屏幕宽度自动调整。Ethan Marcotte在2010年提出的这一概念，旨在...
多列布局的艺术：CSS多列布局完全指南
最新发布
07-24
CSS 的核心功能涵盖了布局控制、颜色与背景设置、字体样式、边框与边距设定、响应式设计以及动画和过渡效果的添加。其中，多列布局作为一项强大的工具，被广泛应用于各类网页设计中，特别是在需要展现类似报纸或杂志...
CSS 获取浏览器尺寸
liu_zhongjie的专栏
05-11 6406
更新个代码，顺便算是个简单的教学。在以前的代码中, 对贴子中超过746像素宽的图像自动调整为746大小。现在用宽屏显示器的越来越多，需要将ubbshow.js中的图像重绘代码作些修改，使图像大小随屏幕大小及不同的css风格自动调整。该代码运行的前提是先为headerbg样式指定个ID名,也就是把header.asp中的class=headerbg之前加上一句id=headerbg, 这样后
鼠标经过图片由灰色变彩色
liu_zhongjie的专栏
08-31 1219
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">CSS 图片由灰色变彩色*{margin:0;padding:0;}img{border:0;}#container{margin:20px auto;width:960px;overflow:hidden;}#frmsear
CSS 背景渐变
liu_zhongjie的专栏
08-29 1074
渐变背景var setGradient = (function(){//private variables;var p_dCanvas = document.createElement(canvas);var p_useCanvas = !!( typeof(p_dCanvas.getContext) == function);var p_dCtx = p_useCanvas?
一个网页选择框效果代码
liu_zhongjie的专栏
08-29 987
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> #rectBox {  background:#CCFFFF;  border:2px solid #0099FF;  filter:alpha(opacity=30);  opacity:0.3;  position:ab
js拖拉缩放效果
liu_zhongjie的专栏
08-29 899
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">拖拉缩放效果var isIE = (document.all) ? true : false;var $ = function (id) { return "string" == typeof id ? document.ge
点击弹出层
liu_zhongjie的专栏
08-29 889
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">模拟ightbox提示框DEMO*{   margin:0;   padding:0;}body{   background-color:#FFF;   color:#000;   text-align:center;   f
支付宝动态弹出层效果
liu_zhongjie的专栏
08-29 784
支付宝 - 网上支付 安全快速！https://img.alipay.com/img/icon/favicon.ico" type=image/x-icon rel=icon>https://img.alipay.com/img/icon/favicon.ico" type=image/x-icon rel="shortcut icon">https://img.alipay.com/css/em
鼠标悬停弹出层
liu_zhongjie的专栏
08-29 737
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Untitled Document    *{margin:0; padding:0;}    body{font-size:12px; font-family:"Times New Roman", Times, serif;
CSS强制等比例缩小图片
liu_zhongjie的专栏
08-31 653
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">css等比例缩小图片body {text-align: center;margin: 20px auto;padding: 0px;font-size:14px;color:red}#pic{  margin:5px auto
企业项目实战：div+css标准布局教程
使用CSS为各个id添加样式，比如设置header、nav、main和side的宽度和高度，以及背景颜色、字体等。同时，还要注意响应式设计，确保在不同设备上页面的美观和可用性。对于居中的效果，可以通过设置`display: flex`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值