web制作50%

@charset “utf-8”;
/* CSS Document */
*{/通配符选择器/
margin:0px;
padding:0px;
}
#box{
/background-color:#F00;/
width:1024px;
height:1300px;
/margin:0 auto;/
margin:0 auto 0 auto;/上 右 下 左/
}
/放图片，设置高度和图片一样高/
#banner{
background-color:#66F;
height:209px;
}
#menu{
background-color:#328048;/用颜色取色器取的/
height:50px;
}
/修改id为menu的、html标签下面的、ul标签的样式/
#menu ul{
list-style:none;/去掉点/
float:right;/靠右/
height:50px;
width:450px;
}

#menu li{
line-height:50px;/设置行居中/
float:left;/可以使列表竖着变横着/
margin-left:20px;/li距离左边那个li的距离/
}

/#menu ul li a{}/
#menu a{
color:#FFF;/字体颜色/
text-decoration:none;/去掉下划线/
font-size:16px;/字体大小/
font-family:“微软雅黑”;/word中常见字体一般都可以写/
}

#menu a:hover{/当鼠标滑过超链接标签时的样式/
color:#F60;
}

#main{
/background-color:#6F0;/
height:1000px;
}
#left{
/background-color:#33C;/
height:1000px;
width:250px;
float:left;/可以使div横向排排坐/
}

#zuozhe{
padding-top:15px;
padding-left:15px;/上边和左边留点空/
text-align:center;/整个内容水平居中/
}

#zuozhe img{
border:1px solid #999;/加边solid实线/
padding:8px;/边与图片有个空白，类似相框/
border-radius:10px;/圆角，值越大，角越园/
}

#zuozhe span{
margin:10px;/一圈的距离/
display:block;/改成盒子元素，可以识别盒子元素的一些属性
：margin、border、padding/
border-top:1px #999 dashed;/*虚线变 粗细是1，颜色是灰色 */
border-bottom:1px #999 dashed;/下边的虚线/
/*font-size:18px !important;/字号/
padding-top:5px;/内容距离变的距离-上面的/
padding-bottom:5px;/下面的/
}

/class选择器的写法 以点开头 后面跟着html标签上的class属性里面的那个名/
.biaoti{
color:#FFF;
background-color:#328048;/背景色是绿色，取色器取到的/
height:40px;
width:220px;
line-height:40px;/设置垂直居中，值要和height的值一样/
font-size:16px;
font-weight:bolder;/加粗，h5本来就是标题，已经加粗过了，不加也可以/
padding-left:30px;/左边撑出来一个空/
border-radius:0 10px 10px 0;/margin、border、padding，都是4个值/
/顺序：左上角、右上角、右下角、左下角，0代表没有圆角/
}

#huoli ul{
list-style:none;/去点/
padding-left:20px;
padding-top:10px;
}

#huoli ul li{
margin:5px;/每个li之间的距离/
width:90px;
float:left; /因为外面的ul宽度太小了，所以原本应该都放在一行的
，会自动的掉下去，变成一行只能展示2个li/

}

#huoli ul li a{
font-size:12px;/去掉下划线/
text-decoration:none;
color:#333;/网站字体颜色一般都不是黑色，扎眼/
}
#huoliul li a:hover{/鼠标滑过变色/
color:#090;
}

#huoli ul li img{
margin-right:5px;/让小图标和文字之间的距离大点/
}

#list{
clear:both;/清空所有的自带的float影响/
}

#list ul{
list-style:none;
padding:15px;/不靠左边和上边，留空/
}

#list ul li{
padding-bottom:8px;
padding-left:15px;
border-bottom:1px #999 dotted;/下面的虚线：dashed或者dotted/
margin-bottom:8px;/我的边和其他人的字的距离，padding我的字和我的边的距离/
background::url(images/icon1.gif) no-repeat;/不重复的话就变成了背景/
background-position:5px center;/背景点的位置/
}

#right{
background-color:#F3F;
height:1000px;
width:774px;
float:right;/可以使div横向排排坐/
}

#footer{
background-color:#F63;
height:80px;
}

• 首页
• 相册
• 阳光生活
• 释放梦想
• 留言

linda zhaoqi

活力地带

• 个人首页
• 校园文化
• 阳光生活
• 释放梦想
• 我的相册
• 给我留言

我的文章分类

• 个人随笔
• web开发
• Spring框架
• JavaSE

文章列表

• 我家在哪里
• 你好！秋天
• 你好！春天
• 你好！冬天

右边区域

footer