html+css实例 html+css

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

大家好，感谢邀请，今天来为大家分享一下html+css实例的问题，以及和html+css的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

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

Web前端工程师要了解的html+css基础知识

今天小编要跟大家分析的文章是关于Web前端工程师要了解的html+css基础知识。正在从事Web前端工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对正在从事Web前端工作和学习的小伙伴们有所帮助。

一、什么是HTML？

HTML即超文本标记语言(HyperTextMarkupLanguage)，是用来描述网页的一种语言。

超文本标记语言的结构包括"头"部分（外语：Head）、和"主体"部分（外语：Body），其中"头"部提供关于网页的信息，"主体"部分提供网页的具体内容。

标记语言是一套标记标签(markuptag)

HTML使用标记标签来描述网页

如下代码：

MyFirstHeading

Myfirstparagraph.

例子解释:

与之间的文本描述网页

与之间的文本是可见的页面内容

与之间的文本被显示为标题

与

之间的文本被显示为段落

二、HTML元素

HTML文档是由HTML元素定义的。

HTML元素指的是从开始标签（starttag）到结束标签（end

tag）的所有代码。

td{border:1pxsolid#ccc;padding:5px;margin:auto;}

td>p{text-align:left;}

td>pspan{text-align:center;display:block;}

开始标签

元素内容

结束标签

Thisisaparagraph

rel="external nofollow" href="default.htm">

Thisisalink

注释：开始标签常被称为开放标签（openingtag），结束标签常称为闭合标签（closingtag），大多数HTML元素可拥有属性。

空的HTML元素：

没有内容的HTML元素被称为空元素。在XHTML、XML以及未来版本的HTML中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如:

就是没有关闭标签的空元素,而

是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。

即使

在所有浏览器中都是有效的，但使用

其实是更长远的保障。

HTML提示：使用小写标签

HTML标签对大小写不敏感：等同于。许多网站都使用大写的HTML标签。

W3School使用的是小写标签，因为万维网联盟（W3C）在HTML4中推荐使用小写，而在未来(X)HTML版本中强制使用小写。

三、HTML属性

HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在HTML元素的开始标签中规定。

属性实例:

HTML链接由标签定义。链接的地址在href属性中指定：

Thisisa

link

注释：属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill"HelloWorld"Gates'。

HTML提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。

而新版本的(X)HTML要求使用小写属性。

一些常见HTML属性:

td{border:1pxsolid#ccc;padding:5px;margin:auto;}

td>p{text-align:left;}

td>pspan{text-align:center;display:block;}

属性

值

描述

class

classname

规定元素的类名（classname）

规定元素的唯一id

style

style_definition

规定元素的行内样式（inline

style）

title

text

规定元素的额外信息（可在工具提示中显示）

四、HTML编辑器

使用Notepad或TextEdit来编写HTML

可以使用专业的HTML编辑器来编辑HTML：

AdobeDreamweaver

MicrosoftExpressionWeb

CoffeeCupHTMLEditor

五、HTML标题

标题（Heading）是通过-等标签进行定义的。

Thisisaheading定义最大的标题。

Thisisaheading定义最小的标题。

注释：浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

以上就是小编今天为大家分享的关于Web前端工程师要了解的html+css基础知识的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。

在html中怎样使用css样式

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

（1）行内式

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

（2）嵌入式

P{ color:red}

</style>

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

（3）导入式

@import"jisuan.css";

</style>

（4）链接式

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

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

阡陌客声望，阡陌客声望军需官ai绘画生成器破解版大全破解版AI画画生成器大全