css盒子模型案例

最新推荐文章于 2022-08-17 17:54:24 发布

weixin_49474155

最新推荐文章于 2022-08-17 17:54:24 发布

阅读量778

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_49474155/article/details/107722919

版权

1.课程导航

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#a{
				width: 200px;
				height: 300px;
				border: 1px solid #7FFFD4;
			}
			
			img{
				vertical-align: middle;
			}
			
			h5{
				font-size: 15px;
				margin: 10px;
				color: #4169E1;
				border-bottom: 1px #00FFFF solid;
			}
			
			#b{
				font-size: 10px;
				margin: 13px;
				border-bottom: 1px #00FFFF solid;
			}
			
			#img1{
				width: 10px;
				height: 10px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div>
				<h5><img src="../img/title_icon.gif">课程导航</h5>
			</div>
			<div id="b">
				C++软件工程师<img id="img1" src="../img/submenu.gif">
			</div>
			<div id="b">
				BTEST 软件测试工程师<img id="img1" src="../img/submenu.gif">
			</div>
			<div id="b">
				BENET 网络工程师<img id="img1" src="../img/submenu.gif">
			</div>
			<div id="b">
				JBNS 网站工程师<img id="img1" src="../img/submenu.gif">
			</div>
			<div id="b">
				C# 启蒙星<img id="img1" src="../img/submenu.gif">
			</div>
			<div id="b">
				ANDROID 软件工程师<img id="img1" src="../img/submenu.gif">
			</div>
			<div id="b">
				JAVA 软件工程师<img id="img1" src="../img/submenu.gif">
			</div>
			<div id="b">
				.NET 软件工程师<img id="img1" src="../img/submenu.gif">
			</div>
			<div id="b">
				网络营销<img id="img1" src="../img/submenu.gif">
			</div>
		</div>
	</body>
</html>

2.聚美优品商品分类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#a{
				margin: auto;
				width: 400px;
				height: 1180px;
				border: 1px solid #808080;
			}
			h3{
				line-height: 10px;
				margin: 15px;
			}
			#b{
				padding-top: 1px;
				width: 400px;
				height: 40px;
				color: #F0FFFF;
				background-color: #000000;
				line-height: 40px;
			}
			.a{
				color: #F0FFFF;
				text-decoration: none;
			}
			#img{
				vertical-align: middle;
			}
			.b{
				margin: auto;
				font-size: 18px;
				color: #000000;
				text-decoration:none ;
			}
			#d{
				margin-left: 40px;
				margin-bottom: 30px;
			}
			#e{
				border-bottom: 1px dashed  #808080;
			}
			a[href="#"]{
				color: #808080;
				text-decoration:none ;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div id="b">
				<h3><a class="a" href="1">全部分类</a></h3>
			</div>
			<div id="c">
				<img id="img" src="../img/icon_01.gif" />
				<a class="b" href="2"><b>护肤</b><a>
			</div><br/>
			<div id="d">
				<a href="#">洁面</a>
				<a href="#">化妆水</a>
				&

最低0.47元/天解锁文章

weixin_49474155

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型案例

1.课程导航<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #a{ width: 200px; height: 300px; border: 1px solid #7FFFD4; } img{ vertical-align: middle;
复制链接

扫一扫