CSS学习13--学成网例子

乌鸦不像写字台

已于 2024-09-06 15:29:28 修改

阅读量1.3k

点赞数 30

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

于 2024-09-04 19:58:14 首次发布

本文链接：https://blog.csdn.net/qq_54641174/article/details/141902509

版权

css学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS例子

学成网
需要使用的图片：
请添加图片描述

代码：

<html>
	<head>
		<style>
		/*CSS初始化*/
		* { /*清除内外边框*/
			padding: 0;
			margin: 0;
		}
		ul {
			list-style: none; /*清除列表样式*/
		}
		.clearfix:before,.clearfix:after { /*清除浮动*/
			content: ""; 
			display: table; 
		}
		.clearfix::after {
			clear: both;
		}
		.clearfix { 
			zoom: 1;
		}
		a {
			text-decoration: none;
		}
		input {
			border: 0; /*所有表单边框为0*/
			box-sizing: border-box; /*border和padding包含到盒子里*/
		}
		.contanier { /*因为样式相同，事先声明*/
			width: 1500px;
			margin: 0 auto;
		}
		/*css初始化结束*/
		body {
			background-color: #f3f5f7; /*页面背景色*/
		}
		header { /*页面头部*/
			height: 100px;
			overflow: hidden; /*防止外边距合并*/
		}
		nav {
			width: 2000px;
			height: 42px;
			margin: 26px auto 0;
		}
		.logo{
			float: left;
		}
		.navbar {
			height: 42px;
			line-height: 42px; /*行高等于高，垂直居中*/
			float: left;
			margin-left: 52px;
		}
		.navbar li {
			float: left;
		}
		.navbar li a {
			color: #666;
			padding: 0 9px;
			display: block;
			height: 42px;
		}
		.navbar li a:hover {
			border-bottom: 2px solid skyblue;
		}
		.search {
			width: 410px;
			height: 40px;
			border: 1px solid #00a4ff;
			float: right;
		}
		.search input[type=text] { /*属性选择器 type为text的文本框*/
			width: 360px;
			height: 40px;
			padding-left: 20px;
			float: left;
		}
		.search input[type=submit] {
			width: 50px;
			height: 40px;
			float: left;
			background: #00a4ff url(images/search.png) center center no-repeat;
		}
		.personal {
			float: right;
			height: 42px;
			line-height: 42px;
			margin: 0 15px 0 35px;
		}
		.personal a {
			color: #666;
		}
		.personal img {
			margin: 0 10px;
		}
		/*banner部分*/
		.banner {
			height: 420px;
			background-color: #1c036c;
		}
		.banner-in {
			height: 420px;
			background: url(images/pic1.png) center center no-repeat;
		}
		.sliderbar {
			height: 420px;
			width: 190px;
			background: rgba(0,0,0,0.3); /*盒子背景半透明*/
			float: left;
		}
		.sliderbar li a {
			font-size: 16px;
			color: white;
			padding: 0 20px;
			display: block;
			height: 45px;
			line-height: 45px; /*单行垂直居中有了行高可以不用给高度*/
		}
		.sliderbar li a span {
			float: right;
			font-family: Arial, Helvetica, sans-serif;
		}
		.sliderbar li a:hover {
			color: #00a4ff;
		}
		.timetable {
			width: 230px;
			height: 300px;
			margin-top: 50px ;
			background-color: #fff;
			float: right;
		}
		.timetable dt {
			height: 50px;
			background-color: #00a4ff;
			text-align: center;
			line-height: 50px;
			color: white;
			font-weight: 700; /*字体加粗*/
			letter-spacing: 2px; /*字符间距*/
			margin-bottom: 6px;
		}
		.timetable dd {
			width: 193px;
			height: 60px;
			margin: 0 auto;
			border-bottom: 1px solid #ccc;
			padding-top: 12px;
			box-sizing: border-box;
		}
		.timetable dd h4 {
			font-size: 16px;
			font-weight: normal;
			color: #4e4e4e;
		}
		.timetable dd h5 {
			font-size: 14px;
			font-weight: normal;
			color: #a5a5a5;
		}
		.timetable dd:last-child {
			border: 0;
		}
		.timetable dd a {
			height: 38px;
			border: 1px solid #00a4ff;
			display: block;
			text-align: center;
			line-height: 38px;
			color: #00a4ff;
			font-weight: 700;
		}
		/*推荐部分*/
		.recom {
			height: 60px;
			background-color: #fff;
			margin-top: 10px;
			box-shadow: 0 2px 2px rgba(0,0,0,0.2);
		}
		.recom a {
			color: #4e4e4e;
			float: left;
			display: block;
			padding: 20px;
			border-right: 1px solid #4e4e4e;
			box-sizing: border-box;
		}
		.recom a:last-child {
			float: right;
			border: 0;
		}
		</style>
	</head>
	<body>
		<!--页面头部分-->
		<header>
			<nav>
				<!--logo部分-->
				<div class="logo">
					<img src="images/logo.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/ld.png" alt=""></a>
					<a href=""><img src="images/pic.png" alt="">123</a>
				</div>
				<!--搜索框部分-->
				<div class="search">
					<input type="text" placeholder="请输入关键词">
					<input type="submit" value=" ">  <!--图片背景-->
				</div>

			</nav>
		</header>
		<!--banner部分-->
		<div class="banner">
			<div class="banner-in contanier">
				<!--左侧导航栏-->
				<div class="sliderbar">
					<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="">UI设计  <span>></span> </a></li>
						<li><a href="">产品  <span>></span> </a></li>
					</ul>
				</div>
				<!--小课表部分-->
				<dl class="timetable">
					<dt>我的课程表</dt>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<h5>正在学习 使用对象</h5>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<h5>正在学习 使用对象</h5>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<h5>正在学习 使用对象</h5>
					</dd>
					<dd><a href="">全部课程</a></dd>
				</dl>
			
		</div>
		<!--推荐部分-->
		<div class="recom contanier">
			<a href="">精品推荐</a>
			<a href="">JQuery</a>
			<a href="">Spark</a>
			<a href="">MySQL</a>
			<a href="">JavaWb</a>
			<a href="">MySQL</a>
			<a href="">JavaWb</a>
			<a href="">修改兴趣</a>
		</div>
	</body>
</html>