Web前端 实验三
实验要求
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="default.css">
<title>文档标题</title>
</head>
<body>
<header>
<nav>
<a href="#" target="_self">
<h1>计算机社区</h1>
</a>
<ul>
<li><a class="top" href="#">首页</a></li>
<li>
<a class="top" href="#">云产品</a>
<div class="submenu">
<div class="inner">
<dl>
<dt>计算机与网络</dt>
<dd><a href="#">云服务器</a></dd>
<dd><a href="#">弹性Web引擎</a></dd>
<dd><a href="#">负载均衡</a></dd>
</dl>
...
</div>
</div>
</li>
<li>
<a class="top" href="#">微信建站</a>
<div class="submenu">
<div class="inner">
<dl>
<dd><a href="#">微信</a></dd>
</dl>
...
</div>
</div>
</li>
<li><a class="top" href="#">行业解决方案</a></li>
<li><a class="top" href="#">帮助与支持</a></li>
</ul>
</nav>
<img src="05.jpg" width="100%" height="400px">
</header>
<div class="banner">
<img src="img/01.jpg">
</div>
<div class="x-container">
<div class="x-row">
<div class="x-col-4">
<div>
<a>
<img src="01.jpg">
</a>
<p>第一张图片</p>
</div>
</div>
<div class="x-col-4">
<div>
<a>
<img src="02.jpg">
</a>
<p>第二张图片</p>
</div>
</div>
<div class="x-col-4">
<div>
<a>
<img src="03.jpg">
</a>
<p>第三张图片</p>
</div>
</div>
</div>
<div class="x-row">
<div class="x-col-4">
<div>
<a>
<img src="04.jpg">
</a>
<p>第四张图片</p>
</div>
</div>
<div class="x-col-8">
<div>
<a>
<img src="05.jpg">
</a>
<p>第五张图片</p>
</div>
</div>
</div>
</div>
<footer>
<div class="bg">
</div>
<div class="x-container content">© iflytek 2022
</div>
</footer>
</body>
</html>
CSS代码
/* 基本标签的样式属性
----------------------------------------------------------*/
* {
font-family: "Microsoft Yahei", "宋体", verdana, tahoma, helvetica, arial, sans-serif;
font-size: 14px;
padding: 0px;
margin: 0px;
}
table {
border-collapse: collapse;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
img {
border: none;
}
ul {
list-style: none;
padding: 0px;
}
/* 单样式属性,用于选择器拼接使用
----------------------------------------------------------*/
.center {
margin: 0px auto;
}
.text-center {
text-align: center;
}
.w-80 {
width: 80px;
}
.w-120 {
width: 120px;
}
.w-180 {
width: 180px;
}
.w-182 {
width: 182px;
}
.bg-gray {
background-color: gray;
}
.bg-black {
background-color: black;
}
.bg-white {
background-color: white;
}
.bg-green {
background-color: green;
}
.bg-red {
background-color: red;
}
.hide {
display: none;
}
.left {
float: left;
}
.right {
float: right;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: block;
}
.clearfix::after {
clear: both;
}
/* 栅格系统
----------------------------------------------------------*/
.x-container {
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.x-container {
width: 750px;
}
}
@media (min-width: 992px) {
.x-container {
width: 970px;
}
}
@media (min-width: 1200px) {
.x-container {
width: 1170px;
}
}
.x-row {
overflow: hidden;
zoom: 1;
}
@media screen and (min-width: 768px) {
.x-col-1,
.x-col-2,
.x-col-3,
.x-col-4,
.x-col-5,
.x-col-6,
.x-col-7,
.x-col-8,
.x-col-9,
.x-col-10,
.x-col-11,
.x-col-12 {
float: left;
position: relative;
min-height: 1px;
box-sizing: border-box;
}
.x-col-12 {
width: 100%;
}
.x-col-11 {
width: 91.66666667%;
}
.x-col-10 {
width: 83.33333333%;
}
.x-col-9 {
width: 75%;
}
.x-col-8 {
width: 66.66666667%;
}
.x-col-7 {
width: 58.33333333%;
}
.x-col-6 {
width: 50%;
}
.x-col-5 {
width: 41.66666667%;
}
.x-col-4 {
width: 33.33333333%;
}
.x-col-3 {
width: 25%;
}
.x-col-2 {
width: 16.66666667%;
}
.x-col-1 {
width: 8.33333333%;
}
.x-col-4 div {
text-align: center;
padding: 5px;
margin: 20px;
transition: 0.8s;
}
.x-col-4 div:hover {
box-shadow: 0 4px 8px 0 gray, 0 6px 20px 0 darkgray;
}
.x-col-4 div a {
overflow: hidden;
display: block;
}
.x-col-4 div p {
padding: 10px;
}
.x-col-4 div a img {
width: 100%;
transition: 0.8s;
}
.x-col-8 div {
text-align: center;
padding: 5px;
margin: 20px;
transition: 0.8s;
}
.x-col-8 div:hover {
box-shadow: 0 4px 8px 0 gray, 0 6px 20px 0 darkgray;
}
.x-col-8 div a {
overflow: hidden;
display: block;
}
.x-col-8 div p {
padding: 10px;
}
.x-col-8 div a img {
width: 100%;
transition: 0.8s;
}
}
nav {
position: relative;
z-index: 100;
min-width: 1000px;
height: 60px;
background: #27303f;
}
nav h1 {
height: 60px;
line-height: 60px;
padding: 0px 50px;
font-size: 18px;
font-weight: bold;
float: left;
color: #fff;
}
nav ul {
overflow: hidden;
zoom: 1;
}
nav ul li {
list-style: none;
float: left;
color: #fff;
padding: 0px;
margin: 0px;
}
nav ul li a.default {
background: #202833;
}
nav ul li a.top {
padding: 0 25px;
text-decoration: none;
color: #fff;
display: inline-block;
height: 60px;
line-height: 60px;
font-size: 1.1rem;
}
nav ul li:hover a.top {
background: #344157;
}
nav div.submenu {
position: absolute;
top: 60px;
left: 0px;
width: 100%;
margin: 0px;
background: #344157;
overflow: hidden;
z-index: 200;
/*transition过渡处理display:none/height:auto时无效,如果自适应高度,这里使用max-height来
实现*/
transition: max-height 1s;
max-height: 0px;
}
nav ul li:hover div.submenu {
max-height: 200px;
z-index: 300;
}
nav div.submenu div.inner {
margin: auto;
width: 1000px;
position: relative;
}
nav div.submenu dl {
float: left;
margin: 20px 80px 25px 0;
}
nav div.submenu dl dt {
color: #61789e;
padding-bottom: 10px;
border-bottom: 1px solid #61789e;
margin-bottom: 10px;
}
nav div.submenu dl dd a {
text-decoration: none;
color: #fff;
padding: 3px;
}
nav div.submenu dl dd a:hover {
color: #60aff6;
}
.x-col-4 div a img:hover {
transform: scale(1.1);
}
.x-col-8 div a img:hover {
transform: scale(1.1);
}
footer {
background-image: url(05.jpg);
background-size: cover;
z-index: 0px;
width: 100%;
height: 400px;
background-attachment: fixed;
position: relative;
/*让遮盖层进行绝对定位*/
}
div.bg {
background-color: #000;
opacity: 0.5;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 400px;
}
效果展示
原创不易 转载请标明出处
如果对你有所帮助 别忘啦点赞支持哈