如图所示,主要有两部分构成 导航栏 主页
导航栏大纲部分由三个div容器构成,分别控制背景 导航栏宽高,以及字体颜色大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学校官网</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.background {
background-color: #9a3032;
}
.line {
width: 1200px;
height: 30px;
margin: auto;
}
.line>div {
float: left;
margin-left: 65px;
line-height: 30px;
}
第二部分是由图片 排列 以及伪元素构成 并调整与第一部分的绝对位置关系
同时做文字悬停过渡效果
.line>div:hover {
color: #9a3032;
transform: 0.3s;
background-color: white;
height: 30px;
}
.piter>ul>li::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #9a3032;
}
ul>li {
color: black;
line-height: 20px;
margin-left: 0px;
list-style: none;
}
.piter>* {
float: left;
margin-top: 0px;
width: 70px;
}
.piter {
background-color: white;
width: 70px;
display: none;
padding: 10px;
position: absolute;
}
.line>div {
position: relative;
}
.line>div:hover>.piter {
display: block;
}
.new_piter>img {
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<div class="background">
<div class="line">
<div>首页</div>
<div>学校概况
<div class="piter">
<img src="./img/微信图片_20230606145536.png" alt="no">
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
<div>组织机构
<div class="piter">
<img src="./img/微信图片_20230606145536.png" alt="no">
<ul>
<li>党群机构</li>
<li>行政部门</li>
<li>二级学院</li>
</ul>
</div>
</div>
<div>党群工作
<div class="piter">
<img src="./img/微信图片_20230606145536.png" alt="no">
<ul>
<li>党建工作</li>
<li>团委工作</li>
<li>工会工作</li>
</ul>
</div>
</div>
<div>教育学习
<div class="piter">
<img src="./img/微信图片_20230606145536.png" alt="no">
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
<div>校园生活
<div class="piter">
<img src="./img/微信图片_20230606145536.png" alt="no">
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
<div>学生服务
<div class="piter">
<img src="./img/微信图片_20230606145536.png" alt="no">
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
<div>招生就业
<div class="piter">
<img src="./img/微信图片_20230606145536.png" alt="no">
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
<div>人才招聘</div>
</div>
<div class="new_piter">
<img src="./img/微信图片_20230606173734.png" alt="">
<img src="./img/微信图片_20230606173744.png" alt="">
</div>
</div>
</body>
</html>
作业:练习
第四次作业
6.修改a链接的不同状态的样式link时字体为绿色取消下划线,hover时字体红色带下划线,visited字体为黑色,ative时字体为黄色
7.给第二个ol中所有子项带边框(提示:通配符)
8.让第二个ol中的div变为绝对定位,并底边对齐。
9.将最后一个div制作为一个带有阴影效果的按钮。
10.p标签省略号
运行结果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:nth-child(1){
width: 100px;
height: 100px;
border: 1px solid red;
border-bottom-right-radius: 20%;
border-top-left-radius: 20%;
}
body>:nth-child(3){
width: 100px;
height: 100px;
border-left: 2px solid salmon;
border-top: 3px solid darkblue;
}
body>:nth-child(2){
display:block;
width: 100px;
height: 100px;
border: 3px rebeccapurple;
text-align: center;
line-height: 100px;
}
ol>li{
list-style: none;
}
body>:nth-child(4)>li::before{
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
#item1{
float: left;
margin-left: 30px;
}
.ul_first>:nth-child(even){
padding: 10px;
margin: 10px;
border: 1px solid blue ;
}
.qiti:link{
color: green;
text-decoration: underline;
}
.qiti:visited{
color: bisque;
}
.qiti:hover{
color: red;
text-decoration: underline;
}
.qiti:active{
color: yellow;
}
ol>*{
border: 1px solid;
}
.qiti{
position: absolute;
bottom: 0px;
}
.ol_second{
position: relative;
}
body>div:nth-of-type(3){
text-shadow: 10px 2px 3px rebeccapurple;
}
p{
width: 100px;
height: 100px;
text-overflow:ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<div></div>
<span><b><i><u>哈哈哈哈</u></i></b></span>
<div>
<span></span>
</div>
<ol class="ol_first">
<li id="item1">子项1</li>
<li id="item2">子项2</li>
<li id="item3">子项3
<ul class="ul_first">
<li id="item21">子项21</li>
<li id="item22">子项22</li>
<li id="item23">子项23</li>
</ul>
</li>
</ol>
<ol class="ol_second">
<li>子项31</li>
<li>子项32</li>
<div class="qiti"><a href="#">div33</a></div>
这是一个a链接
</ol>
<div>button</div>
<p>2131231231212312312312312</p>
</body>
</html>