DIV+CSS综合运用
时间: 2023-10-28 16:07:06 浏览: 38
好的,我会注意的。关于DIV CSS综合运用,可以实现很多效果,比如布局、样式等。常用的属性有position、display、float、clear、margin、padding等。以下是一个例子:
HTML代码:
```
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
```
CSS代码:
```
.container {
width: 600px;
margin: 0 auto;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box3 {
width: 200px;
height: 400px;
background-color: yellow;
clear: both;
}
```
解释一下这个例子的作用:container是一个容器,里面包含了三个盒子(box1、box2、box3)。其中box1和box2浮动在左侧,box3则被设置了clear:both,以保证不浮动。这样,就可以实现一个左侧两个等宽的盒子,右侧一个高度为左侧两个盒子高度之和的盒子了。
相关问题
综合运用html、css、javascript实现一个简易购物车静态页面
这是一个简易购物车静态页面的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<style>
/* CSS样式 */
.container {
width: 80%;
margin: 0 auto;
}
.item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.item img {
width: 100px;
height: 100px;
margin-right: 20px;
}
.item p {
margin: 0;
}
.total {
text-align: right;
margin-top: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>我的购物车</h1>
<div class="item">
<img src="item1.jpg" alt="商品1">
<p>商品名称:商品1</p>
<p>价格:$100</p>
</div>
<div class="item">
<img src="item2.jpg" alt="商品2">
<p>商品名称:商品2</p>
<p>价格:$150</p>
</div>
<div class="total">
总价:$250
</div>
</div>
<script>
// JavaScript逻辑
// 这里可以添加一些交互逻辑,比如点击商品可以跳转到商品详情页面等
</script>
</body>
</html>
```
以上是一个简单的HTML静态页面,通过CSS进行样式的设置,再通过JavaScript添加一些交互逻辑。这个页面展示了一个简单的购物车,包括商品图片、商品名称、价格以及总价。用户可以在这个页面上查看已选商品,并且可以通过JavaScript添加一些交互逻辑,比如点击商品可以跳转到商品详情页面等。这样的静态页面可以作为购物车的基础页面,之后可以通过后端逻辑实现购物车的添加、删除、结算等功能。
html双人对战源码,双人对战五子棋游戏 综合运用HTML、CSS、JavaScript实现
以下是一个基于HTML、CSS、JavaScript实现的双人对战五子棋游戏的源码,供参考:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>双人对战五子棋游戏</title>
<style>
#game {
margin: 0 auto;
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.piece {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
cursor: pointer;
}
.black {
background-color: black;
}
.white {
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="game">
<script src="game.js"></script>
</div>
</body>
</html>
```
JavaScript代码:
```
var game = document.getElementById("game");
var pieces = [];
var currentPlayer = "black";
var winner = null;
// 创建棋盘
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
var piece = document.createElement("div");
piece.className = "piece";
piece.style.left = j * 40 + "px";
piece.style.top = i * 40 + "px";
piece.addEventListener("click", play);
game.appendChild(piece);
pieces.push({
element: piece,
x: j,
y: i,
player: null
});
}
}
// 下棋
function play() {
if (winner !== null) {
return;
}
if (this.className.indexOf("black") !== -1 || this.className.indexOf("white") !== -1) {
return;
}
this.classList.add(currentPlayer);
var piece = getPieceByElement(this);
piece.player = currentPlayer;
checkWin(piece);
switchPlayer();
}
// 切换玩家
function switchPlayer() {
if (currentPlayer === "black") {
currentPlayer = "white";
} else {
currentPlayer = "black";
}
}
// 获取棋子对象
function getPieceByElement(element) {
for (var i = 0; i < pieces.length; i++) {
if (pieces[i].element === element) {
return pieces[i];
}
}
return null;
}
// 检查是否有玩家获胜
function checkWin(piece) {
var count = 0;
// 横向
for (var i = piece.x - 4; i <= piece.x + 4; i++) {
var p = getPieceByCoordinate(i, piece.y);
if (p !== null && p.player === piece.player) {
count++;
if (count === 5) {
winner = piece.player;
alert(winner + " wins!");
return;
}
} else {
count = 0;
}
}
// 纵向
for (var j = piece.y - 4; j <= piece.y + 4; j++) {
var p = getPieceByCoordinate(piece.x, j);
if (p !== null && p.player === piece.player) {
count++;
if (count === 5) {
winner = piece.player;
alert(winner + " wins!");
return;
}
} else {
count = 0;
}
}
// 正斜线
for (var i = piece.x - 4, j = piece.y - 4; i <= piece.x + 4; i++, j++) {
var p = getPieceByCoordinate(i, j);
if (p !== null && p.player === piece.player) {
count++;
if (count === 5) {
winner = piece.player;
alert(winner + " wins!");
return;
}
} else {
count = 0;
}
}
// 反斜线
for (var i = piece.x - 4, j = piece.y + 4; i <= piece.x + 4; i++, j--) {
var p = getPieceByCoordinate(i, j);
if (p !== null && p.player === piece.player) {
count++;
if (count === 5) {
winner = piece.player;
alert(winner + " wins!");
return;
}
} else {
count = 0;
}
}
}
// 根据坐标获取棋子对象
function getPieceByCoordinate(x, y) {
for (var i = 0; i < pieces.length; i++) {
if (pieces[i].x === x && pieces[i].y === y) {
return pieces[i];
}
}
return null;
}
```
CSS代码:
```
.piece.black {
background-color: black;
}
.piece.white {
background-color: white;
border: 1px solid black;
}
```
以上代码实现了一个简单的双人对战五子棋游戏,玩家可以通过点击棋盘上的空位下棋,游戏会自动判断是否有玩家获胜。该代码中使用了HTML、CSS和JavaScript技术,可以通过浏览器打开运行。