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

.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;}
框(一)
框(二)
框(三)
框(导航)
栏目一
栏目二
栏目三
栏目四
栏目五
栏目六
栏目七
栏目八
栏目九

登录后复制

栏目一
栏目二
栏目三
栏目四
栏目五
栏目六
这个地方老是布局不好,求指导。

回复讨论(解决方案)

图片为要求完成的样子。

你的position 呢。float呢。

你的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;
}

    
栏目一
    
栏目二
    
栏目三
    
栏目四
    
栏目五
    
栏目六
.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代码太冗余了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2839427.html

(0)
上一篇 2025年3月9日 13:53:25
下一篇 2025年3月9日 13:53:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • [转]CSS3 Media Query实现响应布局_html/css_WEB-ITnose

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含…

    编程技术 2025年3月9日
    200
  • HTML九宫格布局实现方法

    网站布局多样化是我们前端的拿手菜!最近看到uc浏览器的默认标签页使用的就是九宫格布局。就研究了下,在这里,我就分享一下代码,共同学习下!效果如下: nbsp;html>        全兼容的HTML九宫格布局            …

    2025年3月9日
    200
  • HTML表格布局实例讲解

    html 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局。但是,我们所见到的 web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法来实现这种布局,通常的解决方案是:使用区块元素…

    2025年3月9日
    200
  • textarea布局时文字在左下边且不能改变大小尺寸的解决

    textarea文本域左边的文字一直都是在textarea的左下边,看起来不美观;textarea文本域明明设置好的cols和rows但是还是能改变大小,以上这些问题,可以参考本文的解决方法两个小问题,但是困扰了很久 第一个问题 texta…

    编程技术 2025年3月9日
    200
  • HTML元素内联元素、块级元素的布局介绍

    html元素布局展示  默认展示(未添加width和height属性) ①HTML元素在浏览器展示的方式是:从上到下,从左到右。 ②内联元素,是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区域不够,就会换至下一行。 ③块级…

    2025年3月9日
    200
  • html中的三种布局分别是什么

    流动布局(html网页默认的布局方式) (视频教程分享:html视频教程) 特点: 1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。 立即学习“前端免费学习笔记(深入)”; 2、内…

    2025年3月9日
    200
  • 美化网站顶级页面链接按钮:使用get_pages()方法

    如果您按照我之前的教程进行操作,现在您的网站上将会有一个主题(或子主题),其中包含指向网站标题中的顶级页面的链接。 我创建了一个 26 的子主题,这就是我的链接现在的样子: 在本教程中,我将向您展示如何向您的主题添加一些 CSS,以使这些链…

    2025年3月9日 编程技术
    200
  • HTML教程:如何使用Flexbox进行平均分配布局

    HTML教程:如何使用Flexbox进行平均分配布局 引言:在网页设计中,经常需要对元素进行布局。传统的布局方法存在一些局限性,而Flexbox(弹性盒子布局)是一种能够提供更灵活、更强大的布局方式。本文将介绍如何使用Flexbox来实现平…

    2025年3月9日
    200
  • 如何使用HTML和CSS创建一个响应式图片画廊展示布局

    如何使用HTML和CSS创建一个响应式图片画廊展示布局 在当今互联网时代,图片画廊展示是网页设计中常见的布局,可以展示各类图片和图像作品。为了让用户能够在不同设备上获得良好的浏览体验,响应式设计变得越来越重要。本文将介绍如何使用HTML和C…

    2025年3月9日 编程技术
    200
  • HTML布局指南:如何使用伪元素进行元素装饰

    HTML布局指南:如何使用伪元素进行元素装饰 引言:在网页设计中,元素的装饰起着非常重要的作用,可以提升网页的美观性和用户体验。而使用HTML的伪元素,我们可以通过添加额外的元素去装饰现有的元素,从而实现各种炫酷的效果。本文将介绍如何使用伪…

    2025年3月9日
    200

发表回复

登录后才能评论