1+X高级试题（5）
2024-07-06 15:59:10
20029-计算器
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/><title>calculator</title><(1) rel="stylesheet" type="text/css" href="index.css"> <!--第（1）空--><script type="text/javascript" charset="utf-8" src="index.js"></script>
</head>
<(2)> <!--第（2）空--><div class="calculator"><(3) class="output" value="0" id="iputNum" disabled="disabled"></(3)> <!--第（3）空--><div class="numbers"><(3) type="(4)" value="7" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="8" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="9" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="4" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="5" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="6" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="1" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="2" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="3" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="0" onclick="numberClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="AC" onclick="cleanClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="=" onclick="equalClick()"> <!--第（3）空和第（4）空--></div><div class="operators"><(3) type="(4)" value="*" onclick="operatorClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="-" onclick="operatorClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="+" onclick="operatorClick(value)"> <!--第（3）空和第（4）空--><(3) type="(4)" value="/" onclick="operatorClick('/')"> <!--第（3）空和第（4）空--></div></div>
</(2)> <!--第（2）空-->
</html>
20030-手机账本
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0" /><title>手机账本</title></head><body><(1) id="canvas" width="270px" height="480px" style="margin: 20px;"></(1)> <!--第（1）空--></body>
</html>
<script>var book_income = {"一月": "6500","二月": "5500","三月": "10500","四月": "8500","五月": "7500","六月": "5400","七月": "4700","八月": "8300","九月": "6660","十月": "5550","十一月": "14690","十二月": "8900",}var book_pay = {"一月": "4500","二月": "4500","三月": "5500","四月": "6600","五月": "4300","六月": "3700","七月": "5600","八月": "7200","九月": "6000","十月": "4200","十一月": "10000","十二月": "5000",}// 网页加载完毕后立刻执行window.(2) = function() { <!--第（2）空-->let canvas = document.getElementById("canvas");let ctx = (3).getContext("2d"); <!--第（3）空-->drawList(ctx);drawIndex(ctx);drawNumber(ctx);}function drawList(ctx) {ctx.strokeStyle = "black";ctx.beginPath();for (let i = 0; i < 5; i++) {ctx.moveTo((270 / 4) * i, 0);ctx.(4)((270 / 4) * i, 480); <!--第（4）空-->}for (let j = 0; j < 14; j++) {ctx.(5)(0, (480 / 13) * j); <!--第（5）空-->ctx.lineTo(270, (480 / 13) * j);}ctx.moveTo(0, 0);ctx.lineTo(270 / 4, 480 / 13);ctx.stroke();}function drawIndex(ctx) {//设置阴影ctx.shadowOffsetX = 1;ctx.(6) = 1; <!--第（6）空-->ctx.shadowBlur = 2;ctx.(7) = "rgba(0,0,0,0.5)"; <!--第（7）空-->//绘制坐标//设置字体大小ctx.(8) = "14px serif"; <!--第（8）空-->ctx.fillText("月", 10, 30);ctx.fillText("计", 45, 20);ctx.fillText("收入", 88, 24);ctx.fillText("支出", 155, 24);ctx.fillText("总计", 222, 24);let i = 1;for (let val in book_income) {if (i > 10) {ctx.(9)(val, 15, 24 + 480 / 13 * i++); <!--第（9）空-->} else {ctx.(9)(val, 25, 24 + 480 / 13 * i++); <!--第（9）空-->}}}function drawNumber(ctx) {let i = 1;for (let val in book_income) {ctx.fillText(book_income[val], 85, 24 + 480 / 13 * i++);}let j = 1;for (let val in book_pay) {ctx.fillText(book_pay[val], 155, 24 + 480 / 13 * j++);}//填充总计数据的代码let k = 1;let data = 0;for (let val in book_pay) {data = book_income[val] - book_pay[val];if (data < 0) {ctx.(10) = "red"; <!--第（10）空-->} else {ctx.fillStyle = "black";}ctx.fillText(data, 225, 24 + 480 / 13 * k++);}}
</script></script>
【canvas属性】
shadowOffsetX = float 阴影向右偏移量
shadowOffsetY = float 阴影向下偏移量
shadowBlur = float 阴影模糊效果
shadowColor = color 阴影颜色
【demo】
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.shadowColor = ‘rgba(0, 0, 0, 0.5)’;
ctx.fillRect(25, 25, 100, 100);
20031-在线答题器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>在线答题器</title><link rel="stylesheet" href="stylesheets/index.css"><script src="javascripts/index.js"></script></head><body><div id="answerArea"><h1>在线答题器</h1><p class="question"><span>1. 1+1=(</span><span id="answer"></span> <!-- 答题后显示答题结果 --><span>)</span><font id="state" color="red">未答题</font> <!-- 显示答题状态 --></p><p class="answer">A:0</p><p class="answer">B:1</p><p class="answer">C:2</p><p class="answer">D:3</p><p class="question"><span>A</span><input type="(1)" name="choose" value="A"> <!-- 第（1）空 --><span>B</span><input type="(1)" name="choose" value="B"> <!-- 第（1）空 --><span>C</span><input type="(1)" name="choose" value="C"> <!-- 第（1）空 --><span>D</span><input type="(1)" name="choose" value="D"> <!-- 第（1）空 --></p><p><input id="confirm" type="button" onclick="confirmAnswer()" (2)="确认选项"> <!-- 第（2）空 --><input id="clear" type="button" onclick="clearAnswer()" (2)="清除结果"> <!-- 第（2）空 --></p></div></body>
</html>
body{text-align:center;}
#answerArea{/* 浮动 */(3): left; /* 第（3）空 */width:40%;height:500px;margin:0 30% 0 30%;background:#ddd;
}
.answer{text-align: left;/* 左外边距 */(4): 14%; /* 第（4）空 */
}.question{text-align: left;/* 左外边距 */(4): 10%; /* 第（4）空 */
}
#confirm{float: left;(4): 10%;} /* 第（4）空 */
#clear{float: left;(4): 20%;} /* 第（4）空 */
input[type='button']{background-color: dodgerblue;width:100px;height:40px;font-size: 15px;color:#fff
}
//提交答案
function confirmAnswer(){let theAnswer = getValue();if(theAnswer != undefined){let ajax = new XMLHttpRequest();ajax.open("POST","（5）",false); //第（5）空ajax.setRequestHeader("（6）","application/json;charset=UTF-8"); //第（6）空let data = {value:theAnswer}var json = JSON.(7)(data); //第（7）空ajax.send(json);//将答案显示到答题区let answer = JSON.parse(ajax.responseText).answer;document.getElementById("answer").innerHTML = answer;document.getElementById("state").innerHTML = "已答题";//锁定单选框disabledRedio();}else{ //如果没有选择答案，提示“请选择答案！”alert("请选择答案！")}
}//清除答题结果
function clearAnswer(){let ajax = new XMLHttpRequest();ajax.open("delete","（8）",false); //第（8）空ajax.setRequestHeader("（6）","application/x-www-form-urlencoded;charset=UTF-8"); //第（6）空ajax.send();//重新加载页面window.location.reload();
}//获取单选按钮的值
function getValue(){let dom = document.(9)("choose"); //第（9）空for(let i=0;i<dom.length;i++){if(dom[i].checked == true){return dom[i].(10); //第（10）空}}
}//锁定单选框
function disabledRedio(){let dom = document.(9)("choose"); //第（9）空for(let i = 0;i<dom.length;i++){dom[i].disabled = true;}
}
var express = (11)('（12）'); //第（11）空和第（12）空
var router = express.Router();
var answer = (11)('../module/answer.js'); //第（11）空
/* GET home page. */
router.get('/', function(req, res, next) {res.render('index');
});//请求提交答案
router.(13)('/answers/answer',function(req,res,next){ //第（13）空answer = req.body.value;res.json({answer:answer,statusCode:201})res.end();
})//清空答案
router.(14)('/answers/answer',function(req,res,next){ //第（14）空answer = '';res.json({statusCode:204})res.end();
})
module.exports = (15); //第（15）空
20032-第三题
<template><div id="app"><(1)/> <!-- 第（1）空 --></div>
</template><script>
export default {name: 'App'
}
</script><style>
*{margin:0 ;padding: 0}
body{background-color:#EBEEF5;}
li{list-style:none;}
</style>
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)import Login from '@/components/Login'
import ChatRoom from '@/components/ChatRoom'
export default new Router({routes: [{(2):'/', //第（2）空redirect:'/(3)' //第（3）空},{(2):'/login', //第（2）空name:'Login',component:Login},{(2):'/chatroom', //第（2）空name:'ChatRoom',component:ChatRoom}]
})
<template><div class="wrapper"><!-- 标题 --><h1>用户登录</h1><form id="form_login" @submit.prevent="Login"><input class="form_text" type="text" placeholder="请输入用户名" (4)="user"> <!--第（4）空--><input class="form_text" type="password" placeholder="请输入密码" (4)="password"> <!--第（4）空--><input type="submit" value="登录"></form></div>
</template><script>export default {data() {return {user: '', password: ''};},methods: {//验证通过后，通过编程式路由进行页面跳转Login() {if (this.user != '' && this.password != '') {(5).push({ //第（5）空path:'chatroom',(6):{stuser:this.user} //第（6）空})}}}}
</script><style>/*盒子水平居中*/.wrapper {border: 1px solid #409EFF;padding:40px;width: 25%;margin: 0 auto;position: absolute;left:50%;top:50%;transform:translate(-50%,-80%);color:#303133;}/*标题 */h1 {text-align:center;margin-bottom:30px;font-weight:400;}/*表单*/#form_login .form_text {border:1px solid #dcdfe6;height:40px;line-height: 40px;width:70%;padding:0 15px;margin:0 15%;box-sizing:border-box;margin-bottom:20px;}/*input的placeholder伪类型*/#form_login .form_text:focus{outline: none;border: 1px solid #409EFF;}.form_text::placeholder{color:#c0c4cc;}/*登录按钮*/#form_login input[type='submit'] {color:#fff;background-color: #409eff;border:0 none;width: 70%;height:40px;line-height:40px;margin:0 15%;}</style>
<template><div><div class="header"><h1 class="title">网页聊天室</h1></div></div></template>
<script></script>
<!-- 组件间样式互不干扰 -->
<style (7)> /* 第(7)空 */.header{width:100%;margin-top:30px}.title{text-align: center;}
</style>
<template><div><!-- 自定义页头 --><Header></Header><div class="room"><div class="contactAll"><!-- 当前登录用户--><div ref="userName" id="userName">{{userName}}</div><!-- 好友列表--><ul id="list_friend"><li (8)="(item,index) in userList" @click="handleClick(index)" :class="[{active_li:activeIndex == index}]">{{ item.nickname }}</li> <!--第（8）空--></ul></div><!-- 对话框--><div class="dialog"><!-- 父组件向子组件传参(chatName、chatContent) ,并监听content事件--><Dialog (9)chatName="chatName" (9)chatContent="chatContent" (10)content="getContent"></Dialog> <!--第（9）空和第（10）空--></div></div></div></template><script>import Dialog from './Dialog';import Header from './Header.vue';export default {(11):{ // 第（11）空Dialog,Header}data() {return {activeIndex:-1,userName:'',chatName:'',chatContent:'',userList:[{nickname:'Plux',content:'Plux:你好！\n'},{nickname:'Gams',content:'Gams:在吗？\n'},{nickname:'Msbo',content:'Msbo:hello\n'},{nickname:'Fngbuto',content:'Fngbuto:好好好\n'},]}},// Vue实例初始化完成后执行(12)() { // 第（12）空//获取当前登录用户名this.userName = this.$route.query.stuser;//初始化聊天内容chatContent，初始化chatName默认显示第一位好友的聊天窗口if (this.userList.length > 0) {this.activeIndex = 0;this.chatName = this.userList[0].nickname;this.chatContent = this.userList[0].content;}},methods:{//点击好友列表handleClick(index) {//当前选中的<li>标签激活this.activeIndex = index;//当前选中的用户名this.chatName= this.userList[index].nickname;//当前选中的用户的聊天记录this.chatContent = this.userList[index].content;},//获取子组件传过来的值getContent(value) {for (let i = 0;i < this.userList.length; i++) {if (this.userList[i].nickname === this.chatName) {this.userList[i].content += this.userName+':'+ value;this.chatContent = this.userList[i].content;}}}},}
</script><style>/*聊天室宽高*/.room {width:760px;height:640px;margin:20px auto;display: flex;}/*用户名*/#userName {border:1px solid #999;text-align: center;padding: 10px;margin-bottom:10px;}/*好友列表宽高*/#list_friend {border: 1px solid #999;width: 150px;height :590px;padding:10px;box-sizing:border-box;}#list_friend li{text-align :center;height:40px;line-height:40px;background-color: #ffffff;margin-bottom:10px;}/*点击li激活样式*/#list_friend .active_li {color: #409eff;border-color: #c6e2ff;background-color:#ecf5ff;}/*对话框*/.dialog {margin:0 20px;width:600px;}
</style>
<template><div><!-- 好友--><p class="showName">{{chatName}}</p><!-- 对话框显示区域 --><textarea v-model="chatContent" class="dialogmsg" readonly="readonly"></textarea><!-- 对话框编辑区域 --><div class="send-wrap"><textarea v-model="sendmsg" class="dialogsend"></textarea><!-- 发送按钮 --><button @click="handleSend">发送</button></div></div>
</template><script>export default {name:'Dialog',(13):['chatName','chatContent'], //第（13）空data(){return {sendmsg:''}},methods:{//在信息输入框输入信息，点击发送按钮，注册点击事件handleSend(){if (this.sendmsg != '') {//子组件将输入的聊天信息传给父组件(14)('（15）',this.sendmsg + '\n'); //第（14）空和第（15）空this.sendmsg = '';}},}}
</script><style>/*好友*/.showName {height: 40px; line-height: 40px; box-sizing: border-box; border:1px solid #DCDFE6;margin-bottom: 10px;padding-left: 10px;font-weight: 600;}/*对话框显示区域*/.dialogmsg, .dialogsend{width: 100%}.dialogmsg{height: 430px;line-height: 1.8;}.dialogsend{margin-bottom:10px;height:90px;border:none;}/*对话框编辑区域*/.send-wrap{height:150px;width:100%;border:1px solid #DCDFE6;background-color: #fff;margin-top:10px;box-sizing:border-box;border-radius:5px;position:relative;}/*发送按钮*/.send-wrap button {position:absolute;right:10px;bottom:10px;color:#fff;background-color: #409eff;border:0 none;width: 60px;}
</style>
40035-第四题
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8 "><title>Web 阅读器</title><!-- 引入样式文件 --><link rel="(1)" type="(2)" href="(3)" /><!-- 补充代码（1）（2）（3） --><!-- 引入js文件 --><script src="(4)"></script> <!-- 补充代码（4） -->
</head>
<body><div class="btns"><button onclick="(5)('./loadJSON.php')">开始阅读(JSON)</button><!-- 补充代码（5） --><button onclick="(6)('./loadXML.php')">开始阅读(XML) </button><!-- 补充代码（6） --></div><header></header><aside class="list"></aside><article class="content"><p></p></article>
</body>
</html>
/*获取XML格式的书籍数据*/
var data = [];
function loadXML(url) {clear();var xmlhttp;xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {var result = xmlhttp.(7);/*补充代码（7）*//*在这里构建目录和内容*/var dom = document.getElementsByTagName("header")[0];var h1 = document.createElement("h1");h1.innerHTML = result.getElementsByTagName("title")[0].childNodes[0].nodeValue;dom.appendChild(h1);var dom = document.getElementsByTagName("aside")[0];var index = 0;for(var i = 0; i < result.getElementsByTagName("section").length; i++) {var ul = document.createElement("ul");ul.innerHTML = result.getElementsByTagName("subject")[i].childNodes[0].nodeValue;for(var j = 0; j < result.getElementsByTagName("section")[i].getElementsByTagName("section1").length;j++){data.push(result.getElementsByTagName("section")[i].getElementsByTagName("content")[j].childNodes[0].nodeValue);var li = document.createElement("li");li.id = index++;/*在这里绑定onclick事件构建内容*/li.onclick = function(){document.getElementsByTagName("p")[0].innerHTML = data[this.id];}li.innerHTML = result.getElementsByTagName("section")[i].getElementsByTagName("subject1")[j].childNodes[0].nodeValue;ul.appendChild(li);dom.appendChild(ul);}}}}xmlhttp.open("get",url,true);// 发送请求xmlhttp.(8)();/*补充代码（8）*/
}
/** 获取JSON格式的书籍数据 */
var json = {};
function loadJSON(url) {clear();var xmlhttp;xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {var result = xmlhttp.(9);/* 补充代码（9）*/result = (10)(result);/* 补充代码（10）*//*在这里构建目录和内容*/var dom = document.getElementsByTagName("header")[0];var h1 = document.createElement("h1") ;h1.innerHTML = result.title;dom.appendChild(h1);var dom = document.getElementsByTagName("aside")[0];for(var data in result) {if(data.search ("subject") != -1){var ul = document.createElement("ul") ;ul.innerHTML = result[data];ul.value = data;/*在这里绑定onclick事件构建内容*/ul.onclick = function() {document.getElementsByTagName("p")[0].innerHTML = result["content" + this.value.split("subject")[1]]};dom.appendChild(ul);}}}}xmlhttp.open("GET",url,true);// 发送请求xmlhttp.(8)();/*补充代码（8）*/
}function clear() {var dom = document.getElementsByTagName("header")[0];while (dom.hasChildNodes()) {dom.removeChild(dom.firstChild);}var dom = document.getElementsByTagName("aside")[0];while (dom.hasChildNodes ()) {dom.removeChild(dom.firstChild);}document.getElementsByTagName("P")[0].innerHTML = "";
}
40036-第五题
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- 引入 Bootstrap 样式文件 --><link rel="stylesheet" href="css/bootstrap.min.css"><title>注册页面</title><style type="text/css">.navbar-dark .navbar-nav .nav-link {color: rgba(255, 255, 255, 1);}.navbar-dark .navbar-nav .active>.nav-link {color: #dcec0c;}h4 {margin-bottom: 0.1rem;}.btn {background-color: green;width: 100%;margin-top: 30px;}.bg-secondary {background-color: #17a2b8 !important;color: #fff;}footer #jumbotron {padding: 2rem 1rem;background-color: #e9ecef;position: fixed;bottom: 0;padding: 0;margin: 0;}</style>
</head><body><!-- 引入 jQuery 文件--><script (1)="(2)"></script> <!-- 补充代码（1）（2） --><!-- 引入Bootstrap的js文件--><script (1)="(3)"></script> <!-- 补充代码（1）（3） --><header><!-- 导航栏 --><nav class="navbar navbar-expand-sm bg-dark navbar-dark"><a class="navbar-brand" href="#">分类信息网</a><ul class="navbar-nav"><li class="nav-item active"><a href="#" class="nav-link">首页</a></li><li class="nav-item"><a href="#" class="nav-link">个人中心</a></li><li class="nav-item"><a href="#" class="nav-link">欢迎xxx用户</a></li><li class="nav-item"><a href="#" class="nav-link">帮助</a></li></ul></nav></header><section class="(4)"><!-- 补充代码（4） --><div class="container" align="center"><div class="col-6 card p-5"><!--注册栏内容--><div class="bg-secondary mb-2 p-2" align="center"><h4>账号注册</h4></div><form role="form"><!--用户名输入框--><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addonl">用户名</span></div><input type="text" class="(5)" placeholder="(6)"><!-- 补充代码（5）（6） --></div><!--密码输入框--><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon2">密码</span></div><input type="password" class="(5)" placeholder="(7)"><!-- 补充代码（5）（7） --></div><!--重新输入密码输入框--><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon3">重新输入密码</span></div><input type="password" class="(5)" placeholder="(8)"><!-- 补充代码（5）（8） --></div><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon3">城市</span></div><(9) class="(5)" name="cities" id="cities"><!-- 补充代码（9）（5） --><(10) value="0">武汉</(10)><!-- 补充代码（10） --><(10) value="1">上海</(10)><!-- 补充代码（10） --><(10) value="2">北京</(10)><!-- 补充代码（10） --></(9)><!-- 补充代码（9） --></div><button type="button" class="btn btn-success w-100 mt-3">注册</button></form></div></div></section><footer id="(4)"><h5 class="text-muted" align="center">Copyright © xxxx 有限公司</h5></footer><!-- 补充代码（4） -->
</body>
</html>
40037-第六题
* {margin: 0;padding: 0;
}
body {text-align: center;
}
h1{text-align: center;margin: 20px 0;
}
table {width: 600px;(1): 1px solid #000000; /* 补充代码（1） 设置边框 */text-align: center;margin: 0 auto;border-collapse: collapse;
}
input[type=text] {height: 25px;padding: 0 5px;outline: none;
}
th,td {(2): 5px; /* 补充代码（2） 内边距5px */(1): 1px solid #000000; /* 补充代码（1） 设置边框 */
}
button {width: 130px;height: 25px;margin: 0 2px;
}
span {(3): red; /* 补充代码（3） 设置文字颜色：红色 */
}
.datetime {margin-top: 20px;
}
<?phpinclude_once "page.php";class VotePage extends page {// 定义全局变量(4) $username = ""; //补充代码（4）(4) function __construct() { //补充代码（4）parent::__construct("谁能获得世界杯冠军？");}public function DisplayContent() {?><form action="result.php" method="post"><input type="hidden" required name="username" value="<?php echo $this->data['username']; ?>"><div><label><input type="(5)" name="content" checked value="中国">中国</label> <!--补充代码（5）--><label><input type="(5)" name="content" value="美国">美国</label> <!--补充代码（5）--><label><input type="(5)" name="content" value="巴西">巴西</label> <!--补充代码（5）--><label><input type="(5)" name="content" value="意大利">意大利</label> <!--补充代码（5）--><label><input type="(5)" name="content" value="英国">英国</label> <!--补充代码（5）--><label><input type="(5)" name="content" value="徳国">徳国</label> <!--补充代码（5）--><label><input type="(5)" name="content" value="意大利">西班牙</label> <!--补充代码（5）--><label><input type="(5)" name="content" value="法国">法国</label> <!--补充代码（5）--></div><br /><button type="(6)">确定</button> <!--补充代码（6）--></form><?php}}
<?phpinclude_once "page.php";class FirstPage extends page {public function __construct() {parent::__construct("输入用户名");}public function DisplayContent() {?><form (7)="vote.php" (8)="post"> <!--补充代码（7）（8）--><table><tr><td>用户名：</td><td><input type="(9)" name="username"></td> <!--补充代码（9）--></tr><tr><td colspan="2"><button type="submit">下一步</button></td></tr></table></form><?php}}
<?phpabstract class Page {public $title = "";// 定义$data为一个空数组public $data = (10); // 补充代码（10）public function __construct($title = "") {$this->title = $title;}public function set($key, $val) {$this->data[$key] = $val;}public function Display() {echo "<html>\n";echo "<head>\n";echo "<meta charset='utf-8' />\n";echo "<link rel='stylesheet' type='text/css' href='css/style.css' />\n";echo "<title>" . $this->title . "</title>\n";echo "</head>\n";echo "<body>\n";$this->DisplayHeader();$this->DisplayContent();$this->DisplayFooter();echo "</body>\n";echo "</html>";}public function DisplayHeader() {echo "<header>\n";echo "<h1>" . $this->title . "</h1>\n";echo "</header>\n";}public function DisplayFooter() {date_default_timezone_set("Asia/Shanghai");echo "<footer>\n";echo "<p class='datetime'>" . date("Y-m-d h:i:s a",time()) . "</p>\n";echo "</footer>\n";}public abstract function DisplayContent();}
<?php// 只导入一次result_page.php文件（导入前先检查该文件是否已导入，如果已导入则不再导入）(11) 'result_page.php'; // 补充代码（11）$page = (12) ResultPage(); // 补充代码（12） 实例化一个对象$page->set("username", $_POST["username"]);$page->set("content", $_POST["content"]);$page->Display();
<?phpinclude_once "page.php";(13) ResultPage (14) page { // 补充代码（13）（14） 创建一个类，并继承于pagepublic function __(15)() { // 补充代码（15） 构建构造构造方法parent::__(15)("投票结果页"); // 补充代码（15）}public function DisplayContent() {// 输出echo $this->data["username"] . "：" . $this->data["content"];}}
40038-第七题
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>房屋贷款</title><!-- 引入样式文件 --><(1) rel="stylesheet" (2)="(3)" type="text/css" /><!--补充代码（1）（2）（3）-->
</head><body><div class="wrapper"><h3>房贷计算器</h3> <div class="cal-form"><!-- 贷款方式 --><div class="cal-item"><span class="cal-name">贷款方式：</span><select id="selectedBox"><option value="0" selected>等额本息</option><option value="1">等额本金</option></select></div><!-- 贷款金额 --><div class="cal-item"><span class="cal-name">贷款金额：</span><!-- 用户输入贷款金额 --><(4) class="cal-select" (5)="(6)" name="amount" placeholder="贷款金额" id="loansAmount" /><!--补充代码（4）（5）（6）--><span>万元</span></div><!-- 贷款年限 --><div class="cal-item"><span class="cal-name">贷款年限：</span><!-- 用户输入贷款年限 --><(4) class="cal-select" (5)="(6)" name="year" placeholder="贷款年限" id="loansYear"><!--补充代码（4）（5）（6）--><span>年</span></div><div class="cal-item"><span class="cal-name">年利率：</span><select id="loansRate" class="cal-select"><option (7)="0.049">4.9%</option><!--补充代码（7）--><option (7)="0.0539">5.39%</option><!--补充代码（7）--><option (7)="0.0588">5.88%</option><!--补充代码（7）--><option (7)="0.0637">6.37%</option><!--补充代码（7）--><option (7)="0.0586">5.86%</option><!--补充代码（7）--></select></div></div><!-- 计算房贷按钮 --><button id="calButton" (8)="calResult()">计算房贷</button> <!-- 补充代码（8） 触发事件，调用函数 --><!-- 计算后的结果显示区域 --><div class="cal-result"></div></div><!-- 引入js文件，进行逻辑运算 --><script (9)="(10)"></script><!--补充代码（9）（10）-->
</html>
* { /* 该选择器用于获取文档中所有标签 */margin: 0;padding: 0;
}
/* 初始化input、select、button元素的样式 */
input,(11),button { /* 补充代码（11） */(12): none;/* 补充代码（12） 去掉激活后的蓝色外边框 */border: none;background: transparent;border: 1px solid #cccccc;
}
/* 居中显示 */
.wrapper {width: 40%;margin: 50px auto;padding: 20px;border: 1px solid #999999;border-radius: 2%;(13): 2px 2px 3px #999999; /* 补充代码（13） 设置阴影，勿需进行浏览器兼容处理 */
}
/* 用户选择贷款方式 */
.wrapper h3 {text-align: center;margin: 10px 0 25px;font-size: 25px;
}
/* 贷款方下拉列表框 */
#selectedBox {width: 81%;height: 30px;line-height: 24px;padding: 4px 8px;font-size: 14px;display: inline-block;
}
/* 用户输入区域 */
.cal-form {margin-top: 20px;
}
/* 每一行 */
.cal-item {margin: 12px 0;
}
/* 输入框名字 */
.cal-name {width: 20%;font-size: 16px;font-weight: 600;
}
/* 输入框 */
.cal-select {height: 30px;line-height: 24px;width: 70%;padding-left: 10px;font-size: 14px;display: inline-block;
}
/* 下拉列表框 */
#loansRate {margin-left: 16px;width: 81%;
}
/* 计算房贷按钮 */
#calButton {width: 100%;height: 30px;background-color: #1885F5;color: #FFFFFF;cursor: pointer;
}
/* 计算结果显示区域 */
.cal-result table {margin-top: 10px;width: 100%;
}
.cal-result tr {height: 30px;line-height: 24px;margin: 12px 0;font-size: 14px;
}
/* 计算结果表格标题栏 */
.cal-result th:nth-of-type(1) {width: 30%;font-size: 14px;font-weight: normal;background-color: #cccccc;
}
.cal-result th:nth-of-type(2) {width: 60%;font-size: 14px;font-weight: normal;background-color: #cccccc;
}
/* 计算结果表格标题 */
/* .cal-result th {color: #ffffff;display: inline-block;font-size: 14px;font-weight: normal;background-color: #cccccc;
}
.cal-result th:first-child {width: 30%;margin-right: 2px;
}
.cal-result th:nth-child(2) {width: 69.5%;
} */
/* 计算标题 */
.cal-title{width: 20%;font-size: 16px;font-weight: 600;
}
/* 计算数据 */
.cal-price{width: 80%;padding-left: 20px;color: darkorange;font-weight: 600;
}
function house(){this.num = 0; //贷款金额this.year = 0; //贷款年限this.yearRate = 0; //年利率this.status = 0; //贷款方式:0表示等额本息、1表示等额本金this.outputinfo = {hkAmount:0, //月供totalRate:0, //总利息totalPrice:0 //还款金额}this.computeMethod1= function() {//还款月数var month= (14)(this.year) * 12; // 补充代码（14） 将年份转换成数值型（整型）//月利率var monthRate = parseFloat(this.yearRate) / 12;//贷款金额var loansNum = parseFloat(this.num) * 10000;//月供var hkAmount = (loansNum * monthRate * Math.pow((1 + monthRate),month))/(Math.pow((1+monthRate),month)-1);//总利息＝还款月数x每月月供额度－贷款金额var totalRate = month * hkAmount - loansNum;//还款总额＝总利息＋贷款金额var totalPrice = totalRate + loansNum;//将结果赋值给outputinfothis.outputinfo.hkAmount = hkAmount.toFixed(2);this.outputinfo.totalRate = totalRate.toFixed(2);this.outputinfo.totalPrice = totalPrice.toFixed(2); }this.computeMethod2 = function() {//还款月数var month= (14)(this.year)*12; // 补充代码（14） 将年份转换成数值型（整型）//月利率var monthRate = parseFloat(this.yearRate) / 12;//贷款金额var loansNum = parseFloat(this.num) * 10000;//每月应还本金=贷款金额/还款月数var everymonthyh = loansNum / month;//月供额度＝（贷款金额／还款月数）＋（贷款金额－累计已还本金） x月利率var hkAmount = loansNum / month + loansNum * monthRate;//总利息＝{(贷款金额/还款月数+贷款金额*月利率)+贷款金额/还款金额=(1+月利率;)/2*还款月数-贷款金额}var totalRate = ((everymonthyh+loansNum*monthRate)+loansNum/month*(1+monthRate))/2*month-loansNum;//还款总额＝总利息＋贷款金额var totalPrice = totalRate + loansNum;//将结果赋值给outputinfothis.outputinfo.hkAmount = hkAmount.toFixed(2);this.outputinfo.totalRate = totalRate.toFixed(2);this.outputinfo.totalPrice = totalPrice.toFixed(2); }
}
var house = new house();
function getInputDate(){//获取贷款金额var loansNum = document.getElementById('loansAmount').value;//获取贷款年限var yearLimit = document.getElementById('loansYear').value;//获取贷款年利率var loansSelect = document.getElementById('loansRate').value;//监听select选择的是等额本金还是等额本息var selectObj = document.getElementById('selectedBox').value;//设置贷款金额为1万~一千万元var numReg = new RegExp("^([0-9]{1,3}|1000)$");//设置贷款年限为5~30年var yearReg = new RegExp("^([5-9]|[12][0-9]|30)$");if(numReg.test(loansNum) && yearReg.test(yearLimit)){//给house对象中的输入框属性赋值house.num = loansNum;house.year = yearLimit;house.yearRate = loansSelect;house.status = selectObj;return true}else{//验证不通过alert('您输入的贷款金额或贷款年限不对，\n您的贷款金额只能为1-1000万元！\n您的贷款年限为5-30年！');document.getElementById('loansAmount').(15); /* 补充代码（15） 让“贷款金额”这个文本框获得焦点，便于重新输入 */return false;}
}
//显示计算结果函数
function showResult(){var tableObj = document.getElementsByClassName('cal-result')[0];//把计算结果保存到一个数组中var result= [house.outputinfo.hkAmount, house.outputinfo.totalPrice,house.outputinfo.totalRate];//定义一个显示文本的数组var text = ['月供','还款总额','总利息'];//显示计算结果var html = '<table id="calResult1"><tr><th>项目</th><th>金额</th></tr>';for(var i=0;i<text.length;i++){html +='<tr class="cal-hkResult"><td class="cal-title">'+text[i]+'：</td><td class="cal-price">'+result[i]+'</td></tr>';}html += '</table>'tableObj.innerHTML = html;
}
//定义点击事件处理函数
function calResult(){//获取用户输入的值if(getInputDate()){//判断等额本金还是等额本息，分别调用不同的方法if(house.status == 0){house.computeMethod1();}else if(house.status == 1){house.computeMethod2();}//显示计算结果showResult();}else{//验证不通过，清空显示结果document.getElementsByClassName('cal-result')[0].innerHTML = '';}
}
40039-第九题
<?php/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
//商品管理平台首页路由
Route::get('/', 'ShopController@index');
//商品添加路由
Route::get('/add', "ShopController@create");
Route::（1）('/add', "ShopController@save"); //第（1）空//商品修改路由
Route::get('/update/{id}', "ShopController@edit");
Route::post('/update/{id}', "ShopController@（2）");//第（2）空//商品删除路由
Route::get('/del/{id}', "ShopController@delete");
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;
//引入DB类
use （3）;//第（3）空class （4） extends Controller //第（4）空
{/*** 商品管理平台首页**/public function index(){//获取商品列表$shopList = DB::table('t_goods')->（5）();//第（5）空return view('（6）', ['shopList' => $shopList]);//第（6）空}/*** 显示创建商品表单页.**/public function create(){return view('page.add');}/*** 保存新增的商品信息**/public function save(（7） $request) //第（7）空{//接收新增商品信息$code = $request->post("code");$name = $request->post("name");$type = $request->post("type");$price = $request->post("price"); $number = $request->post("number");//判断商品编号是否已存在$goods = DB::table('t_goods')->where('code',$code)->（8）(); //第（8）空if ($goods) {return view('page.add',['（9）'=>'此商品已存在！']); //第（9）空}//保存新增的商品信息$data = array('code' => $code,'name' => $name,'type' => $type,'price' => $price,'number' => $number,);$result = DB::table('t_goods')->insert($data);return （10）('/'); //第（10）空}/*** 编辑商品信息**/public function edit($id){//获取指定的商品信息$goods = DB::table('t_goods')->where('id',$id)->（8）(); //第（8）空return view('page.change', ['goods' => $goods]);}/*** 保存更新的商品信息**/public function update(（7） $request, $id) //第（7）空{//接收更新商品信息$code = $request->post("code");$name = $request->post("name");$type = $request->post("type");$price = $request->post("price");$number = $request->post("number");//更新指定的商品信息$data = array('code' => $code,'name' => $name,'type' => $type,'price' => $price,'number' => $number,);$result = DB::table('t_goods')->where('id', $id)->update($data);;return （10）('/');//第（10）空}/*** 删除指定资源**/public function delete($id){$result = DB::table('t_goods')->where('id', $id)->delete();//删除成功，跳转至首页return （10）('/');//第（10）空}
}
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>商品管理平台</title><link rel="stylesheet" type="text/css" href="{{URL::（11）('css/index.css')}}" /><!-- 第（11）空 --></head><body><div id="con"><h5 class="tit">商品管理平台</h5><div class="table_con"><table><thead><tr><th>编号</th><th>名称</th><th>分类</th><th>价格</th><th>数量</th><th>操作</th></tr></thead><tbody>@（12）($shopList as $v) <!-- 第（12）空 --><tr><td>{{$v->code}}</td><td>{{$v->name}}</td><td>{{$v->type}}</td><td>{{$v->price}}</td><td>{{$v->number}}</td><td><div><a href="/update/{{$v->id}}"><button type="button" class="change_btn">修改</button></a><a href="/del/{{$v->id}}"><button type="button" class="del_btn">删除</button></a></div></td></tr>@（13） <!-- 第（13）空 --><tr><td colspan="6"><a href="/add"><button type="button" class="add_btn">添加</button></a></td></tr></tbody></table></div></body>
</html>
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>商品添加</title><link rel="stylesheet" type="text/css" href="{{URL::asset('css/index.css')}}" /></head><body><div id="con"><h5 class="tit">商品添加</h5><div class="table_con"><table><thead><tr><th>标题</th><th>内容</th></tr></thead><tbody><form action="/add" method="post"><!-- csrf令牌生成 -->{!! （14）() !!} <!-- 第（14）空--><tr><td>编号：</td><td><input class="input" type="text" name="code" value="" required="required"/></td></tr><tr><td>名称：</td><td><input class="input" type="text" name="name" value="" required="required"/></td></tr><tr><td>分类：</td><td><input class="input" type="text" name="type" value="" required="required"/></td></tr><tr><td>价格（元）：</td><td><input class="input" type="number" step="0.01" name="price" value="" required="required"/></td></tr><tr><td>数量：</td><td><input class="input" type="number" name="number" value="" required="required"/></td></tr>（15）(isset($message)) <!-- 第（15）空 --><tr><td colspan="2"><span class="text-warning">{{$message}}</span></td></tr>@endif<tr><td colspan="2"><button type="submit" class="add_btn">添加</button></td></tr></form></tbody></table></div></body></html>
60029-第十题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--当前窗口宽度等于设备宽度100%，缩放级别为1，禁止页面缩放 --><meta name="(1)" content="width=(2), (3)=1.0, (4)=no"> <!-- 第（1）、(2)、(3)、(4)空 --><link rel="stylesheet" type="text/css" href="css/shop.css"><title>电商网</title>
</head>
<body><div id="top"><div class="brand">电商网</div><!-- 表单采用get提交 --><form action="" method="GET"><!-- input的type使用的是HTML5新属性search --><input type="search" placeholder="搜索"></form><!-- 注册链接 --><a href="">注册</a></div><div class="content"><div class="pic_info"><!-- 商品的图片展示 --><div class="pic_box"><img src="img/01.jpg" alt="商品"></div><!-- 商品的图片展示 --><ul><li>商品名称:XXXX</li><li>商品价格:XXXX</li><li>交易数量:XXXX</li></ul></div></div><!-- 后面商品同上结构 --><div class="content"><div class="pic_info"><!-- 商品的图片展示 --><div class="pic_box"><img src="img/02.jpg" alt="商品"></div><!-- 商品的图片展示 --><ul><li>商品名称:XXXX</li><li>商品价格:XXXX</li><li>交易数量:XXXX</li></ul></div></div><div class="content"><div class="pic_info"><!-- 商品的图片展示 --><div class="pic_box"><img src="img/03.jpg" alt="商品"></div><!-- 商品的图片展示 --><ul><li>商品名称:XXXX</li><li>商品价格:XXXX</li><li>交易数量:XXXX</li></ul></div></div>
</body>
</html>
*{margin: 0;padding: 0;list-style: none;text-decoration: none;
}
/* 头部width设置为100%适应屏幕宽度，使用CSS3的flex布局，flex布局中的水平方向对齐方式，让弹性子元素平均分布，即每个项目两侧的间隔相等 */
#top{width: 100%;height: 50px;(5): flex; /* 第(5)空 */align-items: center;justify-content: (6); /* 第(6)空 */
}
.brand{font-size: 22px;}
/* 使用CSS3的属性选择器设置搜索框的尺寸 */
#top input[(7)=search]{width: 160px;} /* 第(7)空 */
.content{width: 90%;margin: 10px auto;padding: 5px;border: 1px #eeeeee solid;/* 边框圆角 */(8): 15px; /* 第(8)空 *//* 边框阴影:水平位置 垂直位置 模糊距离 阴影大小 阴影颜色 */(9): 0px 0px 8px 0px #eeeeee; /* 第(9)空 */
}
.pic_info img{border-radius: 15px;/* 设置图片的宽度，使其适应父元素的宽度 */width: 100%;
}
.pic_info{/* 设置父元素为弹性盒模型容器 */display: flex;align-items: center;
}
.pic_box{/* 使用flex属性分配弹性子元素占有的区域大小 */flex: 0.7;
}
.pic_info ul{flex: 1;
}
/* 自定义字体 */
@(10){ /* 第(10)空 *//* 自定义字体的名字 */font-family: myFont;/* 自定义字体路径 */src: url('../ziti/1.TTF');
}
.pic_info li{padding-left: 20px;line-height: 20px;font-size: 18px;/* 使用自定义字体 第(11)空 */(11): 'myFont';
}
/* 选择器匹配父元素中的第n个子元素，可以为公式 */
.pic_info li:nth-child(2n-1){opacity: 0.6; /* 设置背景或背景颜色，以及字体颜色的透明度 */color: red;
}
60030-第十一题
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><(1) type="text/javascript" src="js/jquery-3.5.1.min.js"></(1)> <!-- 第(1)空 --><(1) type="text/javascript" src="js/jquery-ui.js"></(1)> <!-- 第(1)空 --><title>Document</title>
</head>
<body style="text-align: center;"><h2>抽奖列表</h2><div id="div_p" style="text-align: left;"><!--手机号码显示区域--><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div><button type="button" id="btn_prize">开始抽奖</button><button type="button" id="btn_re">重置抽奖</button>
</body>
<script type="text/javascript">/*JavaScript代码*/var number = ["134","135","136","137","138","139","147","150","151","152","157","158","159","182","187","188","130","131","132","155","156","185","186","133","153","180","189"];$(function () {for (var i = 0; i < 10; i++) {/*从number数组中获取随机前三位数字*/temp = number[Math.(2)(Math.(3)() * number.(4))]; <!-- 第(2)、(3)、(4)空 -->//获取随机后8位数字for (var j = 0; j < 8; j++) {/*拼接手机号码*/temp = temp + Math.floor(Math.random() * 10);}//设置延时动画(5)(create_animation(i, temp), 0); <!-- 第(5)空 -->}$(document).on("(6)", "#btn_prize", function () { <!-- 第(6)空 -->//处理click事件//（1）随机抽取一个手机号码temp = Math.floor(Math.random() * 10);for (var i = 0; i <= 10; i++) {if (i != temp) {//（2）没有抽到的手机号码，设置fade动画（jquery UI）$("div_p p:eq(" + i + ")").toggle("fade");} else {//（3）抽到的手机号码，设置css样式动画$("#div_p p:eq(" + i + ")").(7)({ <!-- 第(7)空 -->fontSize: "2em",left: "44.6%",//jQuery UI捆绑了jquery color插件，jquery color插件提供了颜色动画(11): "#aa0000", <!-- 第(11)空 -->color: "#fff",width: 210,}).css("color", "RED");}}//（4）设置开始抽奖按钮为不可用$("#btn_prize").(8)("disabled","true"); <!-- 第(8)空 -->});$(document).on("(6)","#btn_re",function () { <!-- 第(6)空 -->//设置puff动画(jquery UI)$("body").(12)("puff"); <!-- 第(12)空 -->(13)(function () {/*第(13)空 延迟一秒*///重载页面window.(9).(10)(); <!-- 第(9)空和第(10)空 -->},1000);});function create_animation(i, temp) {//向p标签赋值手机号码$("#div_p p:eq(" + i + ")").prepend(temp);//设置从左到右的动画$("#div_p p:eq(" + i + ")").(7)({ <!-- 第(7)空 -->left: '47.3%',});}});
</script>
</html>
60031-第十二题
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!--当前窗口宽度等于设备宽度100%，缩放级别为1 --><meta name="(1)" content="width=(2), (3)=1.0" /> <!-- 第(1)、(2)、(3)空 --><link (4)="stylesheet" type="text/css" href="css/video.css" /> <!-- 第(4)空 --><title>视频网站</title></head><body><(5)> <!-- 第(5)空 --><!-- 定义页头 --><h2>视频播放器</h2><!--标题--><small>这是页头</small></(5)><!-- 第(5)空 --><(6)> <!-- 第(6)空 --><!--定义正文--><section><!--定义段落--><figure><video width="90%" controls loop><!--添加视频标签--><source src="video/gakki.mp4" type="video/mp4" />当前浏览器不支持video直接播放，单击这里下载视频:<a href="video/gakki.mp4" download="gakki.mp4">下载视频</a></video><figcaption>Yui Aragaki</figcaption><!--设置视频标题--></figure></section><section><!--定义段落--><(7) autocomplete="on"> <!-- 第(7)空 --><!--创建表单--><div><!-- 添加文本框标签 --><(8) <!-- 第(8)空 -->name="input"id="content"cols="20"rows="3"(9)="请输入评论..." <!-- 第(9)空 -->title="评论框"accesskey="g"spellcheck="true"></(8)> <!-- 第(8)空 --></div><!-- 添加按钮 --><button type="button" (10)="sendComment()"> <!-- 第(10)空 --><mark>发表评论</mark></button></(7)> <!-- 第(7)空 --></section><section><!--定义段落--><ul id="commentList"></ul></section></(6)> <!-- 第(6)空 --><script type="text/javascript">var list = document.(11)('commentList'); <!-- 第(11)空 -->var text = document.(11)('content'); <!-- 第(11)空 -->function sendComment() {// 在DOM中创建一个<li>元素var li = document.(12)('li'); <!-- 第(12)空 -->// 修改<textarea>的内容li.innerHTML = text.value;// 将<li>元素追加到<ul>元素中list.(13)(li); <!-- 第(13)空 -->// 清空<textarea>的内容text.value = '';// 阻止表单提交后刷新return false;}</script></body>
</html>
/* 设置body中元素居中显示 */
body{(14): center; /* 第(14)空 */
}
/* 设置页头高度和宽度 */
header{height: 10%;width: 100%;
}
section{width: 100%;
}
/* 输入评论 */
textarea{width: 90%;height: 100%;resize: none;
}
/* 取消<mark>的背景颜色 */
mark{background: (15); /* 第(15)空 */
}
/* 评论列表文字居左 */
#commentList{text-align: left;
}
60032-第十三题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>微博</title><(1) type="text/css"> <!-- 第(1)空 -->.list1 li {list-style-type: none;border: 2px solid;}list1 li:nth-child(1) { /*微博列表第一个列表项*/(2): 1px solid #ccc; /*为列表添加边框 第(2)空 */(3): 6px; /*设置列表圆角 第(3)空 */ (4): 0 1px 1px #ccc; /*列表阴影设置 第(4)空 */ }.list1 li:(5) { /*微博列表最后一个列表项 第(5)空 */ (2): solid #ccc 1px; /*为列表添加边框 第(2)空 */ (3): 6px; /*设置表格圆角 第(3)空 */ (4): 0 1px 1px #ccc; /*表格阴影设置 第(4)空 */ }/*引入外部字体*/@(6) { /* 第(6)空 */font-family: YourWebFontName;(7): url('fonts/1.TTF') ; /* 第(7)空 */}/*将外部字体应用到页面元素*/.list1 li {(8): 'YourWebFontName'; /* 第(8)空 */}.list1 li:last-child{background-color: (9)(0,100%,60%,0.5);/*设置颜色 第(9)空 */ }article {float: left;}</(1)> /* 第(1)空 */
</head>
<body>
<div id="container"><(10) action=""> <!-- 第(10)空 --><(11) type="text"> <!-- 第(11)空 --><button type="button">搜索</button></(10)> <!-- 第(10)空 --><article><!-- 侧边栏--><div class="nav"><div class="nav_left"><!-- 侧边栏内容--><ul class="list"><li><a href="">热门</a></li><li class="nav_li_hover"><a href="">头条</a></li><li><a href="">新鲜事</a></li></ul></div></div></article><article><!-- 微博话题栏--><div class="nav_main"><!-- 微博话题栏内容--><ul class="list1"><li>>杨老师，生日快乐!<br><img src="img/4.jpg" alt="error" width="100" height="100">张一龙 6月3日 <img src="img/3.jpg" alt="error" width="11" height="11">29468 <img src="img/2.jpg" alt="error" width="11" height="11">78452 <img src="img/1.jpg" alt="error" width="11" height="11">47777</li><li>>你好2019 今天是充满童真的一天。<br><img src="img/4.jpg" width="100" height="100">李欣 6月3日 <img src="img/3.jpg" width="11" height="11">294 68 <img src="img/2.jpg" width="11" height="11">78452 <img src="img/1.jpg" width="11" height="11"> 47777</li><li>>祝愿即将高考的学子们考出自已理想的成绩~<br><img src="img/4.jpg" width="100" height="100">杨凯 6月3日 <img src="img/3.jpg" width="11" height="11">29468 <img src="img/2.jpg" width="11" height="11">78452 <img src="img/1.jpg" width="11" height="11">47777</li><li>>偷偷藏起来，喜欢被同学取笑。<br><img src="img/4.jpg" width="100" height="100">张伟 6月3日 <img src="img/3.jpg" width="11" height="11">29468 <img src="img/2.jpg" width="11" height="11">78452  <img src="img/1.jpg" width="11" height="11">47777</li><li>>周一放送——这位顾客您好，今天想来买点什么?要不要看本季度最新到货的~<br><img src="img/4.jpg" width="100" height="100">胡糊 6月3日 <img src="img/3.jpg" width="11" height="11">29468 <img src="img/2.jpg" width="11" height="11">78452 <img src="img/1.jpg" width="11" height="11">47777</li></ul></div></article>
</div>
</body>
</html>
1+X高级试题（5）相关推荐
- 计算机录入技术考试试题,计算机文字录入处理员高级试题bhs1ga0ve.doc
计算机文字录入处理员高级试题bhs1ga0ve 2014年职业技能鉴定操作技能考核项目 计算机文字录入处理员 高 级 洛南县职业技能鉴定中心 计算机文字录入处理员高级试题(B组) 1. 金山打字通20 ...
- 计算机文字录入处理员考试题,计算机文字录入处理员高级试题A
1.2014 年职业技能鉴定操作技能考核项目计算机文字录入处理员高级洛南县职业技能鉴定中心1计算机文字录入处理员高级试题(A 组)1. 金山打字通 2010 中英文打字测试.2在 Word 中制作复杂 ...
- wrod2010软件计算机在线考试,全国计算机高新技术考试,office2010高级-试题1
全国计算机高新技术考试,office2010高级-试题1 厘米. 3．在演示文稿中插入数据表或图表: 按[样文7-1A]所示,在第八张幻灯片中插入C:\ATA_MSO\testing\142359-3 ...
- 计算机高新技术考试题百度云,全国计算机高新技术考试,office2010高级-试题1
全国计算机高新技术考试,office2010高级-试题1 (2)按[样文5-1]所示,将图表标题的字体设置为华文行楷.24磅.标准色中的"深蓝"色:将模拟运算表区域中文字的字体设置 ...
- 计算机办公高级试题,高级办公软件试题及解答
<高级办公软件试题及解答>针对原劳动和社会保障部(现已改为人力资源和社会保障部)全国计算机信息高新技术考试中的办公软件应用模块(Windows平台),内容涵盖了高级操作员级试题库的全部试题 ...
- 计算机操作员实操高级试题,计算机操作员高级实操(以往考过,可做平时练习素材)答题.doc...
试题1.计算机安装.连接.调试 试题2.文字录入 b)中文基本录入:在十分钟之内录入以下中文内容,错误率不高于千分之三. c)公式录入:在文档的结尾处录入下列公式. d)完成以上操作后,将最终结果以& ...
- 计算机知识高级试题,计算机高级技能证试题目计算机操作员高级理论知识复习.doc...
计算机高级技能证试题目计算机操作员高级理论知识复习 计算机高级技能证考试题目计算机操作员高级理论知识复习 一.单项选择题 1．正确阐述职业道德与人的事业关系的选项是( ). A.没有职业道德的人不会获 ...
- 计算机办公高级试题,高级办公软件之Word测试题
原标题:高级办公软件之Word测试题 [Word部分] 1单选(1分)将文档中一部分内容复制到别处,首先要进行的操作是______. A.粘贴 B.剪切 C.选定 D.复制 2单选(1分)关于word ...
- 质数的后代c语言,(信息学奥赛辅导)程序设计试题汇编(答案10)
(信息学奥赛辅导)程序设计试题汇编(答案10) 更新时间:2017/1/26 1:12:00 浏览量:741 手机版 程序设计试题及答案 (备注:试题难度评价采取五★级评价体系,分基础.容易.一般 ...
最新文章
- Linux流量监控工具 - iftop用法
- 妈妈帮×神策智能推荐，打造人性化智趣母婴服务
- matlab cep,【CEP】重构和改进HelloInsightObservable
- 初识ES-什么是elasticsearch
- resteasy_RESTEasy教程第1部分：基础
- RedHat 7配置keepalived+LVS实现高可用的Web负载均衡
- redis批量删除键的操作
- weixin-java-tools工具-出现JedisDataException问题
- 融思杯 第三届 部分wp
- CAD工具——批量打印
- java垃圾回收的方法_java垃圾回收的方法都有哪些
- 研发管理02----嵌入式硬件设计流程之完善
- linux 检查系统丢包,Linux系统网络丢包问题解决
- 单号自动识别查询 支持一键复制导出
- 教你操作视频横屏改竖屏的方法
- JVM上篇（13）：GC分类器
- 修改Zabbix标志性logo
- 埃森哲java转sfdc_【SFDC salesforce职责】2021年埃森哲SFDC salesforce岗位职责-看准网...
- python破解md5_python怎么使用md5加密解密
- Linux系统aboutyou,Linux字符设备驱动高级