整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天小编为大家介绍五种css样式布局以及内服源代码作为介绍，采用的方式是行内级样式（就是将css样式代码与html写在一起）
已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
一、浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动布局</title>
<style type="text/css">
.wrap1 div{
min-height: 200px;
}
.wrap1 .left{
float: left;
width: 300px;
background: red;
}
.wrap1 .right{
float: right;
width: 300px;
background: blue;
}
.wrap1 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="left"></div>
<div class="right"></div>
<div class="center">
浮动布局
</div>
</div>
</body>
</html>
浮动布局的兼容性比较好，但是浮动带来的影响比较多，页面宽度不够的时候会影响布局。
二、绝对定位布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位布局</title>
<style type="text/css">
.wrap2 div{
position: absolute;
min-height: 200px;
}
.wrap2 .left{
left: 0;
width: 300px;
background: red;
}
.wrap2 .right{
right: 0;
width: 300px;
background: blue;
}
.wrap2 .center{
left: 300px;
right: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="wrap2 wrap">
<div class="left"></div>
<div class="center">
绝对定位布局
</div>
<div class="right"></div>
</div>
</body>
</html>
绝对定位布局快捷，但是有效性比较差，因为脱离了文档流。
三、flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex布局</title>
<style type="text/css">
.wrap3{
display: flex;
min-height: 200px;
}
.wrap3 .left{
flex-basis: 300px;
background: red;
}
.wrap3 .right{
flex-basis: 300px;
background: blue;
}
.wrap3 .center{
flex: 1;
background: pink;
}
</style>
</head>
<body>
<div class="wrap3 wrap">
<div class="left"></div>
<div class="center">
flex布局
</div>
<div class="right"></div>
</div>
</body>
</html>
自适应好，高度能够自动撑开
四、table-cell表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table-cell表格布局</title>
<style type="text/css">
.wrap4{
display: table;
width: 100%;
height: 200px;
}
.wrap4>div{
display: table-cell;
}
.wrap4 .left{
width: 300px;
background: red;
}
.wrap4 .right{
width: 300px;
background: blue;
}
.wrap4 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap4 wrap">
<div class="left"></div>
<div class="center">
表格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
兼容性好，但是有时候不能固定高度，因为会被内容撑高。
五、网格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网格布局</title>
<style type="text/css">
.wrap5{
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 300px auto 300px;
}
.wrap5 .left{
background: red;
}
.wrap5 .right{
background: blue;
}
.wrap5 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap5 wrap">
<div class="left"></div>
<div class="center">
网格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
希望大家可以一直关注我，支持我！感谢！！！
导航栏
图书管理功能模块图
图书管理功能包4括大模块 ，16个子模块。
1. 制作方式： 列表<ul><li>制作。
四大模块：用一个<ul><li></li></ul>列表制作出来，每个模块下面的四个子模块用同样的<ul><li></li></ul>列表嵌套出来。
具体格式如下：
<ul> <li>模块1 <ul> <li>模块1.1</li> <li>模块1.2</li> <li>模块1.3</li> <li>模块1.4</li> </ul> </li> <li>模块2 <ul> <li>模块2.1</li> <li>模块2.2</li> <li>模块2.3</li> <li>模块2.4</li> </ul> </li> .......... </ul>
2.导航标签<a>：都是一个超链接，通过点击链接到相应的导航页面。
所以在每个列表选项中，都应该加入超链接<a>标签。
<ul> <li><a href="javascript：;" >用户管理</a></li> ... </ul>
3.导航框的修饰：CSS样式表
3.1 样式表接入方式：
一般用链接式<link >，运用高内聚，低耦合的思想。
<link rel="stylesheet" type="text/css" href="CSS/demo.css">
3.2标签选择器
行内选择器>id选择器>class选择器>标签选择器
常用到的为 id选择器、class选择器、标签选择器。
例如：
<ul> <li class="litems"><a href="javascript：;">用户管理</a> <ul class="uitems"> <li><a href="javascript：;">添加用户</a></li> </ul> </li> </ul>
具体用法见：HTML/CSS中可直接输数据的表格
4.导航栏的框框
模块标签特点：
litems类标签 中 <a>标签的样式如下：
.litems>a
{
background-color:#990020; /*背景色*/
height:30px;
display:block; /*块显示*/
line-height:30px; /*垂直居中*/
border-left: solid 12px #711515; /*边框*/
padding-left:5px; /*左边距*/
}
5.鼠标悬浮变化--- a:hover 属性
鼠标未悬浮状态
鼠标悬浮状态
特点：鼠标悬浮时，字体变为黄色。
a:hover
{
color:#FF0;
}
制作一个简单的导航栏，常用的就是列表格式。通过列表的嵌套和样式的修改，即可建立一个简约得体的导航列表。
以下附带部分样式源码：
HTML列表内容
CSS样式表源码：
下是一些常用的HTML网页源代码示例，这些示例可用作HTML文档的基础：
1、创建一个简单的HTML文档结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<h1>Hello,World!</h1>
<p>This is a simple HTML webpage.</p>
</body>
</html>
2、插入图片：
<img src="image.jpg"alt="Description of the image">
3、创建超链接：
<a href="https://www.example.com">Visit Example.com</a>
4、创建无序列表：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
5、创建有序列表：
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
6、创建表格：
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1,Cell 1</td>
<td>Row 1,Cell 2</td>
</tr>
<tr>
<td>Row 2,Cell 1</td>
<td>Row 2,Cell 2</td>
</tr>
</table>
7、插入段落：
<p>This is a paragraph of text.</p>
8、插入换行符：
<p>This is some text.<br>This is on a new line.</p>
9、创建一个文本输入框：
<input type="text"name="username"placeholder="Enter your username">
10、插入按钮：
<button type="button">Click me</button>
这些示例代码只是HTML的基础，HTML具有更丰富的功能和标记选项，可以根据需要进行扩展和定制。请根据您的具体需求，使用这些示例作为起点，构建您自己的网页。
【名扬银河企业网站系统】
【免费】提供企业【网站源码】，简单易用，无须拥有代码基础。
欢迎留言或私信我们咨询。
以上内容由【名扬银河】企业网站系统原创发布，转载请注明出处。
*请认真填写需求信息，我们会在24小时内与您取得联系。
