JavaWeb-CSS（选择器，页面定位，行元素块元素行内块元素之间的转换，层的浮动，表格布局页面，div和css布局页面）
2021/12/30 17:07:55
本文主要是介绍JavaWeb-CSS（选择器，页面定位，行元素块元素行内块元素之间的转换，层的浮动，表格布局页面，div和css布局页面），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
1.行标签和块标签
行标签：默认不会占据一整行的标签，内容有多宽，就占据多宽 b font s u
块标签：就是该标签默认会占据一行的标签 h1 hr ul li
行内块标签：具有一些行标签和块标签的特点 button
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- 行标签：默认不会占据一整行的标签，内容有多宽，就占据多宽 b font s u 块标签：就是该标签默认会占据一行的标签 h1 hr ul li 行内块标签：具有一些行标签和块标签的特点 button --> <h1>这是一个标题标签</h1> <b>后面的标签</b> <ul> <li>asdfasfasf</li> <li>asdfasfasf</li> <li>asdfasfasf</li> <li>asdfasfasf</li> <li>asdfasfasf</li> <li>asdfasfasf</li> </ul> <font size="4" color="">这是行标签</font> <font size="4" color="">这是行标签</font> <font size="4" color="">这是行标签</font> <b>这也是行标签</b> </body> </html>
2.纯净的行标签和块标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 纯净的块标签： div 就是这个标签，是一个纯净的块标签，所谓纯净，就是该表签，不带任何样式，默认，没有背景颜色，没有字体大小，没有高度等待一些样式 正是因为他纯净，我们才会配合CSS来设置他的样式 纯净的行表签： sapn 是一个行标签，不带有任何样式，我们在设置文本样式时，可以使用它来配合CSS 来设置文本的样式 --> <h1>阿三发射点发射点发</h1> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <b>asfasdfasdfasfasfsaf</b> <s>asdfasdfasdfasdfasdfsaf</s> <u>asdfasdfasdfasdfasdfasdfasfd</u> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> </body> </html>
3.CSS的概念
1.实现了样式和html的代码分离。
2.弥补html对属性的的控制不足。
3.精确的控制页面的布局。
4.可以提高页面的执行效率。
5.css还有特殊的功能。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- CSS：英文全称：Cascading Style Sheets,层叠样式表，作用就是来修饰HTML表签所展示的样式，使表签的样式展示更加丰富，HTML表签自带的样式以及属性，不能满足我们丰富的样式要求 那么我们可以使用CSS来做，因为他有大量丰富的样式来满足我们的需求，一旦我们学习了CSS 就很少使用表签自带的属性来调整样式了。 这个表签展示成什么样子，那就交由CSS来控制 --> <font size="7" color="red">表签自带的属性来控制样式</font> <span style="font-size: 30mm;color: green">CSS来控制这行文本的样式</span> </body> </html>
4.CSS和HTML的结合方式
1.内联样式，就是把CSS代码，写到HTML表签的内部，每一个HTML表签，都有一个style 这个属性，那这个属性的值，就是CSS代码
缺点：一次只能控制一个表签的样式，复用性差，书写凌乱
<span style="css属性名:值;css属性名:值;css属性名:值">aasdfasdf</span>
<font style="css属性名:值;css属性名:值;css属性名:值">asfasfasfasfasd</font>
2. 内部样式：在HTML页面上head表签内部 提供style表签，然后配合选择器，控制一个和多个表签的展示样式
选择器：选中一个或多个表签的语法 优点，可以提高CSS代码的复用性，缺点，只能控制一个HTML页面的展示样式
3.外部样式：将CSS代码单独写到要给文件中，可以一次控制一个或多个页面的展示样式，大大提高了CSS代码的复用性，开发首选 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#bb {
color: aqua;
font-size: 100px;
}
h1{
color: gold;
}
</style>
</head>
<body>
<!-- CSS和HTML的结合方式
1.内联样式，就是把CSS代码，写到HTML表签的内部，每一个HTML表签，都有一个style 这个属性，那这个属性的值，就是CSS代码
缺点：一次只能控制一个表签的样式，复用性差，书写凌乱
<span style="css属性名:值;css属性名:值;css属性名:值">aasdfasdf</span>
<font style="css属性名:值;css属性名:值;css属性名:值">asfasfasfasfasd</font>
2. 内部样式：在HTML页面上head表签内部 提供style表签，然后配合选择器，控制一个和多个表签的展示样式
选择器：选中一个或多个表签的语法 优点，可以提高CSS代码的复用性，缺点，只能控制一个HTML页面的展示样式
3.外部样式：将CSS代码单独写到要给文件中，可以一次控制一个或多个页面的展示样式，大大提高了CSS代码的复用性，开发首选 -->
<font style="color: red;font-size: 30px;font-family: 楷体;">内联样式，就是把CSS代码，写到HTML表签的内部，每一个HTML表签，都有一个style
这个属性，那这个属性的值，</font>
<span style="color: green;font-size: 30px;font-family: 楷体;">内联样式，就是把CSS代码，写到HTML表签的内部，每一个HTML表签，都有一个style
这个属性，那这个属性的值，</span>
<b id="bb">阿三发射点发射点发射点</b>
<h1>啊手动阀手动阀</h1>
<h1>啊手动阀手动阀</h1>
<h1>啊手动阀手动阀</h1>
<h1>啊手动阀手动阀</h1>
<h1>啊手动阀手动阀</h1>
<h1>啊手动阀手动阀</h1>
<h1>啊手动阀手动阀</h1>
<h1>啊手动阀手动阀</h1>
</body>
</html>
外部样式：
a.css:
h1{
color: red;
}
b.css:
h1{
color: #FFD700;
}
public.css:
body{
background: greenyellow;
}
a.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引用css文件 --> <link rel="stylesheet" type="text/css" href="css/public.css"/> <link rel="stylesheet" type="text/css" href="css/a.css"/> </head> <body> <h1>A页面</h1> </body> </html>
b,html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/public.css"/> <link rel="stylesheet" type="text/css" href="css/b.css"/> </head> <body> <h1>B页面</h1> </body> </html>
5.id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* id 选择器 前面使用 #
id选择器，一次只能选中一个表签，进行样式的控制
*/
#myh1 {
color: red;
font-family:'楷体';
font-size:20px;
}
#mydiv{
color: red;
font-family:'楷体';
font-size:20px;
/* 加粗 100---900 bolder bold */
font-weight:bold;
}
</style>
</head>
<body>
<!-- 注意每个表签的 id值时唯一的，不能有重复的 -->
<h1 id="myh1">阿斯顿发射点法大师傅</h1>
<div id="mydiv">
纯净的div表签
</div>
</body>
</html>
6.class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* class 选择器 以 点开头 可以选择多个表签进行控制 */
.myh{
color: red;
}
#one{
font-size: 10px;
}
</style>
</head>
<body>
<!-- classs属性值，多个表签可以一样 -->
<h1 class="myh" id="one">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<h1 class="myh">阿斯顿发生发生大</h1>
<font class="myh">adsffffffffffffff</font>
</body>
</html>
7.标签名选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 表签名选择器，根据表签名称来选择 ，可以选中多个表签 */
h1{
color: #00FFFF;
}
li{
color: #FF0000;
}
</style>
</head>
<body>
<h1>阿斯顿发射点发生</h1>
<h1>阿斯顿发射点发生</h1>
<h1>阿斯顿发射点发生</h1>
<ul>
<li>adsfadsfdsaf</li>
<li>adsfadsfdsaf</li>
<li>adsfadsfdsaf</li>
<li>adsfadsfdsaf</li>
</ul>
</body>
</html>
8.包含选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 包含选择器 层层往里面选择*/
#d1 ul li a{
font-size: 30px;
}
#d2 ul li a{
font-size: 50px;
}
</style>
</head>
<body>
<div id="d1">
<ul>
<li><a id="mya" href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
</ul>
</div>
<div id="d2">
<ul>
<li><a id="mya" href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
</ul>
</div>
</body>
</html>
9.通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 全局统配，可以选中所有表签 */
* {
color: #ADFF2F;
}
/* 局部统配 */
#d2 h1 *{
color: #FFD700;
}
</style>
</head>
<body>
<h1>啊手动阀手动阀</h1>
<h2>啊的说法都是帆帆帆帆帆帆帆帆</h2>
<font>啊多发点是否</font>
<div id="">
adsfasfadsfsf
</div>
<div id="d2">
<h1>
<ul>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
</ul>
<ol>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
</ol>
</h1>
</div>
</body>
</html>
10.伪类选择器
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活（按下）状态 a:active
其中的hover 和active 可以用于其他控价
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
伪类选择器，是针对 a 表签的四种状态来进行选择的
链接状态
鼠标移上状态
鼠标按下状态
链接访问过后的状态
*/
/* 链接状态 */
a:link {
color: #FFD700;
/* 去掉a标签的下划线 */
text-decoration:none;
}
/* 鼠标移上状态 */
a:hover {
font-size: 30px;
color: aqua;
/* 去掉a标签的下划线 */
text-decoration: none;
}
/* 鼠标按下状态 */
a:active {
color: #FF0000;
/* 去掉a标签的下划线 */
text-decoration: none;
}
/*链接访问过后的状态 */
a:visited {
color: brown;
/* 去掉a标签的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<a href="a.html">跳到a页面</a>
<a href="b.html">跳到b页面</a>
</body>
</html>
11.伪类选择的鼠标悬浮和按下状态对其他标签也起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
height: 200px;
width: 200px;
background-color: #00FFFF;
}
/* 鼠标悬浮 */
#d1:hover{
height: 300px;
width: 300px;
background-color:red;
}
/* 鼠标按下 */
#d1:active{
background-color:yellow;
}
</style>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
12.选择器优先级
在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高 2、类选择器 3、标记选择器
!important>内联样式>id选则器>class选则器>标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 多个选择器，选中了同一个表签，如果他们控制的样式没有冲突，就叠加生效
如果多个选择器控制同一个表签的样式，有冲突呢？ 那听哪个选择器的呢?
根据选择器的优先级来决定
!important>内联样式>id选择器>class选择器>标签名选择器
*/
#myh1{
color: red;
}
.aa{
background-color: #ADFF2F;
color: #FFFF00;
}
h1{
/* !important 让此样式的优先级最高*/
color: blue !important;
font-size: 100px;
}
</style>
</head>
<body>
<h1 id="myh1" class="aa" style="color: pink;">阿斯蒂芬撒地方</h1>
</body>
</html>
13.子选择器
div >p{
意思是 div 里面所有的子标签p 都被会选中 注意对孙子标签是不起作用的
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#fu>h1 {
color: red;
}
#fu2>h1 {
color: yellow;
}
div h1 {
background-color: gainsboro;
}
</style>
</head>
<body>
<div id="fu">
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
</div>
<div id="fu2">
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h1>阿斯顿发射点发大水</h1>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
</div>
</body>
</html>
14.相邻选择器
div +p{
意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p 之间隔着一个元素 那是选不中的
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#one {
height: 200px;
width: 200px;
/* 边框：粗细，边框颜色，线条样式 solid 实线 */
border: 1px black solid;
background-color: #FF0000;
}
/* + 相邻选择器 */
#one+div {
height: 200px;
width: 200px;
/* 边框：粗细，边框颜色，线条样式 solid 实线 */
border: 1px black solid;
background-color: blue;
}
#one:hover +div{
background-color:yellow;
}
</style>
</head>
<body>
<div id="one">
1111
</div>
<div id="two">
2222
</div>
</body>
</html>
15.相邻所有选择器
div ~p{
意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1 {
height: 200px;
width: 200px;
/* 边框：粗细，边框颜色，线条样式 solid 实线 */
border: 1px black solid;
background-color: #FF0000;
}
/* ~ 相邻所有选择器 */
#d1~div {
height: 200px;
width: 200px;
/* 边框：粗细，边框颜色，线条样式 solid 实线 */
border: 1px black solid;
background-color: blue;
}
#d1:hover ~div{
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="d1">
1111
</div>
<div id="" class="mydiv">
00000
</div>
<div id="" class="mydiv">
00000
</div>
<div id="" class="mydiv">
00000
</div>
</body>
</html>
16.属性选择器
a[title] { 意思是选中 a标签 里面只要有 title 这个属性的 都会选中 }
a[title=num1] 意思是选中 属性title=num1 的a 标签
a[title^=num] 选中title的属性值以num 开头的a标签
a[title$=num]选中title的属性值以num 结尾的a标签
a[title|=num] 选中title的属性值以num-连接的a标签 如<a title=“num-ai”>
a[title~=num] 选中title的多个属性值以 空格隔开的 有其中一个属性值都能选中 例如<a tilte=“num num2 num3”> 三个属性值你任意选一个都能选中 比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签
a[title*=num] 选中title属性值 包含num的都能选中 例如<a title=“mynumaaaa”>
a[title=num][name=lisi] 多个属性选择 意思 是选中 title=num 并且 name=lisi 的这个a标签 <a title=“num” name=“lisi”>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 属性选择器 */
[align] {
color: red;
}
h1[align='left'] {
background-color: green;
}
</style>
</head>
<body>
<h1 align="center">111111</h1>
<h1 align="left">111111</h1>
<h1 align="right">111111</h1>
</body>
</html>
17.过滤选择器（其他伪类选择器）
| :first-letter | div:first-letter 选中div中的第一行的第一个字母或者汉字 | |
| :first-line | div:first-line 选中 div 中子元素第一行 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
font-size: 30px;
font-weight: 900;
}
p::first-letter{
font-size:50px;
color: red;
}
p::first-line{
background-color: #DCDCDC;
}
</style>
</head>
<body>
<p>
像我这样优秀人的，本该灿烂过一生
<br>
像我这样默默无闻的人，世上还有多少人
</p>
</body>
</html>
18.页面定位
元素的定位方式有相对定位和绝对定位两种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
页面的原点位置，在左上角，第一个元素，就会跑到原点位置
页面元素默认使用的定位方式是相对定位
相对定位：第一个元素在原点位置，后面的元素参数他前面的元素
绝对定位：元素之前不参考，所有元素只参考原点位置。
*/
button{
/* 元素的定位方式：
relative 相对定位，默认值
absolute 绝对定位
*/
position:relative;
}
</style>
</head>
<body>
<button type="button">一个按钮</button>
<button type="button">两个按钮</button>
<button type="button">三个按钮</button>
</body>
</html>
19.相对定位时元素之间的间距
相对定位设置四个方向的间距
margin-right: 20px;
margin-top: 50px;
margin-bottom: 200px;
margin-right: 20px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
position: relative;
width: 200px;
height: 200px;
border: 1px black solid;
}
/*
相对定位：设置四个方向的间距
margin-right: 20px;
margin-top: 50px;
margin-bottom: 200px;
margin-right: 20px; */
#d1{
background-color: red;
margin-left: 120px;
}
#d2{
background-color: #0000FF;
margin-top: 50px;
margin-bottom: 200px;
margin-right: 20px;
}
#d3{
margin-top: 150px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="d1">
11111
</div>
<div id="d2">
2222
</div>
<div id="d3">
3333
</div>
</body>
</html>
20.绝对定位设置间距
top:50px;
left:100px;
right: auto;
bottom: auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
position: absolute;
width: 200px;
height: 200px;
border: 1px black solid;
}
/*
绝对定位，设置元素距离原点位置：
top:50px;
left:100px;
right: auto;
bottom: auto;
*/
#d1{
top:50px;
left:100px;
right: auto;
bottom: auto;
background-color: red;
}
#d2{
top:80px;
left:120px;
background-color: #0000FF;
}
#d3{
top:150px;
left:200px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="d1">
11111
</div>
<div id="d2">
2222
</div>
<div id="d3">
3333
</div>
</body>
</html>
21.行标签块标签行内块标签对CSS样式的不同之处
行标签，设置上下间距不生效，设置左右间距是生效的
行内块标标签:设置上下左右间距是生效的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 块标签，对设置上下左右的间距是生效的 */
h1{
margin-top: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<!-- 行标签，设置上下间距不生效，设置左右间距是生效的。 -->
<b style="margin-left: 200px;margin-top: 500px;">这是个行标签</b>
<h1>这是个块标签</h1>
<!-- 行内块标标签:设置上下左右间距是生效的， -->
<button type="button" style="margin-left: 150px;margin-top: 500px;">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
</body>
</html>
22.行元素块元素行内块元素之间的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
/* 把块元素，转换成行元素 */
display: inline;
}
span{
/* 把行元素，转换成块元素 */
display: block;
margin-top: 100px;
}
h2{
/* 把块元素，转换成行内块元素 */
display: inline-block;
margin-top: 300px;
}
div{
height: 300px;
width: 300px;
background-color:red;
/* none 可以隐藏块元素 */
display: none;
}
</style>
</head>
<body>
<h1>啊多发点是否</h1>
<h1>啊多发点是否</h1>
<span>asfasdfadsfasdf</span>
<span>asfasdfadsfasdf</span>
<span>asfasdfadsfasdf</span>
<span>asfasdfadsfasdf</span>
<h2>asdfasfasffsasddddddddddddddddddd</h2>
<h2>asdfasfasffsasddddddddddddddddddd</h2>
<h2>asdfasfasffsasddddddddddddddddddd</h2>
<h2>asdfasfasffsasddddddddddddddddddd</h2>
<div id="d1">
</div>
</body>
</html>
23.层的浮动
浮动：可以使块标签，一字排开 float: left
clear: left; 清除左浮动
clear: both; 清除左右浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 浮动：可以使块标签，一字排开 float: left;*/
#d1{
height: 300px;
width: 300px;
background: red;
float: left;
}
#d2{
height: 300px;
width: 300px;
background: green;
float: left;
}
#d3{
height: 300px;
width: 300px;
background:yellow;
float:left;
}
#d4{
height: 300px;
width: 300px;
background:pink;
}
</style>
</head>
<body>
<div id="d1">
111
</div>
<div id="d2">
222
</div>
<div id="d3">
333
</div>
<!-- clear: left; 清除左浮动
clear: both; 清除左右浮动
-->
<div style="clear: both;"></div>
<div id="d4">
444
</div>
</body>
</html>
24.使用表格进行页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="" width="100%" height="40px">
<tr>
<td width="300px"></td>
<td width="102px">
<img src="img/logo.png">
</td>
<td align="center" width="200px">
<font size="5">西部开源欢迎你！</font>
</td>
<td width="280px"></td>
<td width="50px"><img src="img/phone1.png"></td>
<td width="200px">029-86699937 88262419</td>
<td width="300px"></td>
</tr>
</table>
<table border="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/linux.jpg" height="480px" width="100%" >
</td>
</tr>
</table>
</body>
</html>
25.div和css布局页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin-top: 0;
}
#tubu {
width: 100%;
height: 400px;
border: 1px black solid;
/* 背景图片 */
background-image: url(img/linux.jpg);
/* 背景图片尺寸 */
background-size: 100% 100%;
}
#dh {
width: 100%;
height: 80px;
margin-top: 10px;
border: 1px black solid;
}
#zuo {
width: 25%;
height: 600px;
border: 1px black solid;
float: left;
}
#zhong {
width: 40%;
height: 600px;
border: 1px black solid;
margin-left: 5%;
float: left;
}
#you {
width: 25%;
height: 600px;
border: 1px black solid;
float: right;
margin-right: -2px;
}
#dibu {
margin-top: 10px;
width: 100%;
height: 400px;
border: 1px black solid;
}
#box {
margin-top: 10px;
}
.btn {
margin-top: 10px;
height: 60px;
width: 150px;
border: 1px black solid;
float: left;
margin-left: 5.5%;
/* 文本左右居中 */
text-align: center;
/* 文本上下居中：取值就是外框的高度 */
line-height: 60px;
/* 边框圆角 */
border-radius: 5px;
background-color: skyblue;
color: white;
font-size: 20px;
box-shadow: 5px 5px 5px gray;
}
.btn:hover {
font-size: 21px;
}
a:link {
color: white;
text-decoration: none;
}
a:hover {
color: #0000FF;
}
</style>
</head>
<body>
<div id="tubu">
头部横幅
</div>
<div id="dh">
<div class="btn">
<a href="#">进入首页</a>
</div>
<div class="btn">
<a href="#">学习原地</a>
</div>
<div class="btn">
<a href="#">关于本站</a>
</div>
<div class="btn">
<a href="#">学习资料</a>
</div>
<div class="btn">
<a href="#">报名需知</a>
</div>
<div class="btn">
<a href="#">联系我们</a>
</div>
</div>
<div id="box">
<div id="zuo">
<table border="0" cellspacing="0" width="100%" height="100%">
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</div>
<div id="zhong">
中
</div>
<div id="you">
右
</div>
</div>
<div id="" style="clear: both;">
</div>
<div id="dibu">
底部
</div>
</body>
</html>
这篇关于JavaWeb-CSS（选择器，页面定位，行元素块元素行内块元素之间的转换，层的浮动，表格布局页面，div和css布局页面）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门：从零开始的编程之旅
- 2024-11-23Java创业入门：新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门：初学者的简单教程
- 2024-11-23JAVA副业入门：初学者的实战指南
