javaScript学习资源前端进击者

DIV+CSS学习笔记总结篇

2016-09-03  本文已影响8840人  程序员poetry

转载请声明 原文链接地址

第一部分 HTML

第一章 职业规划和前景

第二章 html基本结构

<html>
    <head></head>
    <body></body>
</html>

第三章 html基本标签

<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>

onmouseover=this.stop()  onmouseover=this.start()  scrollamout="1"(滚动速度)

第四章 img图片标签与路径

第五章 三种列表的讲解

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

<ol>
   <li>内容一</li>
   <li>内容二</li>
   <li>内容三</li>
</ol>

<ul>
 <li>柚子
  <ul>
   <li>沙田柚</li>
   <li>蜜柚</li>
  </ul>
 </li>
 <li>荔枝</li>
 <li>苹果</li></ul>

<ol>
 <li>茶
  <ul>
   <li>红茶</li>
   <li>绿茶</li>
  </ul>
 </li>
 <li>果汁</li>
 <li>牛奶</li></ol>

<dl>  
     <dt>pc网页制作</dt>  
     <dd>学习DIV+CSS JS JQ 项目实战</dd>  
     <dt>手机网页制作</dt>  
     <dd>手机网页制作实战</dd>
</dl>

<dl>
    <dt>中国城市</dt>
    <dd>北京 </dd>
    <dd>上海 </dd>
    <dd>广州 </dd>
    <dt>美国城市</dt>
    <dd>华盛顿 </dd>
    <dd>芝加哥 </dd>
    <dd>纽约 </dd>
</dl>

第六章 表单元素(上)

<form>
 <input type="text"/>
</form>

<form action="html.do" method="get">    
        username:  <input type="text" name="user" />   
        <input type="submit" value="提  交" />
</form>

<form>        
     <input type="hidden" name="hid" value="value">
</form>

<input type="text" name="" value="今天心情不错" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">

<select name="" >
 <option  value=""></option>
 <option  value="" selected="selected"></option>
<select>

<p>单向选择</p>
<label for="male">男：</label><input type="radio" name="sex" id="male"/>
<label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

第七章 表单和表格(下)

<form>      
    <select name=""  id="">
         <option value="1">1月</option>  
          <option value="2">2月</option>      
</select>
</form>

<table border="1">
    <tr>
    <td>姓名</td>
    <td>性别</td>
    </tr>
</table>

<table border="1">
<tr>
 <td>姓名</td>
 <td>性别</td>
</tr>

<tr>
 <td>姓名</td>
 <td>性别</td>
</tr>
</table>

<table border="1">
<tr>
<td >姓名</td>
<td>性别</td>
<td>爱好</td>
</tr>
</table>

第一部分总结：

HTML部分导图总结

第二部分 CSS

第八章 css基础知识

   <div style="position:absolute;top:0px">
        <div style="background-color:gray;">background-color:gray</div>
        <div style="background-color:#F00;">background-color:#F00</div>
        <div style="background-color:#ffff00;">background-color:#ffff00</div>
        <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
        <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
        <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
        <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
    </div>

<head>
 <style type="text/css" >
  p{color:red;}
 </style>
</head>

第九章 css选择器(上)

第十章 css选择器(下)

第十一章 背景属性

第十二章 文字文本属性

第十三章 盒子模型

补充盒子模型内容

<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是标准w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

第十四章 块元素、行元素与溢出

第十五章 定位


第十六章 框架

<frameset>
     <frame  src=“”  />
     <frame  src=“” />
     <frame  src=“” />
     <noframes>
      <body>内容</body>
     </noframes>
</frameset>

第十七章 css高级属性

 {  
    opacity:0.5;
   filter:alpha(opacity：50);/*0-100*/
   -moz-opacity:0.5;    /*取值0-1*/-->针对早起版本的火狐兼容问题的解决
}
css选择符
css简写速查

第三部分 附录

附录一 DIV命名规范

附录二 CSS精灵

    a {
        display:block; 
        width:200px; 
        height:65px; 
        line-height:65px; /*定义状态*/
        text-indent:-2015px; /*隐藏文字*/
        background-image:url(button.png); /*定义背景图片*/
        background-position:0 0;
        /*定义链接的普通状态，此时图像显示的是顶上的部分*/
    }
    
    a:hover {
        background-position:0 -66px;
        /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
    }
    a:active {
        background-position:0 -132px;                      
        /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
    }

附录三 一些tips解决方案

页面优化实践
写DIV+CSS 的一些常识
常用代码片段
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
    margin:0; padding:0; 
}
body {
    background:#fff; 
    color:#555; 
    font-size:14px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
    font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-weight:normal; 
    font-size:100%; 
}

address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
    font-style:normal; 
    font-weight:normal;
}
a { 
    color:#555; 
    text-decoration:none; 
}
a:hover { 
    text-decoration:underline; 
}
img {
    border:none;
}
ol,ul,li { 
    list-style:none; 
}
input, 
textarea, 
select, 
button { 
    font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
    border-collapse:collapse; 
}
html {
    overflow-y: scroll;
} 
.clearfix:after {
    content: "."; 
    display: block; 
    height:0; 
    clear:both; 
    visibility: hidden;
}
.clearfix { 
    *zoom:1; 
}

<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

table-layout: fixed; word-break: break-all;;border-collapse: collapse

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
      <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
            <input type=”button” value=”item1″ />
      </span>
</div>

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

div.hide{overflow:hidden}

div.scroll{overflow:scroll}

div.clip{
    border:1px solid;
    overflow:hidden;/*超出隐藏*/
    white-space:nowrap;/*强制在一行显示*/
    text-overflow:clip;/*裁切*/
}

div.elli{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;/*使用省略号*/
}

.clearfix{zoom:1;}
.clearfix:after{
     display:block; 
     content:'clear'; 
     clear:both;
     line-height:0; 
     visibility:hidden;
}

.clearfix:after,
.clearfix:before {/*before 是为了防止浏览器顶部空白的崩溃*/   
     content: " ";   
     display: table;
}
.clearfix:after {    
    clear: both;
}

清除浮动的原理是触发BFC，这里只有clear:both起清除浮动作用，其他的line-height:0; visibility:hidden;都是为了隐藏生的内容需要的

一些总结
一些概念
方案荟萃扩展阅读

附录四 部分工具资源

附录五 编码规范

附录六 进阶学习

附录七 其他资源

附录八 常见问题

其他

上一篇下一篇

猜你喜欢

热点阅读