前端小项目大作业

最新推荐文章于 2023-01-07 10:57:23 发布
胆怯与勇敢
最新推荐文章于 2023-01-07 10:57:23 发布
阅读量147
点赞数
文章标签：前端 javascript css
本文链接：https://blog.csdn.net/qq_52652401/article/details/125650011
版权
运行结果：
我的信息
代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的</title>
		<style type="text/css">
			body {
				margin: 0px;
			}

			a {
				text-decoration: none;
				color: black;
			}

			a:hover {
				color: red;
			}

			.top {
				width: 100%;
				height: 50px;
				background: orangered;
			}

			.top ul {
				margin: 0px;
			}

			.top li {
				list-style-type: none;
				background-color: orangered;
			}

			.title1 {
				width: 200px;
				height: 50px;
				line-height: 40px;
				text-align: center;
				font-size: 20px;
				color: white;
				float: left;
			}

			.title2 {
				display: none;
			}

			.title1:hover ul .title2 {
				display: block;
			}

			.title2:hover {
				background-color: darkorange;
			}

			.search {
				width: 300px;
				height: 50px;
				margin-left: 1000px;
				line-height: 50px;
				text-align: center;
			}

			.center {
				width: 1500px;
				height: 700px;
				margin-top: 30px;
			}

			.center_1 {
				width: 150px;
				height: 700px;
				margin-left: 100px;
				float: left;
			}

			.center_1 dl {
				line-height: 55px;
			}

			.center_1 dd {
				margin-left: -30px;
				border: 1px solid orangered;
				text-align: center;
			}

			.center_1 dd:hover {
				background-color: orangered;
			}

			.center_2 {
				width: 900px;
				height: 700px;
				margin-left: 50px;
				float: left;
			}

			.information {
				width: 900px;
				height: 150px;
			}

			.information1 {
				width: 360px;
				height: 100px;
				float: left;
			}

			.information1 ul {
				width: 300px;
				height: 100px;
				margin: 0px;
				padding-left: 60px;
				list-style-type: none;
			}

			.information li {
				width: 30%;
				float: left;
				line-height: 100px;
			}

			.information1 img {
				width: 70px;
				border-radius: 50%;
			}

			.information2 {
				width: 540px;
				height: 100px;
				float: left;
			}

			.information2 ul {
				list-style-type: none;
				padding: 0px;
				margin: 0px;
			}

			.text1 {
				width: 33.333%;
				float: left;
				text-align: center;
				line-height: 25px;
			}

			.information3 {
				width: 900px;
				height: 48px;
				float: left;
			}

			.information3 ul {
				list-style-type: none;
				padding: 0px;
				margin: 0px;
				text-align: center;
			}

			.information3 li {
				width: 19%;
				float: left;
				line-height: 50px;
				border: 1px solid black;
			}

			.information3 li:hover {
				background-color: orangered;
			}

			.center_3 {
				height: 700px;
				width: 150px;
				margin-left: 50px;
				float: left;
			}

			.date {
				width: 100%;
			}

			.date ul {
				list-style-type: none;
				padding: 0px;
				text-align: center;
				border: 1px solid seagreen;
			}

			.date li {
				line-height: 40px;
			}

			.adv {
				width: 100%;
			}

			.adv img {
				width: 100%;
				padding-top: 20px;
			}

			.adv ul {
				list-style-type: none;
				padding: 0px;
				text-align: center;
			}

			.adv li {
				height: 150px;
				border: 1px solid seagreen;
			}

			.imgshow {
				width: 863px;
				height: 520px;
				border: 1px solid seagreen;
			}

			.imgshow ul {
				list-style-type: none;
				padding: 0px;
				text-align: center;
				line-height: 40px;
			}

			.imgshow img {
				width: 200px;
				margin-top: 20px;
			}

			.imgshow li {
				width: 33%;
				float: left;
			}

			.bottom {
				width: 100%;
				font-size: 12px;
			}

			.bottom p {
				line-height: 10px;
			}

			.bottom img {
				width: 20px;
			}
		</style>
		<script>
			function show() {
				var span = document.getElementById("in");
				span.setAttribute("value", "请您至少输入1位字符!")
			}
		</script>
	</head>
	<body>
		<div class="top">
			<ul>
				<li class="title1">首页</li>
				<li class="title1">
					账户设置
					<ul>
						<li class="title2">修改登录密码</li>
						<li class="title2">手机绑定</li>
						<li class="title2">密保问题设置</li>
						<li class="title2">其他</li>
					</ul>
				</li>
				<li class="title1">
					个人资料
					<ul>
						<li class="title2">收货地址</li>
						<li class="title2">修改头像、昵称</li>
					</ul>
				</li>
				<li class="title1">
					账号绑定
					<ul>
						<li class="title2">支付宝绑定</li>
						<li class="title2">微信绑定</li>
					</ul>
				</li>
			</ul>
			<div class="search">
				<input type="text" id="in" onfocus="show()" />
				<button>搜 索</button>
			</div>
		</div>
		<div class="center">
			<div class="center_1">
				<dl>
					<dt style="font-size: 20px; color: orangered;">全部功能</dt>
					<dd><a href="shop.html">我的购物车</a></dd>
					<dd>已买到的宝贝</dd>
					<dd>购买过的店铺</dd>
					<dd>我的发票</dd>
					<dd>我的收藏</dd>
					<dd>我的积分</dd>
					<dd>我的优惠信息</dd>
					<dd>评价管理</dd>
					<dd>退款维权</dd>
					<dd>我的足迹</dd>
					<dd>流量钱包</dd>
				</dl>
			</div>
			<div class="center_2">
				<div class="information">
					<div class="information1">
						<ul>
							<li><img src="img/tx.jpg" alt=""></li>
							<li><span style="color: orangered;">西瓜</span></li>
						</ul>
					</div>
					<div class="information2">
						<ul>
							<li class="text1"><a href="#">我的收货地址</a></li>
							<li class="text1"><a href="#">我的优惠信息</a></li>
							<li class="text1"><a href="#">我的支付宝</a></li>
						</ul>
					</div>
					<div class="information3">
						<ul>
							<li>待付款</li>
							<li>待发货</li>
							<li>待收货</li>
							<li>待评价</li>
							<li>退款</li>
						</ul>
					</div>
				</div>
				<div class="imgshow">
					<ul>
						<li><a href="#"><img src="img/shopping1.jpg" alt=""></a></li>
						<li><a href="#"><img src="img/shopping2.jpg" alt=""></a></li>
						<li><a href="#"><img src="img/shopping3.jpg" alt=""></a></li>
						<li><a href="#">惠普商务移动应用英寸手机</a></li>
						<li><a href="#">惠普商务移动应用英寸笔记本</a></li>
						<li><a href="#">惠普商务移动应用英寸电视机</a></li>
						<li><a href="#"><img src="img/shopping4.jpg" alt=""></a></li>
						<li><a href="#"><img src="img/shopping5.jpg" alt=""></a></li>
						<li><a href="#"><img src="img/shopping6.jpg" alt=""></a></li>
						<li><a href="#">惠普商务移动应用英寸支架</a></li>
						<li><a href="#">惠普商务移动应用英寸手机</a></li>
						<li><a href="#">惠普商务移动应用英寸手表</a></li>
					</ul>
				</div>
			</div>
			<div class="center_3">
				<div class="date">
					<ul>
						<li style="background-color: seagreen;color: white;font-size: 20px;">我的日历</li>
						<li style="color: seagreen;font-size: 60px;margin-top: 30px;">24</li>
						<li style="color: seagreen;font-size: 18px;margin-top: 20px;">星期五</li>
						<li style="color: seagreen;font-size: 18px;margin-top: -10px;">2022.06</li>
					</ul>
				</div>
				<div class="adv">
					<ul>
						<li><a href="#"><img src="img/advertise1.jpg" alt=""></a></li>
						<li><a href="#"><img src="img/advertise2.jpg" alt=""></a></li>
						<li><a href="#"><img src="img/advertise3.jpg" alt=""></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bottom">
			<center>
				<p>友情链接：
					<a href="https://www.baidu.com/">百度</a> |
					<a href="https://www.google.cn/">Google</a> |
					<a href="https://www.taobao.com/">淘宝</a> |
					<a href="https://www.paipai.com/">拍拍</a> |
					<a href="#">易趣</a> |
					<a href="#">当当</a> |
					<a href="#">京东商城</a> |
					<a href="#">迅雷</a> |
					<a href="#">新浪</a> |
					<a href="#">网易</a> |
					<a href="#">搜狐</a> |
					<a href="#">猫扑</a> |
					<a href="#">开心网</a> |
					<a href="#">新华网</a> |
					<a href="#">凤凰网</a>
				</p>
				<hr />
				<p>COPYRIGHT © 2003-2010 北京市微商城有限公司 ALL RIGHT RESERVED</p>
				<p>热线：400-66-13060 Email:service@prd.com</p>
				<p>ICP：沪ICP备05021104号</p>
				<p>
					<img src="img/leetcode.png">
					<img src="img/bilibili.png">
					<img src="img/蓝桥杯.png">
					<img src="img/github.png">
				</p>
			</center>
		</div>
	</body>
</html>