淘宝网的简单版html+css

最新推荐文章于 2024-08-01 09:59:14 发布

阿龙er

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量2.7w

点赞数 30

分类专栏：李主龙自我学习编程文章标签： html css 前端开发网站

本文链接：https://blog.csdn.net/u012865864/article/details/80805450

版权

话不多说，直接上代码

<!--
	作者：李主龙
	时间：2018-06-25
	描述：淘宝网布局
	联系方式：583161408@qq.com
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/taobao.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="tb">
			<div class="top_left"><span style="color: orange;">亲，请登录  </span>免费注册      手机逛淘宝</div>
			<div class="top_right">
				<ul>
					<li>我的淘宝</li>
					<li>购物车</li>
					<li>收藏夹</li>
					<li>商品分类</li>
					<li>卖家中心</li>
					<li>网站导航</li>
				</ul>
			</div>
		</div>
		<!--
			以上是淘宝网顶部布局
			下面部分将介绍第二部分布局：淘宝logo、搜索栏、手机淘宝二维码
        -->
	<div>
		<div class="tblogo"><img src="img/u1.bmp" width="280px" height="180px"/></div>
		<!--
        	淘宝logo
        -->
		<div class="serch">
			<div style="padding:0px;margin: 0px;">
				<ul>
					<li style="background-color: red;color: azure;">宝贝</li>
					<li>天猫</li>
					<li>店铺</li>
				</ul>
			</div>
			<div style="border:1px solid azure;width: 10px;height: 10px;"></div>
			<div style="margin-top:0px;">
				<input type="text" style="border: 2px solid red;width: 380px;height: 30px;"/><span><button type="b