html+css 随便写写

最新推荐文章于 2023-11-03 11:33:42 发布

qq_33300789

最新推荐文章于 2023-11-03 11:33:42 发布

阅读量304

点赞数 1

分类专栏： html+css 文章标签： html css

本文链接：https://blog.csdn.net/qq_33300789/article/details/80055535

版权

html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input, textarea, hr, img, label, span, select, strong, b {
    margin: 0px;
    padding: 0px;
}
a {
    color: #333;
    text-decoration: none;
    outline: none;
}
a, img {
    border: none;
    outline: none;
}
a, button {
    text-decoration: none;
}
a, img, button {
    border: none;
    text-decoration: none;
}
body{
	font-family: "宋体,Arial, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif";
	font-size: 12px;
	font-weight: normal;
	color: #000;
	width: 100%;
	background-color: #fff;
}
.product-sotr{
	margin: 20px;
	width: 226px;
	height: 644px;
	background-color: #fff;
	background:url(img/img_226x95.jpg) no-repeat left bottom ;
	border: 1px solid #3299fd;
	position: relative;
	z-index: 90;
}
.product-sotr .hd{
	width: 226px;
	background: url(img/img_226x40.jpg) no-repeat;
	height: 40px;
	line-height: 40px;
	text-indent: 15px;
	font-size: 15px;
	font-weight: bold;
	font-family: "微软雅黑";
	color: #fff;	
}
.product-sotr .bd{
	padding-bottom: 10px;
}
.product-sotr .bd .item{
	border-bottom: 1px solid #3299FD;
	height: 60px;
	position: relative;
}
.product-sotr .bd .item .title{
	width: 226px;
	text-indent: 43px;
	height: 30px;
	overflow: hidden;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	color: #292929;
}
.product-sotr .bd .item .title a{
	color: #3299fd;
	position: relative;
}
.product-sotr .bd .item .list{
	width: 210px;
	padding-left: 15px;
	height: 30px;
	line-height: 30px;
	overflow: hidden;
}
.product-sotr .bd  .item .one a i {
	width: 19px;
	height: 19px;
	background-position: 0 0;
	left: -25px;
}
.product-sotr .bd .title a i{
	top: 0px;
	position: absolute;
	background: url(img/icon_nav.jpg) no-repeat;
}
.product-sotr .bd .item .arrow{
	font-family: "微软雅黑";
	font-size: 20px;
	color: #c0d7f9;
	position: absolute;
	right: 10px;
	top: 14px;
}

.product-sotr .bd .item .two a i {
    width: 22px;
    height: 20px;
    background-position: 0 -51px;
    left: -28px;
}
.product-sotr .bd .item .three a i {
    width: 22px;
    height: 20px;
    background-position: 0 -102px;
    left: -28px;
}
.product-sotr .bd .item .four a i {
    width: 22px;
    height: 20px;
    background-position: 0 -153px;
    left: -28px;
}
.product-sotr .bd .item .five a i {
    width: 22px;
    height: 20px;
    background-position: 0 -204px;
    left: -28px;
}
.product-sotr .bd .item .six a i {
    width: 22px;
    height: 20px;
    background-position: 0 -255px;
    left: -28px;
}
.product-sotr .bd .item .seven a i {
    width: 22px;
    height: 20px;
    background-position: 0 -306px;
    left: -28px;
}
.product-sotr .bd .item .eight a i {
    width: 22px;
    height: 20px;
    background-position: 0 -357px;
    left: -28px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<link rel="stylesheet" href="main.css">
	</head>
	<body>
		<div class="product-sotr fl">
			<div class="hd">旅游产品导航</div>
			<div class="bd">
				<div class='item'>
					<div class="title one">
						<a href="#"><i></i>出境游</a>
					</div>
					<div class="list">
						<a href="#">泰国</a>
						<a href="#">首尔</a>
						<a href="#">曼谷</a>
						<a href="#">大阪</a>
						<a href="#">普吉岛</a>
					</div>
					<div class="arrow">></div>
				</div>
				<div class="item">
					<div class="title two"><a href="#"><i></i>国内游</a></div>
					<div class="list">
						<a href="#">泰国</a>
						<a href="#">首尔</a>
						<a href="#">曼谷</a>
						<a href="#">大阪</a>
						<a href="#">普吉岛</a>
					</div>
					<div class="arrow">></div>
				</div>
				<div class="item">
					<div class="title three"><a href="#"><i></i>周边游</a></div>
					<div class="list">
						<a href="#">泰国</a>
						<a href="#">首尔</a>
						<a href="#">曼谷</a>
						<a href="#">大阪</a>
						<a href="#">普吉岛</a>
					</div>
					<div class="arrow">></div>
				</div>
				<div class="item">
					<div class="title four"><a href="#"><i></i>邮轮</a></div>
					<div class="list">
						<a href="#">泰国</a>
						<a href="#">首尔</a>
						<a href="#">曼谷</a>
						<a href="#">大阪</a>
						<a href="#">普吉岛</a>
					</div>
					<div class="arrow">></div>	
				</div>
				
				<div class="item">
					<div class="title five"><a href="#"><i></i>东南亚</a></div>
					<div class="list">
						<a href="#">泰国</a>
						<a href="#">首尔</a>
						<a href="#">曼谷</a>
						<a href="#">大阪</a>
						<a href="#">普吉岛</a>
					</div>
					<div class="arrow">></div>
				</div>
				<div class="item">
					<div class="title six"><a href="#"><i></i>日本，韩国，朝鲜</a></div>
					<div class="list">
						<a href="#">泰国</a>
						<a href="#">首尔</a>
						<a href="#">曼谷</a>
						<a href="#">大阪</a>
						<a href="#">普吉岛</a>
					</div>
					<div class="arrow">></div>
				</div>
				<div class="item">
					<div class="title seven"><a href="#"><i></i>欧美</a></div>
					<div class="list">
						<a href="#">泰国</a>
						<a href="#">首尔</a>
						<a href="#">曼谷</a>
						<a href="#">大阪</a>
						<a href="#">普吉岛</a>
					</div>
					<div class="arrow">></div>
				</div>
				<div class="item">
					<div class="title eight"><a href="#"><i></i>澳洲</a></div>
					<div class="list">
						<a href="#">泰国</a>
						<a href="#">首尔</a>
						<a href="#">曼谷</a>
						<a href="#">大阪</a>
						<a href="#">普吉岛</a>
					</div>
					<div class="arrow">></div>
				</div>
				
		</div>
			</div>
		</div>
	</body>
</html>