return top
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 *{*/
/* 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=" 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>