i云笔记内涵资源: 编程思路笔记,源码分享,思路解答分享,封装函数分享,演示Demo等内容。 上传笔记可长期保存,笔记内容可进行加粗,居中,标记等功能,笔记可 置顶 不同的等级,将重要的笔记内容放前面。笔记内容可进行 加密 ,加密后不展示在首页,内容只能被自己查看! 有问题可联系QQ3399769530 或微信cm1598421 添加时备注来意 网站已运行 {DAY_COUNT} 天 已有笔记 {CONTENT_COUNT} 篇
进制转换器 http://notei.cn/tool/tool_hex.html MD5加密工具 http://notei.cn/tool/tool_md5.html Base64加解密 http://notei.cn/tool/tool_base64.html Aes加解密工具 http://notei.cn/tool/tool_Aes.html 前端学习软件 http://h5.notei.cn
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom Font Example</title> <style> /* 使用@font-face规则定义字体 */ @font-face { font-family: 'AkalTun'; /* 定义一个字体名 */ src: url('https://akaltun.cn/1/akaltun.ttf') format('truetype'); /* 指定字体文件和格式 */ } /* 应用自定义字体到body,也可以应用到其他元素 */ body { font-family: 'AkalTun', sans-serif; /* 将字体应用到body,如果字体加载失败则回退到sans-serif */ } </style> </head> <body> <div id="container"> <h1>欢迎来到我的网站ئۇيغۇرچە</h1> <p>这里是使用自定义字体的文本。</p> <!-- 其他内容 --> </div> </body> </html>
Mysql外链约束规则
java的mvc三层架构分别是: View(界面层),Service(业务逻辑层),DAO(数据访问层) V:View 网页视图,为用户提供能够看到并且使用的界面,与用户直接进行交互。 M:Model,业务模型,处理业务 C:Controller,控制器,处理请求,调用模型和视图 dao层负责对数据进行直接操控,最底层 service层负责对传递过来的参数验证,以及其他逻辑验证操作。验证完毕访问dao层进行数据操控 servlet层负责接收参数,然后调用service层进行处理 三个层分工合作,有利于后期的功能维护,那层出了问题就去处理哪层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } li { list-style-type: none; } a { text-decoration: none; } .nav-box { width: 980px; height: 90px; margin: 20px auto; display: flex; align-items: center; } .right { flex: 1; margin-left: 20px; } .right-top-tag li { display: inline-block; font-size: 12px; border-radius: 3px 3px 0 0; overflow: hidden; } .right-top-tag li a { color: #666; padding: 5px 15px; display: inline-block; } .right-search { margin-top: -4px; display: flex; } .right-search input { border: 3px solid #F37B03; width: 100%; height: 27px; background: url("./images/tb/search.jpg") no-repeat 10px; flex: 1; outline: none; padding-left: 30px; color: #666; } .right-search .button { flex-shrink: 1; width: 133px; height: 33px; background: url("images/tb/button.jpg") no-repeat; border: none; } .right-search .tip { height: 33px; } .right-search .tip p { line-height: 16px; font-size: 12px; margin-left: 10px; color: #666; } .right-title-nav ul li { display: inline-block; margin-top: 6px; } .right-title-nav ul li a { color: #555; font-size: 12px; margin-right: 12px; } </style> </head> <body> <div class="nav-box"> <div class="left"> <img src="./images/tb/logo.jpg" alt=""> </div> <div class="right"> <div class="right-top-tag"> <ul> <li style="background-color: #F37B03;"><a style="color: #fff;" href="#"> 宝贝 </a></li> <li><a href="#"> 天猫<span style="color: #f79a3d;">(淘宝商城)</span> </a></li> <li><a href="#"> 店铺 </a></li> </ul> </div> <div class="right-search"> <input type="text"> <button class="button"></button> <div class="tip"> <p>高级搜索</p> <p>使用帮助</p> </div> </div> <div class="right-title-nav"> <ul> <li> <a href="#">长裙</a> </li> <li> <a href="#">时尚包包</a> </li> <li> <a href="#">新款连衣裙</a> </li> <li> <a href="#">中老年夏服</a> </li> <li> <a href="#">新款连衣裙</a> </li> <li> <a href="#">中老年夏服</a> </li> <li> <a href="#">更多>></a> </li> </ul> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } div { box-sizing: border-box; color: #DE8786; } .mainbox { width: 980px; margin: 0 auto; } .nav { background-color: #FE9AB5; } .nav .item { display: inline-block; line-height: 46px; padding: 0 30px; color: #fff; } .banner { text-align: center; } .frombox { background: url("./images/content_bg.jpg"); padding: 0 180px; } .step { padding: 10px 0; } .step .tip { font-size: 20px; line-height: 42px; float: left; } .userinfo .title { border-bottom: 1px solid #FE9AB5; line-height: 42px; margin-bottom: 10px; } input { border: 1px solid #FE9AB5; } .tableinput { padding: 5px 30px; } .tableinput tr { margin: 10px 0; } .tableinput .info { width: 220px; height: 22px; } .tableinput tr .titles { text-align: right; } .tableinput select { width: 168px; border-color: #FE9AB5; color: #FE9AB5; } </style> </head> <body> <div class="content"> <div class="logo mainbox"> <img src="./images/logo.jpg" alt=""> </div> <div class="nav"> <ul class="mainbox"> <li class="item">首页</li> <li class="item">会员</li> <li class="item">活动</li> <li class="item">直播</li> <li class="item">视频</li> <li class="item" style="background-color: #FE9AB5;">注册</li> </ul> </div> <div class="banner"> <img src="./images/banner.jpg" alt=""> </div> <div class="frombox mainbox"> <div class="step"> <span class="tip">注册步骤:</span> <img src="./images/step.jpg" alt=""> </div> <div class="userinfo"> <p class="title">您的账号信息:</p> <table class="tableinput"> <tr> <td class="titles">注册方式:</td> <td><input type="radio"> E-main注册 <input type="radio"> 手机号码注册</td> </tr> <tr> <td>注册邮箱:</td> <td><input class="info" type="email"></td> </tr> <tr> <td class="titles">注册手机:</td> <td><input class="info" type="email"></td> </tr> <tr> <td class="titles">登录密码:</td> <td><input class="info" type="email"></td> </tr> <tr> <td class="titles">昵称:</td> <td><input class="info" type="email"></td> </tr> </table> </div> <div class="userinfo"> <p class="title">您的个人信息:</p> <table class="tableinput"> <tr> <td class="titles">性别:</td> <td><input type="radio"> 男 <input type="radio"> 女</td> </tr> <tr> <td class="titles">学历:</td> <td><select> <option value="初中">初中</option> <option value="高中">高中</option> <option value="大专">大专</option> <option value="本科">本科</option> </select></td> </tr> <tr> <td class="titles">所在城市:</td> <td><select> <option value="北京">北京</option> <option value="江西">江西</option> <option value="四川">四川</option> </select></td> </tr> </table> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <style> body { background-color: #EBEBEB; } .content { background: url("images/form_bg.jpg"); width: 1430px; height: 717px; margin: 0 auto; position: relative; } .frombox { width: 700px; height: 540px; position: absolute; top: 160px; left: 700px; } .title { text-align: center; font-size: 24px; } .line { padding: 7px 0; font-size: 15px; } .line input { height: 26px; width: 220px; } .line .tip { text-align: right; display: inline-block; width: 90px; } .line.color input { width: 120px; } .line.btn input { background-color: #93B518; color: #fff; width: 120px; height: 36px; border: 0; margin: 15px 28px; } </style> </head> <body> <div class="content"> <div class="frombox"> <h1 class="title">传智学员信息登记表</h1> <form action="" method="GET"> <div class="line"> <label class="tip">用户登录名:</label> <input type="text" name="username" value="mymail@163.com" readonly="readonly" disabled="disabled"> <label>(不能修改,只能查看)</label> </div> <div class="line"> <label class="tip">真实姓名:</label> <input type="text" name="name" placeholder="例如:王鹏" required pattern="^[\u4e00-\u9fa5]+$"> <label>(必须填写,只能输入汉字)</label> </div> <div class="line"> <label class="tip">真实年龄:</label> <input type="number" name="age" min="0" max="100" value="24" required placeholder="16-100"> <label>(必须填写)</label> </div> <div class="line"> <label class="tip">出生日期:</label> <input type="date" name="date" required> <label>(必须填写)</label> </div> <div class="line"> <label class="tip">电子邮箱:</label> <input type="email" name="email" placeholder="123456@qq.com" required> <label>(必须填写)</label> </div> <div class="line"> <label class="tip">身份证号:</label> <input type="text" name="idcard" required pattern="^[0-9]{17}[0-9Xx]$"> <label>(必须填写,能够以数字,字母x结尾的短身份证号)</label> </div> <div class="line"> <label class="tip">手机号码:</label> <input type="tel" name="tel" required> <label>(必须填写)</label> </div> <div class="line"> <label class="tip">个人主页:</label> <input type="url" name="myurl" placeholder="http://bk.notei.cn"> <label>(请选择网址)</label> </div> <div class="line color"> <label class="tip">幸运颜色:</label> <input type="color" name="luckcolor" value="#E2D546"> <label>(请选择你喜欢的颜色)</label> </div> <div class="line btn"> <input type="submit" value="提交"> <input type="reset" value="重置"> </div> </form> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { box-sizing: border-box; } body { background-color: #FFF9ED; } a { text-decoration: none; color: #333; } li { list-style-type: none; } .content { display: flex; flex-direction: column; justify-content: center; align-items: center; } .container { width: 980px; margin: 0 auto; height: 100px; } .nav { background: url("images/head_bg.jpg") repeat-x; height: 128px; width: 100%; } .nav li { float: left; } .nav .item a { display: inline-block; width: 120px; height: 128px; line-height: 64px; text-align: center; color: #fff; margin: 0 5px; font-size: 17px; } .nav .item a:hover { background: url("images/xuanfu.png") no-repeat; } .banner img { width: 100%; } .borbox { background-color: #EC6E47; padding: 10px 30px; height: auto; } .borbox ul { width: 100%; display: flex; padding: 10px; background-color: #fff; } .borbox ul li { flex: 1 0 0; height: 100%; margin: 0 3px; } .borbox ul li .flexbox { display: flex; } .borbox ul li div { background-color: #242424; color: #fff; } .borbox ul li .top { margin-bottom: 8px; } .borbox ul li .name { text-align: center; flex: 1 0 0; } .borbox ul .left .top .name { line-height: 169px; } .borbox ul .left .bottom .name { line-height: 137px; } .borbox ul .center .top { height: 117px; line-height: 117px; } .borbox ul .center .bottom { height: 189px; line-height: 189px; } .borbox ul .right .top { height: 313px; line-height: 313px; } .morebox { margin-top: 50px; text-align: left; height: auto; } .morebox>.title { display: inline-block; background-color: #EC6E47; color: #fff; padding: 10px 20px; font-size: 16px; font-weight: normal; } .morebox .list { display: flex; gap: 8px; background-color: #fff; padding: 10px; border: 1px solid #ccc; } .morebox .list li { flex: 1 0 0; border: 1px solid #ccc; padding-bottom: 15px; } .morebox .list li img { width: 100%; border-bottom: 1px solid #ccc; } .morebox .list li .title { text-align: center; width: 100%; color: #666; padding: 10px 0; font-size: 18px; } .morebox .list li .buybox { width: 80%; margin: 0 auto; background: url("./images/gouwu.jpg") no-repeat; background-color: #EC6E47; color: #fff; padding-left: 56px; height: 36px; line-height: 36px; } .footer { background-color: #111; width: 100%; color: #fff; padding: 50px 0; text-align: center; font-size: 14px; line-height: 29px; } </style> </head> <body> <div class="content"> <div class="nav"> <ul class="container"> <li><img src="./images/logo.png" alt="logo"></li> <li class="item"><a href="#">穿搭速递</a></li> <li class="item"><a href="#">时尚大片</a></li> <li class="item"><a href="#">星着装</a></li> <li class="item"><a href="#">时尚园</a></li> <li class="item"><a href="#">时尚专栏</a></li> <li class="item"><a href="#">会员/登录</a></li> </ul> </div> <div class="banner"> <img src="./images/banner.jpg" alt=""> </div> <div class="borbox container"> <ul> <li class="left"> <div class="top flexbox"> <img src="./images/pic01.jpg" alt=""> <p class="name">明星时尚</p> </div> <div class="bottom flexbox"> <img src="./images/pic02.jpg" alt=""> <p class="name">明星时尚</p> </div> </li> <li class="center"> <div class="top flexbox"> <img src="./images/pic03.jpg" alt=""> <p class="name">明星时尚</p> </div> <div class="bottom flexbox"> <img src="./images/pic04.jpg" alt=""> <p class="name">明星时尚</p> </div> </li> <li class="right"> <div class="top flexbox"> <img src="./images/pic05.jpg" alt=""> <p class="name">明星时尚</p> </div> </li> </ul> </div> <div class="morebox container"> <h2 class="title">潮流前沿/Tadil current</h2> <ul class="list"> <li> <img src="./images/match01.jpg" alt=""> <p class="title">潮流饰品</p> <div class="buybox"> 快速购买通道 </div> </li> <li> <img src="./images/match02.jpg" alt=""> <p class="title">潮流饰品</p> <div class="buybox"> 快速购买通道 </div> </li> <li> <img src="./images/match03.jpg" alt=""> <p class="title">潮流饰品</p> <div class="buybox"> 快速购买通道 </div> </li> <li> <img src="./images/match04.jpg" alt=""> <p class="title">潮流饰品</p> <div class="buybox"> 快速购买通道 </div> </li> </ul> </div> <div class="footer"> <p> All right reseved©2006-2016 CHAOUUFUSHI.com, All right reseved</p> <p>2021-2018, 版权所有 潮流服饰 85CP备案13385453</p> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } div { box-sizing: border-box; } .min-content { width: 980px; margin: 0 auto; } .content { width: 1280px; margin: 0 auto; } .header { height: 120px; line-height: 120px; background: #fff; } .header .logo { float: left; height: 80px; margin-top: 20px; } .header .goto { float: right; color: #666; } .header .goto a { color: #666; text-decoration: none; } .navbox { height: 60px; background: #404042; line-height: 60px; color: #fff; font-size: 18px; } .navbox ul li { padding: 0 42px; float: left; } .navbox ul li:hover { background-color: #DA5454; } .banner img { width: 100%; } .function ul { display: flex; } .function ul li { padding: 34px 0; flex: 1 0 0; border: 1px solid #ddd; border-top: 0; border-spacing: 0; } .function .item img { height: 50px; margin: 0 15px 0 28px; float: left; } .function .item .info .title { font-size: 17px; } .function .item .info .subtitle { font-size: 14px; color: #666; } .demobox,.newsbox { margin-top: 10px; } .demobox ul .item { float: left; margin: 3px 8px; } .demobox .title,.newsbox .title { line-height: 56px; border-bottom: 1px solid #ddd; margin-bottom: 10px; color: #222; font-size: 18px; } .newsbox .itemtitle { font-size: 15px; color: #444; } .newsbox>ul { display: flex; gap: 15px; } .newsbox>ul .listbox { flex: 1 0 0; border: 1px solid #ddd; padding: 25px 20px; } .newsbox>ul .listbox .itemtitle { margin-bottom: 5px; } .newsbox>ul .listbox ul .item { border-bottom: 1px solid #ddd; padding: 20px 0; } .newsbox>ul .listbox ul .item img { float: left; margin-right: 15px; } .newsbox>ul .listbox ul .item .infotitle { font-size: 16px; color: #222; } .newsbox>ul .listbox ul .item .subtitle { font-size: 13px; color: #aaa; } .footer { padding: 46px; margin-top: 20px; background-color: #111; text-align: center; color: #fff; line-height: 36px; font-size: 15px; } </style> </head> <body> <div class="content"> <div class="min-content"> <div class="header"> <img class="logo" src="./images/logo.png" alt="logo"> <div class="goto"> <a href="#">登录</a> | <a href="#">注册</a> </div> </div> </div> <div class="navbox"> <div class="min-content"> <ul> <li class="item">首页</li> <li class="item">设计案例</li> <li class="item">装修图库</li> <li class="item">有问必答</li> <li class="item">逛商品</li> </ul> </div> </div> <div class="banner"> <img src="./images/banner.jpg" alt="banner"> </div> <div class="function min-content"> <ul> <li class="item"> <img src="./images/pic01.jpg" alt=""> <div class="info"> <p class="title">浏览真实设计案例</p> <p class="subtitle">设计师原创作品</p> </div> </li> <li class="item"> <img src="./images/pic02.jpg" alt=""> <div class="info"> <p class="title">浏览真实设计案例</p> <p class="subtitle">设计师原创作品</p> </div> </li> <li class="item"> <img src="./images/pic03.jpg" alt=""> <div class="info"> <p class="title">浏览真实设计案例</p> <p class="subtitle">设计师原创作品</p> </div> </li> <li class="item"> <img src="./images/pic04.jpg" alt=""> <div class="info"> <p class="title">浏览真实设计案例</p> <p class="subtitle">设计师原创作品</p> </div> </li> </ul> </div> <div class="demobox min-content"> <h4 class="title">设计案例</h4> <ul> <li class="item"> <img src="./images/pic05.jpg" alt=""> </li> <li class="item"> <img src="./images/pic06.jpg" alt=""> </li> <li class="item"> <img src="./images/pic07.jpg" alt=""> </li> <li class="item"> <img src="./images/pic08.jpg" alt=""> </li> <li class="item"> <img src="./images/pic09.jpg" alt=""> </li> <li class="item"> <img src="./images/pic10.jpg" alt=""> </li> </ul> </div> <div class="newsbox min-content"> <h4 class="title">最新动态</h4> <ul> <li class="listbox"> <h3 class="itemtitle">有问必答</h3> <ul class=""> <li class="item"> <img src="./images/pic01.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic02.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic03.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> </ul> </li> <li class="listbox"> <h3 class="itemtitle">发布需求</h3> <ul class=""> <li class="item"> <img src="./images/pic04.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic05.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic06.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> </ul> </li> <li class="listbox"> <h3 class="itemtitle">预约设计师</h3> <ul class=""> <li class="item"> <img src="./images/pic06.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic07.png" alt=""> <div class="info"> <p class="infotitle">厨房在哪个方位风水好</p> <p class="subtitle">回答:看风水要结合...</p> </div> </li> <li class="item"> <img src="./images/pic08.png" alt=""> <div class="info"> <p class="infotitle">卧室多大比较合适</p> <p class="subtitle">回答:一般卧室的大小...</p> </div> </li> </ul> </li> </ul> </div> </div> <div class="footer"> <p>关于我们 | 联系我们 | 意见建议 | 帮助中心 | 使用条款</p> <p>免责声明:本网站部分内容由用户自行上传,如权利人发现存在误传其作品情形,请及时与本站联系。</p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document1</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } a { color: #666; text-decoration: none; } .content { width: 1280px; margin: 0 auto; } .nav { height: 600px; background: url("images/bg.png") center; background-size: cover; } .navlist { padding: 30px 60px; box-sizing: border-box; text-align: center; } .navlist ul li { float: left; line-height: 60px; padding: 0 50px; font-size: 16px; } .seach { position: relative; width: 128px; height: 36px; margin-top: 12px; } .seach img { height: 16px; position: absolute; top: calc(50% - 8px); left: 10px; z-index: 10; } .seach .input { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: none; border-radius: 18px; font-size: 12px; padding-left: 32px; box-sizing: border-box; outline: none; color: #666 } .hot { text-align: center; margin-top: 20px; } .hotlist { margin-top: 20px; text-align: left; padding: 0 60px; box-sizing: border-box; } .hotlist .item .img img { width: 100%; } .hotlist .item .title { padding: 10px; box-sizing: border-box; font-weight: bold; font-size: 18px; color: #333; border-bottom: 1px solid #ddd; } .hotlist .item .info { padding: 10px; padding-bottom: 30px; color: #bbb; box-sizing: border-box; } .hotlist { display: flex; gap: 80px; } .bottomimage img { width: 100%; } .life { background-color: #E1EBF2; margin-top: 50px; text-align: center; padding: 30px 0; } .life ul { text-align: center; } .life ul li { display: inline-block; margin: 20px 20px; } .footer { height: 80px; background: url("images/footer_bg.jpg"); color: #fff; text-align: center; line-height: 80px; margin-top: 50px; } </style> </head> <body> <div class="content"> <div class="nav"> <div class="navlist"> <ul> <li> <img class="logo" src="./images/logo.png" alt=""> </li> <li><a href="#">网站首页</a></li> <li><a href="#">床和床垫</a></li> <li><a href="#">卧室纺织品</a></li> <li><a href="#">灯具照明</a></li> <li class="seach"> <img src="./images/f.png" alt=""> <input class="input" type="text" placeholder="输入商品名称"> <li> </ul> </div> </div> <div class="hot"> <img src="./images/dongtai.jpg" alt=""> <ul class="hotlist"> <li class="item"> <dt class="box"> <dd class="img"> <img src="./images/news1.jpg" alt=""> </dd> <dd class="title">BEST贝达</dd> <dd class="info">将杂乱无章的物品收纳到视线之外,在我怕门后要展示台的心爱之物!</dd> <dd class="bottomimage"><img src="./images/yinying.jpg" alt=""></dd> </dt> </li> <li class="item"> <dt class="box"> <dd class="img"> <img src="./images/news2.jpg" alt=""> </dd> <dd class="title">BEST贝达</dd> <dd class="info">将杂乱无章的物品收纳到视线之外,在我怕门后要展示台的心爱之物!</dd> <dd class="bottomimage"><img src="./images/yinying.jpg" alt=""></dd> </dt> </li> <li class="item"> <dt class="box"> <dd class="img"> <img src="./images/news3.jpg" alt=""> </dd> <dd class="title">BEST贝达</dd> <dd class="info">将杂乱无章的物品收纳到视线之外,在我怕门后要展示台的心爱之物!</dd> <dd class="bottomimage"><img src="./images/yinying.jpg" alt=""></dd> </dt> </li> </ul> </div> <div class="life"> <img src="./images/shenghuo.png" alt=""> <ul> <li><img src="./images/img1.jpg" alt=""></li> <li><img src="./images/img2.jpg" alt=""></li> <li><img src="./images/img3.jpg" alt=""></li> </ul> </div> </div> <div class="footer"> 爱家居版权所有2016-2026京ICP备222222222号 京公网安备2222222222222 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document2</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } .main { width: 980px; margin: 0 auto; } .top { background: url("images/logo.jpg") no-repeat; background-position: 50px; height: 56px; line-height: 56px; margin-top: 10px; } .top .user { float: right; margin-right: 50px; } .top .user a { color: #FF9C00; text-decoration: none; } .nav { background-color: #FF9C00; height: 46px; margin-top: 10px; text-align: center; line-height: 46px; font-size: 16px; } .navlist li { display: inline-block; height: 100%; } .navlist li a { height: 100%; padding: 0 25px; color: #B55F23; text-decoration: none; display: inline-block; } .navlist li a:hover { background-color: #fca76a; } .banner { height: 432px; background: url("./images/banner.jpg") no-repeat center; background-size: cover; } .infobox { height: 160px; background-color: #E7BF80; } .infobox ul { text-align: center; } .infobox ul li { width: 120px; height: 120px; border-radius: 50%; display: inline-block; margin: 0 20px; margin-top: 20px; overflow: hidden; position: relative; } .infobox ul li .icon { width: 120px; position: absolute; left: 0; } .infobox ul li .title { color: #A47167; position: absolute; text-align: center; top: 76px; width: 100%; } .shoplist { background-color: #F8F5BC; padding: 50px 80px; padding-bottom: 60px; } .shoplist ul { display: flex; gap: 20px; flex-wrap: wrap; } .shoplist .item { flex: 20%; background-color: #fff; border: 1px solid #ddd; padding: 10px; box-sizing: border-box; } .shoplist .item img { width: 100%; } .shoplist .item .title,.shoplist .item .price { color: #A47167; margin-top: 5px; } .shoplist .item .name,.shoplist .item .price span { color: #FDA6A0; margin-top: 5px; } .footer { height: 120px; line-height: 120px; text-align: center; color: #fff; background: url("./images/footer.png") repeat-x; margin-top: -10px; } </style> </head> <body> <div class="main"> <div class="top"> <div class="user"> <a href="#">登录 |</a> <a href="#">注册</a> </div> </div> <div class="nav"> <ul class="navlist"> <li><a href="#">首页</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">美食甜品</a></li> <li><a href="#">用户留言</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <div class="banner"></div> <div class="infobox"> <ul> <li> <img class="icon" src="./images/list1.png" alt=""> <p class="title">提拉米苏</p> </li> <li> <img class="icon" src="./images/list2.png" alt=""> <p class="title">甜甜圈</p> </li> <li> <img class="icon" src="./images/list3.png" alt=""> <p class="title">芝士蛋糕</p> </li> <li> <img class="icon" src="./images/list4.png" alt=""> <p class="title">马卡龙</p> </li> <li> <img class="icon" src="./images/list5.png" alt=""> <p class="title">西式甜点</p> </li> </ul> </div> <div class="shoplist"> <ul> <li class="item"> <img src="./images/con1.jpg" alt=""> <p class="title">爱的N次方</p> <p class="name">马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con2.jpg" alt=""> <p class="title">果肉果冻</p> <p class="name">双色马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con3.jpg" alt=""> <p class="title">芒果味</p> <p class="name">补丁马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con4.jpg" alt=""> <p class="title">果冻荔枝味</p> <p class="name">多彩马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con5.jpg" alt=""> <p class="title">果冻巧克力</p> <p class="name">西式甜点</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con6.jpg" alt=""> <p class="title">流动水果</p> <p class="name">提拉米苏</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con7.jpg" alt=""> <p class="title">玫瑰花型</p> <p class="name">马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con8.jpg" alt=""> <p class="title">木买奶油</p> <p class="name">芝士蛋糕</p> <p class="price">价格:<span>30元</span></p> </li> </ul> </div> <div class="footer"> 西式甜点网版权所有2000-2016京ICP备08001421号 京公网安备110108007702 </div> </div> </body> </html>
import java.util.Scanner; //使用字符串截取,得到身份证基本信息 public class demo2 { public static void main(String[] args) { Scanner sc = new Scanner(System.in); System.out.println("输入身份证号码"); String idCard = sc.next(); String start_year = idCard.substring(6,10); String start_month = idCard.substring(10,12); String start_day = idCard.substring(12,14); char sex = idCard.charAt(16); int num = sex + '0'; //使用ASCII特性,将截取到的字符转化为int类型 if(num % 2 == 0) { sex = '女'; }else{ sex = '男'; } // System.out.println('a' + 0); 查看ASCII对应的值 System.out.println(start_year + "年" + start_month + "月" + start_day + "日" + "\n性别:" + sex); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <style> body { background-color: #EBEBEB; } .content { background: url("images/form_bg.jpg"); width: 1430px; height: 717px; margin: 0 auto; position: relative; } .frombox { width: 700px; height: 540px; position: absolute; top: 160px; left: 700px; } .title { text-align: center; font-size: 24px; } .line { padding: 7px 0; font-size: 15px; } .line input { height: 26px; width: 220px; } .line .tip { text-align: right; display: inline-block; width: 90px; } .line.color input { width: 120px; } .line.btn input { background-color: #93B518; color: #fff; width: 120px; height: 36px; border: 0; margin: 15px 28px; } </style> </head> <body> <div class="content"> <div class="frombox"> <h1 class="title">传智学员信息登记表</h1> <form action="" method="GET"> <div class="line"> <label class="tip">用户登录名:</label> <input type="text" name="username" value="mymail@163.com" readonly="readonly" disabled="disabled"> <label>(不能修改,只能查看)</label> </div> <div class="line"> <label class="tip">真实姓名:</label> <input type="text" name="name" placeholder="例如:王鹏" required pattern="^[\u4e00-\u9fa5]+$"> <label>(必须填写,只能输入汉字)</label> </div> <div class="line"> <label class="tip">真实年龄:</label> <input type="number" name="age" min="0" max="100" value="24" required placeholder="16-100"> <label>(必须填写)</label> </div> <div class="line"> <label class="tip">出生日期:</label> <input type="date" name="date" required> <label>(必须填写)</label> </div> <div class="line"> <label class="tip">电子邮箱:</label> <input type="email" name="email" placeholder="123456@qq.com" required> <label>(必须填写)</label> </div> <div class="line"> <label class="tip">身份证号:</label> <input type="text" name="idcard" required pattern="^[0-9]{17}[0-9Xx]$"> <label>(必须填写,能够以数字,字母x结尾的短身份证号)</label> </div> <div class="line"> <label class="tip">手机号码:</label> <input type="tel" name="tel" required> <label>(必须填写)</label> </div> <div class="line"> <label class="tip">个人主页:</label> <input type="url" name="myurl" placeholder="http://bk.notei.cn"> <label>(请选择网址)</label> </div> <div class="line color"> <label class="tip">幸运颜色:</label> <input type="color" name="luckcolor" value="#E2D546"> <label>(请选择你喜欢的颜色)</label> </div> <div class="line btn"> <input type="submit" value="提交"> <input type="reset" value="重置"> </div> </form> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document2</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } .main { width: 980px; margin: 0 auto; } .top { background: url("images/logo.jpg") no-repeat; background-position: 50px; height: 56px; line-height: 56px; margin-top: 10px; } .top .user { float: right; margin-right: 50px; } .top .user a { color: #FF9C00; text-decoration: none; } .nav { background-color: #FF9C00; height: 46px; margin-top: 10px; text-align: center; line-height: 46px; font-size: 16px; } .navlist li { display: inline-block; height: 100%; } .navlist li a { height: 100%; padding: 0 25px; color: #B55F23; text-decoration: none; display: inline-block; } .navlist li a:hover { background-color: #fca76a; } .banner { height: 432px; background: url("./images/banner.jpg") no-repeat center; background-size: cover; } .infobox { height: 160px; background-color: #E7BF80; } .infobox ul { text-align: center; } .infobox ul li { width: 120px; height: 120px; border-radius: 50%; display: inline-block; margin: 0 20px; margin-top: 20px; overflow: hidden; position: relative; } .infobox ul li .icon { width: 120px; position: absolute; left: 0; } .infobox ul li .title { color: #A47167; position: absolute; text-align: center; top: 76px; width: 100%; } .shoplist { background-color: #F8F5BC; padding: 50px 80px; padding-bottom: 60px; } .shoplist ul { display: flex; gap: 20px; flex-wrap: wrap; } .shoplist .item { flex: 20%; background-color: #fff; border: 1px solid #ddd; padding: 10px; box-sizing: border-box; } .shoplist .item img { width: 100%; } .shoplist .item .title,.shoplist .item .price { color: #A47167; margin-top: 5px; } .shoplist .item .name,.shoplist .item .price span { color: #FDA6A0; margin-top: 5px; } .footer { height: 120px; line-height: 120px; text-align: center; color: #fff; background: url("./images/footer.png") repeat-x; margin-top: -10px; } </style> </head> <body> <div class="main"> <div class="top"> <div class="user"> <a href="#">登录 |</a> <a href="#">注册</a> </div> </div> <div class="nav"> <ul class="navlist"> <li><a href="#">首页</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">美食甜品</a></li> <li><a href="#">用户留言</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <div class="banner"></div> <div class="infobox"> <ul> <li> <img class="icon" src="./images/list1.png" alt=""> <p class="title">提拉米苏</p> </li> <li> <img class="icon" src="./images/list2.png" alt=""> <p class="title">甜甜圈</p> </li> <li> <img class="icon" src="./images/list3.png" alt=""> <p class="title">芝士蛋糕</p> </li> <li> <img class="icon" src="./images/list4.png" alt=""> <p class="title">马卡龙</p> </li> <li> <img class="icon" src="./images/list5.png" alt=""> <p class="title">西式甜点</p> </li> </ul> </div> <div class="shoplist"> <ul> <li class="item"> <img src="./images/con1.jpg" alt=""> <p class="title">爱的N次方</p> <p class="name">马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con2.jpg" alt=""> <p class="title">果肉果冻</p> <p class="name">双色马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con3.jpg" alt=""> <p class="title">芒果味</p> <p class="name">补丁马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con4.jpg" alt=""> <p class="title">果冻荔枝味</p> <p class="name">多彩马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con5.jpg" alt=""> <p class="title">果冻巧克力</p> <p class="name">西式甜点</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con6.jpg" alt=""> <p class="title">流动水果</p> <p class="name">提拉米苏</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con7.jpg" alt=""> <p class="title">玫瑰花型</p> <p class="name">马卡龙</p> <p class="price">价格:<span>30元</span></p> </li> <li class="item"> <img src="./images/con8.jpg" alt=""> <p class="title">木买奶油</p> <p class="name">芝士蛋糕</p> <p class="price">价格:<span>30元</span></p> </li> </ul> </div> <div class="footer"> 西式甜点网版权所有2000-2016京ICP备08001421号 京公网安备110108007702 </div> </div> </body> </html>
绑定Vue内容前需要先在Vue中的data函数中声明好需要绑定的数据 v-html 主要用于显示html标签内容 用法:v-html="html" v-bind 主要用于绑定标签属性内容 用法:v-bind:style="style" v-on 主要用于绑定标签点击时触发的函数事件 用法:v-on:click="clicks" v-if Vue中的标签判断语句,如果条件为true标签会渲染在页面,如果为false那么标签会被隐藏 用法:v-if="条件" v-for 用于将数组渲染成列表 用法:<view v-for="(item,index) in list">{{item}}---{{index}}</view> v-model 用于双向绑定数据 用法:<input class="inp" v-model="input"/> ...
首先常用的格式化输出有: 使用 % 占位符输出,常用的占用符可以在贴图中查看 用法: name = "Chumo" font = "My Name Is %s" print(font % (name)) 这里用的是%s字符串占位符,string的首字符s 使用%d输出整数: age = 19 font = "今年%d岁" print(font % (age)) 多个参数用法: name = "Chumo" age = 19 font = "我是%s今年%d岁" print(font % (name,age)) 上面就是基本的占位符输出用法 接下来就是使用 format 格式化 用法: age = 19 font = "今年{}岁" print(font.format(age)) 扩展:使用位置和关键字参数 print('我的名字是 {0}, 我的年龄是 {1}'.format(name,age)) print('我的名字是 {name}, 我的年龄是 {age}'.format(name="Chumo",age=18)) 上面是基本的format格式化输出方法 然后是 f-string 格式化输出方法 用法: name = 'chumo' age = 18 print(f'我的名字是 {name}, 我的年龄是 {age}') 要注意print函数中的 f 字符,在输出内容前加一个f字符,就可以直接将变量在字符串中调用{name} 上面是三种常用的格式化输出变量方式 接下来就是输出字符保留N位小数点方式: 首先说的是 % 占位符输出保留小数点的写法,首先保留小数点肯定是需要一个浮点型的数据,这边浮点数据用的是%f也就是float的首字符f来表示: name = 'chumo' age = 18.43 print(f'我的名字是 {name}, 我的年龄是 %f' % (age)) 输出结果为:我的名字是 chumo, 我的年龄是 18.430000 默认是保留小数点后面6位数据,怎么让他只保留两位呢? 我们可以用 %.2f 的方式保留两位小数: name = 'chumo' age = 18.43 print(f'我的名字是 {name}, 我的年龄是 %.2f' % (age)) 最后输出的结果为:我的名字是 chumo, 我的年龄是 18.43 想要保留更多小数可以在%.2f中修改数字大小来实现:%.3f就是保留三位 接下来就是format函数保留小数点的方法: age = 18.43 print('我的年龄是{:.2f}'.format(age)) 用的是 {:.2f} 保留两位小数的写法 前面的 : 符号是什么意思呢? 其实看下面这个例子就会知道: name = 'chumo' age = float(18.43) print('我的名字是 {name}, 我的年龄是{age:.1f}'.format(name=name,age=age)) 可以看到用的是{age:.1f}的方式输出保留小数点后一位 里面的 : 就是将 age 与后面的小数点长度区分开来 最后是第三种方法f-string格式化(python3.6以后的版本中可以使用) name = 'chumo' age = 18.43 age = round(age,1) print(f'名称{name}年龄{age}') 这种方法我前面介绍过了,是不需要区分数据类型就可以直接进行输出的 需要用到 round 函数处理浮点数保留的位数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content { width: 980px; margin: auto; } .top { width: 100%; } .box { margin-top: 10px; position: relative; } .left { position: absolute; border-right: 1px solid #ddd; } .right { position: absolute; right: 0; margin-left: 10px; border-left: 1px solid #ddd; } .mid { position: absolute; left: 110px; } </style> </head> <body> <div class="content"> <img class="top" src="./images/top.jpg" alt="图片"> <div class="box"> <img class="left" src="./images/left.jpg" alt="图片"> <img class="mid" src="./images/mid.jpg" alt="图片"> <img class="right" src="./images/right.jpg" alt="图片"> </div> </div> </body> </html>
<?php /** * 功能:Curl外部资源请求函数封装 */ function postUrl($url,$data=[]){ /* $url - 指向URL连接 $data - 提交POST数据 */ $ch=curl_init(); curl_setopt($ch,CURLOPT_POST, true); curl_setopt($ch,CURLOPT_RETURNTRANSFER, true); curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch,CURLOPT_POST,count($data)); curl_setopt($ch,CURLOPT_POSTFIELDS,$data); $response=curl_exec($ch); curl_close($ch); $result = json_decode($response,true); return $result; } #发送POST请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } div { box-sizing: border-box; } .min-content { width: 980px; margin: 0 auto; } .content { width: 1280px; margin: 0 auto; } .header { height: 120px; line-height: 120px; background: #fff; } .header .logo { float: left; height: 80px; margin-top: 20px; } .header .goto { float: right; color: #666; } .header .goto a { color: #666; text-decoration: none; } .navbox { height: 60px; background: #404042; line-height: 60px; color: #fff; font-size: 18px; } .navbox ul li { padding: 0 42px; float: left; } .navbox ul li:hover { background-color: #DA5454; } .banner img { width: 100%; } .function ul { display: flex; } .function ul li { padding: 34px 0; flex: 1 0 0; border: 1px solid #ddd; border-top: 0; border-spacing: 0; } .function .item img { height: 50px; margin: 0 15px 0 28px; float: left; } .function .item .info .title { font-size: 17px; } .function .item .info .subtitle { font-size: 14px; color: #666; } .demobox,.newsbox { margin-top: 10px; } .demobox ul .item { float: left; margin: 3px 8px; } .demobox .title,.newsbox .title { line-height: 56px; border-bottom: 1px solid #ddd; margin-bottom: 10px; color: #222; font-size: 18px; } .newsbox .itemtitle { font-size: 15px; color: #444; } .newsbox>ul { display: flex; gap: 15px; } .newsbox>ul .listbox { flex: 1 0 0; border: 1px solid #ddd; padding: 25px 20px; } .newsbox>ul .listbox .itemtitle { margin-bottom: 5px; } .newsbox>ul .listbox ul .item { border-bottom: 1px solid #ddd; padding: 20px 0; } .newsbox>ul .listbox ul .item img { float: left; margin-right: 15px; } .newsbox>ul .listbox ul .item .infotitle { font-size: 16px; color: #222; } .newsbox>ul .listbox ul .item .subtitle { font-size: 13px; color: #aaa; } .footer { padding: 46px; margin-top: 20px; background-color: #111; text-align: center; color: #fff; line-height: 36px; font-size: 15px; } </style> </head> <body> <div class="content"> <div class="min-content"> <div class="header"> <img class="logo" src="./images/logo.png" alt="logo"> <div class="goto"> <a href="#">登录</a> | <a href="#">注册</a> </div> </div> </div> <div class="navbox"> <div class="min-content"> <ul> <li class="item">首页</li> <li class="item">设计案例</li> <li class="item">装修图库</li> <li class="item">有问必答</li> <li class="item">逛商品</li> </ul> </div> </div> <div class="banner"> <img src="./images/banner.jpg" alt="banner"> </div> <div class="function min-content"> <ul> <li class="item"> <img src="./images/pic01.jpg" alt=""> <div class="info"> <p class="title">浏览真实设计案例</p> <p class="subtitle">设计师原创作品</p> </div> </li> <li class="item"> <img src="./images/pic02.jpg" alt=""> <div class="info"> <p class="title">浏览真实设计案例</p> <p class="subtitle">设计师原创作品</p> </div> </li> <li class="item"> <img src="./images/pic03.jpg" alt=""> <div class="info"> <p class="title">浏览真实设计案例</p> <p class="subtitle">设计师原创作品</p> </div> </li> <li class="item"> <img src="./images/pic04.jpg" alt=""> <div class="info"> <p class="title">浏览真实设计案例</p> <p class="subtitle">设计师原创作品</p> </div> </li> </ul> </div> <div class="demobox min-content"> <h4 class="title">设计案例</h4> <ul> <li class="item"> <img src="./images/pic05.jpg" alt=""> </li> <li class="item"> <img src="./images/pic06.jpg" alt=""> </li> <li class="item"> <img src="./images/pic07.jpg" alt=""> </li> <li class="item"> <img src="./images/pic08.jpg" alt=""> </li> <li class="item"> <img src="./images/pic09.jpg" alt=""> </li> <li class="item"> <img src="./images/pic10.jpg" alt=""> </li> </ul> </div> <div class="newsbox min-content"> <h4 class="title">最新动态</h4> <ul> <li class="listbox"> <h3 class="itemtitle">有问必答</h3> <ul class=""> <li class="item"> <img src="./images/pic01.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic02.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic03.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> </ul> </li> <li class="listbox"> <h3 class="itemtitle">发布需求</h3> <ul class=""> <li class="item"> <img src="./images/pic04.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic05.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic06.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> </ul> </li> <li class="listbox"> <h3 class="itemtitle">预约设计师</h3> <ul class=""> <li class="item"> <img src="./images/pic06.png" alt=""> <div class="info"> <p class="infotitle">家具用品哪个品牌好</p> <p class="subtitle">回答:谢美家居用品很多错...</p> </div> </li> <li class="item"> <img src="./images/pic07.png" alt=""> <div class="info"> <p class="infotitle">厨房在哪个方位风水好</p> <p class="subtitle">回答:看风水要结合...</p> </div> </li> <li class="item"> <img src="./images/pic08.png" alt=""> <div class="info"> <p class="infotitle">卧室多大比较合适</p> <p class="subtitle">回答:一般卧室的大小...</p> </div> </li> </ul> </li> </ul> </div> </div> <div class="footer"> <p>关于我们 | 联系我们 | 意见建议 | 帮助中心 | 使用条款</p> <p>免责声明:本网站部分内容由用户自行上传,如权利人发现存在误传其作品情形,请及时与本站联系。</p> </div> </body> </html>
如果我们想通过一个成绩来得到等级: <span>{{ author.chengji >= 85 ? '优' : '良' }}</span> 可以在标签内渲染一个计算结果达到目的,不过这样会导致运算代码和其他标签内容混淆看起来很臃肿,我们可以通过Vue的计算属性computed来达到分开计算的方法: computed: { chengji:function() { return this.chengji >= 85 ? '优' : '良'; } } ><span>{{ chengji }}</span> 计算属性值会基于其响应式依赖被缓存,如果计算的参数没有发生改变,那么就会直接调用缓存中的结果,而不用再次调用函数获取结果 如果使用methods方法来计算的话,每当数据改变时页面会重新渲染,全部函数将全被执行
//StringBuilder类型示例 public class demo3 { public static void main(String[] args) { //StringBuilder 定义的数据是可改变的 //String 定义的数据是不可改变的,每次覆盖都会产生新的变量 StringBuilder strb1 = new StringBuilder("1123"); //必须使用new方法进行赋值,数据存储在堆中 strb1.append("abc"); //使用append在str1后面添加新的数据,类似一个伪数组同样可以通过charAt的方式访问索引 System.out.println(strb1.charAt(5)); //返回5索引的字符 System.out.println(strb1); StringBuilder strb2 = new StringBuilder("ceshi123"); strb2.reverse(); //容器内的数据进行翻转 String str = strb2.toString(); //StringBuilder类型转为String类型,返回String类型数据 System.out.println(strb2); System.out.println(str); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } div { box-sizing: border-box; color: #DE8786; } .mainbox { width: 980px; margin: 0 auto; } .nav { background-color: #FE9AB5; } .nav .item { display: inline-block; line-height: 46px; padding: 0 30px; color: #fff; } .banner { text-align: center; } .frombox { background: url("./images/content_bg.jpg"); padding: 0 180px; } .step { padding: 10px 0; } .step .tip { font-size: 20px; line-height: 42px; float: left; } .userinfo .title { border-bottom: 1px solid #FE9AB5; line-height: 42px; margin-bottom: 10px; } input { border: 1px solid #FE9AB5; } .tableinput { padding: 5px 30px; } .tableinput tr { margin: 10px 0; } .tableinput .info { width: 220px; height: 22px; } .tableinput tr .titles { text-align: right; } .tableinput select { width: 168px; border-color: #FE9AB5; color: #FE9AB5; } </style> </head> <body> <div class="content"> <div class="logo mainbox"> <img src="./images/logo.jpg" alt=""> </div> <div class="nav"> <ul class="mainbox"> <li class="item">首页</li> <li class="item">会员</li> <li class="item">活动</li> <li class="item">直播</li> <li class="item">视频</li> <li class="item" style="background-color: #FE9AB5;">注册</li> </ul> </div> <div class="banner"> <img src="./images/banner.jpg" alt=""> </div> <div class="frombox mainbox"> <div class="step"> <span class="tip">注册步骤:</span> <img src="./images/step.jpg" alt=""> </div> <div class="userinfo"> <p class="title">您的账号信息:</p> <table class="tableinput"> <tr> <td class="titles">注册方式:</td> <td><input type="radio"> E-main注册 <input type="radio"> 手机号码注册</td> </tr> <tr> <td>注册邮箱:</td> <td><input class="info" type="email"></td> </tr> <tr> <td class="titles">注册手机:</td> <td><input class="info" type="email"></td> </tr> <tr> <td class="titles">登录密码:</td> <td><input class="info" type="email"></td> </tr> <tr> <td class="titles">昵称:</td> <td><input class="info" type="email"></td> </tr> </table> </div> <div class="userinfo"> <p class="title">您的个人信息:</p> <table class="tableinput"> <tr> <td class="titles">性别:</td> <td><input type="radio"> 男 <input type="radio"> 女</td> </tr> <tr> <td class="titles">学历:</td> <td><select> <option value="初中">初中</option> <option value="高中">高中</option> <option value="大专">大专</option> <option value="本科">本科</option> </select></td> </tr> <tr> <td class="titles">所在城市:</td> <td><select> <option value="北京">北京</option> <option value="江西">江西</option> <option value="四川">四川</option> </select></td> </tr> </table> </div> </div> </div> </body> </html>
#include <REGX52.H> //????: sbit LCD_RS=P2^6; sbit LCD_RW=P2^5; sbit LCD_EN=P2^7; #define LCD_DataPort P0 //????: /** * @brief LCD1602????,12MHz?????1ms * @param ? * @retval ? */ void LCD_Delay() { unsigned char i, j; i = 2; j = 239; do { while (--j); } while (--i); } /** * @brief LCD1602??? * @param Command ?????? * @retval ? */ void LCD_WriteCommand(unsigned char Command) { LCD_RS=0; LCD_RW=0; LCD_DataPort=Command; LCD_EN=1; LCD_Delay(); LCD_EN=0; LCD_Delay(); } /** * @brief LCD1602??? * @param Data ?????? * @retval ? */ void LCD_WriteData(unsigned char Data) { LCD_RS=1; LCD_RW=0; LCD_DataPort=Data; LCD_EN=1; LCD_Delay(); LCD_EN=0; LCD_Delay(); } /** * @brief LCD1602?????? * @param Line ???,??:1~2 * @param Column ???,??:1~16 * @retval ? */ void LCD_SetCursor(unsigned char Line,unsigned char Column) { if(Line==1) { LCD_WriteCommand(0x80|(Column-1)); } else if(Line==2) { LCD_WriteCommand(0x80|(Column-1+0x40)); } } /** * @brief LCD1602????? * @param ? * @retval ? */ void LCD_Init() { LCD_WriteCommand(0x38);//??????,????,5*7?? LCD_WriteCommand(0x0c);//???,???,??? LCD_WriteCommand(0x06);//???????,??????,???? LCD_WriteCommand(0x01);//????,?? } /** * @brief ?LCD1602??????????? * @param Line ???,??:1~2 * @param Column ???,??:1~16 * @param Char ?????? * @retval ? */ void LCD_ShowChar(unsigned char Line,unsigned char Column,char Char) { LCD_SetCursor(Line,Column); LCD_WriteData(Char); } /** * @brief ?LCD1602????????????? * @param Line ?????,??:1~2 * @param Column ?????,??:1~16 * @param String ??????? * @retval ? */ void LCD_ShowString(unsigned char Line,unsigned char Column,char *String) { unsigned char i; LCD_SetCursor(Line,Column); for(i=0;String[i]!='\0';i++) { LCD_WriteData(String[i]); } } /** * @brief ???=X?Y?? */ int LCD_Pow(int X,int Y) { unsigned char i; int Result=1; for(i=0;i<Y;i++) { Result*=X; } return Result; } /** * @brief ?LCD1602???????????? * @param Line ?????,??:1~2 * @param Column ?????,??:1~16 * @param Number ??????,??:0~65535 * @param Length ????????,??:1~5 * @retval ? */ void LCD_ShowNum(unsigned char Line,unsigned char Column,unsigned int Number,unsigned char Length) { unsigned char i; LCD_SetCursor(Line,Column); for(i=Length;i>0;i--) { LCD_WriteData(Number/LCD_Pow(10,i-1)%10+'0'); } } /** * @brief ?LCD1602??????????????????? * @param Line ?????,??:1~2 * @param Column ?????,??:1~16 * @param Number ??????,??:-32768~32767 * @param Length ????????,??:1~5 * @retval ? */ void LCD_ShowSignedNum(unsigned char Line,unsigned char Column,int Number,unsigned char Length) { unsigned char i; unsigned int Number1; LCD_SetCursor(Line,Column); if(Number>=0) { LCD_WriteData('+'); Number1=Number; } else { LCD_WriteData('-'); Number1=-Number; } for(i=Length;i>0;i--) { LCD_WriteData(Number1/LCD_Pow(10,i-1)%10+'0'); } } /** * @brief ?LCD1602????????????????? * @param Line ?????,??:1~2 * @param Column ?????,??:1~16 * @param Number ??????,??:0~0xFFFF * @param Length ????????,??:1~4 * @retval ? */ void LCD_ShowHexNum(unsigned char Line,unsigned char Column,unsigned int Number,unsigned char Length) { unsigned char i,SingleNumber; LCD_SetCursor(Line,Column); for(i=Length;i>0;i--) { SingleNumber=Number/LCD_Pow(16,i-1)%16; if(SingleNumber<10) { LCD_WriteData(SingleNumber+'0'); } else { LCD_WriteData(SingleNumber-10+'A'); } } } /** * @brief ?LCD1602???????????????? * @param Line ?????,??:1~2 * @param Column ?????,??:1~16 * @param Number ??????,??:0~1111 1111 1111 1111 * @param Length ????????,??:1~16 * @retval ? */ void LCD_ShowBinNum(unsigned char Line,unsigned char Column,unsigned int Number,unsigned char Length) { unsigned char i; LCD_SetCursor(Line,Column); for(i=Length;i>0;i--) { LCD_WriteData(Number/LCD_Pow(2,i-1)%2+'0'); } } 调用函数显示具体内容即可 .h文件老样子在贴图里面
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document1</title> <style> * { margin: 0; padding: 0; } .main-box { width: 980px; margin: 0 auto; } .header { height: 68px; } .header .logo1 { float: left; } .header .logo2 { float: right; } .list-box { height: 320px; } .list-box ul { height: 400px; margin-top: 68px; } .list-box ul li { float: left; width: 20%; list-style: none; text-align: center; } </style> </head> <body> <div class="main-box"> <div class="header"> <img class="logo1" src="./images/t1/logo.jpg" alt="logo1"> <img class="logo2" src="./images/t1/logo2.jpg" alt="logo2"> </div> <div class="list-box"> <ul> <li> <img class="image" src="./images/t1/person1.jpg" alt=""> <p class="text">person1</p> </li> <li> <img class="image" src="./images/t1/person2.jpg" alt=""> <p class="text">person2</p> </li> <li> <img class="image" src="./images/t1/person3.jpg" alt=""> <p class="text">person3</p> </li> <li> <img class="image" src="./images/t1/person4.jpg" alt=""> <p class="text">person4</p> </li> <li> <img class="image" src="./images/t1/person5.jpg" alt=""> <p class="text">person5</p> </li> </ul> </div> </div> </body> </html>
常见的进制: 二进制 binary -----> bin 八进制 octal -----> oct 十进制 decimal -----> dec 十六进制 hexadecimal -----> hex php提供了几常见进制之间转换的函数 二进制转为其他进制 binoct();//转为八进制 bindec();//转为十进制 binhex();//转为十六进制 八进制转为其他进制 octbin();//转为二进制 octdec();//转为十进制 octhex();//转为十六进制 十进制转为其他进制 decbin();//转为二进制 decoct();//转为八进制 dechex();转为十六进制 十六进制转为其他进制 hexbin();转为二进制 hexoct();//转为八进制 hexdec();//转为十六进制 上面列举了这么多,其实自己感觉一点用没有,对于上面的这些函数,你只需要记着bin、oct、dec、hex就可以了,你要把a进制转为b进制,那就是ab() 举个简单的例子: 把二进制(bin)转为十进制(dec): bindec(); 但这样可能还不能满足我们的需求,于是php有个我们提供了一个真正实现爱咋转就咋转的函数:base_convert(); base_convert() 该函数有三个参数 string base_convert ( string $number , int $frombase , int $tobase ) 举个列子: hexadecimal=′125458′;//十进制echobaseconvert(hexadecimal, 10, 5);//转为五进制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document1</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } a { color: #666; text-decoration: none; } .content { width: 1280px; margin: 0 auto; } .nav { height: 600px; background: url("images/bg.png") center; background-size: cover; } .navlist { padding: 30px 60px; box-sizing: border-box; text-align: center; } .navlist ul li { float: left; line-height: 60px; padding: 0 50px; font-size: 16px; } .seach { position: relative; width: 128px; height: 36px; margin-top: 12px; } .seach img { height: 16px; position: absolute; top: calc(50% - 8px); left: 10px; z-index: 10; } .seach .input { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: none; border-radius: 18px; font-size: 12px; padding-left: 32px; box-sizing: border-box; outline: none; color: #666 } .hot { text-align: center; margin-top: 20px; } .hotlist { margin-top: 20px; text-align: left; padding: 0 60px; box-sizing: border-box; } .hotlist .item .img img { width: 100%; } .hotlist .item .title { padding: 10px; box-sizing: border-box; font-weight: bold; font-size: 18px; color: #333; border-bottom: 1px solid #ddd; } .hotlist .item .info { padding: 10px; padding-bottom: 30px; color: #bbb; box-sizing: border-box; } .hotlist { display: flex; gap: 80px; } .bottomimage img { width: 100%; } .life { background-color: #E1EBF2; margin-top: 50px; text-align: center; padding: 30px 0; } .life ul { text-align: center; } .life ul li { display: inline-block; margin: 20px 20px; } .footer { height: 80px; background: url("images/footer_bg.jpg"); color: #fff; text-align: center; line-height: 80px; margin-top: 50px; } </style> </head> <body> <div class="content"> <div class="nav"> <div class="navlist"> <ul> <li> <img class="logo" src="./images/logo.png" alt=""> </li> <li><a href="#">网站首页</a></li> <li><a href="#">床和床垫</a></li> <li><a href="#">卧室纺织品</a></li> <li><a href="#">灯具照明</a></li> <li class="seach"> <img src="./images/f.png" alt=""> <input class="input" type="text" placeholder="输入商品名称"> <li> </ul> </div> </div> <div class="hot"> <img src="./images/dongtai.jpg" alt=""> <ul class="hotlist"> <li class="item"> <dt class="box"> <dd class="img"> <img src="./images/news1.jpg" alt=""> </dd> <dd class="title">BEST贝达</dd> <dd class="info">将杂乱无章的物品收纳到视线之外,在我怕门后要展示台的心爱之物!</dd> <dd class="bottomimage"><img src="./images/yinying.jpg" alt=""></dd> </dt> </li> <li class="item"> <dt class="box"> <dd class="img"> <img src="./images/news2.jpg" alt=""> </dd> <dd class="title">BEST贝达</dd> <dd class="info">将杂乱无章的物品收纳到视线之外,在我怕门后要展示台的心爱之物!</dd> <dd class="bottomimage"><img src="./images/yinying.jpg" alt=""></dd> </dt> </li> <li class="item"> <dt class="box"> <dd class="img"> <img src="./images/news3.jpg" alt=""> </dd> <dd class="title">BEST贝达</dd> <dd class="info">将杂乱无章的物品收纳到视线之外,在我怕门后要展示台的心爱之物!</dd> <dd class="bottomimage"><img src="./images/yinying.jpg" alt=""></dd> </dt> </li> </ul> </div> <div class="life"> <img src="./images/shenghuo.png" alt=""> <ul> <li><img src="./images/img1.jpg" alt=""></li> <li><img src="./images/img2.jpg" alt=""></li> <li><img src="./images/img3.jpg" alt=""></li> </ul> </div> </div> <div class="footer"> 爱家居版权所有2016-2026京ICP备222222222号 京公网安备2222222222222 </div> </body> </html>
import random success,randNumber = 0,random.randint(1,10) for i in range(3): myNumber = int(input("输入一个数字:")) if randNumber == myNumber: print("恭喜猜对啦") success = 1 break elif myNumber < randNumber: print("猜小了") elif myNumber > randNumber: print("猜大了") if not success: print("你输了,答案是:",randNumber)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>demo1</title> <style> * { margin: 0; padding: 0; font-size: 14px; } li { list-style: none; margin-top: 10px; } .box { width: 980px; margin: auto; padding: 0 20px; margin-top: 20px; box-sizing: border-box; } .logo-nav { width: 148px; } .nav { padding-bottom: 10px; border-bottom: 3px solid #1678be; } .nav .logo { float: left; } .nav .nav-text { float: right; } .nav-text a { color: #000; text-decoration: none; } .info-box { height: 440px; width: 100%; margin-top: 20px; } .info-box .logo-swiper { width: 100%; } .info-box .right .title-h1 { text-align: center; } .info-box .right .info { padding: 10px; font-size: 16px; box-sizing: border-box; overflow: auto; } .comment-box .item { height: 105px; margin-top: 20px; position: relative; padding: 10px; box-sizing: border-box; border-bottom: 1px solid #ddd; } .comment-box .portrice { position: absolute; width: 62px; } .comment-box .userInfo { position: absolute; left: 80px; } .comment-box .userInfo .userName { display: inline-block; color: darkorange; font-size: 17px; } .comment-box .userInfo .date { display: inline-block; margin-left: 30px; font-size: 14px; color: #999; } .comment-box .text { position: absolute; left: 80px; top: 50px; height: 20px; font-size: 14px; } .comment-box .from { position: absolute; left: 80px; top: 70px; color: coral; font-size: 14px; } .new-film-box { margin-bottom: 15px; } .film-list .item img { float: left; margin-right: 10px; width: 10%; } .hot-film-box { margin-bottom: 20px; border-bottom: 3px solid #2FA2ED; padding-bottom: 20px; } .hot-film-box .left { float: left; width: 600px; } .hot-film-box .right { float: right; width: 200px; height: 100%; } .hot-film-box .right img { width: 100%; } .hot-film-box .left .info { margin-top: 15px; line-height: 20px; } .bottom-box { text-align: center; border-top: 1px solid #ddd; box-sizing: border-box; padding: 15px 100px; } .b-nav a { text-decoration: none; } .bottom-box .tip { margin-top: 12px; line-height: 28px; } .red { color: red; } .blue { color: blue; } .italic { font-style: italic; } </style> </head> <body> <div class="box"> <div class="nav"> <img class="logo-nav" src="./images/logo.jpg" alt="LOGO"> <div class="nav-text"> <a href="#">电影世界首页 |</a> <a href="#">登录 |</a> <a href="#">注册 |</a> <a style="color: red;" href="#">收藏</a> </div> </div> <div class="info-box"> <img class="logo-swiper" src="./images/banner.jpg" alt="首页图片"> <div style="clear: both;"></div> </div> <div class="new-film-box"> <h2 style="font-size: 17px;" class="title">最新电影</h2> <div style="border: 2px solid #2FA2ED;margin: 10px 0 5px 0"></div> <ul class="film-list"> <li class="item"> <img src="./images/img_01.jpg" /> </li> <li class="item"> <img src="./images/img_02.jpg" /> </li> <li class="item"> <img src="./images/img_03.jpg" /> </li> <li class="item"> <img src="./images/img_04.jpg" /> </li> <li class="item"> <img src="./images/img_05.jpg" /> </li> <li class="item"> <img src="./images/img_06.jpg" /> </li> <li class="item"> <img src="./images/img_07.jpg" /> </li> <li class="item"> <img src="./images/img_08.jpg" /> </li> <li class="item"> <img src="./images/img_09.jpg" /> </li> </ul> <div style="clear:both;"></div> </div> <div class="hot-film-box"> <h2 style="font-size: 17px;" class="title">热门电影介绍</h2> <div style="border: 2px solid #ddd;margin: 10px 0 5px 0"></div> <div class="film-info"> <div class="left"> <div class="top-info"> <a style="color: red;" href="#">西游降魔篇</a> <a href="#">高清视频在线观看</a> <a href="#">爱奇艺</a> </div> <div class="info"> <p>上映时间:2013年2月10日<br> 导演:<span class="red">周星驰 郭子健</span><br> 发行公司:安乐影片<br> <span class="blue">主演:</span><a href="#">黄渤</a> <a href="#">文章</a> <a href="#">舒淇</a> <a href="#">周秀娜</a> <a href="#">释行宇</a> <a href="#">罗志祥</a> <a href="#">何文辉</a> <a href="#">李尚正</a><br> 片长:110分钟<br> <span class="red italic">类型:冒险 奇幻 喜剧</span><br> 定价:<span class="red">150元</span><br> 简介 :受气的唐僧、暴戾的孙悟空、帅气的猪八戒、妩媚的沙僧,完全颠覆 版西游记,周星驰时隔15年自编自导再战西游。 这是个妖魔横行的世界,百 姓苦不堪言。年轻的驱魔人玄奘以“舍小我,成大我”的大无畏精神,历尽 艰难险阻,依次收复水妖、猪妖以及妖王之王孙悟空为徒,并用“爱”将他 们感化......</p> </div> </div> <div class="right"> <img src="./images/moviebanner.jpg"> </div> <div style="clear: both;"></div> </div> </div> <div class="comment-box"> <img class="comment-icon" src="./images/comment.jpg" /> <div style="height: 2px;background:#ddd;margin-top:5px;"></div> <ul class="comment-list"> <li class="item"> <img class="portrice" src="./images/pic01.jpg" /> <div class="content-box"> <div class="userInfo"> <p class="userName">影迷无敌001</p> <p class="date">2020-1-2 15:38:37</p> </div> <p class="text">请剧情党们不要太较真电影对魔兽历史的更改,毕竟翻拍的电影,多少会有些出入,我们看的是情怀,哈哈。。。</p> <p class="from">来自:大众点评网友</p> </div> </li> <li class="item"> <img class="portrice" src="./images/pic02.jpg" /> <div class="content-box"> <div class="userInfo"> <p class="userName">时光不老</p> <p class="date">2015-3-2 15:05:37</p> </div> <p class="text">个人认为小时代毫无看点,看了不到半小时就要睡着了,我已无力吐槽,建议大家还是去读原著吧!!! </p> <p class="from">来自:星光影院网友</p> </div> </li> <li class="item"> <img class="portrice" src="./images/pic03.jpg" /> <div class="content-box"> <div class="userInfo"> <p class="userName">cocoke</p> <p class="date">2016-2-14 10:38:36</p> </div> <p class="text">星爷的每一部电影都很经典,重复地看过很多遍,每次都有更深刻的理解和更深的感悟,同样期待《美人鱼》。 来自:美团网网友</p> <p class="from">来自:美团网网友</p> </div> </li> </ul> </div> <div class="bottom-box"> <p class="b-nav"> <a href="#"> 公司简介 |</a> <a href="#"> 关于我们 |</a> <a href="#"> 联系我们 |</a> <a href="#"> 友情链接 |</a> <a href="#"> 招聘信息 |</a> <a href="#"> 产品答疑</a> </p> <p class="tip"><span class="red">免责声明:</span>本网站内容收集于互联网,电影时光网不承担任何由于内容的合法性及健康性所引起的争议和法律责任。欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。</p> </div> </div> </body> </html>
Mysql外链约束规则
public class java20221219 { private int a = 10; } 使用private 修饰的变量或方法只能在当前类中才能访问和修改
如图快捷键
import java.util.Scanner; //String字符串练习 public class Main { public static void main(String[] args) { char[] ch = new char[] {97,98,99,100}; String s1 = new String(ch); //ASCII码转为字符 System.out.println(s1); String a1 = new String("abc"); String a2 = new String("abc"); System.out.println(a1 == a2); //false 比较的是在堆里面存储的地址值,new出来的地址值不同 //字符串比较时会进行比较存储的地址值 //new 出来的String记录在堆中,直接赋值的String记录在串池中 String b1 = "abc"; String b2 = "abc"; System.out.println(b1 == b2); //true 不使用new并且指定的数据一直,地址也会相同 String c1 = new String("abc"); String c2 = "abc"; System.out.println(c1 == c2); //false 地址不同 String d1 = new String("abc"); String d2 = "abc"; System.out.println(d1.equals(d2)); //true 使用equals方法强制对字符串内容进行比较 Scanner sc = new Scanner(System.in); //搭配输入信息使用 System.out.printf("输入信息: "); String inp = sc.next(); String e = new String("abc"); System.out.println(inp.equals(e)); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .main-box { width: 980px; margin: 0 auto; } .nav { background: url("images/head_bg.jpg") repeat-x; height: 128px; } .nav li { float: left; } .nav .item a { display: inline-block; width: 120px; height: 128px; line-height: 64px; text-align: center; color: #fff; margin: 0 5px; font-size: 17px; } .nav .item a:hover { background: url("images/xuanfu.png") no-repeat; } .banner { margin-top: 10px; } .banner img { width: 100%; } .sortlist { margin-top: 10px; display: flex; box-shadow: 0 0 0 10px rgb(110, 190, 45) inset; padding: 10px; box-sizing: border-box; } .sortlist .leftbox li { display: flex; } .leftbox { width: 333px; } .leftbox li p { display: inline-block; width: 100%; text-align: center; } .leftbox .top p { line-height: 180px; } .leftbox .bottom p { line-height: 150px; } .leftbox .top { height: 180px; background-color: #F2F2F2; } .leftbox .bottom { height: 150px; background-color: #F2F2F2; margin-top: 10px; } .centerbox { width: 280px; margin-left: 10px; } .centerbox .top { display: flex; margin-bottom: 10px; height: 120px; background-color: #F2F2F2; } .centerbox .top p { line-height: 120px; text-align: center; flex: 1; } .centerbox .bottom { background-color: #F2F2F2; display: flex; height: 210px; } .centerbox .bottom p { line-height: 210px; text-align: center; flex: 1; } .rightbox { margin-left: 10px; flex: 1; } .rightbox .top { display: flex; margin-bottom: 10px; height: 100%; background-color: #F2F2F2; } .rightbox .top img { height: 100%; width: 200px; } .rightbox .top p { line-height: 330px; text-align: center; flex: 1; } .hot { margin-top: 50px; } .hot .title { background-color: rgb(110, 190, 45); color: #fff; display: inline-block; padding: 10px 20px; font-weight: normal; } .hot .list { border: 1px solid #ddd; display: flex; padding: 20px; box-sizing: border-box; gap: 10px; } .hot .item { flex: 1; } .hot .item .mainimg { width: 100%; } .hot .item .intitle { text-align: center; font-size: 19px; line-height: 56px; color: #444; } .hot .item .hotinfo { background-color: rgb(110, 190, 45); height: 38px; display: flex; width: calc(100% - 20px); margin-left: 10px; margin-bottom: 10px; } .hot .item { border: 1px solid #ddd; } .hot .item .hotinfo .info { line-height: 38px; color: #fff; text-align: center; flex: 1; font-size: 15px; } .footer { padding: 50px 0; text-align: center; color: #fff; background: #111; margin-top: 20px; } </style> <body> <div class="nav"> <ul class="main-box"> <li><img src="./images/logo.png" alt="logo"></li> <li class="item"><a href="#">首页</a></li> <li class="item"><a href="#">学校介绍</a></li> <li class="item"><a href="#">课程设置</a></li> <li class="item"><a href="#">教资力量</a></li> <li class="item"><a href="#">招生问答</a></li> <li class="item"><a href="#">教学活动</a></li> </ul> </div> <div class="main-box"> <div class="banner"> <img src="./images/banner.jpg" alt="banner"> </div> <div class="sortlist"> <ul class="leftbox"> <li class="top"> <img src="./images/pic01.jpg" alt=""> <p>大学专区</p> </li> <li class="bottom"> <img src="./images/pic02.jpg" alt=""> <p>求职专区</p> </li> </ul> <ul class="centerbox"> <li class="top"> <img src="./images/pic03.jpg" alt=""> <p>高中专区</p> </li> <li class="bottom"> <img src="./images/pic04.jpg" alt=""> <p>考证专区</p> </li> </ul> <ul class="rightbox"> <li class="top"> <img src="./images/pic05.jpg" alt=""> <p>线上精品课专区</p> </li> </ul> </div> <div class="hot"> <h2 class="title">热门课程 / Popular courses</h2> <ul class="list"> <li class="item"> <img class="mainimg" src="./images/match01.jpg" alt=""> <p class="intitle">软件工程师课程</p> <div class="hotinfo"> <img class="hotimg" src="./images/gouwu.jpg" alt=""> <p class="info">高级IT人才的捷径</p> </div> </li> <li class="item"> <img class="mainimg" src="./images/match02.jpg" alt=""> <p class="intitle">Java课程</p> <div class="hotinfo"> <img class="hotimg" src="./images/gouwu.jpg" alt=""> <p class="info">高级IT人才的捷径</p> </div> </li> <li class="item"> <img class="mainimg" src="./images/match03.jpg" alt=""> <p class="intitle">软件工程师课程</p> <div class="hotinfo"> <img class="hotimg" src="./images/gouwu.jpg" alt=""> <p class="info">高级IT人才的捷径</p> </div> </li> <li class="item"> <img class="mainimg" src="./images/match04.jpg" alt=""> <p class="intitle">软件工程师课程</p> <div class="hotinfo"> <img class="hotimg" src="./images/gouwu.jpg" alt=""> <p class="info">高级IT人才的捷径</p> </div> </li> </ul> </div> </div> <div class="footer"> Copyright © 2020-2030 CHAOLIUFUSHIcom, All rights reserved.<br> 2020-2023,版权所有 优课网 00CP备222222222 </div> </body> </html>
void Delay_showNumber(unsigned int ms){ unsigned char i, j; while(--ms){ i = 2; j = 199; do { while (--j); } while (--i); } } void setNumber(unsigned char ledNumber, unsigned char number){ unsigned char ledShow[] = {0x3F,0x06,0x5B,0x4F,0x66,0x6D,0x7D,0x07,0x7F,0x6F,0x80}; switch(ledNumber){ case 8:P2_4 = 1; P2_3 = 1; P2_2 = 1; break; case 7:P2_4 = 1; P2_3 = 1; P2_2 = 0; break; case 6:P2_4 = 1; P2_3 = 0; P2_2 = 1; break; case 5:P2_4 = 1; P2_3 = 0; P2_2 = 0; break; case 4:P2_4 = 0; P2_3 = 1; P2_2 = 1; break; case 3:P2_4 = 0; P2_3 = 1; P2_2 = 0; break; case 2:P2_4 = 0; P2_3 = 0; P2_2 = 1; break; case 1:P2_4 = 0; P2_3 = 0; P2_2 = 0; break; } P0 = ledShow[number]; Delay_showNumber(2); P0 = 0x00; Delay_showNumber(1); } #注解内部自带一个延迟函数,可以被任意调用,输入值单位延迟ms .h文件在贴图内
当监听的数据发生变化时将会执行函数内容 watch: { textInfo:function(newData, oldData){...} } newData代表更新之后的变量信息,oldData代表更新之前的数据信息,textInfo代表的是要监听的对象
var timer = setTimeout(() => { console.log(1); }, 1000); 上面是一秒后执行打印函数 下面是每隔一秒执行一次打印函数 var timer = setInterval(() => { console.log(1); }, 1000);
/* 9600bps 11.0595MHz的单片机设置 */ void UART_init(){ //9600bps@11.0592MHz SCON = 0x50; PCON |= 0x80; TMOD |= 0x20; //设置定时器模式 TL1 = 0xFA; //设定定时初值 TH1 = 0xFA; //设定定时初值 ES = 1; //开启接受 EA = 1; ET1 = 0; TR1 = 1; //定时器1开始计时 } /*下面为接收数据 void UART_Routine() interrupt 4 { RI = 0; //SBUF为接受到的信息 }
关于interrupt函数用法: void +函数名+interrupt +数字0~4 0 表示外部中断0 1 表示定时器/计数器(T0) 2 外部中断1 3 定时器/计数器(T1) 4 串行口 0 一般作为定时器中断使用 4 一般作为串口接收/发送数据 用法: void 函数名() interrupt 4
Uni-App官网:https://uniapp.dcloud.net.cn/ 内置 配置项列表 globalStyle属性表 style属性表 软件生命周期 页面生命周期 等内容