问答首页 → Web前端技术
0 0

DIV的样式CSS5

<html>
<head>
<style type="text/css">
#outerBox{
	width:100px;
	height:100px;
	border:1px black solid;
	text-align:center;	
}
</style>
<script type="text/javascript">
function clickdiv(){
	var myImg = document.getElementById("outerBox");
	myImg.style.cssText="background:url('1.jpg') no-repeat 2 2"
}

</script>
</head>
<body>
	<div id="outerBox" onclick="clickdiv();">jjbjbj</div>
	<div id="outerBox" onclick="clickdiv();">jjbjbj</div>
</body>

 如何让2个DIV不换行呀？


问题补充：
可以并排了。float: left;但是挨在一起了。怎么让它有点间距呀
问题补充：
   <div id="outerBox" onclick="clickdiv();">右拇</div>  
   <div id="outerBox" onclick="clickdiv();">右食</div>
   <div id="outerBox" onclick="clickdiv();">右中</div> 
   <div id="outerBox" onclick="clickdiv();">右环</div>
   <div id="outerBox" onclick="clickdiv();">右小</div>
  
   <div id="outerBox" onclick="clickdiv();">左拇</div>
   <div id="outerBox" onclick="clickdiv();">左食</div> 
   <div id="outerBox" onclick="clickdiv();">左中</div>
   <div id="outerBox" onclick="clickdiv();">左环</div> 
   <div id="outerBox" onclick="clickdiv();">左小</div>
不好意思。我没一下说整。要是2排呢？
问题补充：
我对DIV和CSS真的不熟悉。还没弄好。不行呀？谢谢大家
CSS 
2009年3月24日 13:26

11个答案 按时间排序 按投票排序

0 0

采纳的答案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.outerBox{
	width:100px;
	height:100px;
	border:1px black solid;
	text-align:center;	
		float:left;
		margin-right:20px;   /* 右间距 */
		margin-bottom:20px;  /* 下间距 */
}
.bg{
	background:url('test.gif') no-repeat 2px 2px;
}
</style>
<script type="text/javascript">
function clickdiv(obj){
	obj.className+=' bg';
}

</script>
</head>
<body>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div style="clear:both;"></div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
</body>

2009年3月24日 14:28
0 0 

 
<body>  
	
   <div style="float: left;" id="outerBox" onclick="clickdiv();">a</div>  
   
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右拇</div>  
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右食</div>
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右中</div> 
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右环</div>
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">右小</div>
  
     <div style="float: left;" id="outerBox" onclick="clickdiv();">
   <div style="float: left;" id="outerBox" onclick="clickdiv();">左拇</div>
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">左食</div> 
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">左中</div>
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">左环</div> 
   <div style="float: left;"  id="outerBox" onclick="clickdiv();">左小</div> 
   </div>  
 </body>

2009年3月24日 14:15
0 0 

 
<body>  
	
   <div style="float: left;" id="outerBox" onclick="clickdiv();">a</div>  
   
   <span id="outerBox" onclick="clickdiv();">右拇</span>  
   <span id="outerBox" onclick="clickdiv();">右食</span>
   <span id="outerBox" onclick="clickdiv();">右中</span> 
   <span id="outerBox" onclick="clickdiv();">右环</span>
   <span id="outerBox" onclick="clickdiv();">右小</span>
  
     <div style="float: left;" id="outerBox" onclick="clickdiv();">
   <span id="outerBox" onclick="clickdiv();">左拇</span>
   <span id="outerBox" onclick="clickdiv();">左食</span> 
   <span id="outerBox" onclick="clickdiv();">左中</span>
   <span id="outerBox" onclick="clickdiv();">左环</span> 
   <span id="outerBox" onclick="clickdiv();">左小</span> 
   </div>  
 </body>

2009年3月24日 14:12
0 0


2排之间 加一个空的 <div></div>也可以

2009年3月24日 14:10
0 0


不好意思,上面的代码有点问题,给你一个完整的比较标准的代码. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.outerBox{
	width:100px;
	height:100px;
	border:1px black solid;
	text-align:center;	
		float:left;
		margin-right:20px;   /* 右间距 */
}
.bg{
	background:url('test.gif') no-repeat 2px 2px;
}
</style>
<script type="text/javascript">
function clickdiv(obj){
	obj.className+=' bg';
}

</script>
</head>
<body>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv(this);">jjbjbj</div>
</body>

2009年3月24日 13:52
0 0 


<html>
<head>
<style type="text/css">
.outerBox{
	width:100px;
	height:100px;
	border:1px black solid;
	text-align:center;	
        float:left;
        margin-right:20px;   /* 右间距 */
}
</style>
<script type="text/javascript">
function clickdiv(){
	this.style.cssText="background:url('1.jpg') no-repeat 2 2"
}

</script>
</head>
<body>
	<div class="outerBox" onclick="clickdiv();">jjbjbj</div>
	<div class="outerBox" onclick="clickdiv();">jjbjbj</div>
</body>

2009年3月24日 13:42
0 0 

<div>a</div>&nbsp;&nbsp;&nbsp;&nbsp;<div>b</div>

2009年3月24日 13:42
0 0


看来是初学div+css的,几个基本的问题需要知道的...

1. 给html加上dtd标志,就是document type

2. 页面上的id不要重复用,你这里2个都用id,outerBox这是很不规范的,因为id的含义表示它是唯一的,如果id不唯一,在js里面调用就会出问题.你的js使用了getElementById,它只会返回一个元素,你很快就会发现,为什么一个点击了有效果,另一个点击却没效果?

3.

<div id="outerBox" onclick="clickdiv();">

这里已经有了句柄,你在js

# var myImg = document.getElementById("outerBox"); 
#     myImg.style.cssText="background:url('1.jpg') no-repeat 2 2" 

直接使用 

 function clickdiv(){  
     this.style.cssText="background:url('1.jpg') no-repeat 2 2"  
 }



2009年3月24日 13:40
0 0 

 
<body>  
	
   <div style="float: left;" id="outerBox" onclick="clickdiv();">jjbjbj</div>  
     <div id="outerBox" onclick="clickdiv();">jjbjbj</div>  
 </body>

2009年3月24日 13:32
0 0


...这么简单的问题..刚入门是吗...

div肯定换行,不换行的方法很多 .

1:浮动

# #outerBox的css里面再加一个float:left

2.不用div,改成span

3......

2009年3月24日 13:32
0 0

float: left;

http://zhidao.baidu.com/question/69685042.html

2009年3月24日 13:31

相关推荐

    DIV+CSS漂亮的样式

    本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例，特别是3D按钮和层模拟窗口移动的效果，这些都是现代网页设计中非常流行和实用的元素。 首先，3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...

    DIV 样式 CSS 各种属性 JavaScript 中会用到的CSS

    CSS（层叠样式表）是赋予这些DIV样式的重要工具。以下是关于DIV样式中的一些关键CSS属性及其详细说明： 1. **Height** 和 **Width**: `height` 属性定义了DIV的高度，`width` 则定义了宽度。例如： ```css div { ...

    div+css布局制作箭头步骤流程样式 - div+css教程

    在网页设计领域，`div+css`是一种常用的技术，用于实现页面布局和样式控制。`div`元素作为容器，能够包裹其他HTML元素，而CSS（层叠样式表）则负责定义这些元素的外观和位置。在本教程中，我们将深入探讨如何使用`...

    Div+CSS网页样式与布局从入门到精通 实例

    在网页设计领域，Div+CSS是构建网页布局和样式的主流技术。本教程"Div+CSS网页样式与布局从入门到精通"旨在帮助初学者掌握这一核心技术，通过实例深入理解其工作原理和应用技巧。下面将详细介绍Div和CSS的基础概念、...

    div+CSS购物网站模板

    "Div+CSS购物网站模板"是一种常见的网页设计方式，它结合了HTML的结构与CSS的样式，用于构建高效、美观且响应式的电商网站。在这个专题中，我们将深入探讨Div+CSS在购物网站模板中的应用，以及它对于网页设计的重要...

    div+css布局制作横向带箭头步骤流程样式

    在网页设计中，`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`&lt;div&gt;`元素作为容器来组织内容，并利用CSS（层叠样式表）来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...

    网页 样式大全集结 div+css样式

    网页样式大全集结，聚焦于`div+css样式`这一核心主题，旨在为开发者提供丰富的样式设计资源和指导。`div`和`CSS`是构建现代网页界面不可或缺的元素，它们一起构成了网页布局的基础。`div`是HTML中的一个块级元素，常...

    几款好看的div+css模板

    Div（Division）是HTML中的一个容器元素，用于组织和分隔网页内容，而CSS（Cascading Style Sheets）则负责定义这些Div元素的样式，包括颜色、字体、布局等，使得页面设计更加灵活和可维护。以下是对标题和描述中...

    经典DIV+CSS模板 经典DIV+CSS模板

    综上所述，这个压缩包提供的是一套基于Web标准的、使用&lt;div&gt;和CSS进行布局和样式的网页设计模板集合，涵盖了基本页面、博客、表格、笔记和表单等多种场景。通过学习和应用这些实例，开发者可以提升其在网页布局和...

    Table转div+css工具

    此外，为了确保转换过程中的数据完整性和样式一致性，开发者应熟悉基本的Div和CSS知识，以便在必要时进行手动调整。 总之，“Table转div+css工具”是现代Web开发中的一款实用辅助工具，它能够帮助开发者迅速更新...

    div+css案例，网页设计

    在网页设计领域，Div+CSS是一种常见的布局技术，它通过分离结构（HTML）和样式（CSS）来提高网页的可维护性和可访问性。本文将深入探讨Div+CSS的基础概念，以及如何通过它们来构建网页。 Div（层）是HTML中的一个...

    搜集整理100套DIV+CSS网站样式模板

    【标题】：“搜集整理100套DIV+CSS网站样式模板” 这100套DIV+CSS网站样式模板集合是一个宝贵的资源库，旨在为网页设计师和开发者提供丰富的设计灵感和实用的代码示例。DIV+CSS是现代网页布局的基础，通过使用HTML...

    Div+CSS 样式的使用演示

    Div（Division）是HTML中的一个块级元素，用于对网页内容进行区域划分，而CSS（Cascading Style Sheets）则是用来控制这些区域样式和布局的重要工具。本教程通过实例详细讲解Div+CSS的使用方法。 首先，Div标签在...

    DIV+CSS样式模板

    【标题】"DIV+CSS样式模板"所涉及的知识点主要集中在网页布局和样式设计上，这是一种常见的网页开发技术，用于创建高效、灵活且易于维护的网页结构。在现代网页设计中，DIV（Division，分块）是HTML中的一个常用元素...

    div+css手册

    `div`元素本身无特定样式，但通过CSS可以对其进行样式定义，实现对网页内容的布局和美化。 CSS，即Cascading Style Sheets，是用于控制网页表现的语言，允许开发者将样式信息与内容分离。这意味着你可以更改整个...

    div+css布局大全

    通过设置`&lt;div&gt;`的类或ID属性，我们可以对多个元素进行分组，并使用CSS来定义样式或行为。`&lt;div&gt;`元素本身没有特定的语义，它的主要价值在于组织内容和应用样式。 2. **CSS（Cascading Style Sheets）**：CSS是一种...

    div+css样式与布局实例

    在网页设计领域，`div+css`是一种广泛采用的技术，用于实现高效、灵活的页面布局和样式控制。这种技术的核心是使用HTML中的`&lt;div&gt;`元素作为内容的容器，并通过CSS（Cascading Style Sheets）来定义这些容器的外观和...

    简单设计DIV+CSS模板

    每个HTML文件都会引用CSS文件，如"innerstyle.css"和"style.css"，来定义各个Div元素的样式。CSS文件通常包括颜色、字体、边距、背景、浮动、定位等属性设置，以达到理想的布局效果。 "images"文件夹则包含网页中...

    div+css div+css精通CSS

    标题与描述中提到的“div+css div+css精通CSS”这一主题，主要涉及的是网页设计与布局的核心技术——利用HTML中的div元素结合CSS样式表进行网页内容的组织与美化。接下来，我们将深入探讨这一主题所包含的关键知识点...

    DIV+CSS简单登录界面模板

    在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它通过定义不同的`Div`（Division，分块）元素并应用相应的`CSS`（Cascading Style Sheets，层叠样式表）样式来构建页面结构和外观。标题提到的“DIV+CSS简单...

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics