前端开发之css
<!--
页面中的组成部分
通常随便打开一个网页，有文字，图片，视频，表格，音频，表单（注册信息) css 属性/尺寸/边框/背景 1.css的尺寸属性，就是大小
width max-width min-width
height max-height min-height 2.css的边框属性
border-style 边框风格
none:无边框。 border-color和boder-width都将被忽略
hidden:隐藏边框。
dotted:点状边框。
dashed:虚线边框。
solid:实线边框。
double:双线边框。两条单线与其间隔的和等于指定的border-width的值。
groove:3D凹槽轮廓。
ridge:3D凸槽轮廓。
inset:3D凹边轮廓。
outset:3D凸边轮廓。 border-color 边框颜色
border-width 边框宽度 3.内边距属性
padding-left: 20px; 左边距
padding-top: 50px; 上边距
padding-right: 100px;右边距
padding-bottom: 150px;下边距 /*复合属性*/
padding: 值； 上下左右 /*padding: 20px;*/
/*padding: 20px 40px;*/ 上下 左右
/*padding: 20px 40px 60px;*/ 上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左 4.css背景属性 --> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>张仁国杨静结婚啦</title>
<style type="text/css">
.item {
/*设置元素的宽高*/
/*width: 300px;*/
/*max-width: 300px;*/
/*min-width: 300px;*/
width: 600px;
/*height: 400px;*/
/**/ /*border 边框*/ border-style: solid;
border-color: #f90;
border-width: 1px; /*复合属性*/
/*border: 2px solid red;*/ /*内边距 padding*/
padding-left: 20px;
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px; /*复合属性*/
/*padding: 20px;*/
/*padding: 20px 40px;*/
/*padding: 20px 40px 60px;*/
padding: 10px 20px 30px 40px; } </style>
</head>
<body>
<h1>CSS的尺寸属性 边框属性 内边距</h1>
<hr> <div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam consectetur corporis dolorum, earum eos et explicabo fuga harum id itaque maiores nam nobis possimus quasi ratione suscipit totam vitae?
</div> </body>
</html> css背景里面精灵图.html
<!--
css sprite 精灵图 雪碧图 利用backgroundposition 设置背景图片的位置 把很多小的图片 集成到一张大图上 好处：减少网络请求数量 --> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精灵图</title>
<style type="text/css">
button {
width: 122px;
height: 30px;
border: 1px solid #c1c1c1; background-image: url("../xxx.png");
background-repeat: no-repeat;
background-position: -1px -2px; /*background: url("") no-repeat -30px -30px;*/ } a {
width: ;
height: ;
background: url("") no-repeat -40px -30px; } </style>
</head>
<body>
<h1>CSS 精灵图知识</h1>
<hr> <!--<button>ok</button>-->
<!--按钮-->
<button></button>
<br>
<a href="http://www.qq.com"></a>
</body>
</html> 背景
<!--
背景属性
1.背景颜色 背景图片
background-image: url("写地址");
如果元素比较大图片比较小，就会平铺 背景图片平铺设置
background-repeat: repeat; 默认值就是repeat表示平铺
可以设置为不平铺，不平铺剩下的默认为背景色
background-repeat: no-repeat;
水平平铺
background-repeat: repeat-x;
竖着平铺
background-repeat: repeat-y; 首先设置为不平铺，因为都铺满了还谈什么位置。
background-postion: 水平方向的位置 垂直方向的位置 background-postion: left top;
background-postion: left center;
background-postion: center center; 建议先写颜色，图片，repeat，postion。
background-postion: 10px 10px; (距离左边10像素 距离右边10像素) 背景图片固定
background-attachment: fixed; 复合属性
background：#ccc url('') no-repeat 10px 10px;
--> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>同志约会</title>
<style type="text/css">
.item {
width: 600px;
height: 200px;
border: solid #f90 2px; background-color: #cccccc; /*background-image: url("写地址");*/ } </style>
</head>
<body>
<h1>背景属性</h1>
<hr>
<div class="item"></div> </body>
</html> 超链接与锚点
<!--
<a href="要跳转的地址">超链接文字</a> 在新的个窗口打开
<a href="要跳转的地址" target=“_blank”>超链接文字</a> title 鼠标放上面会显示 <a href="要跳转的地址" target=“_blank” title=“描述文字”>超链接文字</a> 还可以是图片，浏览器可以直接打开图片 下载图片加个download属性就可以了 超级链接
a元素
属性
href
target _blank /_self
title
download H5新增的 特殊方法
跳转网页
发短信
打电话
发邮件 相对路径 ./ ../
绝对路径 url 统一资源定位符，定位的是一个文件在网络上的地址，HTML，JPG，GIF。。。 统称url 特殊的相对路径 /开始的路径 表示的的网站的根目录 鼠标属性 pointer/move/no-drop 锚点
设置锚点
第一种方式：
<a name="锚点名字”></a>
第二种方式：
任意一个元素
<tagname id="锚点的名字"></tagname> 跳转到指定锚点：
<a href="#锚点名”></a> 完整URL
http：//www.baidu.com/paht/demo/contents/index.php?a=100&b=300#mao1 协议protocol http
主机名(可以是域名也可以是ip)hostname www.baidu.com
路径 path /paht/demo/contents/
文件filename index.php
查询内容query ?a=100&b=300
锚点 #mao1 --> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>张仁国跟杨静</title>
<style type="text/css">
h2 {
cursor: pointer;
cursor: move;
} </style>
</head>
<body>
<h1>超链接</h1>
<!--锚点-->
<a href="#xiangzhi">他们相识</a>
<a href="#aiqing">他们相知</a>
<a href="#aiqing">他们相爱</a>
<a href="#幸福">他们幸福</a>
<a href="#很好">他们很好</a>
<a href="#快乐">他们快乐</a>
<hr> <a href="http://www.taobao.com">淘宝</a> <br>
<a href="http://www.jd.com" target="_blank" >京东</a> <br>
<a href="http://www.xiaomi.com" target="_blank" title="小米">小米</a> <br>
<hr> <h2>鼠标属性</h2> <!--添加锚点-->
<a name="xiangzhi"></a>
<div style="height: 600px">
<h2>他们相识</h2> </div> <a name="aiqing"></a>
<div style="height: 600px">
<h2>他们相知</h2>
</div> <div style="height: 600px" id="aiqing">
<h2>他们相爱</h2>
</div> <div style="height: 600px">
<h2>他们结婚</h2>
</div> <div style="height: 600px">
<h2>他们生子</h2>
</div> <div style="height: 600px" id="幸福">
<h2>他们幸福</h2>
</div> <div style="height: 600px" id="快乐">
<h2>他们快乐</h2>
</div> <div style="height: 600px" id="很好">
<h2>他们很好</h2>
</div> <a href="#">返回顶部</a> </body>
</html>
前端开发之css的更多相关文章
- 前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...
- 前端开发之CSS篇四
一.相对定位 二.绝对定位 三.固定定位 四.z-index 前言 定位有三种:1.相对定位 2.绝对定位 3.固定定位 这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三 ...
- 前端开发之CSS篇三
主要内容: 一.CSS布局之浮动 二.清除浮动带来的问题 三.margin塌陷问题和水平居中 四.善用父级的的padding取代子级的margin 五.文本属性和字体 ...
- 前端开发之CSS篇二
主要内容: 一.CSS的继承性和层叠性 二.盒模型 三.padding属性 四.border属性 五.margin属性 六.标准文档流 七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1 ...
- 前端开发之CSS入门篇
一.CSS介绍和语法 二.CSS引入方式 三.基本选择器 四.高级选择器 五.伪类选择器 六.伪元素选择器 1️⃣ CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...
- ＃笔记＃ 移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
- 移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- Sea.js创始人玉伯的前端开发之路
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...
随机推荐
- 兼容Android 和 ios JavaScript copy paste
<!DOCTYPE html> <html> <head> <title>关于我们Frame</title> <meta charse ...
- Linux：Day5 shell编程初步、grep
bash的基本特性(3) 1.提供了编程环境 程序编程风格: 过程式:以指令为中心,数据服务于指令: 对象式:以数据为中心,指令服务于数据: shell程序:提供了编程能力,解释执行:过程式.解释执行 ...
- TypeError: "x" is not a function
https://stackoverflow.com/questions/32751209/jasmine-typeerror-is-not-a-function 信息 TypeError: " ...
- [转]C#中基于GDI+(Graphics)图像处理系列之前言
直接给出原文链接吧: C#中基于GDI+(Graphics)图像处理系列之前言 链接:https://pan.baidu.com/s/1zm5TCOHqkqEfiLZuqO0UMA 提取码:qz0h
- 面试官问，说一个你在工作非常有价值的bug
如果你去参考面试,做足了准备,面对面试官员从容不迫,吐沫横飞的大谈自己的工作经历.突然,面试官横插一句:说一个你在工作非常有价值的bug.顿时,整个空气都仿佛都凝固了!“What?”... 我想没几个 ...
- Linux死锁检测-Lockdep
关键词:LockDep.spinlock.mutex. lockdep是内核提供协助发现死锁问题的功能. 本文首先介绍何为lockdep,然后如何在内核使能lockdep,并简单分析内核lockdep ...
- 漫画 | Redis常见面试问题（一）
最近,阿音在为接下来的一场面试做准备,其中的内容包括redis,而且redis是重点内容. Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数 ...
- MySQL 5.6中如何定位DDL被阻塞的问题
在上一篇文章<MySQL 5.7中如何定位DDL被阻塞的问题>中,对于DDL被阻塞问题的定位,我们主要是基于MySQL 5.7新引入的performance_schema.metadata ...
- MVC5+EF6 --自定义控制Action访问权限
本章主要讲解在MVC中灵活控制Action的访问权限: 本章所使用的示例表也是上一张所使用的TbUser.TbRole.TbUserRole: 最终的效果是针对任意一个Action或Controlle ...
- 使用Thrift让Python和C#可以相互调用
在聊如何使用Thrift让Python和C#可以互相调用之前,我们先来看看下面的话题. 一.什么是微服务.微服务的特征.诞生的背景.优势和不足 微服务:使用一套小服务来开发单个应用的方式,每个服务运行 ...