css制作学习网页

其他 2019-02-17 23:11:02 阅读次数: 0

效果展示

在这里插入图片描述

制作头部

在这里插入图片描述
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;
			height: 38px;
			border:2px solid #58b8ff;
			margin: 8px auto;
			color: #58b8ff;
			text-align: center;
			font-weight: 700；
		}
		.classtable dd:last-child:hover {
			background: #00a4ff;
			color: #fff;
		}

精品推荐部分

在这里插入图片描述
在这里插入图片描述
html

<div class="recommend container">
		    <a href="#">精品推荐</a>
			<a href="#">Jquery</a>
			<a href="#">Spart</a>
			<a href="#">MySql</a>
			<a href="#">javaWeb</a>
			<a href="#">MySql</a>
			<a href="#">javaWeb</a>
			<a href="#">修改兴趣</a>
	</div>
	<div class="recom container">
			<div class="recommend-hd container">
			<h4>精品推荐</h4>
			<a href="#">查看全部</a>
			</div>
		
			<div class="recommend-bd">
				<ul>
					<li>
						<img src="images/图层133.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层135.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层136.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层137.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>					
					<li>
						<img src="images/图层133.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层135.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层136.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层137.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
				</ul>
			</div>
	</div>
	<div class="programming container">
		<h4>编程入门</h4>
		<ul>
			<li>热门</li>
			<li>初级</li>
			<li>中级</li>
			<li>高级</li>
		</ul>
		<a href="#">查看全部</a>
	</div>
	<div class="programming-bd container">
		<div class="php">
			
		</div>
		<div class="classlearn">
			<img src="images/155.png" alt="" width="750px" height="80px">
			<div class="classleaarn-bd">
				<ul>
					<li>
						<img src="images/图层146.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a> 
					</li>
				</ul>
				<ul>
					<li>
						<img src="images/图层144.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a> 
					</li>
				</ul>
				<ul>
					<li>
						<img src="images/图层145.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a> 
					</li>
				</ul>
			</div>
		</div>
	</div>

css

/*精品推荐导航栏*/
		.recommend {
			height: 60px;
			line-height: 60px;
			background: #fff;
			margin-top: 8px;
			box-shadow: 2px 2px 2px rgba(0,0,0,0.2);/* 盒子阴影 水平位置  垂直位置  模糊距离  影子颜色 */
		} 
		.recommend a {
			padding: 0px 26px;
			border-right: 2px solid #bfbfbf;
		}
		.recommend a:hover {
			color: #00a4ff;
		}
		.recommend a:first-child {
			color: #00a4ff;
		}
		.recommend a:last-child {
			color: #00a4ff;
			float: right;
			border:0;
			font-size:14px;
		}
		/*精品推荐主题*/
		.recommend-hd h4, .programming h4{
			margin-top:20px; 
			color: #ff7c2d;
			float: left;
			font-size:14px;
		}
		.recommend-hd a, .programming a{
			float: right;
			color: #bcbcbd;
			font-size: 12px;
			margin-top:20px;
			margin-right: 20px;
		}
		.recommend-hd a:hover, .programming a:hover {
			color: #00a4ff;
		}
		.recommend-bd {
			clear: both;
		}
		.recommend-bd li {
			width: 230px;
			height: 270px;
			background: #fff;
			float: left;
			overflow: hidden;
			box-shadow: 0 5px 5px rgba(0,0,0,0.2);
			margin-right:26px;
			margin-top: 20px;
		}
		.recommend-bd li:nth-child(4n){
			margin-right: 0;
		}
		.recommend-bd li h4,
		.recommend-bd li a  {
			margin: 16px;
		}



		.recommend-bd li h4,
		.programming-bd .classleaarn-bd h4
		 {
			color: #454545;
			font-weight: 400;
			font-size: 14px;
		}
		.recommend-bd li a,
		.programming-bd .classleaarn-bd a
		 {
			color: #999999;
			font-size: 12px;
		}
		.recommend-bd li a:hover,
		.programming-bd .classleaarn-bd a:hover
		 {
			color: #00a4ff;
		}
		.recommend-bd li a span,
		.programming-bd .classleaarn-bd a span {
			color: #ed5d20;
		}
		/*编程入门部分*/
		.programming ul {
			margin: 20px 200px;
			float: left;

		}
		.programming ul li {
			float: left;
			padding: 0 30px;
			color: #979898;
		}
		.programming ul li:nth-child(1) {
			color: #00a4ff;
		}
		/*编程入门主体*/
		.programming-bd .php {
			float: left;
			height: 390px;
			width: 228px;
			background: url("images/148.png") no-repeat;
			margin-right: 15px;
		}
		.programming-bd .classlearn {
			height: 390px;
			width: 757px;
			float: right;
		}
		.programming-bd .classlearn img {
			margin-bottom: 20px;
		}
		.programming-bd .classlearn .classleaarn-bd {
			height: 290px;
		}
		.programming-bd li {
			width: 230px;
			height: 270px;
			background: #fff;
			float: left;
			overflow: hidden;
			box-shadow: 0 5px 5px rgba(0,0,0,0.2);
			margin-right:20px;
			margin-top: 12px;
		}
		.programming-bd .classleaarn-bd li:nth-child(3){
			margin-right:0;
		}

脚部

在这里插入图片描述
html

<footer>
			<div class="container footer-in">
				<div class="footer-l">
					<img src="images/logo_03.png" height="43" width="197" alt="">
					<p>学成在线致力于普及中国最好的教育它<br />与中国一流大学和机构合作提供在线课程。</p>
					<a href="#">下载APP</a>
				</div>
				<div class="footer-r">
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
				</div>
			</div>
		</footer>

css

.footer-in {
				padding-top: 30px;
				height: 270px;
				background-color: #fff;
				margin-top: 100px;

			}
			.footer-l {
				float: left;
				margin-top: 70px;
			}
			.footer-l p {
				font-size: 12px;
				line-height: 18px;
				color: #999;
				margin-top: 20px;
			}
			.footer-l a {
				display: block;
				width: 118px;
				height: 33px;
				border: 1px solid #00a4ff;
				font-size: 16px;
				color: #00a4ff;
				text-align: center;
				line-height: 33px;
				margin-top: 15px;
			}
			.footer-r {
				float: right;
				color: #333;
				margin-top: 70px;
			}
			.footer-r dl {
				float: left;
				width: 180px;
			}
			.footer-r dt {
				font-size: 16px;
				height: 30px;
			}
			.footer-r dd {
				font-size: 12px;
				height: 20px;
			}
			.footer-r dd a:hover {
				color: #00a4ff;
				text-decoration: underline; /*  添加下划线 */
			}

全部代码

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="gb2312">
	<title>学成网案列</title>
	<style>
		
	</style>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<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>
	<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>
	<div class="recommend container">
		    <a href="#">精品推荐</a>
			<a href="#">Jquery</a>
			<a href="#">Spart</a>
			<a href="#">MySql</a>
			<a href="#">javaWeb</a>
			<a href="#">MySql</a>
			<a href="#">javaWeb</a>
			<a href="#">修改兴趣</a>
	</div>
	<div class="recom container">
			<div class="recommend-hd container">
			<h4>精品推荐</h4>
			<a href="#">查看全部</a>
			</div>
		
			<div class="recommend-bd">
				<ul>
					<li>
						<img src="images/图层133.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层135.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层136.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层137.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>					
					<li>
						<img src="images/图层133.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层135.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层136.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
					<li>
						<img src="images/图层137.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a>
					</li>
				</ul>
			</div>
	</div>
	<div class="programming container">
		<h4>编程入门</h4>
		<ul>
			<li>热门</li>
			<li>初级</li>
			<li>中级</li>
			<li>高级</li>
		</ul>
		<a href="#">查看全部</a>
	</div>
	<div class="programming-bd container">
		<div class="php">
			
		</div>
		<div class="classlearn">
			<img src="images/155.png" alt="" width="750px" height="80px">
			<div class="classleaarn-bd">
				<ul>
					<li>
						<img src="images/图层146.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a> 
					</li>
				</ul>
				<ul>
					<li>
						<img src="images/图层144.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a> 
					</li>
				</ul>
				<ul>
					<li>
						<img src="images/图层145.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<a href="#"><span>高级</span>-1125人在学习</a> 
					</li>
				</ul>
			</div>
		</div>
	</div>
	<footer>
			<div class="container footer-in">
				<div class="footer-l">
					<img src="images/logo_03.png" height="43" width="197" alt="">
					<p>学成在线致力于普及中国最好的教育它<br />与中国一流大学和机构合作提供在线课程。</p>
					<a href="#">下载APP</a>
				</div>
				<div class="footer-r">
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
				</div>
			</div>
		</footer>
</body>
</html>

css

/*初始化*/
		* {
			margin: 0px;
			padding: 0px;
		}
		ul {
			list-style: none;
		}
		.clearfix:before, .clearfix:after {
			display: table;
			content: "";
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}
		body {
			background-color: #f3f5f7;
		}
		a {
			text-decoration: none;
			color: #68696a;
		}
		.container {
			width: 1000px;
			margin: 0 auto; 
		}
		/*头部主体及logo*/
		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部分开始*/
		.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;
			height: 38px;
			border:2px solid #58b8ff;
			margin: 8px auto;
			color: #58b8ff;
			text-align: center;
			font-weight: 700；
		}
		.classtable dd:last-child:hover {
			background: #00a4ff;
			color: #fff;
		}
		/*精品推荐导航栏*/
		.recommend {
			height: 60px;
			line-height: 60px;
			background: #fff;
			margin-top: 8px;
			box-shadow: 2px 2px 2px rgba(0,0,0,0.2);/* 盒子阴影 水平位置  垂直位置  模糊距离  影子颜色 */
		} 
		.recommend a {
			padding: 0px 26px;
			border-right: 2px solid #bfbfbf;
		}
		.recommend a:hover {
			color: #00a4ff;
		}
		.recommend a:first-child {
			color: #00a4ff;
		}
		.recommend a:last-child {
			color: #00a4ff;
			float: right;
			border:0;
			font-size:14px;
		}
		/*精品推荐主题*/
		.recommend-hd h4, .programming h4{
			margin-top:20px; 
			color: #ff7c2d;
			float: left;
			font-size:14px;
		}
		.recommend-hd a, .programming a{
			float: right;
			color: #bcbcbd;
			font-size: 12px;
			margin-top:20px;
			margin-right: 20px;
		}
		.recommend-hd a:hover, .programming a:hover {
			color: #00a4ff;
		}
		.recommend-bd {
			clear: both;
		}
		.recommend-bd li {
			width: 230px;
			height: 270px;
			background: #fff;
			float: left;
			overflow: hidden;
			box-shadow: 0 5px 5px rgba(0,0,0,0.2);
			margin-right:26px;
			margin-top: 20px;
		}
		.recommend-bd li:nth-child(4n){
			margin-right: 0;
		}
		.recommend-bd li h4,
		.recommend-bd li a  {
			margin: 16px;
		}



		.recommend-bd li h4,
		.programming-bd .classleaarn-bd h4
		 {
			color: #454545;
			font-weight: 400;
			font-size: 14px;
		}
		.recommend-bd li a,
		.programming-bd .classleaarn-bd a
		 {
			color: #999999;
			font-size: 12px;
		}
		.recommend-bd li a:hover,
		.programming-bd .classleaarn-bd a:hover
		 {
			color: #00a4ff;
		}
		.recommend-bd li a span,
		.programming-bd .classleaarn-bd a span {
			color: #ed5d20;
		}
		/*编程入门部分*/
		.programming ul {
			margin: 20px 200px;
			float: left;

		}
		.programming ul li {
			float: left;
			padding: 0 30px;
			color: #979898;
		}
		.programming ul li:nth-child(1) {
			color: #00a4ff;
		}
		/*编程入门主体*/
		.programming-bd .php {
			float: left;
			height: 390px;
			width: 228px;
			background: url("images/148.png") no-repeat;
			margin-right: 15px;
		}
		.programming-bd .classlearn {
			height: 390px;
			width: 757px;
			float: right;
		}
		.programming-bd .classlearn img {
			margin-bottom: 20px;
		}
		.programming-bd .classlearn .classleaarn-bd {
			height: 290px;
		}
		.programming-bd li {
			width: 230px;
			height: 270px;
			background: #fff;
			float: left;
			overflow: hidden;
			box-shadow: 0 5px 5px rgba(0,0,0,0.2);
			margin-right:20px;
			margin-top: 12px;
		}
		.programming-bd .classleaarn-bd li:nth-child(3){
			margin-right:0;
		}
		/*脚部*/
		/* 页面底部分 */
			.footer-in {
				padding-top: 30px;
				height: 270px;
				background-color: #fff;
				margin-top: 100px;

			}
			.footer-l {
				float: left;
				margin-top: 70px;
			}
			.footer-l p {
				font-size: 12px;
				line-height: 18px;
				color: #999;
				margin-top: 20px;
			}
			.footer-l a {
				display: block;
				width: 118px;
				height: 33px;
				border: 1px solid #00a4ff;
				font-size: 16px;
				color: #00a4ff;
				text-align: center;
				line-height: 33px;
				margin-top: 15px;
			}
			.footer-r {
				float: right;
				color: #333;
				margin-top: 70px;
			}
			.footer-r dl {
				float: left;
				width: 180px;
			}
			.footer-r dt {
				font-size: 16px;
				height: 30px;
			}
			.footer-r dd {
				font-size: 12px;
				height: 20px;
			}
			.footer-r dd a:hover {
				color: #00a4ff;
				text-decoration: underline; /*  添加下划线 */
			}

猜你喜欢

转载自blog.csdn.net/qq_43537987/article/details/87380967
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022