Web前端实验三

飞滕人生TYF

已于 2022-04-29 00:27:12 修改

阅读量296

点赞数 7

分类专栏： Web前端实验作业文章标签： html5 css

于 2022-04-28 18:10:15 首次发布

本文链接：https://blog.csdn.net/T_Y_F_/article/details/124480175

版权

Web前端实验作业专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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">&copy; 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;
}