CSS
关注
分享
扫一扫
文章平均质量分 59
会开花的树-
永远要清楚现在要做什么
展开
-
响应式web设计--图片大小自适应的三种方法
整理于《响应式web设计 HTML5和CSS3实践指南》一书 ①基于宽度百分比<div class='img-wap'> <img alt='' class='img' src='#'></div>对于上面的图片，我们可以将它所属的div宽度用百分比固定，然后让图片自适应div的宽度和高度.img-wap{ float:left; width:40%; } .img{ ma原创 2015-10-18 11:05:24 · 9366 阅读 · 0 评论 -
链接上的CSS应用
<!DOCTYPE html><html><head><meta charset="utf-8"><style>/** 关于a的各种样式： 1. a:link 普通的 未被访问的链接 2. a:visited 已经被访问的链接 3. a:hover 鼠标位于链接上方 4. a:active 链接被点击的时刻原创 2015-09-18 13:07:40 · 465 阅读 · 0 评论 -
bootstrap图片轮播+导航栏效果
这仍然是对本学期软件工程大作业的总结。 在完成这次大作业时，感觉这次写的导航栏和轮播图片效果还好，特此放出效果图和代码。 声明：轮播图片代码根据慕课网上示例代码修改。慕课网上的教程视频地址：http://www.imooc.com/video/3342。 下面是这次的效果图： 最后附上代码：<!DOCTYPE html><html ng-app="myApp"><head><meta原创 2016-01-05 18:50:56 · 9821 阅读 · 0 评论 -
关于媒体查询
css根据不同的设备选择加载不同的样式。 HTML4和CSS2开始可以通过<link>标签的 media 属性为样式表指定设备类型，有八种，screen 和 print 是两种最常见的媒体类型。 1、根据设备类型选择样式。下面的代码表示设备是屏幕时，加载screen.css。设备是打印机时，加载print.css。screen 适用于计算机彩色屏幕。print 适用于打印预览模式下查看的内容原创 2016-01-05 19:41:39 · 1057 阅读 · 0 评论 -
两种引用外部CSS文件的方法
一、用<link>标签引入<link rel="stylesheet" href="a.css" />二、在css里面引用另一个文件<style>@import url('a.css');</style>三、二者之间的差别1）Link 采用 HTML 标签将 CSS 关联，而 import 可以在一个 CSS 文件中引入其它的 CSS 文件2）兼容性的差别。IE6 以下不支持@import3）加原创 2016-01-05 19:51:14 · 5917 阅读 · 0 评论 -
阿里2015校招前端方向的一道面试题
题目如图：解答代码如下：<html> <head> <style> div{ height:100px; width:60px; float:left; margin-left:100px; font-size:24px;原创 2016-02-15 22:55:18 · 519 阅读 · 0 评论 -
rem、em与px之间的关系
rem : root element 指的是根元素即html的字体大小。主流浏览器的rem均为16px；font size of the root elementpx：相对于显示器屏幕分辨率而言。em：相对长度单位。相当于当前对象内文本的字体尺寸，如果当前对行内元素的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。（CSS2.0手册总结1、em单位和rem单位都原创 2016-02-18 11:39:51 · 782 阅读 · 0 评论 -
使用zen coding、gulp、livereload、sass提高前端编码效率
目的： 1、使用zen coding快速生成代码； 2、使用sass编写css代码； 3、利用gulp执行一些自动化操作； 4、使用livereload自动自动刷新浏览器。 本文主要讲一下怎么将这些插件、npm包配置起来，并用gulp自动化管理。 一、zen coding zen coding是一个俄国人在2009年开发的一个插件。它能够仿照CSS选择器的描述自动生成想原创 2016-04-02 14:00:30 · 944 阅读 · 0 评论 -
实现左边定宽，右边自适应布局
简言之，欲实现下面效果 下面是几种方法：1、利用flexHTML<div class="use-flex"> <div class="col1"></div> <div class="col2"></div></div>css.use-flex{ display:flex; display:-webkit-flex;}.col1{ background-color: red原创 2016-10-06 17:09:15 · 846 阅读 · 0 评论