实现网页代码
#float { position: fixed; right: 500px; bottom: 100px }
1.点击指定字段可以实现内容跳转，图片插入
<!DOCTYPE html> <html lang="en"> <head> <title>kangjunhao</title> <meta charset="utf8"> <style> #div1{ <!--为了是标签作用明显，用css填充内容 --> height: 800px; background: darkred; } #div2{ height: 800px; background: yellow; } #div3 { height: 800px; background: black; } </style> </head> <body> <!--<img src="15063K610-2.jpg" width="800px" height="500px" alt="加载失败" title="动漫图片"> <!– 插入图片–>--> <div id="div_top">top</div> <!--top页 --> <a href="#div1">第一章</a> <!--跳转到指定id的div标签 --> <a href="#div2">第二章</a> <a href="#div3">第三章</a> <div id="div1">第一章内容</div> <!--拥有内容的div标签 --> <a href="#div_top">back off</a> <!-- 实现直接返回top页--> <div id="div2">第二章内容</div> <a href="#div_top">back off</a> <div id="div3">第三章内容</div> <a href="#div_top">back off</a> </body> </html>
2.将一个100px*100px的盒子放在300px*300px盒子的正中间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf8"> <title>css_test</title> <!--<link type="text/css" rel="stylesheet" href="css_test.css">--> <style> #div1{ height: 300px; width: 300px; background: yellow; } #div2{ height: 100px; width: 100px; background: green; margin-top: -200px; margin-left: 100px; } </style> </head> <body> <div id="div1">hello1</div> <div id="div2">hello2</div> </body> </html>
3.抽屉网页面大概布局
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="utf8"> <style> *{ margin: 0; } .head{ width: 100%; height: 44px; background-color: #2459a2; } .head_main{ width: 1022px; height: 100%; /*background: #000;*/ margin: 0 auto; } .head_left a{ /*line-height: 0px;*/ width: 60px; height: 30px; font-size: 13px; float: left; margin-top: 10px; } .head_right .register,.login{ float: right; width: 60px; height:44px; /*background-color: red;*/ margin-top: 10px; } .search{ float: right; margin-top: 10px; } .middle{ width: 100%; height: 650px; background-color: #ededed; } .middle_main{ width: 1100px; height: 100%; background-color: white; margin: 0 auto; } .middle_left{ margin-left: 10px; width: 800px; height: 100%; background-color: white; display: inline-block; } .middle_right{ width: 270px; height: 100%; background-color: #ededed; display: inline-block; background-image: url("5.jpg"); } .top_left{ width: 772px; height:66px; /*margin-top: 10px;*/ background-color: #9c9c9c; /*display: inline-block;*/ margin: 0 auto; } /*.top_left *{*/ /*width: 50px;*/ /*height:30px;*/ /*margin-top: 10px;*/ /*background-color: #9c9c9c;*/ /*display: inline-block;*/ /*}*/ .bottom{ text-align: center; margin-top: 10px; } </style> </head> <body> <div class="head"> <!-- 顶部 --> <div class="head_main"> <div class="head_left"> <a class="home page">首页</a> <a class="all">全部</a> <a class="42part">42区</a> <a class="joke">段子</a> <a class="pic">图片</a> <a class="it1024">挨踢1024</a> <a class="answer">你问我答</a> </div> <div class="head_right"> <a class="search"> 搜索<input type="text"> </a> <a class="register">注册</a> <a class="login">登录</a> </div> </div> </div> <div class="middle"> <!-- 中间 --> <div class="middle_main"> <div class="middle_left"> <div class="top_left"> <!--<a class="best_hot">最热</a>--> <!--<a class="best_new">最新</a>--> <!--<a class="people">人类发布</a>--> </div> <!--<div class="top_right">--> <!--<a class=""></a>--> <!--<a class=""></a>--> <!--<a class=""></a>--> <!--</div>--> </div> <div class="middle_right"></div> </div> </div> <div class="bottom"> <!-- 底部 --> <div>关于我们|联系我们|服务条款|隐私政策|抽屉新热榜工具|下载客户端|意见与反馈|友情链接|公告 </div> <div> 旗下站点 ©2018 chouti.com 京ICP备09053974号-3 京公网安备 110102004562</div> <div>违法和不良信息举报： 电话：010-58302039 邮箱：jubao@chouti.com</div> <div>版权所有：北京格致璞科技有限公司</div> </div> </body> </html>
5.实时显示时间
<!DOCTYPE html>
<html>
<head>
<title>test_code</title>
<meta charset="utf8">
</head>
<form>
<input type="text" id="input_one">
<input type="button" value="begin" onclick="show_time_button()">
<input type="button" value="end" onclick="End()">
</form>
<script>
function get_time() { // 获取拼接好的时间
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth()+1;
var day = time.getDate();
var hour = time.getHours();
var minutes = time.getMinutes();
var second = time.getSeconds();
return year+\'年\'+month+\'月\'+day+\'日\'+\' \'+hour+\':\'+minutes+\':\'+second;
}
// alert(get_time());
function Begin() { /* 当按下开始按钮时,开始执行这里面的代码,也就是将实时时间显示在文本输入框中*/
var time = get_time();
var input_obj = document.getElementById("input_one"); // 拿到输入框对象
input_obj.value = time; // 对输入框的内容进行赋值
}
var ID; // 将ID设置为局部变量,然后在函数中修改他的值
function show_time_button() {
End();
Begin(); // 为了点击按钮实时显示当前时间,所以点击按钮的时候会先执行一下Begin函数
ID = setInterval(Begin,500); // 间隔某时长循环的执行的某个函数
}
function End() {
clearInterval(ID);
// alert(\'结束计时!!!\')
}
</script>
<body>
</body>
</html>
6.根据摄氏度,输出华氏度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form> 摄氏度:<input type="text" id="sheshidu"> <input type="button" value="计算" onclick="count()"> <!-- 设置onclick事件, 当按下值为计算的按钮时,执行count()函数中的代码--> <br/> <!-- 实现换行--> <br/> <span id =\'res\'>对应的华氏度</span> </form> <script type="text/javascript"> function count(){ // 定义count函数 var key = document.getElementById(\'sheshidu\'); var sheshidu_value = key.value; console.log(sheshidu_value); // 拿到文本框输入的摄氏度的值 result = 32 + 9/5*sheshidu_value; // 计算出转换后的华氏度的值 document.getElementById("res").innerHTML = \'华氏度:\'+result; // 将原来的文字转换为结果值 } </script> </body> </html>
7.输入成绩,返回等级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 350px; height: 200px; position: fixed; /* 设置box相对于浏览器的大小而一直*/ right: 533px; bottom: 251px; background-color: #cccccc; padding: 10px; } </style> </head> <body> <div class="box"> 物理成绩:<input type="text" id="wuli"> <!-- 用于用户输入的文本框--> <span id="result0"></span><br/><br/> <!-- 先将span标签内不写内容,使用id属性,在输出成绩等级的时候确定标签的位置 --> 化学成绩:<input type="text" id="chemistry"> <span id="result1"></span><br/><br/> 数学成绩:<input type="text" id="math"> <span id="result2"></span><br/><br/> <input type="button" value=\'结果\' onclick="func()"> <!--连接事件函数 --> </div> <script type="text/javascript"> function func(){ var wuli_score = document.getElementById(\'wuli\').value; // 获取用户输入的每个成绩 var chemistry_score = document.getElementById(\'chemistry\').value; var math_score = document.getElementById(\'math\').value; // console.log(wuli_score); // console.log(typeof wuli_score); // string // function result(score){ // 判断成绩后输出成绩的判定等级 if(Number(score)>=60){ return \'及格\'; }else{ return \'不及格\'; } } // console.log(result(chemistry_score)); // console.log(result(40)); // 测试判断成绩的函数 document.getElementById(\'result0\').innerHTML = result(wuli_score); // 调用函数,返回输出等级 document.getElementById(\'result1\').innerHTML = result(chemistry_score); document.getElementById(\'result2\').innerHTML = result(math_score); } </script> </body> </html>
8.注册页面，密码必须超过8位，并且必须含有数字和字母
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 输入密码：<input type="password" id="password"> <input type="button" onclick="func()" value="校验"><br/><br/> <span id="flag">此处显示密码设置结果</span><br/> <!--输出结果和判断密码的格式是否错误--> <script type="text/javascript"> function func(){ passwd = document.getElementById(\'password\').value; flag_head = document.getElementById(\'flag\'); // 获取flag的操作句柄 // var i = 0； // flag_head.innerHTML = \'sdfkskdjfk\'; var result = 0; // 判断密码中是否同时具有字母和数字，如果在下面的判断中发现有数字则加一，并且还有字母的时候再加一 while(1){ if (passwd.length<8) { // 判断密码是否够8位，否则直接退出循环 flag_head.innerHTML = \'密码不能少于8位\'; break; } var i = 0; // 用于遍历用户输入的字符串中的字符是否含有大写或者小写的字母 while(i<passwd.length){ if(passwd[i].charCodeAt()>=65 && passwd[i].charCodeAt()<= 90 || passwd[i].charCodeAt()>=97 && passwd[i].charCodeAt()<= 122){ result += 1; break; } else{ i++; } } var j = 0; // 循环查看是否有数字 while(j<passwd.length){ if (passwd[j].charCodeAt()>=48 && passwd[j].charCodeAt()<= 57) { result += 1; // 有数字就result加一，然后跳出循环 break; } else{ j++; // 如果查找到数字就下标加一，循环遍历 } } if(result == 2){ flag_head.innerHTML = \'密码设置成功\'; // 如果result等于2，那么就说明密码中同时含有数字和字母 break; } else{ flag_head.innerHTML = \'密码中必须包含数字和字符\'; } break; } } </script> </body> </html>
9.简单的计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>请输入算式</h2> <input type="text" id="befor"> <select id="symbol_way"> <!--计算类型选择--> <option>+</option> <option>-</option> <option>/</option> <option>*</option> <option>%</option> </select> <input type="text" id="after">= <span id="result">输出计算的结果</span><br/> <input type="button" value="计算" onclick="func()"> <!--点击触发事件函数--> <script type="text/javascript"> function func(){ symbol_value = document.getElementById(\'symbol_way\').value; // console.log(test_value); result_head = document.getElementById(\'result\'); // 用于输出结果文本的句柄 while(1){ befor_num = document.getElementById(\'befor\').value; // 获取用户输入的第一个数字 var i = 0; while(i < befor_num.length){ if (befor_num[i].charCodeAt() >= 47 && befor_num[i].charCodeAt() <= 57) { i++; } else{ result_head.innerHTML = \'检测到您的输入中可能有非法字符\'; // 判断是否有非法字符 break; } } after_num = document.getElementById(\'after\').value; // 获取用户输入的第二个数字 var j = 0; while(j < after_num.length){ // 遍历判断是否含有非法字符 if (after_num[j].charCodeAt() >= 47 && after_num[j].charCodeAt() <= 57) { j++; } else{ result_head.innerHTML = \'检测到您的输入中可能有非法字符\'; // 判断是否有非法字符 break; } } the_equation = befor_num+symbol_value+after_num; // 对于算式的拼接 // console.log(the_equation); the_result = eval(the_equation); // 用eval直接计算 // console.log(the_result); result_head.innerHTML = the_result; // 输出结果 break; } } </script> </body> </html>
10.更换浏览器页面背景
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <select onchange="change_back()" id="change"> <option value="a">春天</option> <option value="b">夏天</option> <option value="c">秋天</option> <option value="d">冬天</option> </select> <script> document.body.style.background = \'url(001.jpg)\'; function change_back() { hand = document.getElementById(\'change\'); // console.log(hand.value); // console.log(typeof hand.value); // string switch (hand.value){ case \'a\': document.body.style.background = \'url(002.jpg)\'; break; case \'b\': document.body.style.background = \'url(003.jpg)\'; break; case \'c\': document.body.style.background = \'url(004.jpg)\'; break; case \'d\': document.body.style.background = \'url(005.jpg)\'; break; } } </script> </body> </html>
11.按钮控制一个div的移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>move</title> </head> <style> #pic{ background-image: url(1.png); /* 在div中插入将要移动的图片*/ height: 120px; width: 120px; margin: 285px auto; } #keybord{ position: fixed; /*设置控制键部分的margin是相对于浏览器移*/ top: 540px; left: 580px; } </style> <body> <div id="pic"></div> <div id="keybord"> <!-- 定义相关的控制按钮 --> <input type="button" value="↑" onclick="downOrUp(\'-\')"> <input type="button" value="↓" onclick="downOrUp(\'+\')"> <input type="button" value="←" onclick="leftOrRight(\'-\')"> <input type="button" value="→" onclick="leftOrRight(\'+\')"> <input type="button" value="↖" onclick="other_direction(\'-\',\'-\')"> <input type="button" value="↙" onclick="other_direction(\'+\',\'-\')"> <input type="button" value="↘" onclick="other_direction(\'+\',\'+\')"> <input type="button" value="↗" onclick="other_direction(\'-\',\'+\')"> </div> <script> ctrl_hand = document.getElementById(\'pic\'); // 获取pic的操作句柄,并且设置为全局变量 // 相似方向移动的功能将会封装在这一个函数中，通过调用函数时传入相应的符号来控制移动， 下同 function downOrUp(symbol){ // 获取当前top大小并且根据传入的参数，决定是加或者减，实现移动 move_top_length = eval(ctrl_hand.offsetTop + symbol + 10) + \'px\'; // 使用eval计算出将要移动的具体位置的像素值 statement = move_top_length + \' auto\'; // 拼接语句 ctrl_hand.style.margin = statement; } function leftOrRight(symbol){ move_top_length = ctrl_hand.offsetTop + \'px\'; move_left_length = eval(ctrl_hand.offsetLeft + symbol + 10) + \'px\'; statement = move_top_length + \' \' + move_left_length; ctrl_hand.style.margin = statement; } function other_direction(first_symbol, second_symbol){ // console.log(first_symbol); move_top_length = eval(ctrl_hand.offsetTop + first_symbol + 10) + \'px\'; move_left_length = eval(ctrl_hand.offsetLeft + second_symbol + 10) +\'px\'; statement = move_top_length + \' \' + move_left_length; // console.log(statement); ctrl_hand.style.margin = statement; } </script> </body> </html>
12.jQuery选择器的简单应用作业
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action=""> <h3>用户基本信息</h3> 用户名：<input type="text" name="username"><br/> 密码: <input type="password" name="pwd"><br/> 年龄：<input type="text" name="age"><br/> 性别：<input type="radio" value="female" name="gender" checked="true">男 <input type="radio" value="male" name="gender">女 <input type="button" value="确认" id="btn1" onclick="change_color()"> <input type="button" value="取消"> </form> <span>用户输入的结果：</span> <script src=\'./libs/jquery-3.3.1.min.js\'></script> <script> //单击确认按钮，将h3标题文字改为蓝色，并且获取用户输入的用户名、密码、性别和年龄，显示在表单下方的<span>标签中 // function change_color(){ $(\'h3\').css(\'color\', \'blue\'); /// 改变h3颜色 username = $(\'[name]\')[0].value; // 获取用户输入的内容 userpwd = $(\'[name]\')[1].value; userage = $(\'[name]\')[2].value; usersex = $(\'[name]\')[3].checked; // console.log(usersex); // if(usersex == true){ // 判断radio的值 usersex = \'男\'; } else{ usersex = \'女\'; } all_info = username+\'<br/>\'+userpwd+\'<br/>\'+userage+\'<br/>\'+usersex; // 输出结果拼接 // console.log(username); $(\'span\').html(all_info); // 显示结果 } </script> </body> </html>
13.图片自动轮播，鼠标滑过事件
# 纯代码，使用需要图片和jquey <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .img{ width: 200px; height: 250px; margin-left: 600px; margin-top: 250px; /*background-color: green;*/ position: absolute; } .left_menu{ width: 60px; height: 250px; margin-left: 550px; margin-top: 250px; /*background-color: pink;*/ position: absolute; } .right_menu{ width: 60px; height: 250px; margin-top: 250px; margin-left: 800px; /*background-color: red;*/ position: absolute; } </style> </head> <body> <div class="img"> <img src=\'./imgs/连衣裙.jpg\'></img> </div> <div class="left_menu"> <input type="button" value="连衣裙" onmouseover="test(\'连衣裙\')"> <input type="button" value="呢大衣" onmouseover="test(\'呢大衣\')"> <input type="button" value="围巾" onmouseover="test(\'围巾\')"> <input type="button" value="女包" onmouseover="test(\'女包\')"> <input type="button" value="女裤" onmouseover="test(\'女裤\')"> <input type="button" value="女靴" onmouseover="test(\'女靴\')"> <input type="button" value="棉服" onmouseover="test(\'棉服\')"> <input type="button" value="毛衣" onmouseover="test(\'毛衣\')"> <input type="button" value="牛仔裤" onmouseover="test(\'牛仔裤\')"> </div> <div class="right_menu"> <input type="button" value="男包" onmouseover="test(\'男包\')"> <input type="button" value="男棉服" onmouseover="test(\'男棉服\')"> <input type="button" value="男毛衣" onmouseover="test(\'男毛衣\')"> <input type="button" value="男靴" onmouseover="test(\'男靴\')"> <input type="button" value="登山鞋" onmouseover="test(\'登山鞋\')"> <input type="button" value="皮带" onmouseover="test(\'皮带\')"> <input type="button" value="皮衣" onmouseover="test(\'皮衣\')"> <input type="button" value="羽绒服" onmouseover="test(\'羽绒服\')"> <input type="button" value="雪地靴" onmouseover="test(\'雪地靴\')"> </div> <script src="./libs/jquery-3.3.1.min.js"></script> <script> var $img_handler = $(\'.img\'); // 获取到改变图片的句柄 function test(img_name){ img_path = \'./imgs/\' + img_name + \'.jpg\'; // 拼接每个图片的相对路径 // console.log(img_path); $(\'.img\').empty(); // 在更换一张图片的时候，删除之前一张图片 $(\'.img\').append("<img src="+img_path+"></img>"); // 在父标签中添加一个img标签 // console.log(\'hello world\'); } var product_arr = new Array(\'连衣裙\',\'呢大衣\',\'围巾\',\'女包\',\'女裤\',\'女靴\',\'棉服\',\'毛衣\',\'牛仔裤\',\'男包\',\'男棉服\',\'男毛衣\',\'男靴\',\'登山鞋\',\'皮带\',\'皮衣\',\'羽绒服\',\'雪地靴\') var i = 0; // 将作为轮播图的下标 var t = setInterval(\'timing_change()\', 1000); function timing_change(){ test(product_arr[i]); // 调用更换图片函数 i=i+1; if(i>=product_arr.length){ i = 0; // 如果i大于数组长度，就让i等于0，重新开始轮播 } } // setInterval(timing_change, 100); </script> </body> </html>
14.自定义分页类主要功能代码（不包含部分css渲染）
# 自定义分页类， 使用时需要两个参数，page_num是当前访问页码，content_num_sum是数据库中所有数据的个数总和, data_num是你一页需要放置多少条数据 class PageHelper: def __init__(self, page_num, content_num_sum, data_num): self.page_num = page_num self.content_num_sum = content_num_sum self.data_num = int(data_num) def data_start(self): start_content_index = (self.page_num - 1) * self.data_num # 每页起始数据的索引 return start_content_index def data_end(self): end_content_index = self.page_num * self.data_num # 每页结束数据的索引 return end_content_index def page_help(self): pages, remain_count = divmod(self.content_num_sum, 10) # 总共需要显示的页数和余数 if remain_count == 0: # 如果余数为0，那么页数为pages， 否则页数加一 show_pages = pages else: show_pages = pages + 1 # 每页显示十一页 if show_pages < 11: start_page = 1 end_page = show_pages else: if self.page_num < 6: start_page = 1 end_page = self.page_num + 5 + 1 else: if self.page_num > show_pages - 5: start_page = self.page_num - 5 end_page = show_pages + 1 else: start_page = self.page_num - 5 end_page = self.page_num + 5 + 1 pages_list = [] if self.page_num != 1: pages_list.append(\'<a class="page" href="/classes?p=%s">上一页</a>\' % (self.page_num - 1,)) for i in range(start_page, end_page): # 将所有的页码a标签动态的生成发送给前端进行渲染 if i == self.page_num: # 当前页的页码a标签变色 pages_list.append(\'<a class="page active" href="/classes?p=%s">%s</a>\' % (i, i)) # 拼接HTML代码 else: pages_list.append(\'<a class="page" href="/classes?p=%s">%s</a>\' % (i, i)) if self.page_num != 13: pages_list.append(\'<a class="page" href="/classes?p=%s">下一页</a>\' % (self.page_num + 1,)) page_statement = \'\'.join(pages_list) return page_statement # print(pages_list)
15.bootstrap， jQuery实现登录页面
# 使用之前需要导入bootstrap和jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style> #test_form { margin-top: 200px; } body { background-color: #eee; } </style> </head> <body> <div class="container"> <div class="row"> <div id="test_form" class="col-md-4 col-md-offset-4"> <h1 class="text-center">Login</h1> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">Email</label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form> </div> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
16.学生信息统计
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style> #work_line { margin-top: 20px; } #top_row{ margin-top: 50px; } </style> </head> <body> <div class="container"> <!--进度条--> <div class="row"> <div class="col-md-12"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> 50% </div> </div> </div> </div> <!--主内容框--> <div class="panel panel-primary"> <div class="panel-heading"> <h1>Students Info Statistic</h1> </div> <div class="panel-body" id="work_line"> <div id="top_row" class="row"> <div class="col-md-5 col-md-offset-2"> <form class="form-horizontal"> <div class="form-group"> <label for="inputName" class="col-sm-3 control-label">Name</label> <div class="col-sm-9"> <input type="text" class="form-control" id="inputName" placeholder="name"> </div> </div> <div class="form-group"> <label for="inputPhone" class="col-sm-3 control-label">Phone</label> <div class="col-sm-9"> <input type="text" class="form-control" id="inputPhone" placeholder="phone"> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> <div class="form-group"> <label for="inputEmail" class="col-sm-3 control-label">Email</label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail" placeholder="email"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> ---------------------------------------------------------------------------------------------- <div class="row"> <div class="col-md-12"> <label class="col-md-5 control-label">Character About You :</label> <div class="col-md-7"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> I am a good boy </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> I am a bad boy </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> I am not a guy </label> </div> </div> </div> </div> </form> </div> </div> </div> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
17.导航条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="list-group"> <a href="" class="list-group-item"><i class="fa fa-qq"></i> 姓名</a> <a href="" class="list-group-item"><i class="fa fa-qq"></i> 性别</a> <a href="" class="list-group-item"><i class="fa fa-qq"></i> 年龄</a> <a href="" class="list-group-item"><i class="fa fa-qq"></i> 邮箱</a> </div> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
版权声明：本文为kangjunhao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。