HTML 10.20

最新推荐文章于 2024-09-24 11:22:03 发布
最新推荐文章于 2024-09-24 11:22:03 发布
阅读量90 收藏 1
点赞数
文章标签： html bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WGY0227/article/details/120874645
版权

HTML第四天

一 Bootstrap

1.1 框架

框架就是项目的基础构建的设定。 我们在做项目的时候，会有一些相同的操作，如果每个项目在开始的时候 都需要这些基础操作，但是如果每个项目都去在基础操作上浪费时间此时是得不偿失。所以 就有一帮大牛 将基础操作给我们写好了。我们就可以在他们写好的内容基础之上做二次开发。 所以我们就将其写好的内容（代码）称之为 框架。

简单的说 框架就是大牛写好的我们能直接使用的代码。 开发部 用框架研发部 写框架 开源框架

1.2官网

https://www.bootcss.com/
​
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
​
找到 BOOT3  选择入门
入门的第一件事情  是让我们下载  原因是 框架就是大牛写好的代码 所以我们要使用的时候 首先要把大牛的代码下载下来
下载的方式 A 下载源代码到我们的电脑  B  BootstrapCDN远程引用
​
首先我们创建一个工程  link远程引入bootstrap
​
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    </head>
    <body>
        
        
    </body>
</html>

1.3 table 组件

 此时 bootstrap给我们写好了一个table 让我们使用
​
​
<table class="table  table-striped table-bordered table-hover">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td class="danger">张三</td>
                <td>18</td>
                <td>男</td>
                <td>北京</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td class="warning">张三</td>
                <td>18</td>
                <td>男</td>
                <td>北京</td>
                <td>操作</td>
            </tr>
​
​

1.4 button

<button type="button" class="btn btn-danger">登录</button>
<button type="button" class="btn btn-primary">修改</button>
​
<button type="button" class="btn btn-primary btn-lg">修改</button>
<button type="button" class="btn btn-primary btn-xs">修改</button>
​
<button type="button" class="btn btn-primary btn-lg btn-block">修改</button>
​
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

1.5 icon

1 找到自己喜欢的图标
2 复制码
3 在合适的位置 创建一个span标签 并且添加class属性 将码赋值给class
​
​
                 <td>
                    <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>删除</button>
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send"></span>修改</button>
                </td>
​
​

1.6 巨幕

​
        <div class="jumbotron"   style="text-align: center;background: linear-gradient(45deg,#020031,#6d3353);color: white;">
          <h1>欢迎来到学生管理系统</h1>
          <p>本系统QY146专属</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
        </div>

1.7 栅格系统

1 栅格系统简介
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
​
就是当前流式布局的一个功能 让我们可以快速完成页面布局的搭建 将一行分成12列 我们根本实际需求 搭建合适的列 再填入相应内容即可
​
2 栅格系统基本搭建
​
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <style type="text/css">
            div{border: 1px solid red;}
        </style>
    </head>
    <body>
        
        
        <div class="row">
            <div class="col-md-5">11111</div>
            <div class="col-md-6">22222</div>
            <div class="col-md-1">33333</div>
        </div>
        
        <div class="row">
            <div  class="col-md-6">11111111</div>
            <div  class="col-md-6">22222222</div>
        </div>
        
        <div class="row">
            <div class="col-md-2"><img src="" ></div>
            <div class="col-md-8"><input type="" name="" id="" value="" /><button></button></div>
            <div class="col-md-2"><img src="" ></div>
        </div>
        
    </body>
</html>
​
​
3 响应式布局
​
​
 <div class="row">
            <div class="col-md-5   col-sm-1">11111</div>
            <div class="col-md-6   col-sm-1">22222</div>
            <div class="col-md-1   col-sm-10">33333</div>
        </div>
代表的含义就是 三个div 在电脑上面的比例是 5 6 1   如果在平台显示 就是 1 1 10
​
​
​
4 列偏移
​
    
        <div class="row">
            <div class="col-md-2  col-md-offset-2 ">11111</div>
            <div class="col-md-3  col-md-offset-4 ">22222</div>
        </div>
        
​
5 嵌套列
​
<div class="row">
            <div class="col-md-4  col-md-offset-4">
                <div class="row">
                    <div class="col-md-2">
                        <a href="">立即注册</a>
                    </div>
                    <div class="col-md-4 col-md-offset-6">
                        <a href="">修改密码</a>
                        <a href="">忘记密码</a>
                    </div>
                </div>
            </div>
        </div>
        
​

练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <style type="text/css">
            div{border: 0px solid red;}
        </style>
    </head>
    <body>
        <div class="row" style="background-color: black; line-height: 50px; height: 50px;">
            <div class="col-md-2 col-md-offset-1">
                <img src="https://uniportal.huawei.com/uniportal/images/huawei_logo.png?version=2.0" width="150px" />
            </div>
            <div class="col-md-3 col-md-offset-6">
                <div class="row">
                <div class="col-md-3 col-md-offset-2"><a href="" style="color: white;">联系我们</a></div>
                <div class="col-md-2 col-md-offset-1"><a href="" style="color: white;">帮助</a></div>
                <div class="col-md-4"><a href="" style="color: white;">简体中文(中国)</a></div>
                
                </div>
            </div>
        </div>
        <h1 style="text-align: center; margin-top: 75px; font-weight: bold;">Uniportal帐号登录</h1>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="row" style="text-align: center; line-height: 50px; height: 50px;">
                <div class="col-md-4" style="border-bottom: 2px solid red;">
                    <a href="" style="color: black;">账号/邮箱登录</a>
                </div>
                <div class="col-md-4" style="border-bottom: 2px solid  #808080;">
                    <a href="" style="color: #808080;">手机号码登录</a>
                </div>
                <div class="col-md-4" style="border-bottom: 2px solid  #808080;">
                    <a href="" style="color: #808080;">短信登录</a>
                </div>
                </div>
            </div>
        </div>
        
        
                <div class="row" style="margin-top: 50px;">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="row" style="text-align: center;height: 50px;line-height: 50px;">
                            <form>
                              <div class="form-group">
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Uniportal帐号/邮箱/W3帐号" style="height: 50px;">
                              </div>
                              <div class="form-group">
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码" style="height: 50px;">
                              </div>
                              <button type="submit" class="btn btn-danger btn-block btn-lg" >登录</button>
                            </form>
                        </div>
                    </div>
                </div>
                
                <div class="row" style="margin-top: 150px;">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="row">
                            <div class="col-md-2"><a href="" style="color: #9fceff;">立即注册</a></div>
                            <div class="col-md-4 col-md-offset-6"><a href="" style="color: #9fceff;">忘记密码</a> <a href="" style="color: #9fceff;">修改密码</a></div>
                        </div>
                    </div>
                </div>
    </body>
</html>
​

WGY0227
关注
html读取xml
ak157888的博客
12-01 1267
html文件 <html> <body><script type="text/javascript"> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xml
关关采集器2015V10.20无限制旗舰版
02-22
3. **数据预处理与清洗**：在采集过程中，关关采集器能够对抓取到的数据进行预处理，包括去除HTML标签、过滤无关字符等，确保获取的数据干净、可用。同时，它还提供了数据清洗功能，让用户可以自定义清洗规则，...
10.20学习内容
qq_62052954的博客
10-20 211
1.字符串的编码 使用内置函数ord（）可以把字符转换成对应的Unicode码； 使用内置函数chr（）可以把十进制数字转换成对应的字符。 （ord字符变数字；chr数字变字符） 字符串的拼接，字符的运算要带引号。 字符串的拼接，也可以不要加号，直接在两个字符串中间加个空格 "aa" "bb" 'aabb' 注意：myname一定要连起来。 重要！！！ input（）函数 2.字符串 str（） 回顾以前学习的函数 ①divmod（）——同时得到...
灯塔10.20学习内容
qq_74261379的博客
10-20 256
（指定wide height为盒子的高度）padding: 20px 20px 20px 20px;（内边距 上 右 下 左）margin: 30px 30px 30px 30px;（外边距 上 右 下 左）border: 10px solid red;设置一个标准(基础，不带修饰)的文本。（2）类选择器（优先级次于ID选择器）（1）ID选择器（优先级最高）（3）元素选择器（优先级最低）
10.20
10-20 73
感觉对各个数据类型，运算符和表达式还是不太熟悉，需要巩固。 转载于:https://www.cnblogs.com/GuanZetao/p/9821005.html
10.20笔试
qq_34774226的博客
10-20 475
思特奇——java笔试题 全是选择题，且都是从网上的一些题库中找的，各种类型的题都有，以下挑选两道比较有具代表性的 “在调用方法时，若要使方法改变实参的值可以（） A) 用基本数据类型作为参数 B) 用对象作为参数 C) A和B都对 D) A和B都不对 答案：B 解析： 1. 首先说一下实参和形参的概念。在调用函数时，会给参数赋一个临时名称用于函数内部，这个名称（参数名）叫做形参，而实际传入方法的参数，叫实参。例如， m1(int a,int b);//方法m1，a,b均为int类型
10.20 考试总结
diyangyan5350的博客
10-21 156
10.20 考试总结 排列 打表找规律，考试的时候主要是题目意思没有理解。实际上就是全排列后找\[{A_i} >= i\]满足的这个的个数 然后大法师挂一阵子机以后 找规律就会发现一个神奇的递推式：$ F[i][j] = f[i - 1][j] * (j + 1) + F[i - 1][j - 1] * (i - j)$ 然后就做出来了 速度限制 这个考试的时候......真的没怎...
html调用XML
小海的博客
03-31 847
方法一,数据绑定 XML文件 Empire Burlesque Bob Dylan USA Columbia 10.90 1985 Hide your heart Bonnie Tylor UK CBS Records 9.90 1988 Greatest Hits Dolly Parton USA RCA 9.90 1982
HTML语法基础-2-10.20
weixin_46076814的博客
10-20 176
HTML-2 超链接 超链接定义锚点 定义锚点： <a name="p1"></a> 超链接跳转指定锚点 <a href="#p1"></a> 表格 表格的基本结构 <table> <caption></caption>表格的标题标签 <tr> <th></th> </tr> <tr> <td></td> </tr> &lt
http抓取html,httpclient 抓取html数据
weixin_33209661的博客
06-04 230
package com.hoperun.webos.servlet;import java.io.IOException;import java.io.InputStream;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http...
10.20web前端mysql+php+layui订单登记类页面带功能.rar
10-20
标题 "10.20web前端mysql+php+layui订单登记类页面带功能.rar" 描述了一套基于Web的前端和后端系统，用于订单管理。这个系统利用MySQL数据库存储数据，PHP作为服务器端脚本语言处理数据逻辑，而Layui是一个流行的...
veeqi_flash_10.20
11-05
因此，尽管【veeqi_flash_10.20】可能在某些场景下仍具有一定的适用性，但在新的Web开发趋势下，开发者可能需要考虑向HTML5过渡。 在压缩包内，"注释.txt"可能包含了关于组件的使用说明、注意事项或者代码注解，...
html-validator:一个使用validator.w3.orgnu验证html的Node.js模块
05-13
要求Node> = 10.20.1（对于较旧版本使用v4.1.1） Webpack 如果您使用的是Webpack，则可能由于html-validate和cli导入而导致5.1.x系列出现问题。 目前最好的解决方案可能是坚持使用5.0.3版本 模块 从Validator.nu ...
html实现黑白棋
woshiyaozhenyang的博客
09-23 533
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑白棋</title> <style> body { display: flex; flex-direction: column; align-items: center;
web基础：域名、网页、HTML、web版本
shyuu的博客
09-23 1420
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
HTML粉色烟花秀
兔子王
09-21 5676
HTML语言实现的粉红色跨年烟花秀的完整代码。
html TAB切换按钮变色、自动生成table--使用函数优化结构
最新发布
TrueLink的博客
09-24 791
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 1px solid #ccc; padding: 1px
HTML中的表单（超详细）
qq_63946637的博客
09-20 1811
本文旨在帮助大家学习HTML中有关表单的知识
ContextCapture10.20
09-06
ContextCapture 10.20是一个软件程序，用于进行地理数据的捕捉和处理。安装ContextCapture 10.20需要按照以下步骤进行操作：首先，安装主程序。其次，在安装完成后，需要打补丁来确保软件的正常运行。最后，安装中文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值