html css实例(htmlcss静态页面及代码)

编程之家2026-05-21641次浏览

大家好，html css实例相信很多的网友都不是很明白，包括htmlcss静态页面及代码也是一样，不过没有关系，接下来就来为大家分享关于html css实例和htmlcss静态页面及代码的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！

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覆盖的宽度。

</p>

<p class="right">-margin必须大于或等于自身的宽度才会上移</p>

</p>

</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>

<p class="left">左边固定宽度，右边自适应</p>

</p>

</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>

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

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

</p>

</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 id="head">左右固定宽度并且向两边浮动，中间的p设置两边的margin</p>

<p class="main">该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了</p>

</p>

</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>

<p class="left">flex语法我参照了阮一峰关于flex语法介绍 ;

</p>

</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 class="dialog-content">是否删除该项,点击确定</p>

</p>

</p>

<p id="add-butto

html中使用css的方法有哪几种

1.内联方式（行内样式）

就是在HTML的标签中使用style属性来设置css样式

格式：<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

<p style="color:orange;font-size:18px">在HTML中如何使用css样式</p>

特点：仅作用于本标签。

2.内部方式（内嵌样式）

就是在head标签中使用标签来设置css样式

格式：<style type="text/css">....css样式代码</style>

特点：作用于当前整个页面

3.外部导入方式（外部链入）

3.1（推荐）就是在head标签中使用标签导入一个css文件，在作用于本页面，实现css样式设置

格式：<link rel="external nofollow" href="文件名.css" type="text/css" rel="stylesheet"/>

3.2还可以使用import在style标签中导入css文件。

如：<style type="text/css">@import"style.css";</style>

特点：作用于整个网站

他们的优先级：当样式冲突时，就是采用就近原则，是值css属性离被修饰的内容最近的为主。

若没有样式冲突则采用叠加效果。

在html中怎样使用css样式

在html网页中引入引入css主要有以下四种方式：

（1）行内式

<p style=”color:red”>网页中css的导入方式</p>

（2）嵌入式

P{ color:red}

</style>

嵌入式一般写在head中，对于单个页面来说，这种方式很方便。

（3）导入式

@import"jisuan.css";

</style>

（4）链接式

导入式和链接式差不多，都是从外部引入css文件。但是链接式对于客户端用户浏览网站时，效果会好些。

OK，关于html css实例和htmlcss静态页面及代码的内容到此结束了，希望对大家有所帮助。

免费做网站网站的软件？怎样建立网站免费的java实现组合，java组合和继承