html css网页布局实例？html网页布局模板

编程之家2026-06-19964次浏览

大家好,今天小编来为大家解答以下的问题，关于html css网页布局实例，html网页布局模板这个很多人还不知道，现在让我们一起来看看吧！

css网页的几种布局实例

本文主要介绍了浅谈css网页的几种布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。

1、左边固定，右边自适应布局的两种实现方式

效果图如下：

大屏展示：

小屏展示：

第一种实现方式通过负边距与浮动实现左边固定，右边自适应的布局。主要代码如下：

.left{

float: left;

width: 100%;

height: 200px;

background-color: red;

}

.left-content{

margin-left: 30%;

}

.right{

float: left;

width: 30%;

margin-left:-100%;

height: 200px;

background-color: green;

}

.layout0{

clear: both;

width: 100px;

height: 100px;

background-color: yellow;

}

</style>

<body>

设置子元素的margin,然后父元素必须浮动。

用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。

-margin必须大于或等于自身的宽度才会上移

</body>实现过程中需要注意的是:

1.自适应的容器需要容器包裹住，否则容器内的内容会被覆盖。

2.right容器的负边距必须大于或等于自身的宽度才会上移。

3.如果right容器负边距等于自身的宽度它会靠右对齐，如果负边距等于-100%，则会靠左对齐。

第二种通过浮动布局来实现左边固定，右边自适应的布局

主要的代码如下：

.left{

float: left;

width: 200px;

height: 200px;

background-color: yellow;

}

.right{

padding-left: 200px;

height: 200px;

background-color: red;

}

@media(min-width: 650px) and(max-width: 1000px){

.left{

width: 150px;

}

.right{

margin-left: 150px;

}

@media(max-width: 640px){

.left{

width: 100px;

}

.right{

margin-left: 100px;

}

</style>

<body>

左边固定宽度，右边自适应

</body>实现过程中需要注意的是： 1. left需要脱离文档流，而right只需要正常显示就可以。

2.left只是覆盖在right上边，因此想要让right内容完整显示需要给right padding-left或者margin-left。

大屏展示：

小屏展示：

主要代码如下：

#head{

height: 200px;

background-color: yellow;

}

#body{

width: 100%;

float: left;

}

.main{

background-color: green;

min-height: 200px;

margin: 0 210px;

}

.left{

float: left;

background-color: red;

width: 200px;

height: 200px;

margin-left:-100%;

}

.right{

float: right;

background-color: blue;

width: 200px;

height: 200px;

margin-left:-200px;

}

#footer{

clear: both;

height: 200px;

background-color: orange;

}

</style>

<body>

即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置

当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移

</body>实现过程中需要注意:

1.中间自适应的p需要放在left和right容器前面并且内容p需要用父容器包裹

2.left和right容器向同一个方向浮动。

主要代码如下：

#head{

height: 200px;

background-color: yellow;

}

#body{

overflow: hidden;

}

.left{

float: left;

background-color: red;

width: 200px;

height: 200px;

}

.right{

float: right;

background-color: blue;

width: 200px;

height: 200px;

}

.main{

background-color: green;

height: 200px;

margin: 0 210px;

}

#footer{

clear: both;

height: 200px;

background-color: orange;

}

</style>

<body>

左右固定宽度并且向两边浮动，中间的p设置两边的margin

该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了

</body>实现过程中需要注意:

1.该方式只需要注意中间自适应的p需要放在left和right容器的后面。

2.left和right容器向两边浮动。

主要代码如下：

<!DOCTYPE html>

<html>

<head>

<title>使用flex实现“双飞翼布局”</title>

</head>

#main{

display: flex;

display:-webkit-flex;//谷歌浏览器加前缀

flex-flow: row nowrap;

justify-content: flex-start;

align-items: center;

}

.left{

flex: 0 0 auto;

width:100px;

height: 200px;

background-color: red;

word-wrap: break-word;

overflow: hidden;

}

.main{

flex: 1 1 auto;

height: 200px;

background-color: green;

}

.right{

flex: 0 0 auto;

width: 100px;

height: 200px;

background-color: yellow;

}

</style>

<body>

flex语法我参照了阮一峰关于flex语法介绍 ;

</body>

</html>如果未了解过flex布局请移至文末点击链接查看阮一峰大神写的关于flex语法

3、定位布局

这边就不絮絮叨叨的讲一些基础的css定位知识了（ps:不会的请自行到w3c官网查阅），我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。

第一：使用多个fixed时，注意自己需要基于什么定位，因为如果父级有用transform属性时，可能会导致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：

在上图中我可以发现中间黑色的小框是基于父级来定位，并且宽度也基于父容器的50%。详细的请看下面代码：

<!DOCTYPE html>

<html>

<head>

<title>关于position的定位的坑</title>

</head>

body{

margin: 0;

padding: 0;

}

font-style: normal;

cursor: pointer;

}

#delete-button{

position: absolute;

left: 45%;

top: 45%;

text-align: center;

vertical-align: middle;

height: 50px;

margin: auto;

cursor: pointer;

}

#delete-button> i{

display: inline-block;

width: 32px;

height: 32px;

border-radius: 16px;

background-color: orange;

color: red;

font-size: 32px;

vertical-align: middle;

line-height: 28px;

}

/*第一个模态框的样式*/

#layout{

display: none;

width: 100%;

height: 100%;

}

/*使用flex布局水平竖直居中*/

/*#layout-box{

position: fixed;

width: 100%;

height: 100%;

left: 0;

top: 0;

display: flex;

display:-webkit-flex;

flex-flow: column nowrap;

justify-content: center;

align-items: center;

background-color: rgba(0,0,0,0.3);

}*/

/*使用postion和 transform水平垂直居中*/

#layout-box{

position: fixed;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.3);

}

.modal-dialog{

position: absolute;

left: 50%;

top: 50%;

width: 500px;

height: 200px;

border-radius: 10px;

transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

background-color:#fff;

}

.dialog-title{

text-align: center;

color:#333;

font-size: 28px;

margin-bottom: 10px;

}

.dialog-content{

text-align: center;

color:#666;

font-size: 18px;

}

.dialog-button{

margin-top: 20px;

width: 100%;

color:#333;

}

.dialog-button>.button-box{

display: inline-block;

width: 48%;

text-align: center;

}

.button-box span{

display: inline-block;

padding: 10px;

color:#fff;

border-radius: 6px;

cursor: pointer;

}

#confirm{

background-color:#27ad9a;

}

#cancel{

background-color: red;

}

/*添加按钮的样式*/

#add-button> i{

display: inline-block;

width: 32px;

height: 32px;

border-radius: 16px;

background-color:#27ad9a;

color:#fff;

font-size: 32px;

vertical-align: middle;

line-height: 28px;

text-align: center;

}

#add-button{

display: inline-block;

cursor: pointer;

}

/*第二个模态框的样式*/

.layout2{

display: none;

position: fixed;

width: 100%;

height: 100%;

left: 0;

top: 0;

background-color: rgba(0,0,0,0.2);

}

.modal-dialog2{

position: fixed;

left: 50%;

top: 50%;

width: 50%;

height: 50%;

border-radius: 10px;

transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

background-color: rgba(0,0,0,0.2);

}

.modal-dialog2> span{

display: block;

}

.modal-text{

float: left;

}

#close{

color: red;

font-size: 24px;

float: right;

cursor: pointer;

}

</style>

<body>

-删除

提示

是否删除该项,点击确定

确定

取消

<p id="add-butto

Div+CSS 3.0网页布局案例精粹的内容提要

《div+css 3.0网页布局案例精粹》系统地介绍了css样式的基础理论和实际应用技术，并结合实例来介绍使用div+css布局制作网页的方法和技巧。在介绍使用css样式进行设计的同时，还结合实际网页制作中可能遇到的问题，提供了解决问题的思路、方法和技巧，使初学者可以轻松地掌握div+css布局的方式，制作出精美的网页。

《div+css 3.0网页布局案例精粹》全面展现了使用div+css进行网页设计布局的方法，其详细的讲解步骤配合图示，使得每个步骤清晰易懂、一目了然。书中不仅应用大量实例对重点、难点进行了深入的剖析，还结合作者多年的网页设计经验和教学经验进行了点拨，使读者能够学以致用。另外，在书中还穿插介绍了css 3.0和html 5.0的相关知识，力求使读者了解最新的网页设计制作技术。

Div+CSS3.0网页布局案例精粹的图书目录

《div+css3.0网页布局案例精粹》

第1章网页和网站的制作流程1

1.1认识网页2

1.1.1网页和网站2

1.1.2网页的基本构成元素2

1.2什么是网页设计3

1.2.1网页设计概述4

1.2.2网页设计与网页制作4

1.2.3网页设计的特点5

1.2.4网页设计的相关术语7

1.3网页设计涵盖的内容11

1.3.1视听元素11

1.3.2版式设计11

1.4如何设计网页12

1.4.1网页设计的基本原则12

1.4.2网站设计成功的要素13

1.4.3网页的设计风格及色彩搭配14

1.5网页设计的原则14

1.5.1为用户考虑的原则15

1.5.2主题突出的原则15

.1.5.3整体原则16

1.5.4内容与形式相统一的原则17

1.5.5更新和维护的原则18

1.6网页设计师应具备的素质18

1.6.1艺术素质18

1.6.2技能素质19

1.6.3综合素质19

1.7网站的制作流程20

1.7.1前期策划20

1.7.2页面细化及实施21

1.7.3后期维护22

1.8静态页面的制作流程22

1.8.1观察设计稿22

1.8.2拆分设计稿23

1.8.3网页设计的实现23

第2章css样式入门25

2.1css的基本概念26

2.1.1css的特点26

2.1.2css的类型27

2.1.3css的基本语法28

2.1.4css的冲突29

2.2网页设计中的css30

2.2.1怎样使用css30

2.2.2css能做什么32

2.2.3css不能做什么32

2.3css样式表的基本用法33

2.3.1怎样在html中插入样式表33

2.3.2css样式表规则33

2.4应用css到网页中34

2.4.1内联样式34

2.4.2嵌入样式表34

2.4.3外部样式表35

2.5单位和值35

2.5.1定义颜色值36

2.5.2定义字体37

2.5.3群选择符38

2.5.4派生选择符38

2.5.5id选择符39

2.5.6类别选择符39

2.6应用实例——为页面添加css样式41

2.6.1设计分析41

2.6.2制作步骤41

2.6.3案例总结47

2.7举一反三——制作产品介绍网站48

2.7.1案例分析48

2.7.2视频操作49

第3章使用div+css布局页面51

3.1定义div52

3.1.1什么是div52

3.1.2插入div52

3.1.3div的嵌套和固定格式54

3.2css布局定位54

3.2.1浮动定位55

3.2.2position定位58

3.3可视化盒模型60

3.3.1盒子模型60

3.3.2视觉可视化模型62

3.3.3空白边叠加62

3.4常用的布局方式63

3.4.1居中布局设计63

3.4.2浮动布局设计65

3.4.3高度自适应设计68

3.5css3.0中盒模型的新增属性69

3.5.1overflow69

3.5.2overflow-x70

3.5.3overflow-y71

3.6应用实例——使用div+css布局页面72

3.6.1设计分析73

3.6.2制作步骤73

3.6.3案例总结78

3.7举一反三——制作健康网站78

3.7.1案例分析78

3.7.2视频操作79

第4章使用css控制网页背景81

4.1背景颜色82

4.1.1设置页面背景颜色82

4.1.2设置块背景颜色83

4.2背景图片84

4.2.1为页面设置背景图片84

4.2.2背景图片的重复85

4.2.3设置背景图片的位置86

4.2.4设置背景滚动87

4.2.5背景样式的缩写方式88

4.3css3.0中背景的新增属性89

4.3.1background-origin89

4.3.2background-clip90

4.3.3background-size92

4.3.4multiplebackgrounds93

4.4应用实例——制作金融类网站页面94

4.4.1设计分析94

4.4.2制作步骤95

4.4.3案例总结101

4.5举一反三——制作保健商品网站102

4.5.1案例分析102

4.5.2视频操作103

第5章使用css控制文字样式105

5.1控制文字样式106

5.1.1字体和大小106

5.1.2文字颜色和粗细110

5.1.3斜体111

5.1.4下画线、顶画线和删除线112

5.1.5英文字母大小写113

5.2控制段落样式113

5.2.1段落水平对齐113

5.2.2段落垂直对齐114

5.2.3行间距和字间距115

5.2.4首字下沉116

5.3使用css对flash中的文字进行控制116

5.4css3.0中文字的新增属性118

5.4.1text-shadow118

5.4.2text-overflow119

5.4.3word-wrap121

5.5应用实例——制作设计类网站122

5.5.1设计分析122

5.5.2制作步骤122

5.5.3案例总结129

5.6举一反三——制作社区类网站129

5.6.1案例分析129

5.6.2视频操作130

第6章使用css控制图片样式131

6.1图片样式132

6.1.1图片边框设置132

6.1.2图片缩放设置135

6.2图片对齐136

6.2.1水平对齐设置136

6.2.2垂直对齐设置137

6.3图文混排138

6.3.1文本混排138

6.3.2设置混排间距139

6.4css3.0中边框的新增属性139

6.4.1border-image140

6.4.2border-radius141

6.4.3box-shadow142

6.4.4border-color143

6.5应用实例——制作婚庆网站145

6.5.1设计分析145

6.5.2制作步骤146

6.5.3案例总结150

6.6举一反三——制作产品介绍网站150

6.6.1案例分析151

6.6.2视频操作152

第7章使用css控制列表样式153

7.1列表控制概述154

7.1.1列表控制原则154

7.1.2列表的类型及使用154

7.1.3改变项目样式157

7.1.4图片符号158

7.2使用列表制作实用菜单159

7.2.1无须表格的菜单159

7.2.2菜单的横竖转换161

7.3css3.0中颜色的新增属性162

7.3.1hslcolors162

7.3.2hslacolors163

7.3.3opacity164

7.3.4rgbacolors166

7.4应用实例——制作音乐网站167

7.4.1设计分析168

7.4.2制作步骤168

7.4.3案例总结172

7.5举一反三——制作设计工作室网站172

7.5.1案例分析173

7.5.2视频操作173

第8章使用css控制表单样式175

8.1表单设计概述176

8.1.1表单的设计原则176

8.1.2表单应用分类177

8.2表单的设计179

8.2.1表单和表单元素179

8.2.2标签、字段集和图例183

8.2.3使用css控制文本字段185

8.2.4使用css控制复选框与单选框185

8.2.5使用css控制列表与跳转菜单186

8.3css3.0中控制内容的新增属性187

8.4应用实例——制作用户注册页面188

8.4.1设计分析189

8.4.2制作步骤189

8.4.3案例总结196

8.5举一反三——制作用户登录页面196

8.5.1案例分析197

8.5.2视频操作197

第9章使用css美化浏览器效果199

9.1使用css控制超链接200

9.1.1认识超链接200

9.1.2关于链接路径202

9.1.3超链接属性控制204

9.1.4图像映射206

9.1.5链接的打开方式208

9.2超链接特效208

9.2.1按钮式超链接208

9.2.2浮雕式超链接210

9.3鼠标特效210

9.3.1css控制鼠标箭头211

9.3.2鼠标变化的超链接211

9.4css3.0中用户界面的新增属性212

9.4.1box-sizing212

9.4.2resize214

9.4.3outline215

9.4.4nav-index216

9.5应用实例——制作产品宣传网站218

9.5.1设计分析218

9.5.2制作步骤219

9.5.3案例总结225

9.6举一反三——制作运输公司网站225

9.6.1案例分析225

9.6.2视频操作226

第10章应用css中的滤镜227

10.1了解css滤镜228

10.1.1alpha滤镜228

10.1.2blur滤镜231

10.1.3motionblur滤镜232

10.1.4dropshadow滤镜233

10.1.5shadow滤镜234

10.1.6flip滤镜234

10.1.7glow滤镜235

10.1.8gray滤镜236

10.1.9invert滤镜236

10.1.10xray滤镜237

10.1.11mask滤镜237

10.1.12wave滤镜238

10.2css3.0中其他模块的新增属性239

10.2.1@media239

10.2.2columns240

10.2.3@font-face242

10.2.4speech243

10.3应用实例——制作产品类网站245

10.3.1设计分析245

10.3.2制作步骤245

10.3.3案例总结254

10.4举一反三——制作网络游戏网站254

10.4.1案例分析254

10.4.2视频操作255

第11章css与javascript的综合应用257

11.1什么是javascript258

11.1.1了解javascript258

11.1.2javascript的特点260

11.1.3javascript的应用范围261

11.1.4css样式与javascript263

11.2javascript的语法基础263

11.2.1javascript的基本架构263

11.2.2javascript的基本语法264

11.2.3数据类型和变量267

11.2.4表达式和运算符268

11.2.5基本语句268

11.3使用spry构件270

11.3.1关于spry构件271

11.3.2插入spry菜单271

11.3.3插入spry选项卡式面板273

11.3.4插入spry折叠式构件275

11.3.5插入spry可折叠面板276

11.4应用实例——在网页中应用spry构件278

11.4.1设计分析279

11.4.2制作步骤279

11.4.3案例总结287

11.5举一反三——制作婚纱摄影网站287

11.5.1案例分析288

11.5.2视频操作288

第12章css与xml的综合应用289

12.1xml基础290

12.1.1xml的特点290

12.1.2xml与html291

12.1.3xml基本语法293

12.1.4格式正确的xml文档296

12.2xml与css的链接297

12.2.1使用xml:stylesheet指令297

12.2.2使用@import指令299

12.3xml与css的应用299

12.3.1显示学生信息299

12.3.2实现隔行变色的表格302

12.4应用实例——在html页面中调用xml数据305

12.4.1设计分析306

12.4.2制作步骤306

12.4.3案例总结311

12.5举一反三——制作企业网站311

12.5.1案例分析312

12.5.2视频操作313

第13章css与ajax的综合应用315

13.1了解ajax316

13.1.1ajax简介316

13.1.2ajax的关键元素317

13.1.3ajax的优势318

13.1.4实现ajax的步骤318

13.1.5使用css的必要性319

13.2ajax基础320

13.2.1创建xml5.0简介323

13.3.1html5.0标签323

13.3.2html5.0事件属性327

13.3.3html5.0标准属性329

13.4应用实例——使用ajax实现页面特效330

13.4.1设计分析330

13.4.2制作步骤330

13.4.3案例总结338

13.5举一反三——通过ajax实现可拖动div块339

13.5.1案例分析339

13.5.2视频操作340

第14章儿童教育类网站341

14.1综合实例——制作儿童教育类网站342

14.1.1设计分析342

14.1.2制作步骤342

14.1.3案例总结353

第15章医疗保健类网站设计355

15.1综合实例——制作医疗保健类网站356

15.1.1设计分析356

15.1.2制作步骤356

15.1.3案例总结366

第16章游戏类网站设计367

16.1综合实例——制作游戏类网站368

16.1.1设计分析368

16.1.2制作步骤368

16.1.3案例总结378

文章分享结束，html css网页布局实例和html网页布局模板的答案你都知道了吗？欢迎再次光临本站哦！

ai创作文档平台 ai创作平台有哪些清明节王者荣耀可以玩几个小时(王者荣耀在节假日可以玩几个小时)