css制作学习网页

最新推荐文章于 2023-10-10 08:56:59 发布

原创

最新推荐文章于 2023-10-10 08:56:59 发布 · 647 阅读

13 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS制作网页，包括头部、banner、精品推荐等部分的设计和实现，涵盖了HTML结构和CSS样式代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示

在这里插入图片描述

制作头部

在这里插入图片描述
html

<header>
		<nav>
		<!-- logo部分 -->
			<div class="logo">
				<img src="images/logo_03.png" alt="">
			</div>
		<!-- 导航栏部分 -->
			<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="#"><img src="images/tou_03.png" alt="">qq-bingyan</a>
			</div>
			<div class="personal">
				<a href="#">个人中心<img src="images/ling_06.png" alt=""></a>
			</div>
		<!-- 搜索框部分 -->
			<div class="search">
				<form action="">
				<input type="text" placeholder="请输入关键字">
				<input type="submit" value="">
				</form>
			</div>
		</nav>
	</header>

css

header {
			height: 70px;
			overflow: hidden;
		}
		nav {
			width: 1100px;
			height: 42px;
			margin:14px auto;
		}
		header img {
			width: 197px;
			height: 42px;
			float: left;
		}
		/*导航栏部分*/
		.navbar li a {
			float: left;
			display: block;
			padding: 8px 10px;
			margin-left:10px; 
			font-size: 18px;
		}
		.navbar a:hover {
			border-bottom: 2px solid #00a4ff;
		}
		/*搜索框部分*/
		.search {
			height: 42px;
			width: 300px;
			float: right;
			margin-left: 10px;
			margin-right: 30px;
		}
		.search input[type=text] {
			width: 233px;
			height: 40px;
			border: 1px solid #00a4ff;
			float: left;
		}
		.search input[type=submit] {
			width: 60px;
			height: 42px;
			border: 1px solid #00a4ff;
			float: left;
			background: #00a4ff url("images/search_06.png") center center no-repeat;
		}
		/*个人中心部分*/
		.personal {
			float: right;
			width: 150px;
			height: 42px;
			line-height: 42px;
		}
		.personal img {
			height: 30px;
			width: 30px;
			margin:6px;
		}

制作banner

在这里插入图片描述
html

<div class="banner">
		<div class="banner-in container">
			<div class="sidenav">
				<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>
			<div class="classtable">
				<dl>
					<dt>我的课程表</dt>
					<dd><h4>继续学习 程序语言设计</h4> <p>正在学习-使用对象</p></dd>
					<dd><h4>继续学习 程序语言设计</h4> <p>正在学习-使用对象</p></dd>
					<dd><h4>继续学习 程序语言设计</h4> <p>正在学习-使用对象</p></dd>
					<dd>全部课程</dd>
				</dl>
			</div>
			<div class="circle">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</div>

css

/*banner部分开始*/
		.banner  {
			height: 400px;
			background: #1c036c url("images/banner_03.png") center  no-repeat;
			position: relative;
		}
		/*banner侧边栏*/
		.banner .sidenav {
			width: 230px;
			height: 400px;
			background: rgba(0, 0, 0, 0.3);
			float: left;
		}
		.banner li a {
			color: #fff;
			display: block;
			padding: 0 40px;
			margin:0 auto;
			height: 44.5px;
			line-height: 44.5px;
			font-size: 14px;
			font-weight: normal;
		}
		.banner li span {
			float: right;
			font-family: arial;
		}
		.banner li  a:hover {
			color:#00a4ff;
		}
		/*banner小课表*/
		.banner .classtable {
			width: 200px;
		    float: right;
			height: 260px;
			background: #fff;
			margin: 70px auto;
		}
		.banner dt {
			height: 40px;
			background: #9bceea;
			color: #fff;
			line-height: 40px;
			text-align: center;
			letter-spacing: 2px;
			margin-bottom: 15px;
		}
		.banner dd {
			width: 180px;
			height: 50px;
			margin:0 auto;
			border-bottom: 1px solid #ccc;
			padding-top: 5px;
			box-sizing: border-box;
		}
		.banner h4 {
			color: #5a5a5a;
			font-weight: normal;
		}
		.banner p {
			color: #a5a5a5;
			font-size: 14px;
		}
		/*小圆点*/
		.banner .circle {
			width: 160px;
			height: 26px;
			background: rgba(255,255,255,0.2);
			position: absolute;
			bottom: 10px;
			left: 50%;
			margin-left: -84px;
			border-radius: 13px;
		}
		.banner .circle li {
			width: 15px;
			height: 16px;
			background: #74beec;
			float: left;
			margin: 5px;
			border-radius: 50%;
		}
		.banner .circle li:nth-child(1){
			width: 20px;
			border-radius: 8px;
			background: #fff;
		} 
		.classtable dd:nth-child(4) {
			border: 0;
		}
		.classtable dd:nth-child(4) p,.classtable dd:nth-child(4) h4 {
			color: #58b8ff;
		}
		.classtable dd:last-child {
			width: 176px