前端笔试题

最新推荐文章于 2024-05-16 15:24:52 发布

谢加油

最新推荐文章于 2024-05-16 15:24:52 发布

阅读量268

点赞数 2

文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_42127307/article/details/127832779

版权

第一题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用js完成隔行换色</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				width: 600px;
				list-style: none;
				margin: 0 auto;
			}
			ul li {
				width: 100%;
				height: 30px;
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<!--使用javascript实现隔行更换背景颜色，奇数行为#aaa;偶数行为#000；-->
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script>
			var ul = document.getElementsByTagName("ul");
			var li = document.getElementsByTagName("li");
			for (var i = 0; i < li.length; i++) {
				if (i % 2 == 0) {
					li[i].style.backgroundColor = "#aaa";
				} else {
					li[i].style.backgroundColor = "#000";
				}
			}
		</script>
	</body>
</html>

第二题

<!DOCTYPE html>
<html>
	<head>
		<meta name="Author" content="微普科技http://www.wiipu.com" />
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>html+css实现左侧菜单样式</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul li {
				width: 200px;
				text-align: right;
				color: #101a0a;
				border-right: 2px solid #888;
				padding-right: 20px;
				hegiht: 50px;
				line-height: 50px;
				cursor: pointer;
			}
			li:hover {
				color: #bd002a;
				border-color: #bd002a;
			}
		</style>
	</head>
	<body>
		<!--提示:使用html+css完成图示左侧垂直菜单样式，
    	宽为200px,每条高为50px,字体颜色为#101a0a，
    	右边框为2px,边框颜色为#888,边框与文字间距20px,
    	鼠标移入时字体加粗，字体和边框颜色为#bd002a-->
		<ul id="zmkt">
			<li>首页</li>
			<li>联系方式</li>
			<li>地理位置</li>
			<li>关于我们zmkf</li>
		</ul>
	</body>
</html>

第三题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="微普科技 http://www.wiipu.com" />
		<title>网页常见背景透明，文字不透明</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.zmkt {
				background-color: rgba(255, 0, 0, 0.2);
				width: 500px;
				height: 300px;
			}
			.sub {
				background-color: #000;
				color: #fff;
				height: 50px;
				line-height: 50px;
				text-align: center;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="zmkt"> 外层div背景透明，背景颜色为#f00，透明度为20%， <div class="sub">内层文字不透明,背景颜色为#000,字体颜色为#fff</div>
		</div>
	</body>
</html>

第四题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="微普科技 http://www.wiipu.com" />
		<title>js动态创建元素并设置样式</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#zmkt {
				width: 600px;
				height: 250px;
				margin: 50px auto;
				background-color: #EAE7FF;
				text-align: center;
			}
		</style>
		<script>
			window.onload = function() {
				var oZmkt = document.getElementById("zmkt");
				var input = document.createElement("input");
				input.setAttribute("type", "text"); //设置属性type为text
				input.style.width = "400px";
				input.style.height = "50px";
				input.style.marginTop = "100px";
				input.value = "请输入你的手机号";
				oZmkt.appendChild(input);
			}
		</script>
	</head>
	<body>
		<!--提示：使用js动态创建元素input输入框，添加到form元素中，
			并为输入框设置样式，宽：400px;高：50px;margin-top: 100px;
			type类型为text;value值为：请输入你的手机号
		-->
		<form action="" id="zmkt">
		</form>
	</body>
</html>

第五题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="微普科技 http://www.wiipu.com" />
		<title>css 边框圆角属性操作</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.wrap {
				width: 258px;
				height: 275px;
				padding: 100px;
				margin: 20px auto;
				background-color: #eee;
			}
			.opera {
				width: 258px;
				height: 275px;
				background-color: #F22629;
				border-radius: 100%;
				position: relative;
			}
			.opera-top {
				background-color: #fff;
				width: 112px;
				height: 230px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius: 100%;
			}
		</style>
	</head>
	<body>
		<!--提示：使用css边框圆角属性实现opera浏览器logo，
		外层椭圆宽258px、高275px、背景颜色#F22629，
		内层椭圆宽112px、高度230px、背景颜色#ffffff-->
		<div class="wrap">
			<!--外层容器-->
			<div class="opera">
				<!--内层容器-->
				<div class="opera-top"></div>
			</div>
		</div>
	</body>
</html>