css网页，html+css

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

大家好，今天来为大家分享css网页的一些知识点，和html+css的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！

在网页中使用css的几种方式

（1）使用Embed（嵌入样式单）排版样式：

即将CSS代码直接插入每个页面的HTML的<head>区，就象上一节看到的。使用<style>...</style>标签。例如：

<!--

h2{ font-family:"宋体"; font-size: 12pt; font-style: italic; color:#FF0033; background-color:#FFCCCC}

h1{ font-family:"Arial"; font-size: 12pt; color:#66FF66}

-->

</style>

（2）使用“link（外部样式单）排版样式”：

即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件（一个扩展名是css的文本文件）将设定你所有网页的规则。如果你改变样式单文件中的某行，所有页面风格用这个css文件定义的页面都会随之改变。如果你的站点文件非常多，则这项功能就非常方便了。

在<HEAD>区内使用<LINK>标签（注意：不再是<style>标签了）：

<HTML>

<HEAD>

</HEAD>

<body>

<h2>你好！朋友，欢迎光临Java2000的教学区。</h2>

<h1>Hello，everybody，welcome in java2000!</h1>

</body>

</html>

★☆★说明：css文件的路径用绝对路径http：//...)表示或者用相对路径(例如：../csscode/my.css)表示都可以。

然后再单独生成一个css文件，叫做my.css(随便起名)。文件内容如下：

h2{ font-family:"宋体"; font-size: 12pt; font-style: italic; color:#FF0033; background-color:#FFCCCC}

h1{ font-family:"Arial"; font-size: 12pt; color:#66FF66}

只要将这个CSS文件上传到服务器指定的目录即可。

（3）使用"inline（行内样式单）排版样式"：

inline样式单采用HTML标签的“style”属性，它的特点是“定义某一个标签的式样单风格”，只对所定义的标签起作用，并非对整个页面起作用。例如：

<p style="font-size: 14pt; color:#99ff99; font-family:宋体">层叠式样单</p>

看到的效果：

层叠式样单

使用行内样式单，你必须为每行指定样式规则，否则下一行时浏览器将使用页面的缺省设置。但是：有时候这种方式却非常有效。

（4）使用“import(输入的外部式样单)”--适用于IE浏览器。

<html>

<head>

<!--

@import url(my.css);

-->

</style>

</head>

<body>

<h3>输入的外部式样单</h3>

</body>

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

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

网页设计CSS解释

光说解释，但不知道解释哪些部分？我就将我觉得该解释的说说吧。

以"#"开头的成为id选择器，在程序中用id="id名称"调用；以"."开头的成为类别选择器，在程序中使用class="类别名称"调用；二者实现效果一样，只是在不同情况下按需选择。此外还有标记选择器和行内样式两种css样式。

常用选项解释：padding表示内边距；margin表示外边距；float表示浮动属性（设置该属性后可实现图文混排）；background-image表示背景图片；background-repeat表示是否允许背景重复；border表示边框；text-align表示文本水平居中显示。

padding:10px 0px 0px 0px;从上开始表示顺时针内边距分别为10px，0px，0px，0px。margin和border的用法与padding类似，可以类推；

border-bottom:1px solid#CAEFC4表示下边框为1px实线颜色为#CAEFC4。其他各边以此类推。

差不多了吧，呵呵，祝你好运！

OK，本文到此结束，希望对大家有所帮助。

办公软件excel发音？三大办公软件怎么读js高级教程(js高级有哪些)