CSS继承问题求助

artwl_cn 2010-05-12 07:38:38
假如要设计如图网页：

图中A、B、C、D四块样式基本一样，就是位置不一样，应该不必写四个类似（只是位置不同）的DIV吧，请问如何用CSS继承特性来做！
...全文
182 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
artwl_cn 2010-05-13
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 chanxinxiaoye 的回复:]
土豆不是vc了，怎么用起css了
css继承，不像class对象的继承。页面上父子元素的继承，比如一个table背景设置成绿色，那么td也就成绿色了，你可以在指定td的颜色是红色，这样就覆盖了从table那里继承来的背景色了。
你说的平级的继承可以这样用：
.left1,.left2
{
padding:30px;
border-style:solid;
border-colo……
[/Quote]
谢谢，就是这个意思，试试去。
chanxinxiaoye 2010-05-13
  • 打赏
  • 举报
 回复
土豆不是vc了，怎么用起css了
css继承，不像class对象的继承。页面上父子元素的继承，比如一个table背景设置成绿色，那么td也就成绿色了，你可以在指定td的颜色是红色，这样就覆盖了从table那里继承来的背景色了。
你说的平级的继承可以这样用：
.left1,.left2
{
padding:30px;
border-style:solid;
border-color:red;
border-width:1px;
};
.left1
{
//定义 位置
};
.left2
{
//定义 位置
};
</style>
</head>
<body>
<div class="left">
<div class="left1">a</div>
<div class="left2">b</div>
</div>
artwl_cn 2010-05-13
  • 打赏
  • 举报
 回复
谢谢八楼，九楼的同志，你们的方法可行，我做好了：

代码：


<html>

<head>

    <title></title>

    <style type="text/css">

        body

        {

        	text-align:center;

        }

        .Contain

        {

        	text-align:left;

        	height:500px;

        	width:800px;

        }

        .example

        {

        	width:395px;

        	height:245px;

        	border:solid 1px #000000;

        }

        .one

        {

        	margin-top:0px;

        	margin-left:0px;

        	float:left;

        	border:none;

        }

        .two

        {

        	margin-top:0px;

        	margin-right:0px;

        	float:right;

        }

        .three

        {

        	margin-top:7px;

        	margin-left:0px;

        	float:left;

        }

        .four

        {

        	margin-top:5px;

        	margin-right:0px;

        	float:right;

        }

        .A,.B,.C,.D

        {

        	width:194px;

        	height:119px;

        	border:solid 1px #000000;

        }

        .A

        {

        	float:left;

        	margin-left:0px;

        	margin-top:0px;

        }

        .B

        {

        	float:right;

        	margin-right:-2px;

        	margin-top:0px;

        }

        .C

        {

        	float:left;

        	margin-left:0px;

        	margin-top:5px;

        }

        .D

        {

        	float:right;

        	margin-right:-2px;

        	margin-top:5px;

        }

    </style>

</head>

<body>

    <div class="Contain">

        <div class="example one">

            <div class="A"></div>

            <div class="B"></div>

            <div class="C"></div>

            <div class="D"></div>

        </div>

        <div class="example two"></div>

        <div class="example three"></div>

        <div class="example four"></div>

    </div>

</body>

</html>
ddcatlee 2010-05-12
  • 打赏
  • 举报
 回复
你这个不是继承的问题
如果4个div的宽度和高度是一样的，那么，在4个div外面套1个div,然后让这4个 float:left即可
----------
或者定义一个统一的class 例如.layout,再分别定义4个div的位置，.divA/.divB.....
引用的时候

<div class="layout divA"></div>
<div class="layout divB"></div>
......
jdq819 2010-05-12
  • 打赏
  • 举报
 回复
你直接写个class让a、b、c、d引用的就了啊
artwl_cn 2010-05-12
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 keeweihan 的回复:]
<div class="top"></div> top div单独设置CSS
<div class="main"> 将main DIV设置基本的CSS样式，比如 border、margin等

<div class="left"></div> left和right float设置为left
<div clas="right"> 然后right DIV里面嵌套的DIV就可以根据自己开……
[/Quote]
框架我知道怎么弄，好像回答的不是我问的哦！
keeweihan 2010-05-12
  • 打赏
  • 举报
 回复
<div class="top"></div> top div单独设置CSS
<div class="main"> 将main DIV设置基本的CSS样式，比如 border、margin等

<div class="left"></div> left和right float设置为left
<div clas="right"> 然后right DIV里面嵌套的DIV就可以根据自己开发需要来详细设置了。相
<div>a</div> 信大概框架设置好了里面的是很容易的了。
<div>b</div>
<div>c</div>
<div>d</div>
</div>

</div>
artwl_cn 2010-05-12
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 aspwebchh 的回复:]
继续好像中能继承一些字体大小之类的
背景图好像不能继承的

那你就写一个公用的 background样式

全部调用就行了

<div class="bgclass ...这里写一些其它的类"></div>
[/Quote]
谢谢哈！我以前就是这样处理的，但感觉并不好，想用CSS继承解决，期待高人哈！
挨踢直男 2010-05-12
  • 打赏
  • 举报
 回复
继续好像中能继承一些字体大小之类的
背景图好像不能继承的

那你就写一个公用的 background样式

全部调用就行了

<div class="bgclass ...这里写一些其它的类"></div>
artwl_cn 2010-05-12
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 aspwebchh 的回复:]
不一样啊 光看背景图片就不一样了 只是背景图的颜色差不多而已

<div class="top"></div>
<div class="area">
<div class="left"要加浮动></div>
<div clas="right"要加浮动>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
……
[/Quote]
是一样的，那四个是我复制的，我就样知道能不能用CSS继承来实现只写一个特定样式，然后再写四个样式继承这个特定样式，只是各自定义显示位置。
挨踢直男 2010-05-12
  • 打赏
  • 举报
 回复
不一样啊 光看背景图片就不一样了 只是背景图的颜色差不多而已

<div class="top"></div>
<div class="area">
<div class="left"要加浮动></div>
<div clas="right"要加浮动>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>

</div>
CSS初步--样式的层叠和继承
1.样式如何层叠 浏览器要显示元素时求索一个CSS属性值的次序：(1) 元素内嵌样式 (2) 文档内嵌样式 (3) 外部样式 (4) 用户样式 (5) 浏览器默认样式。元素内嵌样式、文档内嵌样式和外部样式表合称为作者样式，定义在用户样式表中的样式称为用户样式，浏览器定义的样式称为浏览器样式。2.用重要样式调整层叠次序 把样式属性值标记为重要，可以改变正常的层叠次序，例如:
聊一聊CSS的过去与未来，加深对CSS的理解
很久以前，CSS就像一阵清新的气息，只需简单轻松地为页面添加样式。它涉及设定规则，让浏览器自动处理。你可以改变边距、字体和大小，但这只是浅尝辄止，你懂的吗？真正的亮点是那个"级联"的特性，允许样式继承和覆盖其他样式，创造出一些动态、酷炫的页面。快进到今天，CSS就像网页设计的瑞士军刀。它具备了使用弹性盒子和网格来实现动画、转换和适应布局的能力，使得网页变得响应式和酷炫。从基本样式到复杂动画，CSS...
css继承
如果浏览器在直接相关的样式中找不到某个属性的值，就会求助于继承机制，使用父元素的样式属性值。 例如： Example p{color:white;background:grey;border:medium solid black; } visit the apress site i like apples and oranges. visit w3c sit
《Dreamweaver CS6 完全自学教程》笔记 第十四章：使用 CSS 设计网页
文章目录第十四章：使用 CSS 设计网页14.1 CSS 样式表简介14.2 CSS 的基本语法14.3 伪类、伪元素以及样式表的层叠顺序14.3.1 伪类和伪元素14.3.2 样式表的层叠顺序14.4 CSS 中的属性14.4.1 CSS 中的字体及文本控制14.4.2 CSS 中的颜色及背景控制14.4.3 CSS 中的方框的控制属性14.4.4 CSS 中的分类属性14.5 添加 CSS 样式表14.5.1 链接一个外部的样式表14.5.2 嵌入一个样式表14.5.3 联合使用样式表14.5.4 id
【前端圭臬】四：CSS 核心机制——如何确定一个属性的值？
CSS 的优先级、层叠与继承机制应该怎样理解？它们解决了什么问题？
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章