练习：css

最新推荐文章于 2025-05-29 22:11:51 发布

褚哲希

最新推荐文章于 2025-05-29 22:11:51 发布

阅读量147

点赞数

分类专栏：前端学习文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_51996043/article/details/122953200

版权

前端学习专栏收录该内容

3 篇文章

订阅专栏

1.京东导航菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box2{
				background-color: #6F6574;
				color: white;
				width: 165px;
				height: 400px;
			}
			.t1{
				line-height: 40px;
				width: 165px;
			}
			a{
				color: white;
				text-decoration:none;
			}
			a:hover{
				color: #A52A2A;
			}
			.box2:hover{
				color: #A9A9A9;
			}
			.box2:hover{
				opacity: 0.7;
			}
			
		</style>
	</head>
	<body>
		<div class="box1">
			<img src="../img/jd.JPG" >
			<div class="box2">
				<span class="t1">
					<a href="">家用电器</a>
				</span><br>
				<span class="t1">
					<a href="">手机/运营商/数码</a>
				</span><br>
				<span class="t1">
					<a href="">电脑/办公</a>
				</span><br>
				<span class="t1">
					<a href="">家具/家居/家装/厨具</a>
				</span><br>
				<span class="t1">
					<a href="">男装/女装/童装</a>
				</span><br>
				<span class="t1">
					<a href="">男鞋/运动鞋/户外</a>
				</span><br>
				<span class="t1">
					<a href="">汽车/汽车用品</a>
				</span><br>
				<span class="t1">
					<a href="">母婴/玩具乐器</a>
				</span><br>
				<span class="t1">
					<a href="">图书/电子书</a>
				</span><br>
				<span class="t1">
					<a href="">理财/众筹/白条/保险</a>
				</span><br>
			</div>
		</div>
	</body>
</html>

2.注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 500px;
				height: 400px;
				background-color: #FFC0CB;
			}
			.box_top{
				font-weight: 400;
				color: white;
				background-color: palevioletred;
				font-size: 30px;
			}
			.box_mid{
				color: darkgray;
				padding-left: 100px;
			}
			.box2{
				color: white;
				background-color: palevioletred;
				font-size: 20px;
			}
			.box_bottom{
				padding-top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box_top" align="center">欢迎注册</div>
			<div class="box_mid">
				用户名：<input type="text" /><br>
				密码：<input type="password" /><br>
				性别：<input type="radio" name="gender" value="男" checked="checked"/>男
                      <input type="radio" name="gender" value="女"/>女<br>
				电话：<input type="text" /> 
				职业：<select name="职业">
                        <option value="101">工程师</option>
                        <option value="102">老师</option>
                        <option value="103">会计</option>
                      </select><br>
				爱好：<input type="checkbox"/>敲代码
				      <input type="checkbox"/>打游戏
					  <input type="checkbox"/>唱歌
					  <input type="checkbox"/>运动<br>
				地址：<textarea rows="10" cols="50" name="mark"></textarea><br>	  
			</div>
			<div class="box2" align="center">
				请填写完成后点击下面提交按钮提交表单
			</div>
			<div class="box_bottom" align="center">
				<input type="submit" value="提交" />
				<input type="reset" value="重置" />
			</div>
		</div>
	</body>
</html>