7.30.2014 CSS初识

浏览数：27 / 时间：2015年06月09日

今天初识css3看来JQuery高级编程要放到最后去看了。
笔记：
     a:link    {color:blue;} 未访问
     a:visited {color:blue;} 已访问
     a:hover   {color:red;}   悬浮
     a:active {color:yellow;}活动链接

css代码格式
     p{
          css属性：属性值
         }

    border-radius:xxpx;(边框圆角)
    padding-（top,left,right,bottom）：xxpx;(内边距)
    margin：auto;(外边距)
    border-left: 1px solid;
    border style属性
        none 定义无边框。
        hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
        dotted 定义点状边框。在大多数浏览器中呈现为实线。
        dashed 定义虚线。在大多数浏览器中呈现为实线。
        solid 定义实线。
        double 定义双线。双线的宽度等于 border-width 的值。
        groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
        ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
        inset 定义 3D inset 边框。其效果取决于 border-color 的值。
        outset 定义 3D outset 边框。其效果取决于 border-color 的值。
        inherit 规定应该从父元素继承边框样式。

明日学习内容
css下拉菜单

http://www.w3school.com.cn/cssref/css_selectors.asp

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>demo01</title>
 <link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>
 <div id="head">
   <h1 class="h3">kassing Demo</h1>
   <h2>kassing的第一个网页</h2>
   <ul>
    <li>首页</li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
 </div>
 <div id="wrapper">
  <div class="main">
   <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
   <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
   <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
   <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
   <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
   <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
      <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
      <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
      <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
      <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
      <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
      <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
      <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
      <div class="item">
    <div class="item_image">
     <img src="demo03.jpg" alt="kassing">
    </div>
    <div class="item_content">
     <h3>一篇好的文章</h3>
     <p class="item_info">作者：看看 发表于：2014年</p>
     <p class="item_desc">在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。</p>
    </div>
   </div>
  </div>
  <div class="side">
   <div class="author_info">
    <div class="author_img">
     <img src="demo04.jpg">
    </div>
    <div class="author_desc">
     <h4>kassing</h4>
     <p>kassing </p>
    </div>
   </div>
   <div class="author_article">
    <h3>推荐文章</h3>
    <ul>
     <li>好文要顶</li>
     <li>好文要顶</li>
     <li>好文要顶</li>
     <li>好文要顶</li>
     <li>好文要顶</li>
     <li>好文要顶</li>
     <li>好文要顶</li>
     <li>好文要顶</li>
    </ul>
   </div>      
  </div>
 </div>
 <div id="footer">
 </div>
</body>
</html>

body{
 background-image: url("demo02.jpg");
 font-family: consolas;
}
#head{
 width: 960px;
 height: 100px;
 margin: auto;
 border-bottom: dashed 2px white;
}
#head h1{
 color: white;
}
#head h2{
 color: white;
}
#wrapper{
 width: 960px;
 height: 700px;
 margin: auto;
 padding-top: 10px;
}
.main{
 width: 640px;
 border-radius: 10px;
 background-color:#EAEAEA; 
 float: left;
 padding: 20px;
 border-bottom: solid 3px;
 paddi
}
.side{
 width: 250px;
 background-color: #EAEAEA;
 border-radius: 10px;
 float: right;
 padding:10px;
}
#footer{
 width: 960px;
 height: 100px;
 margin: auto;
}
.item{
 border-bottom: dashed 1px #ccc;
 padding-bottom: 10px;
 margin-top: 15px;
}
.item_image{
 float: left;
}
.item_image img{
 width: 80px;
 height: 70px;
 padding-top:3px; 
}
.item_content {
 padding-left: 100px;
}
.item_content h3{
 font-size: 16px;
 margin: 0;
 color: #993300;
}
.item_info{
 font-size: 14px;
 margin: 0;
 font-style: italic;
 color: #999;
}
.item_desc{
 font-size: 14px;
 margin: 0;
 color: gray;
 margin-top: 10px;
 border-left: 1px solid;
 padding-left:5px; 
}
.author_img{
 width: 100px;
 margin: auto;
 padding-top: 50px;
}
.author_img img{
 width: 100px;
 border-radius: 10px;
}
.author_desc{
 text-align: center;
 border:solid 1px;
 border-radius: 8px ;
 background-color: #cccccc;
 margin-top: 20px; 
}
.author_desc h4{
 margin-bottom: 10px;
}
.author_article h3{
 font-size: 20px;
 font-style: italic;
 border-bottom:dashed 1px #ccc;
 padding-bottom: 10px;
}
.author_article ul{
 list-style: none;
 margin-left: 0px;
 padding-left: 20px;
}
.author_article ul li{
 margin-top: 20px;
 color:#999;
}

7.30.2014 CSS初识,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

7.30.2014 CSS初识