要求：一个小时仿照博客园的格局，写一个静态的网页，主要采用HTML+CSS+DIV的布局方式，新建两个文件:website.html、website.csswebsite.html代码如下：<!doctype html><html lang="zh-CN"><head><meta charset="ansi"><media name="description" content="this is a website"><media name="keywords" content="website,html,css"><title>这是一个网页website</title><link rel="stylesheet" style="text/css" href="website.css">...
1.基本样式： ————宽 属性：width 属性值：长度值 ————高 属性：height 属性值：长度值 ————块级元素与行内元素之间的转换 属性： display 属性值：block 转换为块级元素 inline 转换为行内元素 inline-block 转换成行内块元素 linline-block可以设置宽高，但是不会换行 2.背景属性： CSS可以用纯色调作为背景，也可以用图片作为背景 ————背...
jq：1、prepend(参数);//将参数内容前置再某元素内部;eg:<div id="div1">奇妙能力歌</div>$("#div1").prepend("<a href=‘#‘>陈粒</a>");//得出结果：<div id="div1"><a href=‘#‘>陈粒</a>奇妙能力歌</div>2、outerHeight(boolean)outerHeight(false);//不计算元素的margin值 计算padding和borderouterHeight(true);//计算元素的margin值3、delay(time);延迟;eg:$("#div1").delay(300).show();//该元素延迟300ms再执行显示;4、设...
?记在前面 人生最大的希望在于：自己值得自己等待 先打开运行项目： 一、less和reset.css的使用1.less的引用： 安装less和less-loader（之前补充过了）传送地址：https://www.cnblogs.com/crystral/p/9117161.html 2.reset.css的引用①去这个网站（https://cssreset.com/）下载一个reset.css文件，然后copy到src目录下：（这个我没有下载下来，点击没反应，所以去老师那里copy了一份，代码我放下面） reset.css/** * E...
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div> 语法：text-overflow : clip | ellipsis参数：clip : 不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）ellipsis : 当对象内文本溢出时显示省略标记（...）说明：设置或检索是否使用一个省略标记（...）标示对象...
本文转载自 http://www.cnblogs.com/tugenhua0707/p/3485384.html CSS2.0实现面包屑 面包屑这样的 我们以前都是用背景图片做这块工作，但是直到大概2个星期之前在新浪微博上看到用css3.0实现这样的面包屑 但是目前情况下IE6-8并不支持css3.0 只有标准游览器(像火狐 谷歌等支持)。由于有前一次总结一篇关于"CSS实现气泡框效果" 的文章 其中有关于怎么样实现小三角形的列子 所以感觉用那个小三角形可以正好模拟这块工作，所...
之前在使用经常遇到下面的问题：html：1<div class="top">2<div class="one">I‘m the first!</div>3<div class="two">I‘m the second!</div>4</div>css： .one{width: 100px;height: 100px;background: red;margin-top:20px;}.two{width:100px;height:100px;background:blue;}.top{width:200px;height:300px;background:gray;} 显示结果：.one与.top之间并没有实现margin-top的效果，这个问题发生的原因是根据规范，一...
CSS,font-family,好看常用的中文字体例1（小米米官网）：font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;例2（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,‘宋体‘,sans-serif;例3（加网 ）：font: 14px/1.5 ‘Microsoft YaHei‘,arial,tahoma,\5b8b\4f53,sans-serif;例4（淘宝UED）：font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;例5（一淘UX）:font-family: Helvetica, ‘...
转自：http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=referral一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色...
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：1 background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */ 2 background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */ 3 background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */ 4 background...
时间：2014-02-25来源：网络作者：未知编辑：RGBdisplay:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。一、box-flex属性box-flex主要让子容器针对父容器的...
float:left; 当前元素向左侧浮动.float:right: 当前元素向右侧浮动.clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.clear:right; 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.上面提到的行也可能是多行组成的一个块,不仅仅是一个文本行的概念.原文：http...
记录一下曾经遇见的css怪象，不如你也来看看，搜一搜我们曾经遇见的坑。坑位一：inline-block坑位1.1：inline-block和多出的空白。坑位1.2：inline-block和元素上浮。坑位1.3：坑位二：关于 absolute-left当然也有可能不是坑；不过很奇怪的是有时候在 PC端的时候是没错的，到了移动端就错了==； 坑点：在 absolute 中，left: auto; = left: 50%; ？？？（也许是我才疏学浅的错误认知，我一直以为 left:auto 与 left:0是一致的）<ul...
很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习前端基础更是大有裨益。 而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。 前面几题是会很基础，越下越有深度。 附上第一篇：BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇： 1.你做的页面在哪些流览器测试过？这些浏览器的...
运行一个从网上download的一个MVC项目，运行的时候无法显示样式，js也报错。检查路径也没有问题，后来在配置中把其中的一段配置去掉 <staticContent> <!-- remove first in case they are defined in IIS already, which would cause a runtime error --> <remove fileExtension=".woff"/> <remove fileExtension=".woff2"/> <mimeMap fileExtension=".woff" mimeType="application/font-woff"/> <mimeMa...