web前端复习第四课2

最新推荐文章于 2024-09-11 11:00:10 发布

思丰百年

最新推荐文章于 2024-09-11 11:00:10 发布

阅读量175

点赞数

分类专栏： web前端开发复习，从头再来文章标签： javascript css html html5

本文链接：https://blog.youkuaiyun.com/qq_39664934/article/details/107128990

版权

web前端开发复习，从头再来专栏收录该内容

22 篇文章

订阅专栏

浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: #f00;
			float: left;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: #00f;
			/*左浮动*/
			float: left;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color: #0f0;
			float:left;
		}
		.box4{
			width: 200px;
			height: 200px;
			background-color: #ff0;
			float: right;
		}
		.nav{
			width: 100%;
			height: 100px;
			background: #ccc;
		}
		.box{
			width: 100%;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1">111</div>
		<div class="box2">222</div>
		<div class="box3"></div>
		<div class="box4">111</div>
	</div>
	<div class="nav">
		导航栏
	</div>
</body>
</html>

浮动案例附带外联css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="fudong.css">
	<style type="text/css">
		/*公共样式*/
		*{
			margin: 0;    /*清除默认样式*/
			padding: 0;  
		}
		a{
			text-decoration: none;
			color: #000;
		}
		li{
			list-style: none;
			/*清除li小黑点*/
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="nav-layout">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">新闻中心</a></li>
				<li><a href="#">产品介绍</a></li>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">公司实力</a></li>
			</ul>
		</div>
	</div>
</body>
</html>


.nav{
	width: 100%;
	height: 60px;
	background-color: #ccc;
}
.nav-layout{
	width: 1200px;
	height: 60px;
	margin: 0 auto;
}
.nav li{
	width: 120px;
	height: 60px;
	float: left;
	text-align: center;
	line-height: 60px;
}
.nav li:hover{
	background-color: #f00;
}
.nav li a:hover{
	color: #fff;
	text-decoration: underline;
}

列表样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网 - 淘！我喜欢</title>
	<link rel="icon" type="text/css" href="img/TB14aHpkeH2gK0jSZJnXXaT1FXa-16-16.ico">
	<style type="text/css">
		/*常见的图片格式：gif  动图
					jpg   普通图片
					png   透明背景图片
					ico   小图标*/

		ul{

			/*清除小黑点*/
			/*list-style: none;*/

			/*把小黑点移到内容区域*/
			list-style-position: inside;
			
			/*把小黑点替换成小图标*/
			list-style-image: url(img/icon.jpg);
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻中心</a></li>
		<li><a href="#">产品介绍</a></li>
		<li><a href="#">关于我们</a></li>
		<li><a href="#">公司实力</a></li>
	</ul>

</body>
</html>

布局案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*清除浏览器默认内外边距*/
		*{
			margin: 0;
			padding: 0;
		}
		/*定义一个版心，并且居中/*/
		.content{
			width: 1200px;
			height: 680px;
			margin: 0 auto;
		}
		/*头部图片*/
		.top{
			width: 100%;
			height: 150px;
		}
		/*列表部分*/
		.list{
			width: 100%;
			height: 200px;
			background-color: #FD1B4E;
		}
		.list div{
			width: 230px;
			height: 190px;
			float: left;
			margin-top: 10px;
			margin-left: 10px;
		}
		.list .list-1{
			margin-left: 5px;
		}
		/*标题部分*/
		.title{
			width: 100%;
			height: 60px;
			background-color: #FD1B4E;
			text-align: center;
			color: #FFEA06;
			line-height: 60px;
			font-weight: bold;
			font-size: 20px;
		}
		.title-1{
			width: 135px;
			height: 60px;
			float: left;
			color: #fff;
			font-weight: bold;
			font-size: 26px;
			text-align: left;
			padding-left: 10px;
		}
		.title-2{
			width: 135px;
			height: 20px;
			float: right;
			border: 1px solid #fff;
			margin-right: 10px;
			color: #fff;
			font-size: 14px;
			line-height: 20px;
			font-weight: 300;    /*让加粗的字体不加粗*/
			margin-top: 20px;
			border-radius: 20px;   /*让div两头变圆，值应该和高一样*/
		}
		/*产品部分*/
		.product{
			width: 100%;
			height: 300px;
			background-color: #FD1B4E;
		}
		.product div{
			width: 188px;
			height: 265px;
			background-color: #fff;
			float: left;
			margin-left: 10px;
			padding: 10px 20px;
			font-size: 14px;
		}
		.product div img{
			width: 100%;
		}
		.product div p{
			margin-bottom: 10px;
		}
		.span-1{
			color: #F42424;
			font-weight: bold;
			font-size: 20px;
		}
		.span-2{
			text-decoration: line-through;
			font-size: 13px;
			color: #A8A8A8;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="top">
			<img src="img/113_P_1573180055767.png">
		</div>
		<div class="list">
			<div class="list-1"><img src="img/1515953434094179058.png"></div>
			<div><img src="img/1515953435023649761.png"></div>
			<div><img src="img/1515953435162544293.png"></div>
			<div><img src="img/1515953435545165923.png"></div>
			<div><img src="img/1515953435777799300.png"></div>
		</div>
		<div class="title">
			<div class="title-1">
				好货大聚惠
			</div>
			周年庆第一波，每天5场限时秒杀
			<div class="title-2">
				更多周年好货 &gt;
			</div>
		</div>
		<div class="product">
			<div>
				<img src="img/0_thumb_G_1489098265067.jpg">
				<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
				<span class="span-1">￥366.00</span>
				<span class="span-2">￥585.60</span>
			</div>
			<div>
				<img src="img/0_thumb_G_1489096810833.jpg">
				<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
				<span class="span-1">￥366.00</span>
				<span class="span-2">￥585.60</span>
			</div>
			<div>
				<img src="img/0_thumb_G_1489097011644.jpg">
				<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
				<span class="span-1">￥366.00</span>
				<span class="span-2">￥585.60</span>
			</div>
			<div>
				<img src="img/0_thumb_G_1489105301550.jpg">
				<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
				<span class="span-1">￥366.00</span>
				<span class="span-2">￥585.60</span>
			</div>
			<div>
				<img src="img/0_thumb_G_1489105386951.jpg">
				<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
				<span class="span-1">￥366.00</span>
				<span class="span-2">￥585.60</span>
			</div>
		</div>
	</div>
</body>
</html>