0索引
1html标签块
2选择器
3CSS的引入方式:
4CSS浮动 :流式布局
5盒子模型
6案例一网站首页
7案例二网站注册页面
1html标签块
- div标签:默认占- -行,自动换行
- span标签:内容显示在同- -行
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div>张三div>
<div>李四div>
<span >我想span>
<span >好好span>
<span >学习span>
<span >那是不存在的span>
body>
html>
2选择器
- 元素选择器:
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
- ID选择器:
以#号开头
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
- 类选择器:
以.号开头
.类名{
属性名称:属性的值;
属性名称:属性的值;
}
- 伪类选择器
- 后代选择器
- 选择器优先级
- 按照选择器搜索精确度来编写:
行内样式 > ID选择器 > 类选择器 > 元素选择器
-
- 就近原则：选择离标签近的
代码示例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
div{
color: red;
font-size: 50px;
}
span{
color: yellowgreen;
font-size: 80px;
}
style>
head>
<body>
<div>张三div>
<div>李四div>
<span >我想span>
<span >好好span>
<span >学习span>
<span >那是不存在的span>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
#div1{
color: red;
}
style>
head>
<body>
<div id="div1">JAVAEEdiv>
<div>IOSdiv>
<div>ANDROIDdiv>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.shuiguo{
color: yellow;
}
.shucai{
color: green;
}
style>
head>
<body>
<div class="shuiguo">香蕉div>
<div class="shucai">黄瓜div>
<div class="shuiguo">苹果div>
<div class="shucai">茄子div>
<div class="shuiguo">橘子div>
body>
html>
This is a
儿子
孙子
heading
优先级示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
/*元素选择器*/
div{
color: red;
}
/*类选择器*/
.chifan{
color: deeppink;
}
/*ID选择器*/
#div1{
color: greenyellow;
}
.first{
color: green;
}
.second{
color: blue;
}
style>
head>
<body>
<div class="chifan" id="div1" style="color: goldenrod;">要好好学习div>
<div class="second first ">但是我好困，呜呜呜~div>
body>
html>
3CSS的引入方式:
- 外部样式:通过link标签引入-一个外部的css文件
- 内部样式:直接在style标签内编写CSS代码,以上例子是.
- 行内样式:直接在标签中添加一个style属性，编写CSS样式
代码示例:
1外部样式
/*css1文件中*/ .shuiguo{ color: pink; } .shucai{ color: green; }
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="css1.css" />
head>
<body>
<div class="shuiguo">香蕉div>
<div class="shucai">黄瓜div>
<div class="shuiguo">苹果div>
<div class="shucai">茄子div>
<div class="shuiguo">橘子div>
body>
html>
2内部样式
3行内样式
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div class="shuiguo" style="color: greenyellow;">甘蔗div>
<div class="shucai">青瓜div>
<div class="shuiguo">苹果div>
<div class="shucai">茄子div>
<div class="shuiguo">橘子div>
body>
html>
4CSS浮动 :流式布局
浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
- float属性:
left
right
- clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div style="float:right;width: 200px; height: 200px; background-color: red;">div>
<div style="clear: both;">div>
<div style="width: 250px; height: 200px; background-color: greenyellow;">div>
<div style="width: 200px; height: 200px; background-color: blue;">div>
body>
html>
5盒子模型
1盒子模型介绍:
- 万物皆盒子页边距:
- 四个单独方向：
padding-top: .
padding-right:
padding-bottom:
padding-left:
-
- 使用padding：
padding: 10px;
上下左右 都是10px
padding:10px 20px;.上 下是10px左右是20px
padding: 10px 20px 30px;上10px 石20px下30px 左20px
I padding: 10px 20px 30px 40px;. 上右下左，顺时针的方向
- 外边距:
margin-top:
margin-right:
margin-bottom:
margin-left:
- CSS绝对定位:
position: absulte
top:控制距离顶部的位置
left:控制距离左边的位置
代码实现:
- 盒子模型
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div style="border: 3px solid red ;width: 400px;height: 400px;">
<div style="border: 1px solid green;width: 150px;height: 150px;"> 内容1div>
<div style="border: 1px solid gold;width: 150px;height: 150px;"> 内容2div>
div>
body>
html>
- 绝对位置
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div style="border: 5px solid red; width: 400px; height: 400px;position: absolute;top: 200px;left: 200px;">
黑马程序员
div>
body>
html>
6案例一网站首页
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
head>
<body>
<div>
<div>
<div class="logo">
<img src="../img/logo2.png"/>
div>
<div class="logo">
<img src="../img/header.png"/>
div>
<div class="logo">
<a href="#">登录a>
<a href="#">注册a>
<a href="#">购物车a>
div>
div>
<div style="clear: both;">div>
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首页a>
<a href="#" class="amenu">手机数码a>
<a href="#" class="amenu">电脑办公a>
<a href="#" class="amenu">鞋靴箱包a>
<a href="#" class="amenu">香烟酒水a>
div>
<div>
<img src="../img/1.jpg" width="100%"/>
div>
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/>h2>div>
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
div>
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
div>
div>
<div>
<img src="../products/hao/ad.jpg" width="100%"/>
div>
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/>h2>div>
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
div>
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
div>
div>
<div>
<img src="../img/footer.jpg" width="100%"/>
div>
<div style="text-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>
<br />
Copyright © 2005-2016 传智商城 版权所有
div>
div>
body>
html>
7案例二网站注册页面
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
head>
<body>
<div>
<div>
<div class="logo">
<img src="../img/logo2.png" />
div>
<div class="logo">
<img src="../img/header.png" />
div>
<div class="logo">
<a href="#">登录a>
<a href="#">注册a>
<a href="#">购物车a>
div>
div>
<div style="clear: both;">div>
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首页a>
<a href="#" class="amenu">手机数码a>
<a href="#" class="amenu">电脑办公a>
<a href="#" class="amenu">鞋靴箱包a>
<a href="#" class="amenu">香烟酒水a>
div>
<div style="background: url(../image/regist_bg.jpg);height: 500px;">
<div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6">会员注册font>USER REGISTERtd>
tr>
<tr>
<td>用户名:td>
<td><input type="text"/>td>
tr>
<tr>
<td>密码:td>
<td><input type="password"/>td>
tr>
<tr>
<td>确认密码:td>
<td><input type="password"/>td>
tr>
<tr>
<td>email:td>
<td><input type="email"/>td>
tr>
<tr>
<td>姓名:td>
<td><input type="text"/>td>
tr>
<tr>
<td>性别:td>
<td><input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女
<input type="radio" name="sex"/> 妖
td>
tr>
<tr>
<td>出生日期:td>
<td><input type="date"/>td>
tr>
<tr>
<td>验证码:td>
<td><input type="text"/>td>
tr>
<tr>
<td>td>
<td><input type="submit" value="注册"/>td>
tr>
table>
div>
div>
<div>
<img src="../img/footer.jpg" width="100%"/>
div>
<div style="text-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>
<br />
Copyright © 2005-2016 传智商城 版权所有
div>
div>
body>
html>