文章目录
1.图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图像标签</title>
<!--
图像标签img
src :连接到图片资源地址
width:指定图片的宽度
height:指定图片的高度
单位:指定像素 px
指定百分比:占当前 50% 宽度和高度占整个分辨率的百分比
title:当鼠标悬浮图片上的提示文字
alt:替换文本
图片资源失效的时候,起作用
如果一个html页面中有3个图片(网络图片),请求某个服务器,会发送几次请求!
4个请求
1)请求页面 http://域名:端口号/当前html资源文件地址
2)每一个图片src---加载图片
都会发送一次请求
-->
</head>
<body>
<h3>this is img target</h3>
<!--
img-->
<a name="img"></a>
<img src="img/1.jpg" title="这是小米手机" width="100%" height="100%" alt="小米手机" /><br />
<!-- <img src="img/2.jpg" /> -->
</body>
</html>
2.超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接标签</title>
<!--
超链接
a标签
href属性:跳转到资源地址
本地资源地址/网络资源地址/指定的服务器地址
不指定target属性:默认当前窗口直接打开地址
_blank:新建窗口打开资源文件
_self(默认值):当前窗口直接打开
http协议的执行流程:
在C:\Windows\System32\drivers\etc\hosts文件
hosts记录了网站域名以及ip地址
127.0.0.1 localhost
如果hosts文件有访问的域名并且对应ip 直接本地打开文件
如果找不到,调用网卡来联网操作----DNS服务器(网络运营商)
仓库
ip1 域名1
ip2 域名2
ip3 域名3
10.12.156.66 www.baidu.com
直接访问百度服务器----回显百度首页
thunder://:迅雷协议
如果本地有客户端软件--直接打开迅雷软件
mailto :邮件协议
超链接的应用场景:
1)链接后台地址/本地资源地址 url :统一资源定位符
2)锚链接来使用
在同一个html页面的使用
a)打锚点: 定义一个标记位置
<a name="锚点名称"></a>
b)创建一个跳转链接
<a href="#锚点名称">跳转</a>
不同html页面的使用
a)在另一个页面的某个位置打锚点: 定义一个标记位置
b)在当前页面上创建跳转标记
<a href="跳转页面地址#锚点名称">跳转</a>
-->
</head>
<body>
<h3>this is a target</h3>
<!-- 从下面跳转上来 -->
<a name="top"></a>
<!-- 2)创建跳转链接 -->
<a href="#foot">[跳转底部]</a><br />
<a href="01_图像标签.html#img" target="_blank">点击跳转</a><br />
<a href="http://www.baidu.com">[跳转到百度]</a><br />
<a href="http://www.movie.com">普通通道 <<八佰>></<></a><br />
<a href="thunder://www.movie.com">高速通道<<八佰>></<></a><br />
<a href="http://localhost:8080/Pay_/order/confirm">[连接到支付宝支付地址]</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/>
<!-- 创建标记 -->
<a name="foot"></a>
<a href="#top"><font color="red">[跳转顶部]</font></a>
<center>2020-11-12~2021-11-12 版权所有<sup>©</sup></center>
</body>
</html>
3.表格标签
3.1)基础表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
<!--
table
属性:border:边框大小
width:表格宽度
height:表格的高度
align:表格在浏览器的位置
左 中 右
cellspacing:设置表格边框线和单元格之间的距离
cellpadding:设置单元格和单元格的距离
子标签
caption:表格的标题标签
tr:行标签
td:单元格
th:表头标签:自动居中并且适当加粗
单元格的合并:
合并行:rowspan 占了几个单元格
合并列:colspan 占了几个单元格
-->
</head>
<body>
<table border="1" width="500px" cellpadding="0" height="500px"
align="center" bgcolor="pink" cellspacing="0">
<caption>xxx学习的成绩管理</caption>
<!-- 三行,每一行中有3个单元格 -->
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>数学成绩</th>
<th>英语成绩</th>
<th>平均分</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td rowspan="2">90</td>
<td>78</td>
<td>80</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>女</td>
<!-- <td>89</td> -->
<td>100</td>
<td>90</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>男</td>
<td colspan="2">89</td>
<!-- <td>65</td> -->
<td>70</td>
</tr>
</table>
</body>
</html>
3.2)表格合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签2</title>
</head>
<body>
<table border="1" width="500px" cellpadding="0" height="500px"
align="center" bgcolor="pink" cellspacing="0">
<caption>xxx学习的成绩管理</caption>
<!-- 三行,每一行中有3个单元格 -->
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>数学成绩</th>
<th>英语成绩</th>
<th>平均分</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td rowspan="2">90</td>
<td>
<table border="1" cellspacing="0" width="100%" height="100%">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</td>
<td>80</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>女</td>
<!-- <td>89</td> -->
<td>100</td>
<td>90</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>男</td>
<td colspan="2">89</td>
<!-- <td>65</td> -->
<td>70</td>
</tr>
</table>
</body>
</html>
4.表单标签
4.1)基础表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签1</title>
<!--
表单标签form
属性
action: url 本地地址/后台地址
method:提交方式
常用的get/post
应用场景
注册
用户填写基本信息---前台校验------提交到后台的地址
查询当前用户是否存在,如果不存在用户才能注册!
登录
输入用户名和密码,在后台查询数据库中是否存在这个用户名和密码
存在,才可以登录;没有注册,先要注册!
get方式和post方式的区别?
get方式:
1)直接将数据提交url地址(地址栏上)
后台地址?username=zhangsan&password=123
2)不适合提交隐私数据
3)由于是提交在地址栏上,它提交的数据大小有限制
Post方式
1)不会将用户数据提交在地址栏上
存在 请求头下面
实体内容
form data
username=xxx&password=123456
提交方式:get/post 密码数据---使用MD5加密/springSecurity
123456 md5
2)相当于get方式,相对安全
3)它不是直接提交在地址栏上,提交的数据大小没有限制!
-->
</head>
<body>
<h3>this is a form target</h3>
<form action="server.html" method="post">
<!--
value:输入框的默认值
placeholder:h5属性存在效果:输入内容,自动获取焦点
登录/注册:表单项中必填的属性:name
name属性:给系统后台写的内容
-->
用户名:<input type="text" placeholder="请输入用户名" name="username" /><br />
密 码:<input type="password" name="password" placeholder="请输入密码"><br />
<input type="submit" value="注册" />
</form>
</body>
</html>
4.2）格式优雅的登陆注册表单（css代码）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9kpzBRV7-1605342746898)(D:\Documents\HBuilderProjects\homework\img\祁航涛2.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KHEawJXh-1605342746901)(D:\Documents\HBuilderProjects\homework\img\祁航涛3.jpg)]
tr{
text-align: center;
}
table{
background-image: url(../img/祁航涛3.jpg);
background-size: cover;
background-color: #A9A9A9;
}
body{
background-image: url(../img/祁航涛2.jpg);
background-size: 100%;
}
<!DOCTYPE html>
<!-- saved from url=(0077)http://127.0.0.1:8848/homework/home_%E7%99%BB%E9%99%86%E6%B3%A8%E5%86%8C.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>榆林学院教务登录注册界面</title>
<!--
常见的表单子项
input标签
type="text" 文本输入框
type="password" 密码输入框
type="hide" name="id" 隐藏域: 没有效果,可以携带数据
type="date" 日期组件
type="radio" 单项按钮
type="checkbox"复选框
type="file" 文件上传
type="submit" 提交按钮
type="reset" 重置按钮
type="button" value="单击按钮"
select标签 :下拉菜单
子标签:option:下拉选项
textarea:文本域
书写文字描述
按钮相关的
button标签 文本内容就是当前按钮的名称
-->
<!--
表单标签嵌套表格标签
css代码
-->
<style>
/* table{
background-image: url(img/2.jpg);
background-repeat: no-repeat;
} */
</style>
<link rel="stylesheet" type="text/css" href="./榆林学院教务登录注册界面_files/htr.css">
</head>
<body>
<form action="http://127.0.0.1:8848/homework/server.html" method="get" target="_blank">
<table border="1" cellspacing="0" width="600px" height="700px" align="center">
<caption>榆林学院教务管理登录与注册界面</caption>
<tbody><tr>
<th colspan="2">登录与注册界面</th>
</tr>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="username" placeholder="请输入用户名">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<input type="date" name="birthday">
</td>
</tr>
<tr>
<td>用户邮箱</td>
<td>
<input type="email" name="email" placeholder="例:512655192@qq.com">
</td>
</tr>
<tr>
<td>电话号码:</td>
<td>
<input type="tel" name="phone" placeholder="例:15291223788">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男" checked="checked">男
<input type="radio" name="gender" value="女">女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobit">足球
<input type="checkbox" name="hobit">篮球
<input type="checkbox" name="hobit">王者荣耀
<input type="checkbox" name="hobit">摄影
<input type="checkbox" name="hobit">摄像
</td>
</tr>
<tr>
<td>文件上传:</td>
<td>
<input type="file" name="file">
</td>
</tr>
<tr>
<td>所在省份:</td>
<td>
<select name="pro">
<option value="choose">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
</select>
</td>
</tr>
<tr>
<td>自我描述"</td>
<td>
<textarea rows="5" cols="30"> 自我介绍...
</textarea>
</td>
</tr>
<tr>
<td>按钮:</td>
<td>
<input type="button" name="button" value="点我点我">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册"> <input type="submit" value="登录">
</td>
</tr>
</tbody></table>
</form>
<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script src="./榆林学院教务登录注册界面_files/livereload.js.下载"></script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script>
</body></html>
5.框架标签
5.1)框架设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架标签</title>
<!--
frame标签:框架标签
一个frame中包含一个html页面
如果整个xx系统组成可能很多html页面组成---使用frameset框架集标签
frameset框架集标签
属性:
rows
cols
-->
</head>
<frameset rows="20%,*,10%">
<frame src="header.html" />
<frameset cols="15%,*">
<frame src="menu.html" />
<frame src="main.html" name="main" />
</frameset>
<frame src="footer.html" />
</frameset>
<!-- <body>
</body> -->
</html>
5.2)头部(header)top
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>top</title>
</head>
<body>
<h1>xxxx管理系统</h1>
<img src="img/loginbg.png" width="55%" height="50%" />
</body>
</html>
5.3)中间部分(菜单栏)menu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>left_menu</title>
</head>
<body>
<ul>
<li>
<!-- target:在指定 哪个一个frame中打开
指定frmae标签名称
-->
<a href="03_表格标签.html" target="main">成绩管理</a>
</li>
<li>
<a href="http://www.baidu.com" target="main">选课管理</a>
</li>
</ul>
</body>
</html>
5.4)中间部分(显示区域)main
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
</head>
<body>
<center><h3>欢迎访问成绩管理系统</h3></center>
</body>
</html>
5.5)尾部部分(footer)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<center>
xxx学校2011-12-12-2021-11-11版权所有<sup>©</sup> 注册商品<sup>®</sup>
</center>
</body>
</html>
6.css
6.1)css的引入
/* css文件 */
/*修饰页面中a标签*/
a{
font-size: 36px;
color: darkgrey;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS引入</title>
<!--
什麽是CSS：
Cacading Style Sheet :层叠样式表
修饰html标签
CSS的使用三种
1)行内样式,在html标签中使用
每一个html标签都有style属性 : 写入样式属性
弊端:1)只能针对某一个html进行修饰
2)css代码和html标签混到一块,不好管理
2)内部样式(内联样式)(自己使用)
在head标签体中指定style标签,单独书写css代码
标签名称{
控制这个标签的样式;
}
比行内样式好一些,但是不好管理
3)外部方式(外联样式) (推荐方式)
在css文件夹下面单独创建一个以后缀名为css文件
在当前html页面中引入css文件即可
在head标签体中指定link href="引入css文件" rel="stylesheet"
-->
<!-- <style>
a{
font-size:35px;
color: red;
text-decoration: none;
}
</style> -->
<link href="css/01.css" rel="stylesheet" />
</head>
<body>
<!-- <a href="#" style="font-size: 30px;color: green;text-decoration: none;">超链接1</a><br />
-->
<a href="#">超链接1</a><br/>
<a href="#">超链接2</a><br />
<a href="#">超链接3</a>
</body>
</html>
6.2)css选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<!--
CSS选择器
1)标签选择器
选中所有同名的标签
标签名称{
样式代码;
}
2)class类选择器
可以选中页面标签中所有的同名的class属性
.class属性值{
书写样式代码;
}
3)id选择器
在页面标签中必须指定唯一的id属性值
注意: 标签中id属性值不能重复
否则后面javascript中:通过id属性值获取标签对象(DOM编程)获取不到
#id属性值{
css样式代码;
}
-->
<style>
/* 标签选择器*/
div{
font-size:30px;
color: #B3B34D;
}
.ch1{
font-size: 40px;
color: red;
}
#d1{
font-size: 20px;
color: lawngreen;
}
/*优先级:id选择器>类选择器>标签选择器*/
</style>
</head>
<body>
<div id="d1" class="ch1">div1</div>
<div class="ch1">div2</div>
<div>div3</div>
</body>
</html>
day35 2020 11_14
1.CSS选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS选择器</title>
<style>
/*标签选择器*/
/*
div{
font-size: 20px ;
color: red;
}
*/
/*class选择器*/
/*
.ch1{
font-size: 30px;
color: green;
}
*/
/*id选择器
标签中id属性值不能同名,必须唯一
*/
/*
#d1{
font-size: 36px;
color: blue;
}
*/
/*并集选择
选择器,选择器2{ //控制多个标签
css样式代码
}
*/
/*
#d1,#d2{
font-size: 35px;
color: blue;
/*文本修饰*/
/*
text-decoration: underline;
}
*/
/*交集选择器---后代选择器
选择器1 选择器2{
css样式代码;
}
*/
/*
#d1 span{
font-size: 20px;
color: greenyellow;
}
*/
/*通用选择器
*:通配符
*{
css样式代码
}
*/
*{
color:red ;
}
</style>
</head>
<body>
<div id="d1" class="ch1">
<span>
span1
<span>span2标签</span>
</span>
</div>
<div id="d2">div2</div>
<div>div3</div>
<span>span标签</span>
</body>
</html>
2.伪类选择器—锚伪类—超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器---锚伪类 --- 超链接</title>
<!--
描述标签状态
link状态:鼠标没有访问的状态
hover:鼠标经过标签状态
active:激活状态 鼠标点击但是没有松开的状态
visited:已经的访问过的:点击后松开的状态
格式
选择器:状态{
css样式代码
}
-->
<style>
/*没有访问过的状态*/
a:link{
font-size: 20px;
color: red;
}
/*访问过的状态,点击了并松开了 visited*/
a:visited{
font-size: 20px;
color: darkgray;
text-decoration: none;
}
/*鼠标经过状态:hover*/
a:hover{
font-size: 25px;
color: green;
/*文本修饰*/
text-decoration: none;
}
/*鼠标激活状态:点击但是没有松开的状态 active*/
a:active{
font-size: 30px;
color: blue;
text-decoration: underline;
}
</style>
<!--
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
-->
</head>
<body>
<a href="01_CSS选择器.html">点击跳转</a>
</body>
</html>
3.伪类练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--
写一个三行三列的表格,鼠标经过每一行背景色变成蓝色
提示:
CSS背景样式
background-color:blue;
-->
<style>
table tr:hover{
background-color: blue;
}
tr td:hover{
/* 变成小手样式*/
cursor: pointer;
}
</style>
</head>
<body>
<table border="1px" width="500px" height="500px" align="center"
cellspacing="0">
<tr align="center">
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>30</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>26</td>
</tr>
</table>
</body>
</html>
4.CSS文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--
写一个三行三列的表格,鼠标经过每一行背景色变成蓝色
提示:
CSS背景样式
background-color:blue;
-->
<style>
table tr:hover{
background-color: blue;
}
tr td:hover{
/* 变成小手样式*/
cursor: pointer;
}
</style>
</head>
<body>
<table border="1px" width="500px" height="500px" align="center"
cellspacing="0">
<tr align="center">
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>30</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>26</td>
</tr>
</table>
</body>
</html>
5.CSS字体属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS字体属性</title>
<style>
body{
/*font-family :字体系列
是字体库中的有字体
*/
/*
font-family: "楷体";
*/
/*font-size:字体大小*/
/*
font-size: 30px;
*/
/*font-style:字体风格
默认值:normal :正常的字体
*/
/*
font-style: italic;
*/
/* font-style: oblique; */
/*font-weight:设置字体的粗细程度
bold 等价700px 适当加粗
*/
/*
font-weight: bold;
*/
/*
font字体的简写属性:将所有的字体属性在声明中定义
font:font-style font-weight font-size font-family
*/
font:italic bold 40px "楷体";
}
</style>
</head>
<body>
中国
</body>
</html>
6.CSS背景属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS背景属性</title>
<style>
body{
/*背景颜色:background-color*/
/*
background-color: darkgray;
*/
/*background-image:设置图像为背景*/
/*
background-image: url(img/高圆圆.jpg);
*/
/*background-repeat:设置图像是否重复以及如何重复
repeat:水平方向/垂直方向重复
repeat-x:水平方向重复
repeat-y:垂直方向重复
no-repeat:不重复
*/
/* background-repeat: no-repeat; */
/*
如果设置图像不重复,默认的位置 top left
backgroun-position:top left
图像的位置
top
center
bottom
图像放置在浏览器的位置
left
center
right
*/
/* background-position: top left; */
/*
背景的简写属性:background
background:background-color background-position
background-repeat background-image
*/
background: red top center no-repeat url(img/高圆圆.jpg);
}
</style>
</head>
<body>
</body>
</html>
7.CSS列表属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS列表</title>
<style>
ul{
/*list-style-type :设置列表前面的标记图形*/
/* list-style-type: none; */
/*list-style-image:自定义图形*/
/* list-style-image: url(img/start.jpg); */
/*list-style简写属性
list-tyle:list-style-type list-style-image
*/
list-style: none url(img/start.jpg);
}
</style>
</head>
<body>
你喜欢的人?
<ul type="disc">
<li>高圆圆</li>
<li>文章</li>
<li>朱亚文</li>
</ul>
</body>
</html>
8.CSS表格属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS表格属性</title>
<style>
table{
/*border-collapse :设边框和单元之间空隙
指定为collapse
*/
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1px" width="500px" height="500px" align="center">
<tr align="center">
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>30</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>26</td>
</tr>
</body>
</html>
9.CSS边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS边框</title>
<!--
边框属性:
边框的宽度,颜色,样式
-->
<style>
#d1{
/*边框有四个边:给四个边分别设置颜色
注意事项:
1) 某个边框没有设置颜色,宽度或者样式,它会补齐对边的颜色,宽度以及样式
2)默认的方向:边框的颜色/边框的宽度/边框的样式:上 右 下 左
border-top-color
border-left-color
border-right-color
border-bottom-color
*/
/*
border-top-color: #F00;
border-left-color: #00F;
border-right-color: #0F0;
border-bottom-color: #c90;
*
/*边框颜色的简写属性*/
/* border-color: #F00; */
/*
边框的宽度:四个边框的宽度大小
border-top-width
border-left-width
border-right-width
border-bottom-width
*/
/* border-width: 10px; */
/*
border-top-width: 10px;
border-left-width: 20px;
border-right-width: 30px;
border-bottom-width: 40px;
*/
/*
边框的四个边要想显示出来必须设置
边框的样式属性:必须存在
border-top-style
border-left-stylee
border-rigth-style
border-bottom-style
*/
/*
border-top-style: solid;
border-left-style: double;
border-right-style: dotted;
border-bottom-style: dashed;
*/
/*边框样式的简写属性*/
/* border-style: solid; */
/*边框的简写属性:
border:border-width border-style border-color
*/
border:5px solid #000;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1">div1</div>
</body>
</html>
10.CSS浮动属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS浮动</title>
<style>
#dl1{
width: 200px;
height: 200px;
border:1px solid #000 ;
background-color: #F00;
/*
浮动属性:float
值:left:左浮动 right:有浮动
一旦元素设置了浮动属性,就会脱离文档流
*/
float:left;
}
#dl2{
width: 200px;
height: 200px;
border:1px solid #000 ;
background-color: #00F;
float:left;
}
#dl3{
width: 200px;
height: 200px;
border:1px solid #000 ;
background-color: #0F0;
}
#clear{
/*清除浮动属性
clear:
left:左边不浮动
right:右边不浮动
both:左右两边浮动
*/
}
#clear{
clear:both;
}
</style>
</head>
<body>
<div id="dl1">div1</div>
<div id="dl2">div2</div>
<!-- 没有文本内容div -->
<div id="clear"></div>
<div id="dl3">div3</div>
</body>
</html>
11.简单的浮动网页(login)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#img1{
float: left;
}
#img2{
float: left;
}
#clear{
clear:both;
}
</style>
</head>
<body>
<div id="lunbo">
<div id="img1">
<img src="img/高圆圆.jpg" />
</div>
<div id="img2">
<img src="img/2.jpg" />
</div>
</div>
<div id="clear"></div>
<div id="head">
<ul>
<li><a href="#">电脑首页</a></li>
<li><a href="#">户外商品</a></li>
<li><a href="#">鞋靴箱包</a></li>
</ul>
</div>
</body>
</html>
der:1px solid #000 ;
background-color: #F00;
/*
浮动属性:float
值:left:左浮动 right:有浮动
一旦元素设置了浮动属性,就会脱离文档流
*/
float:left;
}
#dl2{
width: 200px;
height: 200px;
border:1px solid #000 ;
background-color: #00F;
float:left;
}
#dl3{
width: 200px;
height: 200px;
border:1px solid #000 ;
background-color: #0F0;
}
#clear{
/*清除浮动属性
clear:
left:左边不浮动
right:右边不浮动
both:左右两边浮动
*/
}
#clear{
clear:both;
}
</style>
</head>
<body>
<div id="dl1">div1</div>
<div id="dl2">div2</div>
<!-- 没有文本内容div -->
<div id="clear"></div>
<div id="dl3">div3</div>
</body>
## 11.简单的浮动网页(login)
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#img1{
float: left;
}
#img2{
float: left;
}
#clear{
clear:both;
}
</style>
</head>
<body>
<div id="lunbo">
<div id="img1">
<img src="img/高圆圆.jpg" />
</div>
<div id="img2">
<img src="img/2.jpg" />
</div>
</div>
<div id="clear"></div>
<div id="head">
<ul>
<li><a href="#">电脑首页</a></li>
<li><a href="#">户外商品</a></li>
<li><a href="#">鞋靴箱包</a></li>
</ul>
</div>
</body>
</html>
5749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
