HTMLCSS学习笔记(一)----代码初识、盒模型

---恢复内容开始---

html  超文本标记语言 ---- 结构

css   层叠样式表 ---- 样式

js     javascript ---- 行为



HTML  超文本标记语言

<   标记

<html> 标签

<html> </html> 标签对



保存的代码文件必须是 .html 才可以被浏览器识别 !!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> ! 声明

doc document 文档

type 类型

<meta charset="utf-8" /> 代码编码格式

utf-8   国际标准

代码的编码格式要与文件的编码格式要统一!!


  • CSS基础样式

1.行间样式

<!DOCTYPE html>
<html>
    <head> <!--html注释-->
        <meta charset="utf-8" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <div style=“width:300px;height="200px”;background:blue>块</div>
    </body>
</html>

2.内部样式

<!DOCTYPE html>
<html>
    <head> <!--html注释-->
        <meta charset="utf-8" />
        <title></title>
        <style>
            #box{width:400px;height:200px;background:blue;}
            /*内部样式表*/
             /*css注释*/
        </style>
    </head>
    <body>
        <div id="box">块</div>
    </body>
</html>

用内部样式时,每个模块<div>要给它特定的name

3.外部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>

    <link href="style.css" type="text/css" rel="stylesheet">

    </head>
    <body>
        <div id="box">块</div>
    </body>
</html>

CSS文件

#box{width:400px;height:200px;background-color:#5ee3e5;}

  • 常见样式——background
#box{ width:400px; height:200px; background-color:#5ee3e5; }属性:属性值background 背景/*background-attachment:fixed;背景是否滚动background-color:#gray;背景颜色background-image: url(pp.jpg);背景图background-repeat:no-repeat;背景图是否滚动background-position:center top;背景图位置*/  解析型语言,写代码时尽量避免,越精简越好repeat 默认重复 background:blue url(xx.jpg) no-repeat 不重复background:blue url(xx.jpg)  no-repeatrepeat-x 横向重复 repeat-y 纵向重复向右(左)移动向下(上)移动background:blue url(xx.jpg) no-repeat (-)**px (-)**pxcenter center 水平居中 垂直居中fixed 固定背景background拥有复合属性,属性间无顺序,加空格即可识别。

  • 常见样式——border边框

/*

border-width 边框宽度

border-style 边框样式

border-color 边框颜色

border-top/right/left/bottom 上下左右边框

 

边框样式 

soid 实线

dashed 虚线

dotted 点线   (这两种兼容性可能存在问题)

*/


  • 常见样式——padding(内边距)

*内边距相当于给盒子加了填充厚度会影响盒子的大小

/*

padding: top right bottom left

上右下左内边距,不可调换顺序!!

*/  


  • 常见样式———margin(外边距)

1.上下外边距会叠压;

2.父子级包含的时候子级的margin-top会传递给父级;(内边距替代外边距)

/*

margin:top right bottom left;不可换顺序!!

margin-left:auto ;单写一行板块会一直在右

margin-right:auto;单写一行板块会一直在左

两行一起写板块会一直居中,精简方式:

margin:0 auto

*/


  • 常见样式——结构(盒模型)

结构样式:

width 宽度

height 高度

background 背景

border 边框

padding 内边距

margin 外边距

复合属性:一个属性有多个属性值

background

border

padding

margin


  • 文本设置

行高指的是文字在行高的上下居中

italic 斜体

normal 正常

text-deoration: none(无)

underline 下划线

overline 上边线

line-through 删除线

时间: 2024-10-09 18:49:33

HTMLCSS学习笔记(一)----代码初识、盒模型的相关文章

学习笔记:Caffe上LeNet模型理解

学习笔记:Caffe上LeNet模型理解 Caffe中用的模型结构是著名的手写体识别模型LeNet-5(http://yann.lecun.com/exdb/lenet/a35.html).当年美国大多数银行就是用它来识别支票上面的手写数字的.能够达到这种商用的地步,它的准确性可想而知,唯一的区别是把其中的sigmoid激活函数换成了ReLU. 为什么换成ReLU,上一篇blog中找到了一些相关讨论,可以参考. CNN的发展,关键就在于,通过卷积(convolution http://deepl

数字语音信号处理学习笔记——语音信号的数字模型(3)

2.4 语音的感知       2.4.1 几个概念       语音的听觉感知是一个复杂的人脑-心理过程.对听觉感知的研究还很不成熟.听觉感知的试验主要还在测试响度.音高和掩蔽效应等.人耳听觉界限的范围大约为20Hz~20kHz.在频率范围低端,感觉声音变成低频脉冲串,在高端感觉声音减小直至完全听不到一点儿声响.语音感知的强度范围是0~130dB声压级,声音强度太高,感到难以忍受,强度太低则感到寂静无声. 1.响度 这是频率和强度级的函数.通常用响度(单位为宋)和响度级(单位为方)来表示. 人

最大熵学习笔记(三)最大熵模型

  生活中我们经常听到人们说"不要把鸡蛋放到一个篮子里",这样可以降低风险.深究一下,这是为什么呢?其实,这里边包含了所谓的最大熵原理(The Maximum Entropy Principle).本文为一则读书笔记,将对最大熵原理以及由此导出的最大熵模型进行介绍,重点给出其中所涉及数学公式的理解和详细推导. 相关链接 最大熵学习笔记(零)目录和引言 最大熵学习笔记(一)预备知识 最大熵学习笔记(二)最大熵原理 最大熵学习笔记(三)最大熵模型 最大熵学习笔记(四)模型求解 最大熵学习笔

iOS: 学习笔记, 用代码驱动自动布局实例

iOS自动布局是设置iOS界面的利器. 本实例展示了如何使用自动布局语言设置水平布局, 垂直布局 1. 创建空白iOS项目 2. 添加一个控制器类, 修改YYAppDelegate.m文件 #import "YYAppDelegate.h" #import "YYViewController.h" @implementation YYAppDelegate - (BOOL)application:(UIApplication *)application didFin

马哥学习笔记二十一——LVS DR模型

kernel parameter: arp_ignore: 定义接收到ARP请求时的响应级别: 0:只要本地配置的有相应地址,就给予响应: 1:仅在请求的目标地址配置请求到达的接口上的时候,才给予响应: arp_announce:定义将自己地址向外通告时的通告级别: 0:将本地任何接口上的任何地址向外通告: 1:试图仅向目标网络通告与其网络匹配的地址: 2:仅向与本地接口上地址匹配的网络进行通告: curl命令选项: --cacert <file> CA证书 (SSL) --capath &l

iOS: 学习笔记, 用代码驱动自动布局实例(swift)

iOS自动布局是设置iOS界面的利器.本实例展示了如何使用自动布局语言设置水平布局, 垂直布局1. 创建空白iOS项目(swift)2. 添加一个控制器类, 修改YYAppDelegate.swift文件 @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(application: UIApplication, didFi

web前端——html基础笔记 NO.13{盒模型,颜色值,字体的缩写}

盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有下面三种缩写方法: 1.如果top.right.bottom.left的值相同,如下面代码: margin:10px 10px 10px 10p

[原创]java WEB学习笔记19:初识MVC 设计模式:查询,删除 练习(理解思想)

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

【Spring学习笔记-MVC-7】Spring MVC模型对象-模型属性讲解

作者:ssslinppp       来自为知笔记(Wiz) 附件列表 处理模型数据.png