用HTML和CSS做学成网小项目

最新推荐文章于 2022-07-07 16:33:53 发布

「已注销」

最新推荐文章于 2022-07-07 16:33:53 发布

阅读量422

点赞数 1

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_35322917/article/details/105317736

版权

本文分享了一个仅使用HTML和CSS完成的小项目。通过展示项目的HTML结构和CSS样式，提供了代码实现细节。项目包含自切的图片资源，可从提供的百度网盘链接获取。

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

一个练手的小项目，只用到css和html，先上效果图。

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成网</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<!-- 先确定版心 -->
	<!-- 确定各个模块  先行后列-->
	<header>
		<nav>
		<div class="logo">
			<img src="images/logo_03.png" alt="">
		</div>
		<!-- 导航栏部分用li来做 -->
		<div class="navbar">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>

		<div class="personal">
			<a href="#">个人中心</a>
			<a href="#"><img src="images/tou_03.png" alt="头像"/>堺桑</a>
		</div>

		<div class="search">
			<form>
			    <input type="text">
			    <input type="submit" value="">
		    </form>
		</div>

	    </nav>
	</header>
	
	<div class="banner">
		<div class="banner-in container">
			<!-- 左侧边栏 -->
			<div class="slidebar">
				<ul>
					<li><a href="#">前端开发 <span>></span> </a></li>
					<li><a href="#">前端开发 <span>></span> </a></li>
					<li><a href="#">前端开发 <span>></span> </a></li>
					<li><a href="#">前端开发 <span>></span> </a></li>
					<li><a href="#">前端开发 <span>></span> </a></li>
					<li><a href="#">前端开发 <span>></span> </a></li>
					<li><a href="#">前端开发 <span>></span> </a></li>
					<li><a href="#">前端开发 <span>></span> </a></li>
					<li><a href="#">前端开发 <span>></span> </a></li>
				</ul>
			</div>

			<!-- 小课表部分 -->
			<dl c