首页 > 代码库 > 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,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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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;
}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。