css之盒子模型

最新推荐文章于 2022-08-15 17:15:53 发布

帝黎亚

最新推荐文章于 2022-08-15 17:15:53 发布

阅读量371

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_52109865/article/details/122832221

版权

基础部分

首先什么是盒子模型？
以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;
}

帝黎亚

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之盒子模型

基础部分首先什么是盒子模型？以edge浏览器为例，点击f12，进入已计算那一栏，然后找到这么个玩意分别为，padding>>>内边距border>>边框margin>>外边距实例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>网页实例</title> <style type="t
复制链接

扫一扫