初学前端

最新推荐文章于 2024-10-06 15:01:40 发布

重庆城科李立川

最新推荐文章于 2024-10-06 15:01:40 发布

阅读量132

点赞数

文章标签： css

本文链接：https://blog.csdn.net/lilichuan132/article/details/111114015

版权

HTML
在没有接触前端之前，完全不知道它是个什么样的机制，觉得它好似遥不可及、高不可攀，不能以常物比之，在机缘巧合之下我有幸学习前端，学习那以前从未想过的梦幻，怀着那赤诚的心愿步入这陌生、科技的课堂！
导师的第一节课是用一个生活中最常见的、也是最普遍且神奇的网页开头——一个登录页面的设置。
不过·在讲登录页面之前导师先给我们讲解编程软件使用，首先要打开sublime-text，再新建文件夹，用Ctrl+S保存文件，在文件命名时给它加一个扩展名.html,回到编程页面时，首先输入一个英文的感叹号，然后再按Tab键，就会·弹出一套编程所需要的代码：

Document 其中是文件头 ----页面的响应数据类型，Document是文档名称，可修改，Type是文档类型，Language ---lang是语言 en表示英文 zh-cn表示中文，…… 是双标签， Head 表示html的头的部分，Body 表示html的正文的部分，UTF-8 ----Unicode码是全世界的通用码。以上的步骤都操作之后就可以在Body标签内编辑你想编辑程序了！在常见登录页面的编辑上，首先是网页的标题，它可以用p标签来控制，也可以用hn标签来控制大小，（n的取值是1到6，但是用h标签控制字体大小n的取值越大，所控制的字体就越小。）通常的账户名都是用Text ----文本框设定的，密码框则使用Password ----密码框设定的，而一些选择框就需要Select 标签来设定，它的multiple属性可以实现多选的功能，Radio是单选框、Checkbox是多选框，Submit 是-提交按钮、Reset 是重置按钮、Button 普通的按钮。如果想让整个页面居中，则需要Align=“center” 其中的center可以换成 left 居左，right 居右。这样基本上的一个登录页面就完成了!在登陆界面进行跳转时会有一种名为HTTP的协议，它里面存在两种请求：Get和Post请求。两种请求方式都是能够让后台接受到数据的但是Get请求不安全，会把name属性的值暴露在地址栏上地址栏默认大小为64kb，而Post请求安全不会在地址栏上暴露name属性的值。在body标签中bgcolor 表示背景颜色，英文单词：red green blue black ，十六进制：#rrggbb 0-f #000000 -#ffffff，Background 使用图片作为背景（不建议使用），页面跳转：可以使form表单 action属性进行页面的跳转，A标签可以进行页面跳转默认为get请求。Font 标签可以控制字体的大小和颜色锚点：使网页的展示到达某一个定位的地点，是表示要跳转的点，表示要跳转到的那个点。 img标签是用来表示页面上的图片，其中Src属性 ----source 指代的是图片的路径 url，Alt属性 ---表示图像的替代文本，Width表示宽度，Height表示高度，该两个属性可以控制图片的大小单位可以使用XXpx 100%，Map 和area 这两个标签。例如：

。表格布局是通过表格来对网站进行整体的布局，这种布局目前来讲已经被淘汰了，主要使用的就是表格的标签：Table ----表格，Tr ----表行，Th ----表头，Td -----表元。例如： Document

热门电影板块

最新

豆瓣评分

冷门佳片

华语

欧美

日本

更多>>


致命ID	万能钥匙	盗梦空间	禁闭岛


致命ID	万能钥匙	盗梦空间	禁闭岛

弹幕的设定，即“跑马灯”。实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“滚动的文字”语句。适当的运用标签的参数，可以表现出不同的效果，请看下面的几个例子： 1、左右弹来弹去的跑马灯弹来弹去跑马灯! 实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction= left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。源码粘贴框：弹来弹去跑马灯! ２、跑的很快的跑马灯跑的很快跑马灯! 　　只要在标签后面加上“scrollamount=15”即可,修改=后边的数字参数即可限制文字移动的速度。３、带有超级链接的跑马灯带超级链接的跑马灯!点我试试？　　　　　　　　　　还有一条呢!点我试试？　实现的方法很简单，把整个语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在中的各条内容分别加上不同的链接，这样的跑马灯就可用来发布滚动新闻或是做站点导航了。　　如果你想给跑马灯的文字加上颜色，换用不同的字体（默认是宋体，换体就要加代码），只要在文字前加上就行了，你可在“face=”后边换上你喜欢的字体，在“color=”后边换上你喜欢的字颜色，在“size=”后边换上适合的字号，如果想让字体加粗，就再加上。代码如下： 带有超链接的跑马灯!点我试试？　　　　　　　　以上几个例子都是标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，标签只被IE所支持，使用Netscape浏览器是看不到的噢。参数和用法介绍： behavior=scroll, slide, alternate ——跑马方式：循环绕行，只跑一次就停住，来回往复运动 direction=left,right ——跑马方向：从左向右，从右向左 loop=100 ——跑马次数：循环100次，如不写默认为一直循环 width=100%,height=200 ——跑马范围：宽为100%，高为200像素 scrollamount=20 ——跑马速度：数越大越快 scrolldelay=500 ——跑马延时：毫秒数，利用它可实现跃进式滚动 hspace=20，vspace=20 ——跑马区域与其它区域间的空白大小 bgcolor=#00FFCC ——跑马区域的背景颜色 face=楷体_GB2312 ——跑马灯文字字体 color=#ff0000 ——跑马灯文字颜色 size=3 ——跑马灯文字字号 STRONG -跑马灯文字加粗当你想要在网页上播放视频，则需要用到vedio标签，如：；如果你想要在网页上播放音频，则需要用到audio标签，如：。

CSS
W3C其实就是World Wide Web Consortium的缩写，中文是W3C组织或者万维网联盟，W3C这个组织是做什么的呢？简单的说，就是出网页标准的。那么又W3C组织推出的标准就被称为W3C标准或web标准
大家所看到的W3C的文档，其实就是万维网联盟提出的标准，W3C标准或者叫web标准 web标准是一系列的标准，它包括了三层：结构层： HTML 用于描述网页的展示结构；表现层： CSS 用于修饰装饰网页的美观度；行为层: JavaScript 用于完成页面的组件（按钮，动画事件或者窗口等一些动态效果）。
css书写格式 4种引入方式
1内嵌式引入，把style标签嵌套在head标签中如：

Document 以上4种引入方式的优先级是根据其距离目标的远近来控制的，距离越近就会显示哪种方式。选择符 1.标签选择符：通过标签的名字来命名的 body{color:red;} p{color:red}，对html中的所有该标签都起作用包含选择符：嵌套中间用空格间隔包含选择符的标识是空格。如： #content p{ color:red; } 分组选择符多个选择符同时具备同一种样式使用分组选择符标志 ,(逗号)。如： body,h1,div,p{ margin:0; padding:0; } 标签指定式选择符：中间不会存在任何符号。如： h1#content{ color:blue; } 2.id选择器：当标签中出现id属性的那么可以使用id选择器，Id选择器通常应用于某些标签中独有的样式，Id选择器的标识是#，如： #one{ color:gold; } 3.类选择器：当标签中出现class属性的时候那么可以使用类选择器，类选择器通常应用于某几个标签具有相同的样式类选择器的标识： .pink{ color:pink; }

三打白骨精

4.全选择器使用*号来表示对整个html中的所有标签都起作用如： *{font-size:36px;color:black;}适用场景：每种浏览器的默认属性的相关值都不一样，一般情况在网页开发的初始阶段，需要把所有浏览器的默认值都归到一个统一的默认值下。然后再进行具体其他操作。控制字体功能和语法设置字号 ——font-size:12px；设置字色 ——color:#000000；设置字体 ——font-family:Arial,'宋体'；设置行高 ——line-height：150% line-height：——1.5em；设置字体的粗细 ——font-weight：normal[正常]bold[粗体]；单位： px 和em 比较常用建议大家经常使用百分比,适合做屏幕适配 css特点 1、继承：网页中子元素，将继承父元素的样式，例如：要控制段落p中的文字大小，可以直接给body标记加样式。 2、层叠：网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式后面定义的样式，会覆盖前面定义的样式控制文本功能和语法设置对象中文本缩进 ——text-indent：2em 可以为负值；文本水平对齐方式 ——text-align：left[左]center[中]right[右]；对象中空白处理 ——white-space：normal[自动换行] pre[换行和空白受保护] nowrap[强制在同一行显示]；文本大小写控制 ——text-transform：none[正常大小] capitalize[每个单词的第一个字母转换成大写] uppercase[转换成大写]；lowercase[转换成小写]；元素的垂直对齐方式 ——vertical-align：sub[设置文字为下标]、super[设置文字为上标]、top[把元素的顶端与行中最高元素的顶端对齐]、text-botton[把元素的低端与父元素字体的低端对齐]。Text-align 它只能控制文本是否居中不能控制div是否居中，如果想让div居中要通过盒子模型中margin:0 auto;所有的网页都要有hn标签利于搜索引擎搜索text-indent：-9999em；去隐藏页面的标题。Text-transform 用于大小写字母转换伪类状态和语法未访问的链接 ——a:link{color:#ff0000}；已访问的链接 ——a:visited{color:#00ff00；鼠标移动到链接上 ——a:hover{color:#ff00ff}；鼠标按下到链接上 ——a:active{color:#0000ff} 盒子模型是指将网页看成一个大盒子，可以把它分成很多块，这些块也把它们看成一个个盒子，其属性有：内边距 padding 用于填充内容内部；外边距 margin 用于描述浏览器边缘到内容的之间的距离；边框 border：1px solid black（像素值实线颜色） Margin：100px 上下左右都是100px的距离 Margin：100px 200px；上下100px、左右 200px Margin：100px 200px 300px 上100px 左右 200px 下300px Margin：100px 200px 300px 400px 上、右、下、左

Margin-top margin-left margin-right margin-bottom
边框也适用于4个方向
块状元素和内联元素
块状元素具有高度和宽度的属性，但是它不允许其他元素和它同行显示；代表标签 div p 等等；块状元素的默认属性： display:block;
内联元素不具有宽度和高度的属性允许其他元素与其同行显示；代表标签 a span；内联元素的默认属性 display:inline;
块状元素和内联元素之间可以进行转换
Display：none 可以隐藏元素
　　控制背景
　　Html中使用Img标签；Css中使用background-image url();
　功能和语法
背景——background:颜色图片平铺方式固定方式位置；背景颜色 ——background-color：#ccc；；背景图像 ——background-image：url（背景图像的位置及全称）；背景图像的重复方式 ——background-repeat:[repeat、no-repeat、repeat-x、repeat-y]；背景图像的位置 ——background-position：top[left center right]、center[left center right]、bottom[left center right],坐标 y坐标[第一个值是水平位置，第二个值是垂直位置。左上角是0 0.单位是像素（0px 0px）]；m背景图像的依附方式 ——background-attachment;[scroll、fixed]。
布局
表格布局 table 淘汰掉了；浮动布局 float 属性；什么是浮动
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
值:none：不浮动；left：对象向左浮动，而后面的内容流向对象的右侧；right：对象向右浮动，而后面的内容流向对象的左侧； Left：前面的元素浮动效果后，会对后面的元素产生影响；清除浮动；当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响；浮动的清理(clear)值：；none：默认值。允许两边都可以有浮动对象；left：不允许左边有浮动对象；right：不允许右边有浮动对象
both：左右两侧不允许有浮动对象；定位布局；属性：positon；描述：设置对象的定位方值：
static 静态定位：页面中的每一个对象的默认值。；absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。；relative 相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位
overflow
它的属性有：visible[默认值。不剪切内容也不添加滚动条]，；auto[在必需时对象内容才会被裁切或者显示滚动条]，；hidden[ 不显示超过对象的尺寸的内容]，；scroll[总是显示滚动条]；3种隐藏元素的方法：1.display：none；2.width：0 height0；3.overflow:hidden如：
.