ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

css之盒子模型

2022-02-08 23:30:00  阅读：139  来源： 互联网

标签：盒子 color menu 模型 height width background margin css


基础部分

首先什么是盒子模型？
以edge浏览器为例，点击f12，进入已计算那一栏，然后找到这么个玩意
在这里插入图片描述
分别为，padding>>>内边距
border>>边框
margin>>外边距

实例

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页实例</title>
		<style type="text/css">
			#d1{
				width: 100px;
				height:100px;
				/*设置边框*/
				border:#164481 10px outset;
				/*设置内边距*/
				padding: 15px 20px;
				/*设置外边距*/
				margin-top: 400px;
				margin-left: 37.5rem;
				/*margin:auto  自动居中*/
			}
		</style>
	</head>
	<body>
		<div id="d1">盒子模型的学习</div>
		
	</body>
</html>

继续仿制学校官网

（今天是下拉菜单栏）

在这里插入图片描述
为了让下拉菜单栏居中显示，我没有考虑选择功能
代码如下：
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zzuli</title>
    <link rel="stylesheet" href="css/index.css">
	<link rel="preload" href="//at.alicdn.com/t/font_3169479_0gi15pmz80cr.woff2" as="font" type="font/woff2" crossorigin="anonymous">
	<link rel="stylesheet" href="//at.alicdn.com/t/font_3169479_94dihxr19d.css">
</head>
<body>
    <div class="header">
        <div class="top">
			<div class ="w">
				<ul>
					<li><a href="#">教工</a></li>
					<li><a href="#">学生</a></li>
					<li><a href="#">校友</a></li>
					<li><a href="#">考生</a></li>
					<li><a href="#">English</a></li>
				</ul>
			</div>	
		</div>
        <div class="log">
            <div class="left"></div>
        </div>
        <div class="menu">
            <div class="menu_list">
                <ul>
                    <li><a href="#">网站首页</a></li>
                    <li>
						<a href="#">学院概况</a>
						<span class="iconfont icon-xialatubiao">
							<div id="dropdown-content">
							  <a href="#">学校简介</a>
							  <a href="#">校徽校训</a>
							  <a href="#">校风教风学风</a>
							  <a href="#">校歌</a>
							  <a href="#">现任领导</a>
							  <a href="#">校园风光</a>
						</div>
						</span>
						</li>
                    <li><a href="#">机构设置</a>
					<span class="iconfont icon-xialatubiao">
					<div id="dropdown-content">
						  <a href="#">院系设置</a>
						  <a href="#">党政机关</a>
						  <a href="#">直属单位</a>
					</div>
					</span>
					</li>
                    <li><a href="#">师资队伍</a><span class="iconfont icon-xialatubiao">
					<div id="dropdown-content">
						  <a href="#">领军人才</a>
						  <a href="#">优秀教师</a>
						  <a href="#">教学名师</a>
					
					</div>
					</span></li>
                    <li><a href="#">人才培养</a><span class="iconfont icon-xialatubiao">
					<div id="dropdown-content">
						  <a href="#">研究生教育</a>
						  <a href="#">本科生教育</a>
						  <a href="#">国际教育</a>
						  <a href="#">继续教育</a>
					</div>
					</span></li>
                    <li><a href="#">学术研究</a><span class="iconfont icon-xialatubiao">
					<div id="dropdown-content">
						  <a href="#">学科建设</a>
						  <a href="#">学科平台</a>
						  <a href="#">科研团队</a>
						  <a href="#">学术刊物</a>
					</div>
					</span></li>
                    <li><a href="#">招生与就业</a><span class="iconfont icon-xialatubiao">
					<div id="dropdown-content">
						  <a href="#">招生信息</a>
						  <a href="#">本科生招生</a>
						  <a href="#">研究生招生</a>
						  <a href="#">就业创业</a>
					</div>
					</span></li>
                    <li><a href="#">合作交流</a><span class="iconfont icon-xialatubiao">
					<div id="dropdown-content">
						  <a href="#">国际交流</a>
						  <a href="#">合作办学</a>
					</div>
					</span></li>
                    <li><a href="#">校园文化</a>
					<span class="iconfont icon-xialatubiao">
					<div id="dropdown-content">
						  <a href="#">学生活动</a>
						  <a href="#">生活服务</a>
						  <a href="#">网络服务</a>
						  <a href="#">工会活动</a>
						  <a href="#">讲座论坛</a>
						  <a href="#">校园地图</a>
						  <a href="#">活动展厅</a>
					</div>
					</span>
					</li>
				    <form >
				    <input list="browsers" name="browser">
				    <datalist id="browsers">
				      <option value="教工">
				      <option value="学生">
				      <option value="校友">
				      <option value="考生">
				      <option value="English">
				    </datalist>
				    <button type="button" class="mui-btn mui-btn-blue">
						<span class="iconfont icon-sousuo"></span>
					</button>
					
				    </form>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content_img"></div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_content">
				<p>水印了属于是</p>
           </div>
    </div>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
body{
    font-family: 微软雅黑;
}
.w {
	width: 1200px;
	margin: 0 auto;
}
.icon-xialatubiao{
	
	color: white;
	
}
#dropdown-content {
	float: right;
  margin-top:0;
  display: none;
  position: absolute;
  background-color: #164481;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
#dropdown-content a {
	margin-top:0;
  color: white;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
}
​
#dropdown-content a:hover {background-color: #f1f1f1}
.icon-xialatubiao:hover #dropdown-content{
	display: block;
}
.icon-xialatubiao :hover{
  background-color: #164481;
}
.clear{
    clear: both;
 }
.header{
    width: 100%;
    height: 171px;
}
.header .top{
    width: 100%;
    height: 33px;
    background-color: #164481;
	line-height: 33px;
}
.top ul li{
	list-style: none;
    float: right;
	padding: 10px;
}
.top ul li a{
	text-decoration: none;
	color: white;
	font-size: 14px;
	float: right;
}
.header .log{
    width: 100%;
    height: 116px;
    margin: 0 auto;
	 background: #164481;
}
.log .left{
    float: left;
    width: 330px;
    height:60px ;
	background-color: #164481;
    background: url("../img/xylogonew.png");
    margin-top: 15px;
}

.header .menu{
    width: 100%;
    height: 50px;
    background: #164481;

}
.menu .menu_list{
    width: 1600px;
    margin: 1 auto;
	display: inline-block;
}
.menu .menu_list ul li{
    line-height: 40px;
    padding:0px 24.5px;
    list-style: none;
    float: left;
	
}

.menu_list ul li:hover{
    background: #164481;
}
.menu .menu_list ul li a{
    text-decoration: none;
    color: white;
    font-size: 18px;
}
.menu .menu_list form{
   float: right;
   line-height: 40px;
}

.content{
    width: 996px;
    height: 1175px;
    margin: 0 auto;
}
.content .content_img{
    width: 996px;
    height: 365px;
    background: url("../img/jifang203.jpg") no-repeat 0 0;
    background-size: 996px 365px;
    margin-top: 28px;
    margin-bottom: 10px;
}
.footer{
    width: 100%;
    height: 92px;
    background: #164481;
}
.footer .footer_content p{
    color: white;
    text-align: center;
    line-height: 92px;
    font-size: 13px;
}

标签：盒子,color,menu,模型,height,width,background,margin,css
来源： https://blog.csdn.net/qq_52109865/article/details/122832221

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有