@charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; } /*去掉input等聚焦时的蓝…
下面是我用过多次的base.css.欢迎各种建议吐槽.大家共同进步. ;;} table{;} fieldset,img {;} address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul {list-style:none;} capation,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weigh…
一.初始CSS 1.1.介绍CSS 1.CSS定义如何显示HTML元素. 2.当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染). 1.2.CSS语法 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 1.3.CSS注释 /*#p1 {color: green;}*/ /*注释*/ /*注释是代码之母*/ 二.CSS的几种引入方式 2.1.行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style…
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素的盒模型设置为 border-box    -moz-box-sizing: border-box; 3.em和px:根据字号做相应变化的场景也使用了 em,需要像素级别精确的场景也使用了 px 4.字号设置:Amaze UI 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem…
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在style标签中. <style>       color: red;  设置文本颜色 font-size: 30px; 设置文本大小 设置背景颜色 background-color: blue; font-weight: bold; 设置文本粗体 font-style: italic; 设置文本斜体…
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置 文本样式(text) color:设置文本颜色 text-align:设置文本对齐方式 center left right letter-spa…
今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { background:white; color:black; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,o…
有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载 /* * @Author: liubeimeng * @Date: 2015-11-11 10:22:02 * @Last Modified by: liubeimeng * @Last Modified time: 2015-11-11 10:33:18 * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原…
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>模板</title></head><body></body></html> 2.DOCTYPE声明放在html文件头部最新HTML5用<!DOCTYPE html>声明 3.css的引入方式a.直接在html下引入<st…
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置, 每一对属性之间用分号,属性与值之间用冒号 css注释: /* 注释内容 */ 不管是单行还是多行,都只有这一种方法 CSS基本选择器? style属性,行内样式,直接写在标签里,  style="font-size:20px; color: blue;" 标签选择器: 直接针对HTML…
CSS的基础样式 border 边框 复合写法 border:border-width  border-style border-color: border-width:边框宽度 top right bottom left border-style:边框样式  solid实线 dashed虚线 dotted 点线(点线IE6无法识别) border-color:边框颜色/英文单词/十六进制/RGB border-radius 圆角 border:transparent透明(可以写在复合写法里)…
HTML&CSS基础-样式的继承 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式的继承</title> <style type="text/css"> body{ font-size: 30px; } </s…
CSS(Cascading Style Sheet)又叫层叠样式表.是我们学习前端必不可少的一门语言,学习它其实就是为了学会如何去更改页面标签的样式.目前使用最广的是css3,但同样的,他是从css2演变过来的,所以我们还是要从css2开始学起.今天就先聊聊如何在html中引用css,以改变页面样式. 1.行内引用(行内式) 所谓行内式就是通过style属性在标签内部写.但是这种方法及其不推荐.因为w3c标准就是一直倡导结构和样式分离,在标签内部写会使得css和html代码交织在一起. 1css…
一般是叫reset.css 我这边命名成base.css 哎呀无所谓…… @charset "UTF-8"; /*css reset*/ /*清除内外边距*/ body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/ ul, ol, li, dl, dt, dd, /*列表元素*/ form, fieldset, legend, input, button, select, textarea, /*表单元素*/ th, td, /*表格元素*/ pre…
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffolding)之上,Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素,旨在为用户提供新鲜.一致的页面外观和感觉.本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容. 排版  (Typography)…
第4章.CSS CSS简介 Cascading Style Sheet 层叠样式表:定义页面中的表现样式 history: CSS1(1996)--CSS2(1998)--着手CSS3草案(拆分成很多模块)(2001)--CSS2.1修订(2007)--全面推广on-going(部分属性已经实现) 如何引入CSS? 外部样式表:页面的样式多 <head> <link rel="stylesheet" href="base.css"> <…
一.常用的base.css文件(也是比较简略的,但按需增加) body,ul,li,ol,dl,dd,h1,h2,h3,h4,h5,h6,input,p{ margin:;} ul,ol { padding:;} img { border:none;} .clear{zoom:1;} .clear:after{display:block; content:"";clear:both; visibility:hidden; height:0;} /*清除浮动*/ a{text-decor…
本部分主要内容 html - 基础 css - 基础 一.html 标签 html 文档标签树如下: head 部分 Meta(metadata information) 提供有关页面的元信息,例:页面编码.刷新.跳转.针对搜索引擎和更新频度的描述和关键词 1.页面编码(告诉浏览器是什么编码) < meta http-equiv=“content-type” content=“text/html;charset=utf-8”> <meta charset="UTF-8"…
@charset "utf-8"; /*! * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { background:white; color:black; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,le…
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Redis缓存的文章里,遗留了一个问题,周末苦思冥想还是不得其法,想了一个馊主意,但是肯定不是最终解决方案,感兴趣的可以看看,地址<框架之十一 || AOP自定义筛选,Redis入门 11.1>,然后呢,剩下的时间,就是简单搭建了下我在以后的Vue实战中用到的一个小项目,我会手把手在一户的文章中讲到,但…
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的CSS编码,包括以下但不限于: 了解CSS的定义.概念.发展简史 掌握CSS选择器的含义和用法 实践并掌握CSS的颜色.字体.背景.边框.盒模型.简单布局等样式的定义方式 任务描述 基于第一个任务“零基础HTML编码”的代码,参考 示例图(点击查看),在步骤一的代码基础上增加CSS样式代码的编写 头…
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的CSS编码,包括以下但不限于: 了解CSS的定义.概念.发展简史 掌握CSS选择器的含义和用法 实践并掌握CSS的颜色.字体.背景.边框.盒模型.简单布局等样式的定义方式 任务描述 基于第一个任务“零基础HTML编码”的代码,参考 示例图(点击查看),在步骤一的代码基础上增加CSS样式代码的编写 任…
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 一.DOM 简介 由于课程是基于 JavaScript 基础上完成的,这里我们不去详细的了解 DOM 到底是什么. 只需要知道几个基本概念: 1.D 表示的是页面文档 Document.O 表示对象,即一组含有独立特性的数据集合.M 表示模型,即页面上的元素节点和文本节点. 2.D…
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知…
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知…
1. HTML 1.1 前端: 所有用户能看到的界面网页.pc端的应用exe.移动端应用app.微信小程序.手环的时间界面html5为基础的前端:网页.app.微信小程序 1.2 前端三剑客: 1.html5:页面结构框架 标签 => 学会标签的嵌套结构 2.css3:页面布局与样式 3.javaScript:页面的交互逻辑 1.3 html知识 标签:由<>包裹字母开头,可以结合数字和合法字符的能被浏览器解析的标记 -- 字母 数字 -标签有语义:<br> 换行标签有作用范…
WeUI是一套基础样式库,同微信原生视觉体验一致,由微信官方设计团队为微信内网页和微信小程序量身设计的.我们来看看这个基础库样式到底长什么样. 这些密密麻麻的就是压缩后的样式库.密密麻麻地看起来简直要急死密集恐惧症啊.不要急,您请往下看.仔细看我们能看到,这个样式库为很多类写了样式.也就是说,我们只要在html页面中使用这些样式,就能构建一个页面了.[只要写类名,省去了为很多标签定义样式,是不是省事多了呢?]对WeUI的介绍就到这了,下面都是满满的干货啦. 开始写页面前的准备 要想有这个样式库,…
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: * 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的CSS编码,包括以下但不限于: * 了解CSS的定义.概念.发展简史 掌握CSS选择器的含义和用法 实践并掌握CSS的颜色.字体.背景.边框.盒模型.简单布局等样式的定义方式 任务描述 基于第一个任务“零基础HTML编码”的代码,参考 ,在步骤一的代码基础上增加CSS样式代码的编写,示例图: 任…
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没有学习过JavaScript(jQuery),这个学期重新学习了一遍之前学习过的又学了些脚本语言.结合自己平时有点编程基础,学起来也挺快了,作为学期作业(自定任务),我尝试着去实现360极速浏览器的新标签页(刚开始也没有很好的想法,自己一直比较喜欢360极速浏览器'不是下广告',学校机房也没有联网,本来还想做…
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明. 先来看看关于flex的一张图:     从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者…