基础部分
首先什么是盒子模型？
以edge浏览器为例，点击f12，进入已计算那一栏，然后找到这么个玩意
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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
