7.30.2014 CSS初识

今天初识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初识

时间： 2024-08-24 06:28:38

7.30.2014 CSS初识的相关文章

7.30 2014 初识css

今天初识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,l

CSS初识- 选择器 &amp;背景&amp; 浮动&amp; 盒子模型

CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTML为基础,提供丰富的功能,如字体.颜色.背景的控制及整体排版等,而且还针对不同的浏览器设置不同的样式. 引入CSS样式(书写位置) 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并用style标签定义,语法就是在 行内式

toastmasters(October 30, 2014)

October 30, 2014        19:00~21:00        Feishang Cafe Today I had only been there one hour, so I missed the Table Topics. I found that I could understand what they said in general. In the following Members' Speeches, I will try to retell one speak

你须知道的30个CSS选择器 &#187;

你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * 1 * {margin: 0; padding: 0;} 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. 1 #container * { border: 1p

0008 CSS初识（行内式、内部样式表、外部样式表）

typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如 表明这是一个大标题,用 表明这是一个段落,用 表明这儿有一个图片, 用表示此处有链接. 很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑. 这个是一个外国比较

这 30 类 CSS 选择器，你必须理解！

CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了很多新的选择器,使得选择元素更加便捷,所以必须理解这些选择器,只有先理解了,多用几次,自然而然就记住了. 1.* [CSS2] 通配符,选择页面所有元素. 1 *{ 2 margin:0; 3 padding:0; 4 } 上面代码的作用是把页面上所有元素的内外边距设置为 0,这是最基本的清除默认 

应该记住的30个CSS选择器

了解基本的id选择器,类选择器和子选择器,如果就此收手,那你会错失很多灵活方法.虽然本文提及的部分选择器属于CSS3范围内,只在一些时新的浏览器有效,不过还是有必要记得这些选择器. 1. * * { margin: 0; padding: 0; } 在提到更先进的选择器之前,为初学者之便,先把常见的选择器解决掉. 星号符会选择页面每个元素.很多开发者用它把所有margin和padding归零.这当然是快捷测试方法.不过我建议你不使用它,它给浏览器带来太多的负担,这不必要. 通配选择器也可以用到子

30类css选择器

大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面. 1. * 1 2 3 4 * {   margin: 0;   padding: 0; } 在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器.星号呢会将页面上所有每一个元素都选到.许多开发者都用它来清空margi

这30类CSS选择器，你必须记在脑袋里！

大概大家都知道`id`,`class`以及`descendant`选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面. 1. * ? 1 2 3 4 * {   margin: 0;   padding: 0; } 在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器.星号呢会将页面上所有每一个元素都选到.许多开发者都用它