学成在线项目联系

最新推荐文章于 2024-07-06 20:10:23 发布

qq_40169837

最新推荐文章于 2024-07-06 20:10:23 发布

阅读量224

点赞数

分类专栏：每日自主练习写网页大体思路文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_40169837/article/details/105877019

版权

每日自主练习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

写网页大体思路

5 篇文章 0 订阅

订阅专栏

根据html和css3创建学生在线项目
html部分
其中应该记住的部分是l
logo部分用logo>h1>a结构
nav部分用nav>ul>li(a)结构
search部分用search>input(button)结构
个人中心部分用**personal>dl>dd(dt)>s(span)**结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线教育平台-不是每个网站都叫学成在线</title>
	<!-- css初始化文件 -->
	<link rel="stylesheet" href="css/base.css">
	<!-- 首页文件 -->
	<link rel="stylesheet" href="css/index.css">
	<!-- 制作自己的ico图标  利用转换工具 把 png 转换为ico格式 bitbug -->
	<link rel="shortcut icon" href="favicon.ico" /> 
</head>
<body>
	<header>
		<!-- logo -->
		<div class="logo">
			<h1>
				<a href="#" title="学成在线教育平台">学成在线</a>
			</h1>
		</div>
		<!-- nav部分 -->
		<nav>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</nav>

		<!-- search -->
		<div class="search">
			<input type="search" name="" id="" placeholder="请输入关键字"> <button></button>
		</div>
		<!-- 个人中心 -->
		<div class="personal">
			<dl>
				<dt>个人中心</dt>
				<dd>
					<s>
						<img src="images/ld.png" height="16" width="14" alt="">
					</s>
					<span>
						<img src="images/pic.png" height="33" width="33" alt="">
						孙新新 andy
					</span>
				</dd>
			</dl>
		</div>
	</header>

	<div class="banner">
		<div class="w inner">
			<ul>
				<li><a href="#"><img src="images/banner.jpg" ></a></li>
			</ul>
		</div>
	</div>
</body>
</html>

css部分
其中不包括base.css部分。

body {
	background-color: #f3f5f7;

}
header {
	width: 1300px;
	height: 100px;
	/* background-color: pink; */
	margin: 0 auto;
	padding-top: 30px;
}
.logo {
	width: 195px;
	height: 42px;
	/* background-color: purple; */
	float: left;
}
.logo a {
  display: block;
  width: 195px;
  height: 42px;
  background: url(../images/logo.png) no-repeat;
  text-indent: -990px;/*   隐藏链接里面的文字 */
  overflow: hidden;  /* 这句话加上想必也是极好的 */
}
nav {
	float: left;
	margin-left: 20px;
}
nav li {
	float: left;
	height: 40px;
	line-height: 40px;
	margin-left: 25px;
}
nav li a {
	display: block;
	height: 40px;
	font-size: 18px;
	padding: 0 10px;/*因为要加到连接下面横线，所以内边距要加到a里面*/
}
nav li a:hover {
	border-bottom: 2px solid #00a4ff;
}
.search {
	width: 410px;
	height: 40px;
	background-color: purple;
	float: left;
	margin-left: 160px;
}
.search input {
	width: 361px;
	height: 40px;
	border: 1px solid #00a4ff;
	outline: none;  /* 轮廓线 */
	padding-left: 10px;/*左边内边距和框里面的文字有距离*/
	float: left;
}
.search button {
	width: 49px;
	height: 40px;
	border: 0;
	outline: none;/* 轮廓线 */
	float: left;
	background: url(../images/fa-search.png) no-repeat;
}
.personal {
	float: right;
	height: 40px;
	line-height: 40px;
}
.personal dt, .personal dd {
	float: left;
}
.personal s {
	position: relative;
	/* padding: 20px; */
	padding: 0 20px;
	text-decoration: none;
}
.personal s::before {
	content: "";
	display: block;  /* 因为伪元素默认的是行内元素 */
	width: 6px;
	height: 6px;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	right: 15px;
	top: 0;
}
.personal span img {
	border-radius: 50%;
	margin-right: 10px;
	transition: all 0.6s;
}
.personal span img:hover {
	transform: rotate(-360deg);
}
/* banner部分 */
.banner {
	height: 420px;
	background-color: #1c036c;
}
.inner {
	height: 420px;
	position: relative;
}

效果图如下：
在这里插入图片描述
想要源代码和图片资源的小伙伴可以私聊哦

qq_40169837

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学成在线项目联系

根据html和css3创建学生在线项目html部分其中应该记住的部分是llogo部分用logo>h1>a结构nav部分用nav>ul>li(a)结构search部分用search>input(button)结构个人中心部分用**personal>dl>dd(dt)>s(span)**结构<!DOCTYPE html>&lt...
复制链接

扫一扫

专栏目录