常用<div id="box" class="item"></div>
尺寸为屏幕宽度
em的大小取决于文字
尺寸
-
width max-width min-width
-
height max-height min-height
边框
-
border-style 边框风格 solid实线/dotted点线/dashed虚线,double双线/none
-
边框颜色 border-color
-
边框宽度 border-width
-
复合属性 border:宽度,风格,颜色
内边距
-
padding-left:20px;左边像素
-
padding-top:50px;上边
-
padding-right:100px;右边
-
padding-bottom:150px;下边
-
padding:复合属性
padding: 值;单个是一周边距都相同
padding: 值1 值2;两个值是上下边距,左右边距相同
padding: 值1 值2 值3;三个值的时候是按照顺序上,左右,下
padding: 值1 值2 值3 值4;四个值得时候是按照顺时针顺序上,右,下,左
背景属性
-
默认透明无色 transparent
-
background-image: 背景图片 url("相对地址"); 例如:../../路径/2.jpg
-
background-repeat: 背景图片平铺 repeat 平铺,no-repeat不平铺,repeat-x横铺,repeat-y竖铺
-
background-position:背景图片位置 left top左边 left center左中 center center居中 10px 10px是内容上边与左边得间距
-
background-attachment 背景图片固定 scroll/fixed屏幕控制图片位置
-
background 复合属性 color image repeat postion attachment
CSS Sprite 精灵图 雪碧图
<button>按键</button> 显示出按键字样的选项框
-
利用background-position 设置背景图片的位置
-
把很多小的图片 集成到一张大图上
-
好处:减少网络请求数量
2超级链接
2.1 a元素
超级链接是a标签
属性
-
href 输入网址的地方
-
target _blank/ _self 点击链接跳到新的网址显示
-
title 鼠标移到的时候显示提示内容
-
download 下载浏览器是别的压缩包图片等,有些浏览器无法识别下载
<!--<a href="网址" title="淘宝">淘宝</a>-->鼠标在链接上可以显示文字说明
<!--<a href="网址" target="_blank">-->浏览器新窗口页面打开运行
<!--<a href="图片"></a>-->图片打开可以是动态图
<!--<a href="图片" download>图片</a>-->点击可以下载图片
浏览器会自动判断是打开内容还是下载内容,如果放的是压缩白就是直接下载
特殊用法
-
跳转网页
-
发短信<!--<a href="sms:18767106368">短信</a>-->
-
打电话<!--<a href="tel:18767106368">电话</a>-->
-
发邮件<!--<a href="mailto:邮件箱">发邮件</a>-->
2.2 路径
-
相对路径 ./当前层 ../上一层
-
绝对路径 URL
http://www.baidu.com/index.htmlURL是统一资源定位符, index是服务器自动加上的 -
特殊的相对路径
/lesson/path/index.html/开始的代表网站根目录
2.3 cursor css 属性
常用的是:pointer / move / no-drop / help / wait / text / crosshair
鼠标的光标属性都是写在头部:
<style type="text/css">
h1{
cursor:move;
} 这样就能达到鼠标的光标变手的情况
2.4 锚点
设置锚点有两种方法:
第一种方法
<body>
<a href="#jieshao">来吧</a><br>
<div style="height:600px">
<a name="锚点名字jieshao"></a> 用name设置为锚点
<h2>来吧</h2>
</div>
第二种方法将写在外面的name用id写到
<tagname id="锚点的名字"></tagname>
调转到指定锚点
<a href="#锚点名">回到顶点</a>
2.5 完整URL
http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1
协议protocol: http
主机名hostname: www.baidu.comm 或者 IP
路径path: /path/demo/contents/
文件名filename: index.php
查询内容query: ?a=100&b=300
锚点 #mao1
3图片
将一张图片分开点击不同的地方,这些地方连接超级链接,会跳转到别处,与map关联
图片先分区用<map>地图,先制动名字
图片必须加关联usemap
<area shape="rect" coords="长度,宽度与新的长度,宽度" title="选择的地方名字" target="_blank" href="网址">
一共三个形状
rect 矩形
poly 多边形
circle 圆形
img元素
属性
-
src
-
title
-
alt
-
usemap
图片映射
map元素
-
name
-
id
area元素
-
shape rect circle poly
-
coords
-
target
-
href
-
title