HTML CSS JAVASCRIPT 学习周记 第四周

最新推荐文章于 2022-05-13 16:42:23 发布
最新推荐文章于 2022-05-13 16:42:23 发布
阅读量163 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Catsdoge/article/details/115213621
版权

HTML CSS JAVASCRIPT 学习周记 第四周

Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap 的网格系统
核心代码展示

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Bootstrap 网格系统（Grid System）的工作原理 网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了
Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。 内容应该放置在列内，且唯有列可以是行的直接子元素。 预定义的网格类，比如 .row 和
.col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows
上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

Bootstrap 导航栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 默认的导航栏</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">菜鸟教程</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">另一个分离的链接</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>

</body>
</html>
Bootstrap 实例 - 默认的导航栏

Bootstrap 页面标题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Bootstrap 实例 - 页面标题</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="page-header">
    <h1>页面标题实例
        <small>子标题</small>
    </h1>
</div>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>

</body>
</html>

页面标题实例 子标题

这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。

Bootstrap 多媒体对象

```html
<!-- 左对齐 -->
<div class="media">
  <div class="media-left">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">左对齐</h4>
    <p>这是一些示例文本...</p>
  </div>
</div>
 
<!-- 右对齐 -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">左对齐</h4>
    <p>这是一些示例文本...</p>
  </div>
  <div class="media-right">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
```
猫猫狗狗www
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html css JavaScript 学习留下的代码.zip
12-30
html css JavaScript 学习留下的代码html css JavaScript 学习留下的代码 html css JavaScript 学习留下的代码html css JavaScript 学习留下的代码 html css JavaScript 学习留下的代码html css JavaScript 学习留下...
JavaScript 使用 · 每日笔记（3）
Mr_Duoduo的博客
07-22 333
知识点来源：w3school 1.<script> 标签 在 HTML 中，JavaScript 代码必须位于<script>与</script>标签之间。 实例 <script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; </script&...
第六周学习周记——JavaScript学习
weixin_54826115的博客
04-13 253
JavaScript学习 1.switch语句 switch 语句用来执行多个不同条件的动作。 switch语句的语法： switch(n) { case 1: 需要执行的代码块 1 break; case 2: 需要执行的代码块 2 break; default: 当 n都不是1 和 2时执行的代码 } 当然，当switch语句中含有这样的语句时： case 2: case 3： 需要执行的代码块x break; 当n为2或3时，都会执行需要执行的代码块x。 例： <html> <he
第七周学习周记——JavaScript学习
weixin_54826115的博客
04-18 224
JavaScript学习… 1.for循环语句 for…in循环 我们可以使用for…in 语句去循环遍历对象的属性。 for…in语句的语法： for (variable in object) { 需要执行的代码块 } 每个属性都将执行一次需要执行的代码块。 2.while循环语句 只要当指定条件是真时，while循环语句会一直循环执行需要执行的代码块。 ...
第六周学习周记——学习JavaScript
jix_Hu的博客
04-24 772
第六周学习周记前言一、JavaScript简介二、JavaScript用法三、JavaScript语法1. JavaScript字面量2. JavaScript变量3. JavaScript操作符4. JavaScript关键字5. JavaScript数据类型四、JavaScript对象五、JavaScript函数六、JavaScript事件总结 前言 在上一周学习了BootStrap后，这一周将学习新的知识：JavaScript。 一、JavaScript简介 JavaScript是一种直译式脚本语
学习周记5——学习JavaScript
qq_48999927的博客
04-06 175
JavaScript简介 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 改变 HTML 图像 点亮灯泡实例 <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.g
HTML+CSS+JavaScript学习练手.zip
01-01
HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手...
HTML CSS javaScript 学习Demo集合, 适合0基础入门.zip
12-30
HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS...
学习 html,css,javascript.zip
01-05
学习 html,css,javascript学习 html,css,javascript学习 html,css,javascript 学习 html,css,javascript学习 html,css,javascript学习 html,css,javascript 学习 html,css,javascript学习 html,css,javascript学习 ...
html+css+JavaScript的学习代码.zip
01-01
html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的...
JavaScript学习总结（四）
郑哥哥の博客
05-13 294
JavaScript学习总结（四） 自去年6月份放假以后，一直没有再接触JavaScript，忙着考研初试、复试、打寒假工、写毕业设计，一直不停地搁置了，研究生生活也过了一个学期了，又开始把JavaScript捡起来，希望能有所长进吧。 今天从JavaScript的类型转换开始学习！ 类型转换，指的是将“一种数据类型”转换为“另外一种数据类型”。在JavaScript中，共有2种类型转换。 （1）隐式类型转换 （2）显式类型转换 隐式类型转换，指的是JavaScript自动进行的类型转换。显式类型转换，
6.21周记（JAVASCRIPT）
kaiakai111的博客
06-21 318
JavaScript 1.JavaScript 使用 在 HTML 中，JavaScript 代码必须位于 标签之间。 外部引入JS文件通过完整的 URL 或相对于当前网页的路径引用外部脚本。如< script src=“myScript.js”></ script> 2.JavaScript变量 变量的标识符：标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。构造变量名称（唯一标识符）的通用规则是：名称可包含字母、数字
JavaScript内容与应用——学习周记7
weixin_54919878的博客
06-20 206
JavaScript内容与应用
学习周记1（html/css）
Estheri的博客
03-09 343
学习笔记 基础知识 定义图像的语法是： <img src="url" alt="some_text"> URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。 <img src="boat.gif" alt="Big Boat"> 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。 设置宽高度；&
前端学习周记（1）——EC6&JS
Karen_Yu_的博客
05-12 2876
Javascript……唉，之前以为这个已经学完了，才发现，那只是皮毛，连正经代码都未必看得懂
JavaScript学习笔记——算法（一）
追雪球的代码周记
12-11 128
前言 本系列文章主要记录本人在学习JavaScript时的一些重要知识。 整个文章使用了一些简单易懂的文字来书写，主要是便于我自己理解，可能不太规范，如有不理解的建议结合官方解释来理解，这里不再展示，也欢迎指出书写不正确的地方^ ^ 算法 简单理解为实现功能的方法和步骤 1.算法特点 有效性（表达式要有效，如a除以b，b不能是0） 有穷性（步骤是有限的，不是无限循环） 确定性（真/假） 有0到多个输入 有1到多个输出 2.伪代码 对于没有计算机编程基础的初学者，可以在进行算法书写时先写伪代码理清逻辑流
第七周学习周记——学习JavaScript HTML DOM
jix_Hu的博客
04-25 294
第七周学习周记前言一、JavaScript HTML DOM简介二、使用步骤1.引入库2.读入数据总结 前言 在上一周学习了JavaScript后，这一周将学习JavaScript HTML DOM。 一、JavaScript HTML DOM简介 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warni
周记20180413
yangluxin763730141的博客
04-13 177
终于，所有事情都告一段落了，运动会我的部分也结束了，团支部风采大赛复赛也过了，小组年会也是圆满成功了。但是我的学习进度却落下了好多。 感觉我请假回来好多人都可以考核了，感觉自己也挺失败的，明明自己当初那么想学软件，明明当初自己那么想学编程，明明当初自己那么喜欢小组，那么想进来。但是现在却没有为了自己的爱好去拼一次，我们总是太容易原谅自己，太容易放松自己。最近我做的最多的事估计就是...
学习完html,css,js,jq之后做网页心得
Xu_taige的博客
07-17 4618
经过5天的快速学习之后，我开始学着做网页了，有一些心得体会，在这里记录一下。   快速学习只是为了知道在真正实战的时候，你可以知道你想要的东西到底在哪里，这样就可以快速地进行查找到你所需要的东西。快速学习不是为了将所有你看到的东西全部都记住，而是有一个大概的印象。在真正实战的时候确实是这样的：在实战做网页的过程中，我基本都是一边做一遍查的，有时候连网页的背景都要查一下怎么调大小。但是我可以很清楚
html、css、javascript语法手册(版).pdf
最新发布
03-09
javascript学习手册

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值