css样式 | 易学教程

CSS整理，复习

阅读更多关于 CSS整理，复习

首先是大概复习方向 #### 1 整理HTML常见标签 #### 2 整理标签的特性：语义化、规范、分类... #### 3 CSS2.1 常见样式 #### 4 CSS3 常见样式：动画、变形、flex、grid ... #### 5 实践：PSD 切图、PC端网页、移动端网页、响应式网页... HTML常见标签？ <html></html> 创建一个HTML文档 <head></head> 设置文档标题和其它在网页中不显示的信息 <title></title> 设置文档的标题 <h1></h1> 最大的标题 <pre></pre> 预先格式化文本 <u></u> 下划线 <b></b> 黑体字 <i></i> 斜体字 <em></em> 强调文本(通常是斜体加黑体) <strong></strong> 加重文本(通常是斜体加黑体) <font size="" color=""></font> 设置字体大小从1到7，颜色使用名字或RGB的十六进制值 <big></big> 字体加大 <SMALL></SMALL> 字体缩小 <STRIKE></STRIKE> 加删除线 <CODE></CODE> 程式码 <KBD></KBD> 键盘字 <SAMP></SAMP> 范例 <VAR></VAR> 变量 <BLOCKQUOTE></BLOCKQUOTE> 向右缩排 <DFN></DFN

Bootstrap的全局css样式部分

阅读更多关于 Bootstrap的全局css样式部分

Bootstrap 的栅格系统： 1. 为了合适的排列与内补，行（ row ）写在 .container 或者 .container-fluid 中；在手机上（超小屏幕 <768px ） : 总是水平排列的， .container 最大宽度自动，类前缀是 .col-xs- ，最大列宽（ column ）自动；在平板上（小屏幕 >=768px ） : 开始是堆叠，当大于阙值是为水平排列； .container 最大宽度 750px ；类前缀是 .col-sm- ；最大列宽 62px ；在桌面显示器上（中等屏幕 >=992xp ） : 开始是堆叠，当大于阙值是为水平排列； .container 最大宽度 970px ；类前缀是 .col-md- ；最大列宽 81px ；在大桌面显示器（大屏幕 >=1200px ） : 开始是堆叠，当大于阙值是为水平排列； .container 最大宽度 1170px ；类前缀是 .col-lg- ；最大列宽 97px ；示例： <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col

前端开发必须知道的CSS(一) CSS Hack

阅读更多关于前端开发必须知道的CSS(一) CSS Hack

在开发中，我们常会遇到某些css在IE中显示正常，但是在Firefox中显示不是我们所希望的，或者在Firefox中正常而在IE中不是我们所要。由于不同浏览器对CSS的支持和解析不一样，或者CSS优先级不一样，所以我们常针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，这就是CSS Hack。也可以说CSS Hack就是那些能区别不同浏览器的字符，如!important, * , _ 等。在看了一些网上的相关知识后和实践后，作下总结。各浏览器的CSS Hack ：在IE7发布之前，区分IE与FireFox（OP等与FireFox一样），可以靠!important。譬如body{background-color:green !important;background-color:blue;} ，在IE6中打开页面，body的背景色是蓝色，因为IE6不识别!important，而Firefox识别了!important，所以在Firefox中背景色是绿色，含有!important的样式要写在前面，因为如果2个样式都能识别，后面的会覆盖前面的。而杯具的IE7识别了!important，所以不能仅靠!important来区分Firefox了。另外，对*号的解释，网上有些是这样说的：*: Html 元素被认为是网页上的第一个元素，即根元素。但是，IE

如何写出优雅的css代码？

阅读更多关于如何写出优雅的css代码？

如何写出优雅的css代码？　　对于同样的项目或者是一个网页，尽管最终每个前端开发工程师都可以实现相同的效果，但是他们所写的代码一定是不同的。有的优雅，看起来清晰易懂，代码具有可拓展性，这样的代码有利于团队合作和后期的维护；而有的混乱，虽然表达出了最终的效果，然而却晦涩难懂，显然团队成员在读这样的代码时就显得无从下手，更不利于后期的维护了。那么如何写出优雅的代码呢？下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法，如有不妥，望批评指正。如何整理一个项目。如何写出清晰易懂的HTML代码。如何写出优雅的css代码（重点）。第一部分：如何整理一个项目。　　当我们接手一个表白墙的小项目时，怎么去分类整理呢？是把所有的html文件、css文件、js文件和图片等等混乱的放在一起？好吧，那就看看这样是什么效果吧？　　可能你会觉得这没有什么啊？文件都可以找到啊，但是你试图在sublime编辑器中打开看看是什么效果：　　（补充说明：博友@Tabweng 建议文件名不要使用中文而尽量使用英文，在此表示感谢，希望大家也可以注意这个问题。）　　有没有觉得很混乱呢?！此外，如果项目更大了呢？你需要的html文件、css文件、js文件、以及图片的需求量更大了呢？你还能保证可以顺利的找出每一个你想要的文件并编辑吗？显然显然是否定的。所以对于这种项目

css杂记

阅读更多关于 css杂记

font-family:字体按顺序选择~（以一种各种电脑都有的通用字体结尾） overflow：溢出处理，overflow-x：水平溢出，overflow-y：垂直溢出 letter-spacing：文字之间的空白 font-weight ：文字字体粗细 color：这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。 clip：此属性定义了绝对(absolute)定位对象可视区域的尺寸。 1.clip属性必须和定位属性postion一起使用才能生效。 2.clip裁切的计算坐标都是以左上角即（0,0）点开始计算，如图三所示，这点不像padding和margin，它们两个的右边距和下边距是从最右边和最下边开始计算的。http://www.52banmian.cn/webdesign/200941115012.html display：属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。 text

Django之模板语言

阅读更多关于 Django之模板语言

一、模板语言介绍模板语言渲染的整个过程其实就是将html转换成函数，并为该函数提供全局变量，然后执行该函数二、模板语言的语法模板中也有自己的语言，该语言可以实现数据展示 # 业务请求处理做的页面渲染 return render("request", "template.html", {"k1": "v1", "k2": [11, 22, 33], "k3": {"nid": 12, "name": "aaa"}) # html页面模板语法 {{ k1 }} {{ k2.0 }} # 取列表中的第一个值，通过.获取 {{ k3.name }} # 取字典中对应key的值 # for循环 {% for item in k2 %} <p> {{ item }}, {{ forloop.counter }}, # 索引,从1开始,类似于python中的enumerate， {{ forloop.counter0 }}, # 索引,从0开始,类似于python中的enumerate， {{ forloop.first }}, # 判断当前item是否是第一个元素,成立为True,不成立为False {{ forloop.last }}, # 判断当前item是否是最后一个元素,成立为True,不成立为False {{ forloop.revcounter }} # 倒序索引

今天才知道css hack是什么

阅读更多关于今天才知道css hack是什么

先来个冷笑话：一晚下班回家，一民警迎面巡逻而来。突然对我大喊：站住！民警：int类型占几个字节? 我：4个。民警：你可以走了。我感到很诧异。我：为什么问这样的问题？民警：深夜还在街上走，寒酸苦逼的样子，不是小偷就是程序员作为一个后端程序员，之前知道的css都是皮毛，因为有专业的美工帮我们做静态页面，我们只需要做好页面数据填充，专心写逻辑代码。现在有一种想去从事web前端开发了，尽管知道一些js的主要概念，原型，原型链，上下文，闭包之类的，但貌似都不是很深入，想想还是先从css开始吧，有时候很简单的某些样式却总是写的很痛苦。所以今天就看了 css手册，点滴积累吧。什么是css hack 　　我自己的理解定义，就是针对不同的浏览器在对某些css属性做解析的时候出现的差异，我们去coding css这些差异的过程。看了css hack知道有　　1.条件hack 1  <keywords>取值有　　空　　lt 小于　　gt　大于　　gte 大于或等于　　lte 小于或等于　　！非<version>取值有可以是6/7/8/9...例如以下表示浏览器是小于ie7的： 1 <!--[if lt IE 7]> 2 <style> 3 .test2

css加载会造成阻塞吗？

阅读更多关于 css加载会造成阻塞吗？

之前面试今日头条的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 css加载会阻塞DOM树的解析渲染吗？用代码说话： <!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function h () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 0) </script> <link href="https:/

前端(三)-----css入门

阅读更多关于前端(三)-----css入门

网页美容师 1. css========cascading style sheets 美化样式 ----内部样式 ----行内样式 ----外部样式 2.内联样式又称行内样式 <标签名 style="属性1:属性值1; 属性2:属性值2; "> 内容 </标签名> 作用范围:当前以及子标签起作用 3. 外部样式表实际工作开发中以此为主链入式是将所有样式放在一个或多个.css为扩展名的外部样式表文件中通过link标签将外部样式文件链接到html文档中,其基本语言格式如下: <head> <link href="css文件的路径" type="text/css" rel="style.sheet"> </head> 1.单标签 2.必须在head头部标签中 3.必须指明3个属性四.内部样式表 <head> <style> 选择器{属性:值} </style> </head> 选择器是用于选择标签的五.项目格式项目1======html css 文件 .style.css web工程包括 css文件夹,images文件夹,js文件夹,index.html文件夹六. 选择器 h1{ color:red; font-size:25px; } 1.选择器用于指定 css样式作用的html对象 2.属性以k-v的形式设置样式属性,字体大小,文本颜色等 3,之前以;相连接 1

纯CSS实现带返回顶部右侧悬浮菜单

阅读更多关于纯CSS实现带返回顶部右侧悬浮菜单

这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果，如下图，使用工具是Hbuilder。代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1662617_jrv9w59at58.css"/> <style type="text/css"> /*返回顶部*/ .return-top{ font-family:"微软雅黑" ; height: 350px; width: 100px; padding: 10px 0 0 30px; right: 0; bottom: 30%; margin: auto; position: fixed; background: #FFFFFF; box-shadow: 0 4px 12px 0 rgba(7,17,27,.1); } .return-top>ul>li{ list-style-type: none; padding-bottom: 30px; } .return-top .one{ width: 100px; position: absolute; left: -50px; text-align:

订阅 css样式