html+css复习之第1篇

时间：2024-10-02 18:37:14

1. 保证在火狐浏览器字体<12px,苹果横屏的时候字体显示大小还是12px

 html { background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

2. 带点击区域的图像映射

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">

  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">

  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">

</map>

coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。

提示： 图像左上角的坐标是 "0,0"。

值 描述
x1,y1,x2,y2 如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x,y,radius 如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn 如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

3. 表格

 table { border-collapse: collapse; border-spacing: 0; }   （PS：border-collapse: collapse;表示折叠边框，边框合并在一起，更美观）

4. 列表

  ol, ul, li { word-break: break-all;list-style: none; }

word-wrap:break-word;word-break:break-all;
css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
css的 word-break 属性用来标明怎么样进行单词内的断句。更详细的区别：http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

5. input元素加datalist标签，输入框在鼠标获取焦点时，列出可能的选项：

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

6. html 秘钥对标签

<form action="demo_keygen.php" method="get">

  用户名: <input type="text" name="usr_name">

  加密: <keygen name="security">

  <input type="submit">

</form>

7. iframe

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

通过超链接动态改变iframe中显示的页面
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
 <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

8. html颜色，以下展示了灰色到黑色的渐变（浅色做背景色，深色做文字色）

Gray Shades Color HEX Color RGB
  #000000  rgb(0,0,0) 
  #080808  rgb(8,8,8) 
  #101010  rgb(16,16,16) 
  #181818  rgb(24,24,24) 
  #202020  rgb(32,32,32) 
  #282828  rgb(40,40,40) 
  #303030  rgb(48,48,48) 
  #383838  rgb(56,56,56) 
  #404040  rgb(64,64,64) 
  #484848  rgb(72,72,72) 
  #505050  rgb(80,80,80) 
  #585858  rgb(88,88,88) 
  #606060  rgb(96,96,96) 
  #686868  rgb(104,104,104) 
  #707070  rgb(112,112,112) 
  #787878  rgb(120,120,120) 
  #808080  rgb(128,128,128) 
  #888888  rgb(136,136,136) 
  #909090  rgb(144,144,144) 
  #989898  rgb(152,152,152) 
  #A0A0A0  rgb(160,160,160) 
  #A8A8A8  rgb(168,168,168) 
  #B0B0B0  rgb(176,176,176) 
  #B8B8B8  rgb(184,184,184) 
  #C0C0C0  rgb(192,192,192) 
  #C8C8C8  rgb(200,200,200) 
  #D0D0D0  rgb(208,208,208) 
  #D8D8D8  rgb(216,216,216) 
  #E0E0E0  rgb(224,224,224) 
  #E8E8E8  rgb(232,232,232) 
  #F0F0F0  rgb(240,240,240) 
  #F8F8F8  rgb(248,248,248) 
  #FFFFFF  rgb(255,255,255) 

颜色测试（选择背景色，看文字颜色显示效果：http://www.runoob.com/html/html-colornames.html）

html+css复习之第1篇提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色

9. html 的script标签

<script> document.write("Hello World!") </script>

<noscript> Sorry, your browser does not support JavaScript! </noscript>

直接写入html输出流中（直接写在输出流中的缺点是会刷新document，覆盖之前的内容）：

<p>JavaScript 能够直接写入 HTML 输出流中：</p>

<script>

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落。</p>");

</script>

<p>您只能在 HTML 输出流中使用 <strong>document.write</strong>。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p>

java输出有3种方式：
1. html输出流：document.write ;
2. 输出到控制台：console.log();
3. 使用 innerhtml 输出到文档元素中： document.getElementById("div1").innerHtml="hello ,you are welcome!";
4. 弹出框输出 alert();

10. css样式的优先级（外部样式表、内部样式表、内联样式）

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

html+css复习之第1篇提示:如果你使用了外部文件的样式在 <head>中也定义了该样式，则内部样式表会取代外部文件的样式。

11. 背景图片

1）background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

2）有些图片html+css复习之第1篇（例如为了营造渐变的背景效果，水平方向重铺会看起来更美观一些）（http://www.runoob.com/try/try.php?filename=trycss_background-image_gradient2）

（PS:背景图像平铺可能会影响文字的排版效果）

body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
简写：
body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:

  • background-color
  • background-image
  • background-repeat （x y norepeat）
  • background-attachment <!--  设置背景图像是否固定或者随着页面的其余部分滚动 ,默认值: scroll跟随页面滚动，fixed固定位置，inherit继承-->
  • background-position （top left right bottom）

3）文本属性

a {text-decoration:none;} (文本修饰)
文本第一行的缩进 p {text-indent:2em;} （两个字符）
文本的换行规则 text-wrap: normal|none|unrestricted|suppress;
normal 只在允许的换行点进行换行。
none 不换行。元素无法容纳的文本会溢出。
unrestricted 在任意两个字符间换行。
suppress 压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。 




12. 列表样式




要指定列表项标记的图像
一样的时候

ul { list-style-image: url('sqpurple.gif'); }
不一样的时候 不在ul中设置，在每一个li中设置
ul { list-style-type: none; padding: 0px; margin: 0px; }
ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
PS： 定位图像位置（左0px和上下5px）





13. 边框




dotted: dotted:定义一个点线框

dashed: 定义一个虚线框

solid: 定义实线边界





14.  边框等的简写属性




    margin:25px 50px 75px 100px;

        上边距为25px

        右边距为50px

        下边距为75px

        左边距为100px

    margin:25px 50px 75px;

        上边距为25px

        左右边距为50px

        下边距为75px

    margin:25px 50px;

        上下边距为25px

        左右边距为50px

    margin:25px;

        所有的4个边距都是25px





15.  元素的定位




Fixed 定位：元素的位置相对于浏览器窗口是固定位置。

ausolute 绝对定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
relative 相对定位： 相对定位元素的定位是相对其正常位置

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） 
如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面。





16. 元素的溢出处理




overflow 属性为: visible, hidden, scroll, 或 inherit ，auto 并查看效果。 默认值为 visible





17. 鼠标的样式




auto default（箭头） help（帮助） move（+移动） pointer（鼠标） text（文本） wait（等待）





18. css下拉菜单和导航条下拉（http://www.runoob.com/try/try.php?filename=trycss_dropdown_button），


图片下拉（移动鼠标到图片上显示下拉内容）


（http://www.runoob.com/try/try.php?filename=trycss_dropdown_image）




<style>

.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
.dropdown:hover .dropdown-content { display: block; }
.desc { padding: 15px; text-align: center; }

</style>

<div class="dropdown">

  <img src="http://www.runoob.com/wp-content/uploads/2015/09/banner.jpg" alt="Trolltunga Norway" width="100" height="50">

  <div class="dropdown-content">

    <img src="http://www.runoob.com/wp-content/uploads/2015/09/banner.jpg" alt="Trolltunga Norway" width="400" height="200">

    <div class="desc">图片描述文字</div>

  </div>

</div>





19. 图片的透明度和悬浮效果




img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }

img:hover { opacity:1.0; filter:alpha(opacity=100);  /* For IE8 and earlier */ }





20. 图像拼合（图像拼合就是单个图像的集合）




现在开始每个具体部分的定位和样式：

    #home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px

    #home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）

    #prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。

    #prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）

    #next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.

    #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）





gulp中文网 http://www.gulpjs.com.cn/docs/getting-started/
相关文章