前端 html border-right: 1px solid red;

移动端下网页border：1px显示

解决这个问题之前首先要了解移动前端开发viewport的概念,自己写了一篇很粗糙viewport详解的文章对它有了一个很简单的理解.这里推荐一篇很详细的博文<<移动前端开发之viewport的深入理解>> 步入正题直接上代码解决border:1px的解决办法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="view…

retina屏实现border边框1px

.border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff3300; display: block; content: ''; position: absolute; top:; right:; bottom:; left:; -webkit-transform-origin: 0 0; -webkit-transform: scale(1); pointer…

2017年总结的前端文章——border属性的多方位应用和实现自适应三角形

border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等),利用css3新增的属性值(如使用图片填充边框)可以实现一些更复杂的效果. 本文不介绍border的属性的基本应用方法,将直接介绍如何通过border属性实现一些常见的效利用border画三角形和梯形等多边形在CSS中,常见的平面图形为矩形以及圆形.但是难免有些情景需要我们利用CSS去绘制三角…

移动端border：1px问题解决方案

了解设备像素和css像素的因该知道,通常我们在写移动端时,是按照设计稿标注的像素除以设备的DPR来写真实的像素, 比如在iPhone6上,我们写的20px字体世界上在视觉效应上有20px; 所以当我们写1px边框时,在手机上看起来会变粗变为2px: 对此有如下解决方案: .border-1px(@color){ position:relative; &::after{ display: block; position: absolute; left:; bottom:; border-top:1…

HTML中表格table边框border（1px还嫌粗）的解决方案：

摘自:http://blog.sina.com.cn/s/blog_ae809a730102vrx8.html 第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白色: 这样,就大功告成了. 第二种方法: 1.设置BORDER=0 : 2.再通过CSS,给Table加上1px的border-top,border-left: 3.然后再设置所有的td的…

用table做网页，设置了border为1px怎么还是觉得很粗？

设置边框重叠 border-collapse:collapse; /*边框重叠*/ 例: <table width="700" style="border-collapse:collapse; padding-left:10px" border="1" cellSpacing=0 cellPadding=0 bordercolor="#CCCCCC" > <tr> <td> …

[].forEach.call($$(""),function(a){ a.style.outline="1px solid #"+(~~(Math.random()(1<<24))).toString(16) })

问问你自己,看得懂这行代码吗?要是看不懂就点击进来看看吧,要是看的懂得话,可以绕路 1.call:call(thisObj,arg1,arg2,arg3) [].forEach.call($$("*"), 就是用$$('a')来替代[], 好那么到了第二个问题$$('a')是什么意思 2. $$('a') 你可以在自己的浏览器上面运行一下,就是页面上所有的a标签然后再继续 3. function(a){} 无疑就是$$('a')组成的数组要进行的回调函数了好我们再看里面的东西 4…

day13_雷神_前端01

#前端 html 服务器端返回的就是一个字符串,浏览器根据html规则去渲染这个字符串. html 是超文本标记语言,相当于定义统一的一套规则,大家都遵守它,这样就可以让浏览器根据标记语言的规则去解释服务端返回的字符串. 基本结构 <!DOCTYPE html> # 定义html文档的类型,其实就是一套对应规则,这是推荐规则,兼容性最好之一. <html lang="en"> #是否翻译网页 <head> # 对整个html的一个设置 <met…

关于前端CSS预处理器Sass的小知识！

前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用定义 Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能.Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式…

css007 margin padding border

css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周围环绕着装饰盒子的不同属性 Pad ding:内容和其框线之间的距离 Margin:一个标签和另一个标签之间的距离 Border:盒子周边的直线 Background-color:填充边框内部空间的间隔 2.用margin和padding控制空间 (margin控制盒子外部和其他元素之间的空间: p…

CSS预编译器：Sass（入门），更快的前端开发

SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS). Sass 扩展了 CSS3,增加了规则.变量.混入.选择器.继承等等特性.Sass 生成良好格式化的 CSS 代码,易于组织和维护. SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状.混入.选择子继承等功能,可以更有效有弹性的写出Stylesheet.Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器…

前端开发之css篇

一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作二.css的引入方式 (1)行内式引入: <div style="color:red;font-size: 16px">hello</div> 直接在html语句的属性中设置,这种方法的缺点是html代码和css代码混合在一起,耦合性太强,维护困难 (2)嵌入式引入: &…

【WEB前端】CSS书写规范

古语有云:不以规矩,不成方圆.不管是国还是家还是...都得有规矩加以约束.同样,在我们程序猿的代码中也有一定的规矩——W3C标准,但是我今天不会讲那么高深的道理,我只想说说,我近些日子在开发中所总结出来的CSS一些书写规范: 一.善用css缩写规则 1. 边距(4边): 1px 2px 3px 4px (上.右.下.左) 1px 2px 3px(省略左等于右) 1px 2px (省略上等于下) 1px(四边都相同) 2. 缩写(border)特定样式: border:1px solid…

边框（border）宽度样式颜色和基本属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="border: 1px solid red; height:50px; width:100px; font-size: 10px; te…

前端基础之CSS（总结）

css学什么?? 主要学习选择器和属性,选择器是去找到标签的位置,属性是给标签增加需要的样式. CSS选择器 1.基本选择器: 1.标签选择器 2.ID选择器 3.类选择器(class="c1 c2 ...") 2.通用选择器(*) 3.组合选择器 1.后代选择器(空格) 2.儿子选择器(>) 3.毗邻选择器(div+p) 用的时候感觉有点问题 4.弟弟选择器 (~) 4.属性选择器 1.[s9] 2.[s9="hao"] 3.其他不常用的 5.分组和嵌套…

一个初学者的辛酸路程-前端js

内容回顾: 1.CSS的基本概念: 层叠样式表. 2.CSS的三种书写方式 ① 行内样式 <div style="color: red;">sdfdsf</div> ② 内部样式 head标签之内: <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: red; } </style>…

sass基础篇

scss的语法非常简单: $color: red; div{ color: $color; } 这就是一个简单的scss代码. 但是,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢?显然是不行的,因为浏览器只能解析css文件,所以在使用的时候需要对scss文件进行编译.当然编译方法有很多,可以使用sass命令,也可以使用webpack,fis3等一些代码打包工具. Tips:相对于scss,sass语法比较严格而且语法不太容易被前端开发者所…

CSS预处理器(SASS和LESS)

Sass框架应用Sass简介 Sass又名SCSS,是CSS预处理器之一,它能让你更好更轻松的工作.Sass官网是这样描述Sass的:**Sass是一门高于CSS的元语言,能用来清晰的.结构化地描述文件样式,能提供更简洁优雅的语法,提供多种功能来创建可维护和管理的样式表.**<br/> Sass 诞生于2007年,采用 Ruby 语言编写的一款 CSS 预处理语言,它是最大的成熟的 CSS 预处理语言.最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML…

CSS 技术

浏览本篇文章前可以先看之前的前端网页介绍和html常用标签以便更容易理解本文目录: 目录 CSS 技术介绍 CSS 语法规则 CSS 和 HTML 的结合方式第一种: 第二种第三种 CSS 选择器标签名选择器 id 选择器 class 选择器(类选择器) 组合选择器常用样式 CSS相关查阅文档:https://kohler.lanzouo.com/i0XFcz8svob 文档截图 CSS 技术介绍 CSS 是「层叠样式表单」.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一…

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装 2.更新sass gem update sass 3.卸载(删除)sass gem uninstal…

[Sass]嵌套

[Sass]嵌套-选择器嵌套 Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿意看到的一点.这个特性现在正被众多开发者滥用. 选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法,Sass 的嵌套分为三种: 选择器嵌套属性嵌套伪类嵌套 1.选择器嵌套假设我们有一段这样的结构: <header> <nav> <a href=&qu…

CSS学习心得

CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一基础的语法: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明高级语法: 1.选择器分组选择器分组,如下:被分组的选择器就可以分享相同的声明.用逗号将需要分组的选择器分开.在下面的例子中,我们…

CSS规则整理

一. 善用css缩写规则 /*注意上.右.下.左的书写顺序*/1. 关于边距(4边):1px 2px 3px 4px (上.右.下.左)1px 2px 3px (省略的左等于右)1px 2px (省略的上等于下)1px (四边都相同) 2. 简化所有:*/ body{margin:0}------------表示网页内所有元素的margin为0#menu{ margin:0}------------表示menu盒子下的所有元素的margin为0 3. 缩写(border)特定样式:Border:…