CSS基本选择器
元素选择器
选择div
<style>
div{
font-size: 30px;
color: pink;
}
</style>
类选择器
选择class="div2"的元素
<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
id选择器
选择id="div5"的元素
<style>
#div5{
font-size: 30px;
color: yellow;
}
</style>
其他选择器
层级选择器
选择div 下层的p元素
<style>
div p{
font-size: 30px;
color: green;
}
</style>
<div>
<p>即选择这个p标签元素</p>
</div>
属性选择器
选择含有相对应属性的标签元素
<style>
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: blue;
}
</style>
引入方式（习惯在head中引入）
1.内部引入
<style type="text/css">
div{
font-size: 30px;
color: pink;
}
</style>
2.行内引入
<div style="font-size: 20px;color: blue;">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>
3.外部引入
<link rel="stylesheet" href="style.css" type="text/css"/>
抽象的浮动
<style>
#one{
border: 1px solid red;
width: 600px;
height: 150px;
float: left;
}
#two{
border: 1px solid black;
width: 600px;
height: 190px;
float:left;
}
#three{
border: 1px solid blue;
width: 600px;
height: 150px;
float: left;
}
/*清除浮动*/
/*#clear{
clear: both;
}*/
</style>
案例：注册页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--2.导航栏部分-->
<tr height="50px">
<td bgcolor="black">
<a href="#">
<font size="5" color="white">首页</font>
</a>
<a href="#">
<font color="white">手机数码</font>
</a>
<a href="#">
<font color="white">电脑办公</font>
</a>
<a href="#">
<font color="white">鞋靴箱包</font>
</a>
<a href="#">
<font color="white">家用电器</font>
</a>
</td>
</tr>
<!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="user" size="34px"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px"/>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--5.友情链接和版权信息-->
<tr>
<td align="center">
<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>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
1492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
