练习加一!!!!!加油!!!!!

最新推荐文章于 2024-10-06 15:38:21 发布

小俞要努力鸭!!!

最新推荐文章于 2024-10-06 15:38:21 发布

阅读量28

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/YY3027225004/article/details/131118896

版权

该代码段展示了如何使用HTML和CSS创建一个响应式的网站导航栏，包括颜色变化、下拉菜单和过渡效果。当鼠标悬停在导航项上时，会出现子菜单，并有相应的背景色切换和文字颜色变换。此外，还包含了一些基础的CSS样式设置，如元素居中、边距和字体样式。

摘要由CSDN通过智能技术生成

官网导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.li {
				background-color: #9a3032;
				height: 70px;
				width: 100%;

			}

			.l {
				width: 1100px;
				height: 70px;
				line-height: 70px;
				margin: auto;
				color: white;
			}

			.l>div {
				float: left;
				height: 70px;
				transition: 0.5s;
				margin-left: 17px;
				padding-right: 17px;
				position: relative;
			}

			.l>div:hover {
				background-color: white;
				color: #9a3032;
				transform: 0.3s;
			}

			.l>div:hover>.x {
				display: block;
			}

			.x>ul{
				color: black;
				line-height: 30px;
				margin-left: 15px;
				font-size: 16px;
				list-style: none;
			}

			.x>ul>li::before {
				content: "";
				display: inline-block;
				height: 5px;
				width: 5px;
				border-radius: 50%;
				background-color: #9a3032;
				margin-right: 10px;
			}

			.x>* {
				float:left;
			}
			.x>ul{
                list-style: none;
                color: black;
                line-height: 30px;
                margin-right: 15px;
                font-size: 16px;
				}
			.x{
				background-color: white;
				width: 500px;
				display: none;
				position: absolute;
				padding: 10px;
				left: 0px;
			}

			body>img:nth-child(2) {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="li">
			<div class="l">
				<div>首页</div>
				<div>学校概况
					<div class="x">
						<img src="./官网.png" alt="失误">
						<ul>
							<li>学校简介</li>
							<li>校长寄语</li>
							<li>学校领导</li>
							<li>学校风光</li>
							<li>学校标识</li>
						</ul>
					</div>
				</div>
				<div>组织机构
					<div class="x">
						<img src="./官网.png" alt="失误">
						<ul>
							<li>党群机构</li>
							<li>行政部门</li>
							<li>二级学院</li>
						</ul>
					</div>
				</div>
				<div>党群工作
					<div class="x">
						<img src="./官网.png" alt="失误">
						<ul>
							<li>党建工作</li>
							<li>团委工作</li>
							<li>工会工作</li>
						</ul>
					</div>
				</div>
				<div>教育教学
					<div class="x">
						<img src="./官网.png" alt="失误">
						<ul>
							<li>本科教育</li>
							<li>职业教育与继续教育</li>
							<li>校验与科研</li>
							<li>教学动态</li>
						</ul>
					</div>
				</div>
				<div>国际教育
					<div class="x">
						<img src="./官网.png" alt="失误">
						<ul>
							<li>国际交流中心</li>
							<li>国际教育学院</li>
							<li>国际联合培养</li>
							<li>英才计划</li>
						</ul>
					</div>
				</div>
				<div>校园生活
					<div class="x">
						<ul>
							<li>国际交流中心</li>
							<li>国际教育学院</li>
							<li>国际联合培养</li>
							<li>英才计划</li>
						</ul>
						<ul>
							<li>住宿服务</li>
							<li>网络服务</li>
							<li>综合服务</li>
						</ul>
						<img src="./官网.png" alt="">
					</div>
				</div>
				<div>学生服务
				<div class="x">
					<ul>
						<li>学工动态</li>
						<li>学生会</li>
						<li>学生资助</li>
						<li>心理健康</li>
						<li>资料下载</li>
					</ul>
					<img src="./官网.png" alt="">
				</div>
				</div>
				<div>招生就业
				<div class="x">
					<ul>
						<li>招生网</li>
						<li>就业网</li>
					</ul>
					<img src="./官网.png" alt="">
				</div>
				</div>
				<div>人才招聘
				<div class="x">
					<ul>
						<li>招聘公告</li>
						<li>联系我们</li>
					</ul>
					<img src="./官网.png" alt="">
				</div>
				</div>
				<div>校友会</div>
			</div>
		</div>
	</body>
</html>

练习题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body>div:first-child {
				width: 100px;
				height: 100px;
				border: 1px solid red;
				border-top-left-radius: 20%;
				border-bottom-right-radius: 20%;
			}

			body>div:nth-child(3) {
				width: 100px;
				height: 100px;
				border-top: 1px solid green;
				border-left: 1px solid green;
			}

			body {
				position: relative;
			}

			body>span {
				display: inline-block;
				width: 100px;
				height: 100px;
				border: 1px solid blue;
				size: 20px;
				line-height: 100PX;
				text-decoration: underline;
				font-weight: bold;
			}

			.ol_first>li {
				list-style-type: none;
			}

			.ol_first>li::before {
				content: "";
				display: inline-block;
				width: 10px;
				height: 10px;
				background-color: red;
				border-radius: 50%;
				border: 1px solid red;
			}

			.ul_first>li:nth-child(even) {
				border: 1px solid blue;
			}

			.ol_second>a:link {
				color: green;
				text-decoration: none;
			}

			.ol_second>a:visited {
				color: black;
			}

			.ol_second>a:hover {
				color: red;
				text-decoration: underline;
			}

			.ol_second>a:active {
				color: yellow;
			}

			.ol_second>* {
				border: 1px solid red;
			}

			.ol_second>div {
				position: absolute;
				bottom: 0px;
				right: 0px;
			}

			button {
				text-shadow: 5px 5px 10px blue;
			}
		</style>
	</head>
	<body>
		<div></div>
		<span>哈哈哈哈</span>
		<div></div>
		<span></span>
		<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>div33</div>
			<a href="#">这是一个a链接</a>
		</ol>
		<div><button>按钮</button></div>
	</body>
</html>