css小随笔（二）与通用样式

51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟css的标签,所以在没有接触通用样式之前很可能就是这两个板块就是两个不同的代码了,然后就会导致css文件里面的代码会非常的多,也会是比较混乱的,不能够清楚明了的看懂.而且应用的通用样式就是可以用一套代码来搞定各个类似板块,并且每个板块不同的地方仅仅需要微调就可以了.这样不仅仅使代码明了,而且还会很省事,…

css小随笔

一.什么是CSS W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说是CSS.CSS全称Cascading Style Sheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言. 二.引入CSS三种样式 1.行内样式表:在HTML标签中,使用style=""的形式引用缺点:不符合W3C关于内容与表现分离的要求.代码杂乱,不利于后期维护. 2.内部样式表:在head标…

CSS小随笔（三）浮动与定位

先来说一下CSS中的浮动一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置.(浮动盒子,会盖在这个盒子的上方) 但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响.(未浮动盒子中的内容,不会被浮动盒子盖住) 3.由于第二条的原因. 可以给收影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响 clear可选值:left-清除左浮动影响…

weex 通用样式以及需要注意的问题

一.说明 weex 对于 css 样式的支持是非常有限的,并且使用样式的时候,必须遵循 weex 定义的规则. 对于不遵循 weex 样式规则的代码,往往在 web 页面上有效,而在 native 环境没有任何作用. weex 官方文档中,有专门的样式介绍: http://weex.apache.org/cn/wiki/common-styles.html 我最早只用 weex 的时候,想当然的觉得,反正会 vue,直接写就行了,但是后面发现,还是需要认真的去读官方的文档,很多注意事项,都是文档…

精简的网站reset和css通用样式库

一.CSS reset body{ line-height:1.4; color:#; font-family:arial; font-size: 12px; } input,textarea,select{ font-size:%; font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ margin:; } h4,h5,h6{ font-size:1em; } ul,ol{ padding-left:; list-style-t…

精简的网站reset 和 css通用样式库

参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; background:white; } input,textarea,select{ font-size:12px; font-size:100%; font-family:arial; font-fami…

转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式

overflow:hidden 隐藏溢出一.自己总结的公用样式解析 html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; } img { border: 0 none; vertical-align: top; } ul, li { list-styl…

CSS 基础（二）

本节内容: 文本字体链接列表表格一.文本文本颜色颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 详情参阅:CSS 颜色值代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程</title> <sty…

CSS标签选择器(二)

一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标识. 只有匹配到具体的对象之后,浏览器才能根据CSS样式声明,决定渲染的效果,并及时呈现在页面中. 1.2.CSS选择类型标签选择器 ID选择器类选择器特殊选择器 1.3.CSS基本语法二.标签选择器 2.1标签选择器概述以文档对象类型的元素作为选择器,如p.div,span等. 最常用的…

Vue小项目二手书商城：（一）准备工作、组件和路由

本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件拆分components(header.footer.literature.science.humanity) 路由router(router-link.router-view) 一.准备工作 1.首先开始一个项目第一步是准备工作. 2.准备工作包括需求分析和项目资源准备两大步. 需求分析就是思考想…

CSS中的ul与li样式详解

CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.list-style-position属性和list-style属性. 一.list-style-type属性 list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰.list-style-type属性是一个可继承的属性.其语法结构如下:(列举一些常用的属性值) list-s…

HTML+CSS小实战案例

HTML+CSS小实战案例登录界面的美化,综合最近所学进行练习网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>实验</title> <style type="text/css"> *{…

CentOS7.0小随笔——指令基本操作（Part.A）

与其说是CentOS7.0的小随笔,说老实话,基本指令在每个发行版本的Linux中都基本上是一致的. Part.A部分我们讲述以下四个方面:命令行界面与图形界面.Linux系统的关闭与重启.命令行帮助.导航类命令. 一.命令行界面与图形界面 Linux操作系统中存在着两种不同的操作方式:文本模式和图形模式对于CentOS系统而言,如果安装选项选择的是最小安装或基本服务(basic service)安装,那么默认进入的是文本模式,且GUI组件并未连带安装(后续可以通过yum进行安装). tips…

CSS 小技巧

CSS 小技巧一.边框内圆角我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width: 200px; height: 80px; padding: 10px; background: rgb(255, 187, 51); #content { display: flex; justify-content: center; align-items: center; height: 1…

html+css小总结

html+css小总结 1.块级元素 <div> <h1> <hr /> <p> <pre> <ol> <ul> <li> <dl> <dt> <dd> <table> <tr> <td> <colgroup> <col> <form>等会换行,想在同一行显示需浮动或者display: inline 2…

html和css入门（二）

CSS基础什么是CSS 简单来说,层叠样式表(Cascading Style Sheet)是一种专门用来控制界面外观风格的文档. CSS发展历史 1996年 CSS 1.0 规范面世,其中加入了字体.样色等相关属性. 1998年 CSS 2.0 规范推出,这个版本的 CSS 也是最广为人知的一个版本. 2004年 CSS 2.1 规范推出,对 CSS 2.0 进行了一些小范围的修改,删除了一些浏览器支持不成熟的属性. 2010年 CSS 3.0 规范推出,将 CSS3 分成了不同的模块,例如盒…

【前端词典】几个有益的 CSS 小知识

今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能后代选择器样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用…

jquery实现一些小动画二

jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1…

几个有益的 CSS 小知识

样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能后代选择器样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的class.…

css进阶之二：flex弹性布局

布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度更高,可以让容器有能力改变子项目的宽高以及排序,以要求的方式填充可用空间,而且其方向有这不可预知性,使用非常灵活. 本文的最佳实践:twibo-vue 基础知识方向:主轴与交叉轴(侧轴) useragent沿着伸缩容器的主轴配置伸缩项目,从容器的主轴起点边开始往终点边结束.交叉轴的方向与主轴垂直.…

Java 获取微信小程序二维码（可以指定小程序页面与动态参数）

一.准备工作微信公众平台接口调试工具小程序的唯一标识(appid) 小程序的密钥(secret) 二.获取access_token 打开微信公众平台接口调试工具,在参数列表中输入小程序的appid和secret,点击检查问题,如果appid和secret正确,则可以返回正确的access_token结果(图中下方的红框) 三.生成微信小程序二维码生成小程序二维码官方文档 https://developers.weixin.qq.com/miniprogram/dev/api-backend…

微信小程序(二十)-UI组件(Vant Weapp)-01按装配置

1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 https://vant-contrib.gitee.io/vant-weapp/#/quickstart#an-zhuang 1.购建 package.json 文件(在项目下cmd进入编辑器输入 npm init -y ) 2.在项目根目录上通过 npm 安装 npm i @vant/wea…

微信小程序二维码推广统计

微信小程序可以通过生成带参数的二维码,那么这个参数是可以通过APP的页面进行监控的这样就可以统计每个二维码的推广效果. 今天由好推二维码推出的小程序统计工具HotApp小程序统计也推出了带参数二维码统计功能帮助统计每个渠道的二维码的推广效果,用户使用情况,留存,付费等. 网址是: www.weixin.hotapp.cn 小程序参数二维码可以做什么? (假如你在3个页面放置了小程序二维码,那么通过每个页面使用小程序的用户是多少呢?) 这时候就需要参数二维码来帮你统计了. 比如: 三.如何使用…

css小技巧（1）

1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selection 选中文字时文字颜色和选中色 <!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-s…

css知多少（3）——样式来源与层叠规则

上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1. “层叠”的概念 CSS——层叠样式表,其中的“层叠”是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程.举一个简单的例子: 上图中有两个样式来源,第一个是引用的css1.css,第二个是自己在style中编写的样式.“层叠”是个叠加的过程,可通过下图表示: 上面用一个简单的例子来说明了…

CSS小tip整理

CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB"; padding-left: 0.5em; } /* 右箭头*/ ol a[rel="next"]:after { content: "00BB"; padding-right: 0.5em; } 2.让父元素包含浮动的子元素: 添加一个进行清理的元素让父元素浮…

SQL开发中容易忽视的一些小地方(二)

原文:SQL开发中容易忽视的一些小地方(二) 目的:继上一篇:SQL开发中容易忽视的一些小地方(一) 总结SQL中的null用法后,本文我将说说表联接查询. 为了说明问题,我创建了两个表,分别是学生信息表(student),班级表(classInfo).相关字段说明本人以SQL创建脚本说明: 测试环境:SQL2005 CREATE TABLE [dbo].[student]( [ID] [int] IDENTITY(1,1) NOT NULL, [sUserName] [ncha…

css小细节罗列

有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样的代码来设置绝对的行高.但是当我们的需求改变,字体大小变动的时候,可能我们还需要再次改动行高,那么现在我们可以使用直接设置数字来设置行高,当我们使用纯数字来设置行高的时候,它相对于的是字体大小的倍数,也就是说下面的h4其实设置的行高也是12*2px就是24px.这样设置的好处是当我们在改变字体大小的…

小随笔：利用Shader实现模型爆炸和沙粒化的效果

0x00 前言上一篇小随笔<小随笔:利用Shader给斯坦福兔子长毛和实现雪地效果>中,我和大家聊了聊著名的斯坦福兔子和利用geometry shader实现的一些效果.这篇文章继续沿用了同样来自斯坦福的另一个模型Armadillo,同样也使用了geometry shader来实现效果的表现. 0x01 凶恶的怪物和爆炸当然,用之前的斯坦福兔子的模型做爆炸的效果也是可以的,但是考虑到要让一个那么可爱的模型变成沙砾总觉得不太好,所以长相自带怪物属性的模型Armadillo就成了一个不错的选择…

微信小程序参数二维码6问6答

微信小程序参数二维码[基础知识篇],从6个常见问题了解小程序参数二维码的入门知识. 1.什么是小程序参数码? 微信小程序参数二维码:针对小程序特定页面,设定相应参数值,用户扫描后进入相应的页面. 2.参数码与普通二维码的区别? 普通小程序二维码,是扫描后直接打开某一微信小程序. 两者的区别在于微信小程序参数二维码加入了相应的参数,可以根据具体的推广渠道.应用场景进行设定,用户扫描后可以直接进入相应渠道/场景的小程序界面. 举个麦当劳点餐例子: 加参数(图片箭头指引)好处: 减少用户操作行为,减少…

【css小随笔（二）与通用样式】的更多相关文章