Python web前端 02 CSS】的更多相关文章

Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor ----->font (SIZE:修改字体大小)----> color scheme(背景)---->File and Code Templates(建立模板) ----->Scheme(改成Project)---->将刚复制的内容粘贴到上面,那么以后创建的html文件就自动变成那么模板了 #在h…
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 #设置字体 font-family #在style里面设置div{font-family:...(自己选择字体)} #如果存在div{font-family:"宋体","自己选择字体"} 这个意思是如果浏览器不支持前面的字体,就设置为后面的字体 #设置字体大小 font…
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq http://api.jquery.com/ #官网 #jQuery是一种新的JavaScript库:jq是js写的,能用jq实现的,js都能实现:js能实现的,jq有些不能实现. #jQuery $ 符号传字符串.选择器.尖括号标签的形式.函数.对象(object) #jq的API只对自己开放,jq不…
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicrectoty ---->建立文件 new HTML file 二.常用标签 1.注释 <!--文档类型-->#这是HTML里面的注释,跟python中的不一样 ctrl + ? #快捷注释 2.初始标签 <!DOCTYPE html> #文档类型 <html lang=&q…
Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动态类型.弱类型 #JavaScript通常是用来操作HTML语言的 :HTML骨架(页面结构),css样式(元素大小.颜色.位置.隐藏或显示等),js是行为(部分动画效果.页面与用户交互等) #js标签写在哪 #1.script标签里面: #2.卸载外部.js后缀文件里面,通过script标签引入(…
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置 文本样式(text) color:设置文本颜色 text-align:设置文本对齐方式 center left right letter-spa…
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr…
Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 div{border:10px soiled blue}#依次表示border-width(边框宽度).border-style(类型).border-color(颜色),这是符合写法 #border-width #一个值的时候:表示四个方向一样,上右下左(顺时针): #两个值的时候:上下.右左…
Python web前端 06 运算符 循环 一.运算符 #JS六大数据类型 #number 数字 #string 字符串 #boolean 布尔型 #function 函数 #undefined 未定义:一个变量声明之后没有复制就是未定义 #object 对象 在JS里面null属于对象类型,但是它不具有很多对象的共性,所以很多资料将他归为单独一类数据类型null var a = 11;#number var a = "aaa";#string js里面双引号的地方也可以用单引号来代…
Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字function #分为有名函数和匿名函数 #有名函数:有名字的函数,函数名加括号执行/充当事件函数执行 #匿名函数:没有名字的函数,匿名函数不能单独出现,一般充当事件函数 oBox.onclinck=function(){..}; oBox.onclinck=fn;#这两个是一样的,后面的函数就是fn…
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分类 根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素1.块状元素(block element) A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包块div,dl,dt,dd,ol,ul,li,(h1-h6),p,form,hr,…
Python web前端 11 form 和 ajax 一.打开服务器 将handlers.py.httpd.py和libs.py三个文件放入新文件夹中,双击打开httpd.py文件即可 二.ajax请求过程 <script> $ajax({ 'url':'/htbin/accept-ajax.py',#路径 'method':'GET',#方法 'data':{#数据 ', ', } }).done(function(rep){ #请求成功的响应 consert.log(res); }).f…
Python web前端 10 bootstrp 1.媒体查询 <style> *{ margin: 0; padding: 0; } div{ width: 110px; height: 110px; background: yellow; } @media screen and (min-width: 500px) {#在浏览器宽度大于500px的时候,显示下面的布局 div{ width: 200px; height: 200px; background: black; }#这便是媒体查…
Python web前端 08 字符串 数组 json 一.string #string 字符串 #索引 下标 偏移量 ---从0开始 str[index]; #通过索引取字符串 可读不可写 str.length; #获取长度,包括空格在内 var str="asdadawdsad" console.log(str[6]); #输出a 表示可读 str[6]="c";#报错,表示不可写 value.toString(); #转换字符串 var a = 123; co…
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/…
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式.CSS以HTML为基础,提供了丰富的功能(如字体.颜色.背景的控制以及整体排版等等),还可以针对不同的浏览器设置不同的样式. 1.2 HTML.CSS与JS三者的关系 HTML:页面结构,负责从语义的角度搭建页面结构.…
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规范. Div+CSS命名规范一. 窗体 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo…
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. HTML中标签通常情况下是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个`/`,开始标签和结束标签之间的就是标签的内容.#3.有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如:<br/> <hr/> <input/> <img/&…
作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=””,权值为1000. 第二等:代表ID选择器,如:#content,权值为100. 第三等:代表类,伪类和属性选择器,如.content,权值为10. 第四等:代表类型选择器和伪元素选择器,如div p,权值为1. Ps:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以…
一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得美观: 将HTML页面的内容与样式分离: 提高web开发的工作效率. 3.css的优势 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使页面布局更加灵活 减少网页的代码量,增加网页浏览器速度,节省网络带宽 运用独立页面的css,有利于网页被搜索引擎收录 二.css语法 css语法分为两部分:…
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它. 浏览器负责将标签翻译成用户"看得懂"的格式,呈现给用户!(例:djangomoan模版引擎) HTML文档 文档树 Doctype Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 有和无的区别 BackCompat:标准兼容模式…
css简介: web文档的结构由html元素定义,而这些html元素是如何显示的,则是由层叠样式表css来定义,这样就实现了结构与表现的分离. 1.外部样式表 可以将样式定义放在一个单独的文件中,并且在需要该样式的文档中使用,这样样式表称为外部样式表. 2.嵌入式样式表 嵌入式样式表是用<style>元素将样式包含在网页内部的样式设置,其作用范围仅限于该网页. <style>元素与其它html元素一样,有一个开始标记和一个结束标记.在两个标记之间的任何代码都被看作为样式定义.同样,…
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 一.CSS简介 css:层叠样式表 英文全名:cascading style sheets,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式.目前推荐遵循的是W3C发布的CSS3.0.用来修饰XHTML或者XML等样式文件的计算机语…
一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,css就是要对网页的显示效果实现与word 一样的排版控制. DIV+CSS 标准的叫法 xhtml+css  //XHTML 指扩展超文本标签语言(EXtensible HyperText Markup Language). CSS的好处 1.提高网页的浏览速度,至少50% 的文件尺寸: 2.缩短改版…
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化,并且能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,通常情况下CSS会配合DIV标签一同使用. CSS全称层叠样式表(Cascading Style Sheets)…
1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素元素脱离文档流不占据文档流的位置可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位如果找不到,则相对于 body 元素进行定位 fixed 生成固定定位元素元素脱离文档流不占据文档流的位置可以理解为…
清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both(不推荐)(见例2.2) 使用成熟的清浮动样式类 clearfix(见例3) 少废话,上例子 例 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test…
1. 文档流 指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列 块元素占一行 行内元素在一行之内 从左到右排列 先写的先排列 后写的排在后面 每个盒子都占据自己的位置 2. 浮动的特性 浮动元素有左浮动(float:left)和右浮动(float:right)两种 浮动的元素会向左或向右浮动,碰到父元素边界.浮动元素.未浮动的元素才停下来 相邻浮动的块元素可以并在一行,超出父级宽度就换行 浮动让行内元素或块元素自动转化为行内块元素 浮动元素后面没有浮动的元素会占据浮动元素的位置 对…
三种元素之间的转换 display 属性是用来设置元素的类型及隐藏的 常用的属性有 none 元素隐藏且不占位置 block 元素以块元素显示 inline 元素以内联元素显示 inline-block 元素以内联块元素显示(此属性在 Html5 中被弃了,但还能使用) 少废话,上例子 例1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test<…
1. 块元素,内联元素,内联块元素 元素就是标签 布局中常用的有三种标签 块元素 内联元素 内联块元素 1.1 块元素 也称为行元素 布局中常用的标签,如 div.p.ul.li.h1~h6.dl.dt.dd 等等 在布局中 支持全部的样式 如果没有设置宽度,默认的宽度为父级宽度的 100% 盒子占据一行 即使设置了宽度,也一样独占一行 1.2 内联元素 也称为行内元素 布局中常用的标签,如 a.span.em.b.strong.i 等等 在布局中 支持部分样式,如 margin 的左右值 不支…