学成在线首页网站

最新推荐文章于 2024-07-17 09:43:10 发布

Try Hard️.

最新推荐文章于 2024-07-17 09:43:10 发布

阅读量1.1k

点赞数 3

文章标签： html html5

本文链接：https://blog.csdn.net/m0_60869584/article/details/123161586

版权

<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>学车在线首页</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.w {
				width: 1200px;
				margin: auto;
			}
			
			body {
				background-color: #f3f5f7;
			}
			
			li {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			
			.clearfix:before,
			.clearfix:after {
				content: "";
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.clearfix {
				*zoom: 1;
			}
			
			.header {
				height: 42px;
				background-color: paleturquoise;
				/* 注意此地方会层叠 w 里面的margin */
				margin: 30px auto;
			}
			
			.logo {
				float: left;
				width: 198px;
				height: 42px;
			}
			
			.nav {
				float: left;
				margin-left: 60px;
			}
			
			.nav ul li {
				float: left;
				margin: 0 15px;
			}
			
			.nav ul li a {
				display: block;
				height: 42px;
				padding: 0 10px;
				line-height: 42px;
				font-size: 21px;
				font-family: "楷体";
				color: #050505;
			}
			
			.nav ul li a:hover {
				border-bottom: 2px solid #00a4ff;
				color: #00a4ff;
			}
			/* search搜索模块 */
			
			.search {
				float: left;
				width: 412px;
				height: 42px;
				margin-left: 70px;
			}
			
			.search input {
				float: left;
				width: 345px;
				height: 40px;
				border: 1px solid #00a4ff;
				border-top-left-radius: 30px;
				border-bottom-left-radius: 30px;
				border-right: 0;
				color: #bfbfbf;
				font-size: 14px;
				padding-left: 15px;
			}
			
			.search button {
				float: left;
				width: 50px;
				height: 42px;
				/* 按钮button默认有个边框需要我们手动去掉 */
				border: 0;
				background:cyan;
			}
			
			.user {
				float: right;
				line-height: 42px;
				margin-right: 30px;
				font-size: 14px;
				color: #666;
			}
			/* banner区域 */
			
			.banner {
				height: 421px;
				background: url(img/beijing3.jpg) no-repeat top center;
				/*background-color: #1c036c;蓝色背景*/
			}
			
			.banner .w {
				height: 421px;
				background: url(img/logo.png) no-repeat top center;
			}
			
			.subnav {
				float: left;
				width: 190px;
				height: 421px;
				background: rgba(0, 0, 0, 0.3);
			}
			
			.subnav ul li {
				height: 45px;
				line-height: 45px;
				padding: 0 20px;
			}
			
			.subnav ul li a {
				font-size: 19px;
				font-weight: bold;
				font-family: "楷体";
				color: palevioletred;
			}
			
			.subnav ul li a span {
				float: right;
			}
			
			.subnav ul li a:hover {
				color: #00a4ff;
			}
			
			.course {
				float: right;
				width: 230px;
				height: 300px;
				background-color: #fff;
				/* 浮动的盒子不会有外边距合并的问题 */
				margin-top: 50px;
			}
			
			.course h2 {
				height: 48px;
				background-color: #9bceea;
				text-align: center;
				line-height: 48px;
				font-size: 18px;
				color: #fff;
			}
			
			.bd {
				padding: 0 20px;
			}
			
			.bd ul li {
				paddin

最低0.47元/天解锁文章

Try Hard️.

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
学成在线首页网站

<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte...
复制链接

扫一扫