【胡思乱想】
很久很久以前，盘古开天辟地的时候，世界是一团糟，乱七八糟的东西，东倒西歪，胡乱堆在一起，分不清楚这个是什么那个是什么，这个时候，CSS出现了，先给没有名字难以区分的东西归类，写好名字，然后再根据名字规定他们是什么，该做什么，怎么做。于是乎，世界就和平了，软软的白云飘浮在蓝天上，清澈的小溪流淌在山间里，快乐的鱼儿在海里游。
【CSS简介】
CSS，层叠样式表，对html进行样式修饰语言。层叠就是，层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用。样式表，就是css属性样式的集合。
【CSS的作用】
(1)修饰html的 使其html样式更加好看
(2)提高样式代码的复用性
(3)html的内容与样式相分离 便于后期维护
【CSS思维导图】
【盒子模型】
实验1
图片：
相关代码：
<!DOCTYPE html>
<html>
<head>
<title>网上商城-畅销书图书列表</title>
<style type="text/css">
.clear{
clear: both;
}
#top_left{
float:left;
}
#top_right{
font-size:13px;
margin:25px;
width:400px;
float: right;
}
#top_right a{
text-decoration:none;
color:green;
}
#top_right a:hover{
color:pink;
}
#top_right img{
margin:-4px;
padding:0px 4px;
}
#menu{
border-top:5px solid #82B211;
padding:10px 4px;
background-color:#1C3F09;
text-align: center;
}
#menu a{
text-decoration:none;
color:#fff;
padding:13px 7px;
font-weight: bold;
font-size: 15px;
}
#menu .all{
color: yellow
}
#search{
padding:7px 280px;
background-color: #B6B684;
text-align: right;
}
#search input[type='image']{
margin-bottom: -4px;
}
#search input[type='text']{
height:15px;
border:1px solid #999;
}
#content{
width:900px;
margin:8px auto 15px;/*auto div居中*/
}
#content_top{
font-size: 15px;
text-align: right;
}
#content_bottom{
border:1px solid #999;
padding:10px 15px;
background-color: #FCFDEF;
}
#content_bottom h1{
font-size: 15px;
display: inline;
}
#content_bottom span{
font-size: 13px;
}
#productlist_img img{
width:100%;
}
.book{
float:left;
width: 25%;
text-align: center;
padding:10px 0px;
}
.bookimg img{
width: 100px;
height: 150px;
}
#jumpPage{
text-align: center;
margin:20px;
}
#jumpPage a{
padding:2px 6px;
text-decoration: none;
color:#9AAFE5;;
border:1px solid #9AAFE5;;
}
#jumpPage a:hover{
color:#2B66A5;
border: 1px solid #2B66A5;
}
.current{
background-color: blue;
}
#bottom{
padding:10px 0px;
background-color: #EFEEDC;
height:60px;
}
#bottom_left{
float:left;
padding:0px 0px 0px 200px;
}
#bottom_right{
float:right;
width: 740px;
line-height:28px;/*行高*/
}
</style>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div id="page">
<div id="top">
<div id="top_left">
<img alt="" src="bookimages/logo.png">
</div>
<div id="top_right">
<img alt="" src="bookimages/cart.gif">
<a href="#">购物车</a>|
<a href="#">帮助中心</a>|
<a href="#">我的账户</a>|
<a href="#">新用户注册</a>
</div>
</div>
<div class="clear"></div>
<div id="menu">
<a href="#">文学</a>
<a href="#">生活</a>
<a href="#">计算机</a>
<a href="#">外语</a>
<a href="#">经管</a>
<a href="#">励志</a>
<a href="#">社科</a>
<a href="#">学术</a>
<a href="#">少儿</a>
<a href="#">艺术</a>
<a href="#">原版</a>
<a href="#">科技</a>
<a href="#">考试</a>
<a href="#">生活百科</a>
<a class="all" href="#">全部商品目录</a>
</div>
<div id="search">
<span>Search</span>
<input type="text">
<input type="image" src="bookimages/serchbutton.gif" >
</div>
<div id="content">
<div id="content_top">
<span>首页 > 畅销书 > 图书列表</span>
</div>
<div id="content_bottom">
<h1>商品目录</h1>
<hr>
<h1>畅销书 </h1>
<span>共100种商品</span>
<hr>
<div id="productlist">
<div id="productlist_img">
<img alt="" src="bookimages/productlist.gif">
</div>
<div id="booklist">
<div class="book">
<div class="bookimg">
<img alt="" src="bookcover/101.jpg">
</div>
<div class="bookIntr">
<span>书名：xxx</span><br/>
<span>售价：xxx</span>
</div>
</div>
<div class="book">
<div class="bookimg">
<img alt="" src="bookcover/102.jpg">
</div>
<div class="bookIntr">
<span>书名：xxx</span><br/>
<span>售价：xxx</span>
</div>
</div>
<div class="book">
<div class="bookimg">
<img alt="" src="bookcover/103.jpg">
</div>
<div class="bookIntr">
<span>书名：xxx</span><br/>
<span>售价：xxx</span>
</div>
</div>
<div class="book">
<div class="bookimg">
<img alt="" src="bookcover/104.jpg">
</div>
<div class="bookIntr">
<span>书名：xxx</span><br/>
<span>售价：xxx</span>
</div>
</div>
<div class="book">
<div class="bookimg">
<img alt="" src="bookcover/105.jpg">
</div>
<div class="bookIntr">
<span>书名：xxx</span><br/>
<span>售价：xxx</span>
</div>
</div>
<div class="book">
<div class="bookimg">
<img alt="" src="bookcover/106.jpg">
</div>
<div class="bookIntr">
<span>书名：xxx</span><br/>
<span>售价：xxx</span>
</div>
</div>
<div class="book">
<div class="bookimg">
<img alt="" src="bookcover/107.jpg">
</div>
<div class="bookIntr">
<span>书名：xxx</span><br/>
<span>售价：xxx</span>
</div>
</div>
<div class="book">
<div class="bookimg">
<img alt="" src="bookcover/108.jpg">
</div>
<div class="bookIntr">
<span>书名：xxx</span><br/>
<span>售价：xxx</span>
</div>
</div>
<div class="clear"></div>
<div id="jumpPage">
<a href="#">上一页</a>
<a class="current" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">下一页</a>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="bottom_left">
<img alt="" src="bookimages/logo.png">
</div>
<div id="bottom_right">
<span>CONTACT US</span><br>
<span>copyright 2008 © BookStore All Rights RESERVED</span>
</div>
</div>
</div>
</body>
</html>
实验2
图片：
相关代码：
<!DOCTYPE html>
<html>
<head>
<title>网上商城-用户注册.html</title>
<style type="text/css">
.main{
/*设置外边距，下面有30px距离*/
margin:0px 0px 30px 0px;
/*背景色*/
background-color:while;
font-size:12px;
color:#000000;
text-align:center;
/*垂直对齐方式*/
vertical-align:top;
line-height:150%;
/*字体*/
font-family:Arial,Heletica,sabs-serif;
}
.clear{
clear: both;
}
#top_left{
float:left;
}
#top_right{
font-size:13px;
margin:25px;
width:400px;
float: right;
}
#top_right a{
text-decoration:none;
color:green;
}
#top_right a:hover{
color:pink;
}
#top_right img{
margin:-4px;
padding:0px 4px;
}
#menu{
border-top:5px solid #82B211;
padding:10px 4px;
background-color:#1C3F09;
text-align: center;
}
#menu a{
text-decoration:none;
color:#fff;
padding:13px 7px;
font-weight: bold;
font-size: 15px;
}
#menu .all{
color: yellow
}
#search{
padding:7px 280px ;
background-color: #B6B684;
text-align: right;
}
#search input[type='image']{
margin-bottom: -4px;
}
#search input[type='text']{
height:15px;
border:1px solid #999;
}
#content{
width:900px;
background-color:#fcfdef;
border:1px solid #eeeddb;
margin:8px auto 15px;
}
h1{
font-size:14px;
color:#000000;
margin-bottom:5px;
font-weight:bold;
display:inline;
text-align:left;
}
td{
text-align:left;
vertical-align:top;
font-size:12px;
}
.upline{
border-bottom-width:1px;
border-bottom-style:dashed;
border-bottom-color:#b0bec7;
padding-top:5px;
padding-bottom:5px;
margin:20px;
}
.txtinput{
margin-left:10px;
width:150px;
height:16px;
border:1px solid #a4b4bd;
}
.phone{
margin-left:10px;
font-size:12px;
width:350px;
height:18px;
border:1px solid #a4b4bd;
}
.txtarea{
margin-left:10px;
font-size:12px;
width:350px;
height:75px;
border:1px solid #a4b4bd;
}
#content span{
color:#999999;
}
#bottom{
padding:10px 0px;
background-color: #EFEEDC;
height:60px;
}
#bottom_left{
float:left;
padding:0px 0px 0px 200px;
}
#bottom_right{
float:right;
width: 740px;
line-height:28px;/*行高*/
}
</style>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body class="main">
<div id="page">
<div id="top">
<div id="top_left">
<img alt="" src="bookimages/logo.png">
</div>
<div id="top_right">
<img alt="" src="bookimages/cart.gif">
<a href="#">购物车</a>|
<a href="#">帮助中心</a>|
<a href="#">我的账户</a>|
<a href="#">新用户注册</a>
</div>
</div>
<div class="clear"></div>
<div id="menu">
<a href="#">文学</a>
<a href="#">生活</a>
<a href="#">计算机</a>
<a href="#">外语</a>
<a href="#">经管</a>
<a href="#">励志</a>
<a href="#">社科</a>
<a href="#">学术</a>
<a href="#">少儿</a>
<a href="#">艺术</a>
<a href="#">原版</a>
<a href="#">科技</a>
<a href="#">考试</a>
<a href="#">生活百科</a>
<a class="all" href="#">全部商品目录</a>
</div>
<div id="search">
<span>Search</span>
<input type="text">
<input type="image" src="bookimages/serchbutton.gif" >
</div>
<div id="content">
<form action="#" method="post">
<table width="850px" border="0" cellspace="0">
<tr>
<td style="padding:30px">
<h1>新会员注册</h1>
<table width=70% border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align:right;width:20%;">会员邮箱</td>
<td><input type="text" class="txtinput"></td>
<td><span>请输入有效邮箱地址</span></td>
</tr>
<tr>
<td style="text-align:right;">会员名</td>
<td><input type="text" class="txtinput"></td>
<td><span>用户名至少六位</span></td>
</tr>
<tr>
<td style="text-align:right;">密码</td>
<td><input type="text" class="txtinput"></td>
<td><span>密码至少六位</span></td>
</tr>
<tr>
<td style="text-align:right;">重复密码</td>
<td><input type="text" class="txtinput"></td>
<td> </td>
</tr>
<tr>
<td style="text-align:right;">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td style="text-align:right;">联系电话</td>
<td colspan="2">
<input type="text" class="phone">
</td>
</tr>
<tr>
<td style="text-align:right;">个人介绍</td>
<td colspan="2">
<textarea class="txtarea"></textarea>
</td>
</tr>
</table>
<h1>注册校验</h1>
<table width="70%" border="0" cellspacing="2" class="upline" >
<tr>
<td style="text-align:right;width:20%">输入校验码</td>
<td><input type="text" class="txtinput"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<img src="images/validateCode.png" class="txtinput" style="height:30%">
<a href="#">看不清换一张</a>
</td>
</tr>
</table>
<table width="70%" border="0" cellspacing="2">
<tr>
<td style="text-align:center">
<input type="image" src="images/signup.gif">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<div id="bottom">
<div id="bottom_left">
<img alt="" src="bookimages/logo.png">
</div>
<div id="bottom_right">
<span>CONTACT US</span><br>
<span>copyright 2008 © BookStore All Rights RESERVED</span>
</div>
</div>
</div>
</body>
</html>
1268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
