关于一道div+css 网站首页布局的课后作业_html/css

回复讨论(解决方案)

首页

web前端

html教程

关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:58 AM

布局网站首页

<html><head >	<style>		.headbox{			width:25%;			height:15%;			margin:0.5%;			border:solid 1px;			float:left;		}		.headbox2{			width:46.5%;			height:15%;			margin:0.5%;			border:solid 1px;			float:left;		}		.daohang{			clear:both;			//width:inherit;			width:98.5%;			height:5%;			margin:0.5%;;			border:solid 1px;		}		.bodybox{			width:73%;			//height:73%;			height:55%;			margin:0.5%;			border:solid 0px;			float:left;		}		.neikuang1{			width:49%;			height:49%;			margin-right:1.5%;			border:solid 1px;			float:left;		}		.neikuang2{			width:49%;			height:49%;			margin:0%;			border:solid 1px;			float:left;		}		.neikuang3{			width:23%;			height:49%;			margin-right:1.5% 1.5% 0 0;			border:solid 1px;			float:left;		}		.neikuang4{			width:23%;			height:49%;			margin:1.5% 0 0 0;			border:solid 1px;			float:left;		}		.fukuang{			width:24.5%;			height:55%;			margin:0.5%;			border:solid 0px;			float:left;		}				.fu1{			width:99%;			height:31%;			margin:0px;			border:solid 1px;			float:top;		}		.fu2{			width:99%;			height:31%;			margin:3.5% 0 0 0;			border:solid 1px;			float:top;		}		.foot{			width:99%;			height:10%;			margin:0.5px;			border:solid 1px;			float:left;		}	</style></head>		<body>		<div class="headbox">框（一）</div>		<div class="headbox2">框（二）</div>		<div class="headbox">框（三）</div>		<div class="daohang">框（导航）</div>		<div class="bodybox">			<div class="neikuang1">栏目一</div>			<div class="neikuang2">栏目二</div>			<div class="neikuang3">栏目三</div>			<div class="neukuang3">栏目四</div>			<div class="neikuang3">栏目五</div>			<div class="neikuang4">栏目六</div>		</div>		<div class="fukuang">			<div class="fu1">栏目七</div>			<div class="fu2">栏目八</div>			<div class="fu2">栏目九</div>		</div>		<div class="foot"></div>	</body></html>

登录后复制

栏目一

栏目二

栏目三

栏目四

栏目五

栏目六

这个地方老是布局不好，求指导。

回复讨论(解决方案)

图片为要求完成的样子。

你的position 呢。float呢。

float 有的啊，position没教吧。好像不需要的样子

过前端板块问吧，毕竟那边的人专业一些。

栏目一

栏目二

栏目三

栏目四

栏目五

栏目六

.neikuang1, .neikuang2 {
float:left;
}
.neikuang1 {
width:49%;
height:49%;
margin-right:1.5%;
border:solid 1px;
}
.neikuang2 {
width:23%;
height:49%;
margin-right:1.5% 1.5% 0 0;
border:solid 1px;
}

<div class="bodybox">    <div class="neikuang1">栏目一</div>    <div class="neikuang1">栏目二</div>    <div class="neikuang2">栏目三</div>    <div class="neukuang2">栏目四</div>    <div class="neikuang2">栏目五</div>    <div class="neikuang2">栏目六</div></div>.neikuang1, .neikuang2 {    float:left;}.neikuang1 {    width:49%;    height:49%;    margin-right:1.5%;    border:solid 1px;}.neikuang2 {    width:23%;    height:49%;    margin-right:1.5% 1.5% 0 0;    border:solid 1px;}

登录后复制

相同的div 就用一个class 你这个css代码太冗余了

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7698

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

有什么学c语言的网站 Jan 30, 2024 pm 02:38 PM

学c语言的网站：1、C语言中文网；2、菜鸟教程；3、C语言论坛；4、C语言帝国；5、脚本之家；6、天极网；7、红黑联盟；8、51自学网；9、力扣；10、C Programming。详细介绍：1、C语言中文网，这是一个专门为初学者提供C语言学习资料的网站，内容丰富，包括基础语法、指针、数组、函数、结构体等多个模块；2、菜鸟教程，这是一个综合性的编程学习网站等等。

如何设置谷歌浏览器首页 Mar 02, 2024 pm 04:04 PM

如何设置谷歌浏览器首页？谷歌浏览器是如今最受欢迎的一款网络浏览器软件，这款浏览器拥有简洁高效的特性，神兽用户喜欢，在使用浏览器的时候，不同的人有不同的设置喜好，有人喜欢将谷歌浏览器设置成默认首页，也有人喜欢将首页设置成其他搜索引擎，那么具体要在哪里设置呢。接下来小编就给大家带来快速设置谷歌浏览器首页方法，希望能够给大家带来帮助。快速设置谷歌浏览器首页方法1、打开谷歌浏览器(如图所示)。2、点击界面右上角的菜单键(如图所示)。3、选择“设置”选项(如图所示)。4、在设置菜单中，找到“搜索引擎”(如

将将网站转换为独立的 Mac 应用程序的方法 Oct 12, 2023 pm 11:17 PM

在macOSSonoma和Safari17中，您可以将网站变成“网络应用程序”，这些应用程序可以位于Mac的扩展坞中，并且可以像任何其他应用程序一样访问，而无需打开浏览器。继续阅读以了解其工作原理。多亏了Apple的Safari浏览器中的新选项，现在可以将您经常访问的互联网上的任何网站变成一个独立的“网络应用程序”，位于Mac的扩展坞中，随时供您访问。Web应用程序与任何应用程序一样与任务控制和舞台管理器配合使用，也可以通过Launchpad或SpotlightSearch打开。如何将任何网站变

WordPress网页错位现象解决攻略 Mar 05, 2024 pm 01:12 PM

WordPress网页错位现象解决攻略在WordPress网站开发中，有时候我们会遇到网页元素错位的情况，这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象，我们需要仔细分析问题、查找可能的原因，并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略，同时提供具体的代码示例，帮助开

如何使用HTML和CSS创建一个响应式轮播图布局 Oct 20, 2023 pm 04:24 PM

如何使用HTML和CSS创建一个响应式轮播图布局在现代的网页设计中，轮播图是一个常见的元素。它能够吸引用户的注意力，展示多个内容或图片，并且能够自动切换。在本文中，我们将介绍如何使用HTML和CSS创建一个响应式的轮播图布局。首先，我们需要创建一个基本的HTML结构，并添加所需的CSS样式。以下是一个简单的HTML结构：<!DOCTYPEhtml&g

H5中position属性的灵活运用技巧 Dec 27, 2023 pm 01:05 PM

H5中如何灵活运用position属性在H5开发中，经常会涉及到元素的定位和布局问题。这时候，CSS的position属性就会发挥作用。position属性可以控制元素在页面中的定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘附定位（sticky）。本文将详细介绍在H5开发中如何灵活运用position属性

介绍win7里的窗口排列方式 Dec 26, 2023 pm 04:37 PM

当我们同时打开多个窗口时，win7具有将多个窗口以不同方式排列然后同时显示的功能，能够让我们更加清晰地查看到每一个窗口的内容。那么win7窗口排列方式有几种呢，他们分别都是什么样的呢，下面就跟着小编一起来看一下吧。win7窗口排列方式有几种答：三种，分别是层叠窗口、堆叠显示窗口和并排显示窗口。当我们打开多个窗口时，可以右键点击任务栏空白处。就可以看到三种窗口排列方式了。一、层叠窗口：二、堆叠显示窗口：三、并排显示窗口：

CSS中contain的语法使用场景 Feb 21, 2024 pm 02:00 PM

See all articles

关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose

回复讨论(解决方案)

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题