css-盒子模型网页布局

最新推荐文章于 2023-04-19 18:20:13 发布
原创 最新推荐文章于 2023-04-19 18:20:13 发布 · 2k 阅读 · 39 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

div+css网页布局
cursor: pointer;鼠标手势效果

一个简单案例的实现

<!DOCTYPE html>
<html>
<head>
	<title>西安工业大学官网首页</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/西安工业大学.css">
</head>
<body>
	<header class="top">
          <div class="top-one">
                <div id="top-left">
                	<img src="./img/c_r1_c2.png">
                	<div id="top-right">
                        <p id="p1">
                            <img src="./img/nb.png">
                            <a id="a1" href="https://www.xatu.edu.cn/engl/sy.htm">English</a>
                            <span id="dat">	
                              2019年10月29日  星期二
                            </span>
                        </p>
                        <p>
                        	<input id="op" type="text" name="" placeholder="请输入关键字" autofocus>
                        	<input id="se" type="image"  src="./img/sousuo.png" name="">
                        </p>
                	</div>
                </div>
          </div>
          <div class="top-two">
               <div class="nav">
               	<ul>
               	<li><a href="#"> 首页 </a>
                    <ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
               	</li>
               	<li><a href="#"> 学校概况 </a>
                         <ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
               	</li>
               	<li><a href="#"> 组织机构 </a>
                        <ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
               	</li>
               	<li><a href="#"> 党的建设  </a>
               	<ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
                </li>
               	<li><a href=""> 学科建设  </a>
               	<ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
                </li>
               	<li><a href="#"> 教育教学  </a>
               	<ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
                </li>
               	<li><a href="#"> 科研学术  </a>
               	<ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
                </li>
               	<li><a href="#"> 招生就业  </a>
               	<ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
                </li>
               	<li><a href="#"> 人才队伍  </a>
               	<ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
                </li>
               	<li><a href="#"> 信息公开  </a>
               	<ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
                </li>
               	<li><a href="#"> 校园文化  </a>
               	<ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
                </li>
               	<li><a href="#"> 对外交流  </a>
               	<ul class="menu">
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    	<li><a href="#">校园首页</a></li>
                    </ul>
                </li>
               </ul>
               </div>
          </div>
          <div class="top-three">
               <img src="./img/5.png">
          </div>
	</header>
     
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
.top{
	width: 100%;
	height: 618px;
}
header>.top-one{
	width: 100%;
	height: 123px;
	/*border: 1px solid red;*/
	background-image: url(../img/cc_r1_c1.png);
	background-repeat: no-repeat;
	background-size: cover;
}
#top-left{
	width: 1200px;
	height: 123px;
	margin: auto;
}
#top-right{
	width: 420px;
	height: 123px;
    /*border: 1px solid red;*/
    float: right;
}
#a1,#dat{
	color: white;
	font-size: 14px;
}
#dat{
	float:right;
}
#p1{
	/*  border: 1px solid red;*/
      margin-top: 30px; 
}
#p1>img{
	vertical-align: middle;
	margin-left: 20px;
}
#op{
	width: 335px;
	height: 30px;
	margin-top: 5px;
	border-radius: 10px;
}
#se{
	vertical-align: middle;
	margin-top: 5px;
}
.top-two{
	width: 100%;
	height: 40px;
	background-color: #0066B1;
	
}
.nav{

	width: 1200px;
	height: 40px;
	margin: auto;
}
.nav>ul>li{
	width: 96px;
	height:40px;
	/*border: 1px solid red;*/
	line-height: 40px;
	float: left;
	list-style: none;
	text-align: center;
	font-weight: bold;
}
.nav>ul>li:hover{
	background-color: green;
	cursor: pointer;
}
.nav>ul>li:hover .menu{
	display: block;
}
.nav>ul>li>a{
	color: white;
	text-decoration: none;
}

.menu{
	display: none;
	list-style: none;
	background-color: green;


}
.menu>li a{
      color: white;
      border-bottom: 1px solid white;
      text-decoration: none;
}
}
.top-three{
	width: 100%;
	height: 455px;
}
.top-three>img{
	width: 100%;
}

在这里插入图片描述

HTML——css--盒子模型与布局
immnature的博客
08-06 3253
html中任何一个元素如div、span等都可以看作盒子，每个元素本质属性都会存在一些区别而这种现象则被称为盒子模型。
day05（CSS03-盒子模型）v1.0.pdf
02-17
"CSS盒子模型和三大特性" CSS盒子模型是一个基本的布局模型，它由内容区域、边框区域、内边距区域和外边距区域...CSS盒子模型和三大特性是CSS的基础知识，master这些知识可以帮助我们更好地使用CSS来布局和设计网页。
页面布局 | 盒模型
zljiaa的博客
08-15 315
CSS框模型（译者注：也被称为“盒模型”）是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里。 文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。 width 和 heigh...
盒模型＋页面布局
weixin_46578458的博客
03-24 372
盒模型 margin 外边距 1 margin 在元素的外面 2 margin 控制同级元素之间的间距 3 margin 如果父元素包裹着子元素 给子元...
掌握盒模型轻松DIV CSS网页布局
09-27
网页制作Webjx文章简介：如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充padding，盒子本身有边框border，而盒子边框外和其他盒子之间
盒子模型应用页面布局
weixin_30924087的博客
04-14 572
1,达到的效果 2，先用div盒子，把结构排出来 3，调整紧贴盒子间的距离（由于都左浮动），不是想使用外边距和内边距，在盒子大小固定情况下，利用设置内容的大小，起到间隔作用。 4，利用盒子嵌套，调整里面（红色盒子的位置）位置，使内容达到布局的要求。 5，完成效果 转载于:https://www.cnblogs.com/dengfei201766/p/883543...
<div+css页面布局课堂笔记>2---页面布局的盒子模型
Fuego801的博客
03-26 519
1.盒子的样式格式： 边框：border； 内部填充：padding; 外部边距：margin; 宽度：width； 高度：height。 例子： .box { border:1px solid blue; width:300px; height:300px; padding:10px; 四边 /* padding: 10px; 四边。 padding:
09第3章 CSS - 盒子模型与布局.zip
最新发布
10-14
总结而言，本章节文件全面覆盖了CSS盒子模型与布局的核心知识点，从基础的盒模型结构到高级的定位技术，再到浮动布局的技巧，配合实践案例和理论知识的深入解析，为网页设计师和前端开发者提供了宝贵的学习资源。
Day05-CSS布局-盒子模型
07-06
总的来说，“Day05-CSS布局-盒子模型”涵盖了网页设计中布局的基本概念，掌握了这些知识，开发者就能够更好地控制元素的外观和位置，从而创建出美观且功能完善的网页。通过实践和不断学习，开发者可以进一步掌握更...
DIV+CSS创建网页-盒子模型介绍.pptx
11-01
而要深入掌握DIV+CSS，了解盒子模型则是构建网页布局的基石。 盒子模型是网页布局的核心概念，它将每一个HTML元素形象化为一个矩形盒子，包括四个主要部分：内容区域、内边距、边框和外边距。每个部分都有其独特的...
CSS（四）|页面布局之盒子模型
Better_Xing的博客
11-25 508
01.盒子模型 1.1看透网页布局的本质 1.2盒子模型（Box Modle）组成 1.3边框（border） 1.4表格的细线边框 第一个图没有合并相邻的边框 1.5边框会影响盒子实际大小 1.6内边距（padding） 案例：新浪导航案例-paddind影响盒子好处 案例：小米导航案例修改-padding影响盒子大小计算...
【Web】css盒子模型创建网页布局
common reader
01-16 6648
盒子模型。
页面盒子布局
西风不醉的博客
03-19 1328
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #wraper{...
网页布局-盒子
熬只小饼干的博客
06-05 1332
1.网页布局本质 2.盒子模型 2.1所谓盒子模型: 2.2标准盒子模型: 3.设置盒子边框的样式属性 4.内边距（内容与边框之间的距离） 5.padding不撑大盒子的情况 6.外边距 7.块级盒子水平居中 8.外边距合并
在HTML5中，我们可以使用CSS的新型盒布局模型来设计和布局网页
BLOG域名:programb.blog.youkuaiyun.com
07-03 853
然后，我们为每个网格项（header、main、sidebar、content、footer）定义了不同的类，并通过grid-column属性指定它们应该出现在哪些列中。在HTML5中，我们可以使用CSS的新型盒布局模型来设计和布局网页。这些布局模型提供了更加灵活和强大的布局选项，可以轻松地创建复杂的网页布局。这个简单的例子展示了如何使用CSS Grid布局来创建一个具有页眉、侧边栏、主内容和页脚的网页布局。最后，我们在标签内添加了相应的HTML元素，并为它们添加了相应的类，以便应用之前定义的CSS样式。
CSS之盒模型（网页设计）
近未来
03-03 997
CSS盒模型： (Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。 概述 万物皆盒子，在所有的html标签中，都可以把他看成盒子。 盒子的厚度：就是边框的大小：border 盒子的padding属性：内边距（指的是内容和边框的距离） 盒子的外边距：margin属性（盒子与盒子之间的距离） 例子： &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;
DIV+CSS布局（盒模型）
weixin_44610772的博客
01-24 323
1、div和span 在HTML中没有错在的意义，专门为了CSS 区别：div是块级元素，span是内联元素 2、盒模型 盒子外边距margin 盒子内边距padding 盒子边框border 盒子宽度width 盒子高度height ...
常见网页布局
WangZhang_521的博客
12-30 331
常见网页布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
Web基础：CSS的常规布局———盒子模型
m0_73058235的博客
04-19 3209
网页布局一般通过栏 列 行等组合来实现布局，现代浏览器都有两个模式：怪异模式和标准模式，在标准模式下，border padding width height都是各自独立的区域一般在没有定义边框的情况下，中间的栏目可以实现并列显示，但当他们超出所定义边框时，由于总行度超过了所设定，就会出现错行显示，为避免这种情况发生，我们通过事先设定好各区域所需大小，从而解决此问题，下面我以最常见的网页布局模式进行演示：上述就是我们在预览浏览器时最常看到的布局模式，源代码如下： 上述布局我们很容易发现，在网页的每一个区域
CSS盒子模型：网页布局新规则
总结来说，理解并掌握CSS盒子模型是网页设计师和开发者必备的基础技能，它不仅简化了网页布局的过程，而且是实现现代Web设计和开发的关键基石。通过熟练运用盒子模型，开发者可以创建出高效、优雅且易于维护的网页...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值