HTML中的标签：块标签div、图片<img>、行内标签<span>、h5标题、列表标签<ul>、<li>
CSS样式中的属性：
图片边框：border
高：height 宽：width
内边距：pandding
外边距：margin
边框4个角设为圆角:border-radius
文本内容居中：text-align
字体：font-size、font-family、font-weight、color
垂直居中：line-height
取消项目符号：list-style
浮动：float
字体下划线：text-decoration
背景图片：backround
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--引入css文件用link标签-->
<link href="blog.css" type="text/css" rel="stylesheet" />
<!--<script type="text/javascript" src=""></script>-->
</head>
<body> <div id="box">
<div id="banner">
<img src="images/bg.jpg" alt="我的图片不见了" />
</div>
<div id="menu">
<!--ol是有序列表1,2,3 ul无续列表-->
<ul>
<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">阳光生活</a></li>
<li><a href="#">释放梦想</a></li>
<li><a href="#">留言</a></li>
</ul>
</div>
<div id="main">
<!--左边区域-->
<div id="left">
<!--划分3个区域-->
<div id="zuozhe">
<img src="images/baby.jpg" alt="我的照片"/>
/*<img />单标签、有src和alt两个属性，
<span></span>成对、没有语义的标签，主要是为了方便对文本添加样式的*/
<!--文字,span方便对文字的样式修改，一行，不换行-->
<span>linda zhaoqi</span>
</div>
<div id="huoli">
6个列表项
</div>
<div id="list">
分类和列表div
</div>
</div>
<div id="right">
右边区域
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
css：
@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:图片和文本/
#zuozhe{
padding-top:15px;
padding-left:15px;/*上边和左边留点空*/
text-align:center;/*整个内容水平居中*/
}
#zuozhe img{
border:1px solid #999;/*加边solid实线*/
padding:8px;/*边与图片有个空白，类似相框*/
border-radius:20px;/*圆角，值越大，角越园*/
}
#right{
background-color:#F3F;
height:1000px;
width:774px;
float:right;/*可以使div横向排排坐*/
}
#footer{
background-color:#F63;
height:80px;
}
扫一扫
5191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
